/* ============================================================================
   MGIoT 2028 — Component additions layered on top of mgiot-tokens-2028.css.
   Fills gaps the existing .mg-btn/.mg-input/.modal-* system didn't cover,
   used to replace ad-hoc inline styles (Quote modal, Expense modal, etc.)
   with token-driven, dark-mode-aware classes.
   ========================================================================== */

/* ---- Modal size / brand-header variants -------------------------------- */
.modal-card--lg{ max-width:700px; border-radius:var(--mg-radius-lg); overflow:hidden; }
.modal-hd--brand{
  background:var(--mg-grad-brand);
  padding:20px 24px; display:flex; align-items:center; gap:12px;
}
.modal-hd--brand .modal-hd-icon{ font-size:22px; }
.modal-hd--brand .modal-hd-title{ color:#fff; margin:0; font-size:17px; flex:1; }
.modal-x--on-brand{
  background:rgba(255,255,255,.15); border:none; color:#fff; border-radius:50%;
  width:34px; height:34px; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t-fast);
}
.modal-x--on-brand:hover{ background:rgba(255,255,255,.3); }
.modal-body--lg{ padding:20px 24px; max-height:80vh; overflow-y:auto; }

/* ---- Buttons: size / width modifiers ------------------------------------ */
.mg-btn--lg{ padding:13px; font-size:15px; font-weight:700; border-radius:var(--mg-radius-md); letter-spacing:.3px; }
.mg-btn--block{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; }

/* ---- Quote / form layout helpers ---------------------------------------- */
.quote-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.quote-field-col{ display:flex; flex-direction:column; gap:5px; }
.quote-field-col > .quote-label{ margin-bottom:0; }
.quote-search-wrap{ position:relative; }
.quote-search-ic{ position:absolute; inset-inline-end:11px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.45; font-size:14px; }
.quote-cust-results{
  display:none; position:absolute; inset-inline:0; top:100%; margin-top:4px;
  background:var(--mg-surface); border:1.5px solid var(--mg-border); border-radius:var(--mg-radius-md);
  max-height:220px; overflow-y:auto; z-index:60; box-shadow:var(--mg-shadow-md);
}
.quote-cust-opt:hover{ background:var(--mg-brand-50); }

.quote-items-panel{ background:var(--mg-surface-soft); border:1.5px solid var(--mg-border-soft); border-radius:var(--mg-radius-md); padding:14px; margin-bottom:14px; }
.quote-items-hdr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.quote-items-title{ font-size:13px; font-weight:700; color:var(--mg-text-mid); }
.quote-items-actions{ display:flex; gap:8px; }

.quote-summary-box{ background:var(--mg-brand-50); border:1.5px solid var(--mg-brand-100); border-radius:var(--mg-radius-md); padding:16px 20px; margin-bottom:14px; }
.quote-summary-row{ display:flex; justify-content:space-between; margin-bottom:6px; font-size:13px; color:var(--mg-text-soft); }
.quote-summary-row--discount{ margin-bottom:10px; color:var(--mg-warn-text); }
.quote-summary-row--grand{ padding-top:10px; border-top:2px solid var(--mg-brand-100); font-size:18px; font-weight:900; color:var(--mg-text-mid); margin-bottom:0; }
.quote-summary-val{ font-weight:600; }
.quote-input--otp{ text-align:center; direction:ltr; letter-spacing:6px; font-size:18px; }

/* ============================================================================
   MGIoT 2028 — Core shared component library (Phase B).
   Premium, token-driven, RTL/LTR-safe restyle of the primitives used across
   all 35 views (.mg-btn/.btn, .mg-badge, .mg-input/.mg-field, .mg-table,
   .mg-toolbar/.mg-search, .mg-empty, .mg-card, .mg-stat). Loads last.
   `!important` is used ONLY where legacy sheets force button-variant / table
   row-hover values; it is transitional and can be dropped once the legacy
   component sheets (design/redesign-2027/redesign-system) are retired.
   ========================================================================== */

/* ---------- Buttons ------------------------------------------------------- */
.mg-btn, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:10px !important;
  font-size:13.5px; font-weight:700; line-height:1; white-space:nowrap;
  cursor:pointer; border:1px solid var(--mg-border-strong);
  background:var(--mg-surface); color:var(--mg-text-mid);
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.mg-btn:hover, .btn:hover{ border-color:var(--mg-brand); color:var(--mg-brand); }
.mg-btn:active, .btn:active{ transform:translateY(1px); }
.mg-btn:focus-visible, .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--mg-ring-soft); }
.mg-btn--primary, .btn-primary{
  border:0 !important; color:#fff !important;
  background:var(--mg-grad-brand) !important; box-shadow:var(--shadow-primary);
}
.mg-btn--primary:hover, .btn-primary:hover{ color:#fff !important; filter:brightness(1.04); transform:translateY(-1px); }
.mg-btn--danger, .btn-danger{
  border:0 !important; color:#fff !important; background:var(--mg-danger-strip,#DC2626) !important;
}
.mg-btn--secondary, .btn-secondary{ background:var(--mg-surface) !important; color:var(--mg-text-mid) !important; border:1px solid var(--mg-border-strong) !important; }
.mg-btn--secondary:hover, .btn-secondary:hover{ color:var(--mg-brand) !important; border-color:var(--mg-brand) !important; }
.mg-btn--sm, .btn-sm{ height:32px; padding:0 12px; font-size:12.5px; border-radius:8px !important; }
.mg-btn--lg{ height:48px; padding:0 20px; font-size:15px; border-radius:12px !important; }
.mg-btn:disabled, .btn:disabled, .mg-btn[disabled], .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- Badges / pills ------------------------------------------------ */
.mg-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:var(--mg-radius-pill);
  font-size:12px; font-weight:700; line-height:1.4; white-space:nowrap;
  background:var(--mg-neutral-bg); color:var(--mg-text-soft);
}
.mg-badge--success{ background:var(--mg-success-bg) !important; color:var(--mg-success-text) !important; }
.mg-badge--warn{ background:var(--mg-warn-bg,#FFF7ED) !important; color:var(--mg-warn-text,#B45309) !important; }
.mg-badge--danger{ background:var(--mg-danger-bg) !important; color:var(--mg-danger-text) !important; }
.mg-badge--info{ background:var(--mg-brand-50) !important; color:var(--mg-brand) !important; }
/* Salary ("راتب") — a distinct violet, deliberately unlike the amber/blue/green
   used by every other expense type so payroll reads at a glance. */
.mg-badge--salary{ background:#F3F0FB !important; color:#6D28D9 !important; }
.mg-stat--salary .mg-stat-ic{ background:#F3F0FB; color:#6D28D9; }
.mg-stat--salary .mg-stat-value{ color:#6D28D9; }

/* Expense breakdown by type — CSS-only horizontal bars, on brand tokens. */
.exp-dist-card{ margin-bottom:16px; }
.exp-dist-title{ font-weight:800; color:var(--mg-text-mid,#374151); margin-bottom:14px; font-size:15px; }
.exp-dist-row{ margin-bottom:12px; }
.exp-dist-row:last-child{ margin-bottom:0; }
.exp-dist-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:5px; }
.exp-dist-name{ font-size:13px; font-weight:600; color:var(--mg-text-mid,#374151); }
.exp-dist-val{ font-size:12px; font-weight:700; color:var(--mg-text-soft,#6B7280); font-variant-numeric:tabular-nums; white-space:nowrap; }
.exp-dist-track{ height:9px; border-radius:999px; background:var(--mg-brand-50,#EFF3F9); overflow:hidden; }
.exp-dist-fill{ display:block; height:100%; border-radius:999px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.exp-dist-row--salary .exp-dist-name{ color:#6D28D9; font-weight:800; }
@media (prefers-reduced-motion: reduce){ .exp-dist-fill{ transition:none; } }

/* Purchases ("مشتريات") — a distinct teal, separate from salary violet / general amber. */
.mg-badge--purchase{ background:#E6F7F4 !important; color:#0F766E !important; }
.exp-dist-row--purchase .exp-dist-name{ color:#0F766E; font-weight:800; }
.mg-stat--purchase .mg-stat-ic{ background:#E6F7F4; color:#0F766E; }
.mg-stat--purchase .mg-stat-value{ color:#0F766E; }

/* Overview "financial glance" rows: the label must shrink and the number must
   never wrap, otherwise a long balance (e.g. ١,٣٦٦,٦٦٠) collides with its label. */
#viewOverview .ov2-finrow-k{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
#viewOverview .ov2-finrow b{ flex:0 0 auto; white-space:nowrap; }

/* Donut legend rows (محصّل / المستحق): the legend column is too narrow to fit a
   full name AND a long value on one line, so stack them — dot+name on the first
   line, the value on its own full-width line. Name shows in full (no truncation). */
#viewOverview .ov-donut-item{ flex-wrap:wrap; column-gap:8px; row-gap:2px; align-items:center; }
#viewOverview .ov-donut-item .nm{ flex:0 1 auto; min-width:0; overflow:visible; text-overflow:clip; white-space:nowrap; }
#viewOverview .ov-donut-item .vl{ flex:1 0 100%; white-space:nowrap; font-size:12px; padding-inline-start:18px; }

/* Activated devices/SIMs: keep the device model on one line (long Arabic models
   like "جهاز تتبع جيل رابع C02G" were wrapping word-by-word into a tall stack),
   and let just these wide tables scroll horizontally — the redesign layer forces
   overflow:hidden on .mg-table-wrap, which blocked scrolling and caused the wrap. */
.mg-cell-model{ white-space:nowrap; }
.app-page .main .mg-table-wrap.act-scroll{ overflow-x:auto; }

/* Hader hero logo — size restored here after mgiot-commercial-hader.css was removed
   in the Phase B teardown (it held the original 72px constraint). Without a size the
   raw PNG renders at natural size and floods the whole page. !important guarantees it
   can't regress regardless of load order. */
.hader-hero-brand{ display:flex; align-items:center; gap:14px; }
.hader-hero-logo{
  width:64px !important; height:64px !important; min-width:64px;
  object-fit:contain !important; background:#fff; border-radius:16px;
  padding:7px; box-shadow:0 12px 28px rgba(6,114,54,.13); flex:0 0 auto;
}
@media (max-width:700px){ .hader-hero-logo{ width:52px !important; height:52px !important; min-width:52px; border-radius:14px; } }

/* ---------- Form controls ------------------------------------------------- */
.mg-input, .mg-select, .mg-search-input, .mg-field input, .mg-field select, .mg-field textarea{
  width:100%; min-height:42px; padding:10px 13px; border-radius:10px;
  border:1px solid var(--mg-border-strong); background:var(--mg-surface);
  color:var(--mg-text); font-size:14px; font-family:inherit;
  transition:border-color var(--t), box-shadow var(--t);
}
.mg-input:focus, .mg-select:focus, .mg-search-input:focus,
.mg-field input:focus, .mg-field select:focus, .mg-field textarea:focus{
  outline:none; border-color:var(--mg-brand); box-shadow:0 0 0 3px var(--mg-ring-soft);
}
.mg-input::placeholder, .mg-search-input::placeholder{ color:var(--mg-text-faint); }
.mg-field-label, .modal-lbl{ display:block; font-size:13px; font-weight:700; color:var(--mg-text-soft); margin-bottom:6px; }
.mg-field-required::after, .mg-field-label.mg-field-required::after{ content:" *"; color:var(--mg-danger-strip,#DC2626); }
.mg-field{ margin-bottom:14px; }

/* ---------- Toolbar / search --------------------------------------------- */
.mg-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.mg-search{ position:relative; flex:1; min-width:200px; }
.mg-search-icon{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.5; display:inline-flex; }
.mg-search .mg-search-input{ padding-inline-start:38px; }

/* ---------- Tables -------------------------------------------------------- */
.mg-table-wrap{ overflow-x:auto; border:1px solid var(--mg-border); border-radius:var(--mg-radius-lg); background:var(--mg-surface); }
.mg-table{ width:100%; border-collapse:separate !important; border-spacing:0 !important; font-size:13.5px; }
.mg-table thead th{
  text-align:inherit; padding:13px 16px !important; font-size:12px; font-weight:800;
  color:var(--mg-text-muted); text-transform:none; white-space:nowrap;
  background:var(--mg-surface-soft); border-bottom:1px solid var(--mg-border) !important;
}
.mg-table tbody td{ padding:13px 16px !important; color:var(--mg-text-mid); border-bottom:1px solid var(--mg-border-soft) !important; vertical-align:middle; }
.mg-table tbody tr:last-child td{ border-bottom:0 !important; }
.mg-table tbody tr{ transition:background var(--t); }
.mg-table tbody tr:hover td{ background:var(--mg-surface-row) !important; }
.mg-cell-strong{ font-weight:700; color:var(--mg-text-strong); }
.mg-cell-mid{ color:var(--mg-text-soft); }
.mg-cell-mono{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; unicode-bidi:plaintext; }

/* ---------- Empty & loading states --------------------------------------- */
.mg-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:48px 24px; color:var(--mg-text-muted); }
.mg-empty-icon{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--mg-neutral-bg); color:var(--mg-text-faint); margin-bottom:4px; }
.mg-empty-icon svg{ width:26px; height:26px; }
.mg-empty-title{ font-size:15px; font-weight:800; color:var(--mg-text-soft); }
.mg-empty-text{ font-size:13px; color:var(--mg-text-muted); max-width:360px; }
.mg-loading{ padding:40px; text-align:center; color:var(--mg-text-muted); font-size:14px; }
.mg-error{ padding:16px; text-align:center; color:var(--mg-danger-text); font-size:14px; }

/* ---------- Card ---------------------------------------------------------- */
.mg-card{ background:var(--mg-surface); border:1px solid var(--mg-border); border-radius:var(--mg-radius-lg); box-shadow:var(--mg-shadow-sm); padding:20px; }

/* ---------- Stat cards (.mg-stat) — used across ~20 pages ------------------ */
.mg-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:16px; }
.mg-stat{
  position:relative; display:flex; flex-direction:column; gap:8px; padding:18px;
  background:var(--mg-surface); border:1px solid var(--mg-border);
  border-radius:var(--mg-radius-lg); box-shadow:var(--mg-shadow-sm);
}
.mg-stat-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--mg-neutral-bg); color:var(--mg-text-muted); }
.mg-stat-ic svg{ width:21px !important; height:21px !important; }
.mg-stat--success .mg-stat-ic{ background:var(--mg-success-bg); color:var(--mg-success-text); }
.mg-stat--info .mg-stat-ic{ background:var(--mg-brand-50); color:var(--mg-brand); }
.mg-stat--warn .mg-stat-ic{ background:var(--mg-warn-bg,#FFFBEB); color:var(--mg-warn-strip,#D97706); }
.mg-stat--danger .mg-stat-ic{ background:var(--mg-danger-bg); color:var(--mg-danger-text); }
.mg-stat-value{ font-size:26px; font-weight:800; color:var(--mg-text-strong); line-height:1; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; unicode-bidi:plaintext; }
.mg-stat-label{ font-size:12.5px; font-weight:600; color:var(--mg-text-soft); }
.mg-stat-sub{ font-size:12px; color:var(--mg-text-faint); }
/* Info box (paired value/label blocks used in detail panels) */
.mg-info-box{ background:var(--mg-surface-soft); border:1px solid var(--mg-border-soft); border-radius:var(--mg-radius-md); padding:14px 16px; }
.mg-info-value{ font-size:16px; font-weight:800; color:var(--mg-text-strong); unicode-bidi:plaintext; }
.mg-info-label{ font-size:12px; color:var(--mg-text-muted); font-weight:600; }

/* Note: .mg-stat cards keep redesign-2027's existing accent + hover treatment
   (it controls their position context, so a clean-layer override doesn't win
   without a full markup rebuild). The base .mg-stat styling above (icon chip,
   value, label) is authoritative; decoration is left to the page layer. */

/* ---------- Phase C: clickable record-card hover polish -------------------
   The repeated content cards (installations .ix-card, activations/customers/
   sims .mg-row-card) had no hover state. A subtle lift + deeper shadow gives
   them a premium, interactive feel across every list page. Transform-on-card
   is reliable (unlike a ::before that fights redesign-2027's position ctx). */
.app-page .main .ix-card,
.app-page .main .mg-row-card{
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.app-page .main .ix-card:hover,
.app-page .main .mg-row-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--mg-shadow-md);
  border-color:color-mix(in srgb, var(--mg-brand) 32%, var(--mg-border));
}
@media (prefers-reduced-motion: reduce){
  .app-page .main .ix-card:hover,
  .app-page .main .mg-row-card:hover{ transform:none; }
}

/* ----------------------------------------------------------------------
   Grouped statistics.

   A page that breaks the same records down two ways — by status and by
   work type — shows each breakdown as its own row under its own heading.
   Flat, the two read as one list, and the count never divides evenly onto
   the grid. Each row is auto-fit like .mg-stat-grid, so three cards sit
   evenly on a desktop and stack on a phone.
   ---------------------------------------------------------------------- */
.mg-stat-group{
  margin: 4px 0 8px;
  font-size: var(--mg-font-sm);
  font-weight: 800;
  color: var(--mg-text-muted);
  letter-spacing: .2px;
}
.mg-stat-group + .mg-stat-row{ margin-bottom: 16px; }
.mg-stat-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
/* The container no longer lays the cards out itself — the rows inside do.
   !important because mgiot-pro.css sets display:grid!important on every
   .mg-stat-grid, and that file is still what holds the current design up. */
.mg-stat-grid--grouped{ display: block !important; }