/* ============================================================
   APP — base, layout, components
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` has to actually hide. The UA rule is only `display: none`,
   which any component rule setting a display outranks — .btn is
   `inline-flex`, so a `<button class="btn" hidden>` stayed on screen and
   every JS `el.hidden = true` on one silently did nothing. This is why
   .modal[hidden], .corporate-hint[hidden] and friends below each had to
   re-state it; they can stay, but nothing new needs to. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  background: var(--color-app-bg);
  color: var(--color-charcoal);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0; color: var(--color-ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.num, .ltr-num { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* The inline-block above is what keeps a run of digits from being reordered
   by the surrounding RTL text — but on a <td> it drops the cell out of the
   table's column layout, and the body row then stops short of the header
   row it is supposed to line up under. The isolation is what these cells
   want; the display change is not. */
td.num, th.num, td.ltr-num, th.ltr-num { display: table-cell; }

/* =========================================================
   Custom scrollbars — themed, slim, never reserve gutter
   ========================================================= */
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(110, 110, 105, 0.35) transparent; }

/* WebKit / Blink */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: rgba(110, 110, 105, 0.35);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 999px;
  min-height: 32px;
  min-width: 32px;
}
::-webkit-scrollbar-thumb:hover  { background-color: rgba(55, 53, 47, 0.55); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background-color: var(--color-primary); background-clip: padding-box; }

/* Dark theme: lighter thumb on dark surface */
:root[data-theme="dark"] { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb       { background-color: rgba(255, 255, 255, 0.2); background-clip: padding-box; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.35); background-clip: padding-box; }

/* =========================================================
   App shell
   ========================================================= */
.app-shell  { display: flex; height: 100vh; overflow: hidden; }
.app-main   { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--color-app-bg); }
.app-content{ flex: 1; overflow: auto; padding: 28px 32px; display: flex; flex-direction: column; }
/* The page grows to fill the scroll area so the footer sits at the bottom
   of a short page and after the last panel of a long one. */
.app-page   { flex: 1 0 auto; min-width: 0; }

/* =========================================================
   Footer — an outlined strip carrying only the console name and version.
   ========================================================= */
.app-footer {
  margin-top: 32px;
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: flex-start;
  border: 1px solid var(--color-app-border);
  border-radius: 12px;
  background: transparent;
}
.app-footer-version {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--color-steel);
  white-space: nowrap;
}
.app-footer-name { font-weight: 600; color: var(--color-slate); letter-spacing: .2px; }
.app-footer-sep { width: 1px; height: 12px; background: var(--color-app-border); }
.app-footer-ver { font-weight: 500; }
.app-footer-ver .num { font-variant-numeric: tabular-nums; color: var(--color-slate); font-weight: 600; }
.app-footer-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}


/* =========================================================
   Sidebar
   ========================================================= */
.side {
  width: 248px; flex-shrink: 0;
  background: var(--color-app-panel);
  display: flex; flex-direction: column;
  transition: width 200ms ease-out;
}
[dir="rtl"] .side { border-left:  1px solid var(--color-app-border); }
[dir="ltr"] .side { border-right: 1px solid var(--color-app-border); }

.side .brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  height: var(--nav-height);
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-app-border);
  color: var(--color-ink);
  text-decoration: none;
}
/* Same mark as the footer's: deep-to-brand gradient, rounded square. */
.side .brand-logo {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: linear-gradient(160deg, var(--color-primary-deep), var(--color-primary));
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 17px;
}
.side .brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.side .brand-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  color: var(--color-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side .brand-sub { font-size: 11.5px; color: var(--color-stone); font-weight: 500; }

.side-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 20px 6px;
  font-size: 11px; letter-spacing: 0.4px;
  color: var(--color-steel); font-weight: 700;
}
/* A hairline trailing the label, so each group reads as its own block. */
.side-section-head::after {
  content: ""; flex: 1; height: 1px; background: var(--color-app-border);
}
.side-list { padding: 4px 0 16px; flex: 1; min-height: 0; overflow-y: auto; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; margin: 2px 10px;
  border-radius: 12px;
  font-size: 14px; font-weight: 500;
  color: var(--color-charcoal);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.nav-chip {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-slate);
  transition: background-color .15s ease, color .15s ease;
}
.nav-item .nav-icon { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item:hover { background: var(--color-app-hover); color: var(--color-ink); }
.nav-item:hover .nav-chip { color: var(--color-primary); }
.nav-item.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}
.nav-item.active .nav-chip {
  background: linear-gradient(160deg, var(--color-primary-deep), var(--color-primary));
  color: #fff;
  box-shadow: 0 3px 8px rgba(13, 148, 136, 0.25);
}
/* Accent bar on the inline-start edge of the active item. */
.nav-item.active::before {
  content: ""; position: absolute;
  inset-inline-start: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
}
[dir="rtl"] .nav-item.active::before { border-radius: 3px 0 0 3px; }
.nav-item .nav-badge {
  margin-inline-start: auto;
  background: var(--color-primary); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: var(--radius-sm);
}

/* Stacked radio option rows (e.g. export report-type chooser) */
.radio-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-app-border); border-radius: 8px;
  font-size: 14px; font-weight: 400; cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.radio-row:hover { background: var(--color-app-hover); }
.radio-row:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
/* Override the full-width .fld input rule for the inline radio control. */
.fld .radio-row input[type="radio"] {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  margin: 0; padding: 0;
  accent-color: var(--color-primary);
}
.radio-row > span { flex: 1 1 auto; line-height: 1.4; }

/* Progress bar (bulk update-all) */
.progress {
  height: 8px; width: 100%;
  background: var(--color-app-border);
  border-radius: 9999px; overflow: hidden;
}
.progress-fill {
  display: block; height: 100%; width: 0;
  background: var(--color-primary);
  border-radius: 9999px;
  transition: width 280ms ease;
}
.progress-fill.is-error { background: var(--color-error); }

/* Subscriber-summary modal — animated totals tiles */
.sum-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 640px) { .sum-grid { grid-template-columns: repeat(2, 1fr); } }
.sum-tile {
  border: 1px solid var(--color-app-border);
  border-radius: 12px; padding: 12px 14px;
  background: var(--color-app-bg);
  animation: sum-pop .35s ease both;
}
.sum-tile-primary { border-color: var(--color-primary); background: var(--color-card-tint-mint, var(--color-app-bg)); }
.sum-tile .sum-label { display: block; font-size: 11px; color: var(--color-stone); }
.sum-tile .sum-value { display: block; font-size: 18px; font-weight: 800; margin-top: 2px; }
.sum-grid .sum-tile:nth-child(2) { animation-delay: .05s; }
.sum-grid .sum-tile:nth-child(3) { animation-delay: .10s; }
.sum-grid .sum-tile:nth-child(4) { animation-delay: .15s; }
.sum-grid .sum-tile:nth-child(5) { animation-delay: .20s; }
.sum-grid .sum-tile:nth-child(6) { animation-delay: .25s; }
@keyframes sum-pop {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bulk-results { max-height: 46vh; overflow: auto; }
.bulk-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-top: 1px solid var(--color-app-border);
  font-size: 13px;
}
.bulk-row .bulk-name { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.bulk-row .bulk-log {
  flex: 2 1 0; min-width: 0; color: var(--color-stone); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr;
}


/* =========================================================
   Topbar
   ========================================================= */
.topbar {
  height: 64px; flex-shrink: 0;
  background: var(--color-app-panel);
  border-bottom: 1px solid var(--color-app-border);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
}
.topbar h1 {
  font-size: 18px; font-weight: 700; color: var(--color-ink);
  font-family: var(--font-heading);
}
.topbar .topbar-user { display: flex; align-items: center; gap: 10px; }
.topbar .topbar-user-trigger {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer; padding: 2px;
  color: inherit; font: inherit; border-radius: 8px;
}
.topbar .topbar-user-trigger:hover { background: var(--color-app-hover); }
.topbar .topbar-user-caret { color: var(--color-stone); flex-shrink: 0; }
.topbar .topbar-user-text { display: flex; flex-direction: column; line-height: 1.1; align-items: flex-start; }
.topbar .topbar-user-text .name { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.topbar .topbar-user-text .role { font-size: 12px; color: var(--color-stone); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500; line-height: 1.3;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover  { background: var(--color-primary-pressed); }
.btn-primary:active { background: var(--color-primary-pressed); }
.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-app-border);
}
.btn-secondary:hover { background: var(--color-app-hover); }
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.btn-ghost:hover { background: var(--color-app-hover); }
.btn-danger {
  background: var(--color-error);
  color: #fff;
}
.btn-danger:hover  { filter: brightness(0.95); }
.btn-danger:active { filter: brightness(0.9); }
.btn-warning {
  background: var(--color-status-pending-bg);
  color: var(--color-status-pending-fg);
  border-color: rgba(217, 119, 6, 0.35);
}
.btn-warning:hover  { background: rgba(252, 211, 77, 0.45); }
.btn-warning:active { background: rgba(252, 211, 77, 0.6); }
.btn-link {
  background: transparent;
  color: var(--color-link-blue);
  font-size: 13px;
  padding: 0;
  border: none;
}
.btn-icon {
  width: 36px; height: 36px; padding: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--color-slate);
  cursor: pointer; transition: background 120ms;
}
.btn-icon:hover { background: var(--color-app-hover); color: var(--color-ink); }
.btn-block { width: 100%; }

/* =========================================================
   Panels / cards
   ========================================================= */
.panel {
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 12px;
}
.panel-pad    { padding: 20px; }
.panel-pad-lg { padding: 28px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-app-border);
}
.panel-head h2, .panel-head h3 {
  font-size: 15px; font-weight: 700; color: var(--color-ink);
}

/* =========================================================
   KPI cards (small, top row on dashboard — 4 across)
   ========================================================= */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kpi {
  position: relative;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.kpi::before {
  /* Coloured accent strip at the top — set per-accent below. */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: currentColor; opacity: 0.85;
  color: var(--color-stone);
}
.kpi-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.kpi-label { font-size: 13px; color: var(--color-slate); font-weight: 500; }
.kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--color-app-bg);
  color: var(--color-stone);
  flex-shrink: 0;
}
.kpi-icon i, .kpi-icon svg { width: 18px; height: 18px; }
.kpi-value { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--color-ink); letter-spacing: -0.5px; line-height: 1.15; }
.kpi-delta { font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.kpi-delta.up   { color: #16A34A; }
.kpi-delta.down { color: #DC2626; }
.kpi-delta .text-stone { color: var(--color-stone); font-weight: 400; }

/* Per-card accent — drives both the top strip and the icon tint. */
.kpi-accent-teal   { color: #0D9488; }
.kpi-accent-teal   .kpi-icon { background: rgba(13, 148, 136, 0.12); color: #0D9488; }
.kpi-accent-amber  { color: #E59947; }
.kpi-accent-amber  .kpi-icon { background: rgba(229, 153, 71, 0.14); color: #B25E1A; }
.kpi-accent-violet { color: #6649EB; }
.kpi-accent-violet .kpi-icon { background: rgba(102, 73, 235, 0.12); color: #6649EB; }
.kpi-accent-rose   { color: #D44C7A; }
.kpi-accent-rose   .kpi-icon { background: rgba(212, 76, 122, 0.12); color: #D44C7A; }

/* =========================================================
   Grids
   ========================================================= */
.grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
/* Overview's two statistics tables: equal halves, stacked below 1100px
   where half a row is too narrow for a label and two figures. */
.dash-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .dash-tables { grid-template-columns: 1fr; } }
.grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* =========================================================
   Window toggle — dashboard time-window segmented control.
   ========================================================= */
.window-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 10px;
  gap: 2px;
}
.window-toggle-btn {
  /* Used as both <a> (the window tabs, which navigate) and <button>
     (the chart resolution switch, which doesn't). The button defaults —
     grey background, outset border, Arial — have to be cleared here or
     the inactive segments render as raw browser buttons in the wrong
     font. Same treatment as .settings-tab below. */
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 14px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-slate);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.window-toggle-btn:hover { background: var(--color-app-hover); color: var(--color-ink); }
.window-toggle-btn.is-active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.window-toggle-btn.is-active:hover {
  background: var(--color-primary-pressed);
  color: var(--color-on-primary);
}

/* «فترة» — the custom from → to period next to «الكل». */
.window-bar { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.window-bar .window-toggle { flex-wrap: wrap; }
.window-range-btn { display: inline-flex; align-items: center; gap: 6px; }
.window-range-btn i, .window-range-btn svg { width: 15px; height: 15px; }
.window-range-label { font-size: 12px; font-weight: 600; direction: ltr; unicode-bidi: isolate; opacity: .9; }
.window-range-pop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 14px; background: var(--color-app-panel); border: 1px solid var(--color-app-border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}
.window-range-pop[hidden] { display: none; }
.window-range-pop label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-slate); }
.window-range-pop input[type="date"] {
  padding: 7px 10px; border: 1px solid var(--color-app-border); border-radius: 8px;
  background: var(--color-app-bg, transparent); color: var(--color-ink); font-family: var(--font-body); font-size: 13px;
}
.window-range-error { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--color-error); }
@media (max-width: 640px) {
  .window-range-pop { inset-inline: 0; }
}

/* =========================================================
   Settings tabs — segmented sub-nav on the /settings pages.
   ========================================================= */
.settings-tabs {
  display: inline-flex;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 10px;
  gap: 2px;
}
.settings-tab {
  /* Used as both <a> (settings pages) and <button> (in-modal tabs). The
     button defaults — grey background, border, UA font — have to be
     cleared here or the inactive tabs render as raw buttons. */
  background: none;
  border: 0;
  padding: 6px 16px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-slate);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.settings-tab:hover { background: var(--color-app-hover); color: var(--color-ink); }
.settings-tab.is-active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.settings-tab.is-active:hover {
  background: var(--color-primary-pressed);
  color: var(--color-on-primary);
}

/* =========================================================
   Welcome banner (dashboard)
   ========================================================= */
.welcome {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.welcome-title {
  font-family: var(--font-heading);
  font-size: 26px; font-weight: 700; line-height: 1.2;
  color: var(--color-ink);
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.4px;
}
.welcome-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: mc-wave 1.8s ease-in-out 1;
}
@keyframes mc-wave {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(14deg); }
  40%  { transform: rotate(-8deg); }
  60%  { transform: rotate(14deg); }
  80%  { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}
.welcome-sub { color: var(--color-slate); font-size: 14px; margin-top: 4px; }
.btn-export { white-space: nowrap; }

/* =========================================================
   Stat cards (KPI + chart) — 2x2 grid
   ========================================================= */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.stat-card {
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 14px;
  padding: 22px 22px 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px;
  overflow: hidden;
}
.stat-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.stat-label  { color: var(--color-slate); font-size: 13px; font-weight: 500; }
.stat-delta  {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-sm);
}
.stat-delta.up   { color: #15803D; background: #DCFCE7; }
.stat-delta.down { color: #B91C1C; background: #FEE2E2; }
.stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  color: var(--color-ink);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.stat-chart { margin-top: auto; min-height: 88px; }

/* Chart.js canvas wrapper — explicit height so the chart sizes
   correctly inside a flex .stat-card without exploding. */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  margin-top: 12px;
}
.chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; }
/* The full-width income/profit plot gets the room two side-by-side
   cards used to occupy between them. */
.chart-canvas-tall { height: 340px; }

/* =========================================================
   Chart panel — the full-width income vs. profit plot.
   ========================================================= */
.chart-panel {
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 14px;
  padding: 22px 22px 18px;
}
.chart-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.chart-panel-titles { min-width: 0; }
.chart-panel-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 17px; font-weight: 600;
  color: var(--color-ink);
}
.chart-panel-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--color-slate);
}
/* Keep the resolution switch on one line even when the panel wraps —
   four short labels reflowing mid-group reads as broken. */
.chart-panel-intervals { flex: 0 0 auto; }

/* Pulsing dot to signal a panel is on a live-poll refresh loop. */
.live-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0 rgba(74, 156, 97, 0.55);
  animation: live-pulse 1800ms ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 156, 97, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(74, 156, 97, 0);  }
  100% { box-shadow: 0 0 0 0 rgba(74, 156, 97, 0);     }
}

/* Chart loading states ---------------------------------------------
   A polled chart waits twice, and the two waits deserve different
   answers. The first one has nothing on screen yet — an empty grid that
   reads as "no sales" rather than "not loaded" — so it gets the panel: a
   spinner over the plot until real numbers land. Every refresh after it
   is redrawing a chart somebody is in the middle of reading, so it gets
   a hairline at the top edge and nothing more. */
.chart-loader {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-app-panel);
  border-radius: 10px;
  z-index: 2;
}
.chart-canvas-wrap.is-loading .chart-loader,
.chart-canvas-wrap.is-failed  .chart-loader,
.chart-canvas-wrap.is-empty   .chart-loader { display: flex; }

.chart-spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid var(--color-app-border);
  border-top-color: var(--color-primary);
  animation: chart-spin 720ms linear infinite;
}
/* Only the wait spins. A finished state that keeps spinning is a lie. */
.chart-canvas-wrap.is-failed .chart-spinner,
.chart-canvas-wrap.is-empty  .chart-spinner { display: none; }
@keyframes chart-spin { to { transform: rotate(360deg); } }

.chart-loader-text { font-size: 12.5px; color: var(--color-slate); }
.chart-canvas-wrap.is-failed .chart-loader-text { color: var(--color-error); }
.chart-loader-retry {
  display: none;
  padding: 6px 14px;
  border: 1px solid var(--color-app-border);
  border-radius: var(--radius-sm);
  background: var(--color-app-panel);
  color: var(--color-charcoal);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.chart-canvas-wrap.is-failed .chart-loader-retry { display: inline-flex; }
.chart-loader-retry:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* The refresh tell: a light sweeping the top edge, drawn with
   background-position rather than a transform so it runs the same way
   in both directions and needs nothing clipped to contain it. */
.chart-canvas-wrap.is-refreshing::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: chart-refresh 1200ms ease-in-out infinite;
  z-index: 2;
}
@keyframes chart-refresh {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chart-spinner { animation-duration: 2400ms; }
  .chart-canvas-wrap.is-refreshing::after {
    animation: none;
    background-image: none;
    background-color: var(--color-primary);
    opacity: .35;
  }
}

/* KPI tiles before the first /dashboard/stats.json answer. */
.kpi-spinner {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--color-app-border);
  border-top-color: var(--color-primary);
  animation: chart-spin 720ms linear infinite;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  .kpi-spinner { animation-duration: 2400ms; }
}

/* «إحصائيات المبيعات» — two groups (sales, platform profit), each row an
   icon chip, a label with a one-line hint, today's figure and the total. */
.sb { padding: 6px 20px 18px; }
.sb-group + .sb-group { margin-top: 10px; }
.sb-head, .sb-row {
  display: grid;
  /* Fixed value columns: every row (and the heading) is its own grid, so
     auto widths would size per row and the headings would drift. */
  grid-template-columns: 36px minmax(0, 1fr) 104px 116px;
  column-gap: 14px;
  align-items: center;
}
.sb-head { padding: 12px 10px 8px; }
.sb-head-label {
  grid-column: 1 / 3;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--color-steel); text-transform: uppercase;
}
.sb-col { font-size: 11.5px; font-weight: 600; color: var(--color-steel); }
.sb-row {
  padding: 11px 10px;
  border-radius: 12px;
  transition: background-color .15s ease;
}
/* Straight hairline between rows, inset from the rounded hover edge. */
.sb-row + .sb-row {
  background: linear-gradient(var(--color-app-border), var(--color-app-border))
              center top / calc(100% - 20px) 1px no-repeat;
}
.sb-row:hover, .sb-row:hover + .sb-row { background: none; }
.sb-row:hover { background-color: var(--color-app-hover); }
.sb-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sb-icon i, .sb-icon svg { width: 17px; height: 17px; }
.sb-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-name { font-weight: 600; font-size: 14px; color: var(--color-ink); }
.sb-sub {
  font-size: 12px; color: var(--color-stone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Physical right, not `end`: the figures are .num (direction: ltr), so
   `end` lands them on the right while the RTL headings went left. */
.sb-col, .sb-today, .sb-total { text-align: right; }
.sb-today, .sb-total { white-space: nowrap; }
.sb-today { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--color-ink); }
.sb-total { font-size: 13.5px; font-weight: 500; color: var(--color-slate); }
.sb .kpi-spinner { width: 14px; height: 14px; border-width: 2px; }
/* Bank rows: the uploaded logo on white, or the bank's initial. */
.sb-icon.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--color-app-border); overflow: hidden; }
.sb-logo { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
/* A logo with its own background (Jawwal Pay) fills the chip edge to edge. */
.sb-icon.is-fill { box-shadow: none; }
.sb-icon.is-fill .sb-logo { object-fit: cover; padding: 0; }
.sb-icon svg.sb-bank { width: 17px; height: 17px; }
.sb-placeholder { justify-content: center; display: flex; padding: 18px 10px; }
.sb-empty { padding: 14px 10px; font-size: 12.5px; color: var(--color-stone); text-align: center; }
/* A figure that moved on a refresh: starts in the brand colour and fades
   back to whatever colour that cell normally has (ink, muted, amber). */
.sb-flash { animation: sb-flash 900ms ease-out; }
@keyframes sb-flash { from { color: var(--color-primary); } }
@media (prefers-reduced-motion: reduce) { .sb-flash { animation: none; } }

.sb-tone-teal   .sb-icon { background: rgba(13, 148, 136, 0.12); color: #0D9488; }
.sb-tone-violet .sb-icon { background: rgba(102, 73, 235, 0.12); color: #6649EB; }
.sb-tone-rose   .sb-icon { background: rgba(212, 76, 122, 0.12); color: #D44C7A; }
.sb-tone-sky    .sb-icon { background: rgba(35, 131, 226, 0.12); color: #2383E2; }
.sb-tone-amber  .sb-icon { background: rgba(229, 153, 71, 0.14); color: #B25E1A; }
/* Profit figures read in the profit colour, as on the KPI tile. */
.sb-tone-amber .sb-today { color: #B25E1A; }

@media (max-width: 640px) {
  .sb { padding: 4px 8px 12px; }
  .sb-head, .sb-row { grid-template-columns: 30px minmax(0, 1fr) 88px 96px; column-gap: 10px; }
  .sb-icon { width: 30px; height: 30px; border-radius: 8px; }
  .sb-sub { display: none; }
  .sb-today { font-size: 14px; }
  .sb-total { font-size: 12.5px; }
}

/* Brief highlight when a KPI value changes on a live update. */
.kpi-flash { animation: kpi-flash 700ms ease-out; }
@keyframes kpi-flash {
  0%   { color: var(--color-primary); }
  100% { color: var(--color-ink); }
}

/* =========================================================
   Charts (inline SVG)
   ========================================================= */
.chart-svg { width: 100%; height: 100px; display: block; overflow: visible; }
.chart-bar-cool { fill: var(--color-accent); }
.chart-bar-warm { fill: var(--color-brand-orange); }
.chart-area-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.chart-area-fill { fill: url(#areaGrad); }
.chart-area-dot  { fill: var(--color-primary); }
.chart-area-dot.is-last { fill: var(--color-primary); stroke: var(--color-app-panel); stroke-width: 2; }

/* Donut */
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut { width: 110px; height: 110px; flex-shrink: 0; }
.donut .donut-track { fill: none; stroke: var(--color-app-border); stroke-width: 12; }
.donut .donut-bar   {
  fill: none; stroke: var(--color-primary); stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dasharray 600ms ease-out;
}
.donut .donut-text  {
  font-family: var(--font-heading);
  font-weight: 700; font-size: 22px;
  fill: var(--color-ink);
}
.donut-legend {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--color-charcoal);
}
.donut-legend > div { display: flex; align-items: center; gap: 6px; }
.donut-legend .dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.donut-legend .dot-track { background: var(--color-app-border); }
.donut-legend .dot-bar   { background: var(--color-primary); }
.donut-legend span:not(.dot) { color: var(--color-slate); }
.donut-legend .num { color: var(--color-ink); font-weight: 600; margin-inline-start: 2px; }

/* =========================================================
   Status pills + tags
   ========================================================= */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-sm);
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.active    { background: var(--color-status-active-bg);    color: var(--color-status-active-fg); }
.pill.pending   { background: var(--color-status-pending-bg);   color: var(--color-status-pending-fg); }
.pill.blocked   { background: var(--color-status-blocked-bg);   color: var(--color-status-blocked-fg); }
.pill.draft     { background: var(--color-status-draft-bg);     color: var(--color-status-draft-fg); }
.pill.published { background: var(--color-status-published-bg); color: var(--color-status-published-fg); }

/* =========================================================
   Data table
   ========================================================= */
.dt-wrap { overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; min-width: 720px; }
.dt thead th {
  font-size: 12px; font-weight: 600; color: var(--color-slate);
  text-align: start;
  padding: 12px 14px;
  background: var(--color-app-bg);
  border-bottom: 1px solid var(--color-app-border);
  white-space: nowrap;
}
.dt tbody td {
  padding: var(--row-pad-y) 14px;
  font-size: 14px;
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-app-border-soft);
  vertical-align: middle;
}
.dt tbody tr:hover { background: var(--color-app-hover); }
.dt tbody tr:last-child td { border-bottom: none; }
.dt .row-actions { display: inline-flex; gap: 4px; }
.dt tfoot td {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-app-bg);
  border-top: 2px solid var(--color-app-border);
}
.dt tbody tr.is-hidden { display: none; }

/* Row-selection checkboxes (stores bulk actions) */
.dt th.dt-check, .dt td.dt-check { width: 36px; padding-inline-end: 0; text-align: center; }
.dt .dt-check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
  vertical-align: middle;
}
.dt tbody tr.is-selected,
.dt tbody tr.is-selected:hover { background: var(--color-app-hover); }

/* =========================================================
   Pagination
   ========================================================= */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--color-app-border);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-slate);
}
.pagination-info .num,
.pagination-info { font-variant-numeric: tabular-nums; }
.pagination-nav { display: inline-flex; align-items: center; gap: 4px; }
.page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--color-charcoal);
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  user-select: none;
}
.page-btn:hover { background: var(--color-app-hover); border-color: var(--color-app-border); }
.page-btn.is-active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.page-btn.is-active:hover { background: var(--color-primary-pressed); border-color: var(--color-primary-pressed); }
.page-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.page-btn i, .page-btn svg { width: 16px; height: 16px; }
.page-dot {
  padding: 0 4px;
  color: var(--color-stone);
  user-select: none;
  font-size: 14px;
}

@media (max-width: 640px) {
  .pagination { justify-content: center; padding: 10px 12px; }
  .pagination-info { width: 100%; text-align: center; order: 2; }
  .pagination-nav  { order: 1; }
}

/* =========================================================
   Stat tiles (sleek summary cards above a list page)
   ========================================================= */
.stat-row {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 16px;
}
/* Three tiles read as three equals; the default 1fr/2.2fr pair is for a
   hero beside one secondary, and dropping a third into it wraps the last
   tile onto its own full-width line. */
.stat-row-3 { grid-template-columns: repeat(3, 1fr); }
.stat-tile {
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  min-height: 88px;
}
.stat-tile-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}
.stat-tile-icon i { width: 22px; height: 22px; }
.stat-tile-icon-neutral { background: var(--color-app-hover); color: var(--color-slate); }
.stat-tile-text { display: flex; flex-direction: column; flex: 1; gap: 4px; min-width: 0; }
.stat-tile-label { font-size: 13px; color: var(--color-slate); font-weight: 500; }
.stat-tile-value {
  font-family: var(--font-heading);
  font-size: 28px; font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.4px;
  line-height: 1.05;
}

.stat-tile-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.stat-divider { width: 1px; align-self: stretch; background: var(--color-app-border); }
.stat-sub { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-slate); }
.stat-sub-label { color: var(--color-charcoal); font-weight: 500; }
.stat-sub-value {
  font-family: var(--font-heading);
  font-size: 20px; font-weight: 700;
  color: var(--color-ink);
  margin-inline-start: 2px;
  line-height: 1;
}
.stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stat-dot.active   { background: var(--color-success); box-shadow: 0 0 0 3px rgba(74, 156, 97, 0.18); }
.stat-dot.disabled { background: var(--color-error);   box-shadow: 0 0 0 3px rgba(212, 76, 71, 0.18); }
.stat-dot.linked   { background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.stat-dot.pending  { background: var(--color-status-pending-fg); box-shadow: 0 0 0 3px var(--color-status-pending-bg); }
.stat-dot.partner  { background: var(--color-warning); box-shadow: 0 0 0 3px rgba(229, 153, 71, 0.18); }
/* The two states a request can end in. Both were drawn by the settlements
   summary and neither had a rule, so a rejected or cancelled count came
   with an invisible dot beside it. Same fg/bg pairing as the pills the
   table uses for the identical states. */
.stat-dot.blocked  { background: var(--color-status-blocked-fg); box-shadow: 0 0 0 3px var(--color-status-blocked-bg); }
.stat-dot.draft    { background: var(--color-status-draft-fg);   box-shadow: 0 0 0 3px var(--color-status-draft-bg); }
.stat-dot.published{ background: var(--color-status-published-fg); box-shadow: 0 0 0 3px var(--color-status-published-bg); }

/* Partner balance — a money column, so it reads as one: tabular
   figures, and a debt that has gone the wrong way is not silently the
   same colour as one that has not. */
.partner-balance {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-ink);
  white-space: nowrap;
}
.partner-balance.is-negative { color: var(--color-error); }
/* The value is replaced in place by the poll; a brief tint marks the
   ones that actually moved so a changing figure is noticed. */
.partner-balance.is-changed,
[data-bind="partner-due"].is-changed { animation: partner-flash 900ms ease-out; }
@keyframes partner-flash {
  0%   { background: var(--color-primary-soft); }
  100% { background: transparent; }
}

@media (max-width: 1100px) {
  .stat-row-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .stat-row, .stat-row-3 { grid-template-columns: 1fr; gap: 12px; }
  .stat-tile { min-height: 76px; padding: 14px 16px; }
  .stat-tile-value { font-size: 24px; }
  .stat-tile-row { gap: 16px; }
  .stat-divider { display: none; }
}

/* =========================================================
   Role pills (table column)
   ========================================================= */
.role-pill {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.role-pill.role-admin   { background: var(--color-card-tint-lavender); color: var(--color-brand-purple-800); }
.role-pill.role-manager { background: var(--color-card-tint-mint);     color: var(--color-brand-green); }

/* =========================================================
   Jawwal-pay status dot (per-row indicator)
   ========================================================= */
.jawwal-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-inline-start: 10px;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0;
  cursor: help;
}
.jawwal-dot.on  { background: var(--color-success); animation: mc-pulse-on  1.6s ease-in-out infinite; }
.jawwal-dot.off { background: var(--color-error);   animation: mc-pulse-off 1.6s ease-in-out infinite; }
@keyframes mc-pulse-on {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 156, 97, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(74, 156, 97, 0);   }
}
@keyframes mc-pulse-off {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 76, 71, 0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(212, 76, 71, 0);  }
}
/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .jawwal-dot.on, .jawwal-dot.off { animation: none; }
}
/* Wallet account-type hint next to the linked dot (partner / personal). */
.jawwal-cell { display: inline-flex; align-items: center; gap: 8px; }
.jawwal-cell .jawwal-dot { margin-inline-start: 0; }
.jawwal-paytype {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.jawwal-paytype.partner  { background: var(--color-status-active-bg);  color: var(--color-status-active-fg); }
.jawwal-paytype.personal { background: var(--color-app-hover);         color: var(--color-slate); }

/* =========================================================
   Row-actions menu
   ========================================================= */
.menu-wrap { position: relative; }
.menu {
  position: absolute; top: 100%; margin-top: 4px;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  min-width: 180px;
  padding: 4px;
  z-index: 1000;
  animation: mc-fade-in 120ms ease-out forwards;
}
[dir="rtl"] .menu { left: 0;  right: auto; }
[dir="ltr"] .menu { right: 0; left:  auto; }
/* JS lifts the menu out of its scroll-clipped wrapper by switching to
   fixed positioning and writing top/left inline. */
.menu.is-floating { position: fixed; margin: 0; }
.menu button, .menu a {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none; background: transparent; cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-charcoal);
  text-align: start;
  text-decoration: none;
  font-family: var(--font-body);
}
.menu button:hover, .menu a:hover { background: var(--color-app-hover); color: var(--color-ink); }
.menu button.danger { color: var(--color-error); }
.menu button.danger:hover { background: rgba(212, 76, 71, 0.08); }
.menu button i, .menu button svg,
.menu a i, .menu a svg { width: 16px; height: 16px; flex-shrink: 0; }

/* =========================================================
   Avatar
   ========================================================= */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 600;
  font-family: var(--font-heading);
  flex-shrink: 0;
  width: 32px; height: 32px; font-size: 13px;
  background: var(--color-primary);
}
.avatar-sm  { width: 24px; height: 24px; font-size: 11px; }
.avatar-lg  { width: 40px; height: 40px; font-size: 15px; }
.avatar-img { object-fit: cover; background: var(--color-app-hover); }

/* =========================================================
   Modal
   ========================================================= */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: mc-fade-in 160ms ease-out;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 15, 15, 0.5);
}
.modal-panel {
  position: relative;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 48px -12px rgba(15, 15, 15, 0.32);
  animation: mc-slide-up 200ms ease-out;
}
.modal-panel.modal-sm { max-width: 420px; }
.modal-panel.modal-lg { max-width: 880px; }

/* Financial-statement — bank-statement document layout */
.stmt-toolbar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}

.stmt-doc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 2px solid var(--color-ink); margin-bottom: 10px;
}
.stmt-doc-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--color-ink); }
.stmt-doc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stmt-doc-period {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--color-slate); margin-bottom: 12px;
}

.stmt-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.stmt-summary-item {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--color-app-border); border-radius: 10px; padding: 12px 14px;
}
.stmt-summary-item .lbl { font-size: 12px; color: var(--color-slate); }
.stmt-summary-item .val { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--color-ink); }

.stmt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
@media (max-width: 720px) { .stmt-summary, .stmt-grid { grid-template-columns: 1fr; } }

.stmt-section-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 700; color: var(--color-ink);
  padding-bottom: 6px; margin-bottom: 2px; border-bottom: 2px solid var(--color-app-border);
}
.stmt-line {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--color-app-border); font-size: 14px;
}
.stmt-line:last-child { border-bottom: none; }
.stmt-line-label { flex: 1; color: var(--color-slate); }
.stmt-line-meta  { color: var(--color-stone); font-size: 12px; }
.stmt-line-val   { min-width: 96px; text-align: end; font-weight: 600; color: var(--color-ink); }
.stmt-line-negative .stmt-line-val { color: var(--color-error); }
.stmt-line-total { border-top: 2px solid var(--color-app-border); border-bottom: none; margin-top: 2px; }
.stmt-line-total .stmt-line-label { color: var(--color-ink); font-weight: 700; }
.stmt-line-total .stmt-line-val { color: var(--color-primary-deep, #0D9488); font-weight: 700; }

.stmt-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px 0; color: var(--color-stone);
}
.stmt-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--color-app-border);
  border-top-color: var(--color-primary, #0D9488);
  animation: mc-spin 700ms linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }
@keyframes mc-slide-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-app-border);
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--font-heading);
  font-size: 16px; font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}
.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 14px;
}
.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--color-app-border);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
}

/* Two-column form layout inside modals */
.grid-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-form-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.checkbox-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }

/* Switch — a checkbox for settings that read as on/off rather than
   as a form field to fill in (see the corporate-API master switch).
   The <input> stays a real checkbox for keyboard + form semantics and
   is painted over by the track. */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input[type="checkbox"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; z-index: 1; cursor: pointer;
}
.switch .switch-track {
  position: absolute; inset: 0;
  background: var(--color-app-border);
  border-radius: 999px;
  transition: background .18s ease;
}
.switch .switch-track::before {
  content: "";
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 20px; height: 20px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .18s ease;
}
.switch input:checked + .switch-track { background: var(--color-primary); }
/* Logical inset-inline-start already flips the knob's origin for RTL,
   so the "on" travel has to flip with it. */
.switch input:checked + .switch-track::before { transform: translateX(20px); }
[dir="rtl"] .switch input:checked + .switch-track::before { transform: translateX(-20px); }
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .switch-track { opacity: .5; }

.switch-row { display: flex; align-items: center; gap: 12px; }

/* The portal-without-API warning. `display` lives here rather than as an
   inline style because an inline `display: block` outranks the [hidden]
   attribute, which would pin the warning on screen permanently. */
.corporate-hint { display: block; margin-top: 8px; }
.corporate-hint[hidden] { display: none; }

/* Corporate-accounts modal: a table of row actions needs a button that
   fits a table cell, and a monospace run for usernames / credentials
   that must be copied character-for-character. */
.btn-sm { padding: 4px 10px; font-size: 12px; min-height: 0; }
.mono { font-family: var(--font-mono); }
/* The settings tab strip, re-used inside a modal. `.modal-body` is a flex
   column, so its default `align-items: stretch` would blow the strip out
   to the full width and leave the tabs floating in a long empty box —
   shrink-wrap it back. */
.modal [data-corp-tabs] {
  align-self: flex-start;
  max-width: 100%;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.modal [data-corp-tabs] .settings-tab { cursor: pointer; white-space: nowrap; }

/* Regenerate button, tucked into the end of its input.
   The wrapper is what the button is positioned against — anchoring to
   the whole .fld would need a magic top offset that breaks the moment a
   label wraps to two lines.
   Sides are PHYSICAL, not logical: these inputs carry dir="ltr" (they
   hold credentials), so `padding-inline-end` on the input resolves to the
   right while `inset-inline-end` on the button resolves against the RTL
   page and lands on the left — the button then sits on top of the text. */
.gen-wrap { position: relative; display: block; }
.gen-wrap .gen-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 0; border-radius: 7px;
  background: none; color: var(--color-stone);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.gen-wrap .gen-btn:hover { background: var(--color-app-hover); color: var(--color-primary); }
.gen-wrap .gen-btn i { width: 15px; height: 15px; }
/* Default (LTR page): button at the right of the field. */
.gen-wrap .gen-btn { right: 6px; }
.gen-wrap input { padding-right: 42px; }
/* RTL page: the far end of the field is the left, so both move together. */
[dir="rtl"] .gen-wrap .gen-btn { right: auto; left: 6px; }
[dir="rtl"] .gen-wrap input { padding-right: 12px; padding-left: 42px; }

.corp-new { margin-top: 16px; border-top: 1px dashed var(--color-app-border); padding-top: 12px; }
.corp-new > summary { cursor: pointer; user-select: none; color: var(--color-primary); }
.corp-new > summary::marker { color: var(--color-stone); }
[data-corp-list] { overflow-x: auto; }
[data-corp-list] .dt { margin: 0; }
[data-corp-list] .dt td { vertical-align: middle; }
/* Keep the three row actions on one line: wrapping them made the row
   twice as tall, and letting them overflow hid the destructive one. */
[data-corp-list] .actions-row { flex-wrap: nowrap; white-space: nowrap; }

/* =========================================================
   Corporate-guide generation overlay
   =========================================================
   Shown while the manager's integration .md is being generated, then
   held open with the download link. Blocking on purpose: the file is
   the whole point of the action, so it must not be missed. */
.guide-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 15, 15, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10001;
  opacity: 0;
  animation: mc-fade-in 0.2s ease-out forwards;
}
.guide-overlay[hidden] { display: none; }
.guide-card {
  background: var(--color-app-surface, #fff);
  color: var(--color-ink);
  border-radius: 14px;
  padding: 32px 34px;
  width: min(420px, calc(100vw - 32px));
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.guide-card .guide-spin { display: flex; justify-content: center; margin-bottom: 16px; color: var(--color-primary); }
.guide-card .guide-spin[hidden] { display: none; }
.guide-card .guide-spin .spinner { width: 34px; height: 34px; border-width: 3px; }
.guide-card .guide-spin .checkmark { width: 34px; height: 34px; color: var(--color-success, #16A34A); }
.guide-card .guide-spin .xmark     { width: 34px; height: 34px; color: var(--color-error, #DC2626); }
.guide-card .guide-title { margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.guide-card .guide-sub   { margin: 0; }
/* Indeterminate sweep — the API gives no progress, so don't fake a
   percentage; show that work is happening and nothing more. */
.guide-bar {
  margin-top: 18px; height: 3px; border-radius: 999px;
  background: var(--color-app-border); overflow: hidden;
}
.guide-bar > span {
  display: block; height: 100%; width: 40%;
  background: var(--color-primary); border-radius: 999px;
  animation: mc-guide-sweep 1.1s ease-in-out infinite;
}
@keyframes mc-guide-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
[dir="rtl"] .guide-bar > span { animation-name: mc-guide-sweep-rtl; }
@keyframes mc-guide-sweep-rtl {
  0%   { transform: translateX(110%); }
  100% { transform: translateX(-260%); }
}
.guide-overlay.is-settled .guide-bar { display: none; }
.guide-actions { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.guide-actions[hidden] { display: none; }

/* One-time password readout */
.otp-box {
  background: var(--color-primary-soft);
  border: 1px solid rgba(13, 148, 136, 0.25);
  border-radius: 10px;
  padding: 14px 16px;
}
.otp-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-deep);
  margin-bottom: 10px;
}
.otp-display { display: flex; align-items: center; gap: 8px; }
.otp-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 16px; font-weight: 600;
  color: var(--color-ink);
  background: var(--color-app-panel);
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-app-border);
  user-select: all;
  word-break: break-all;
  letter-spacing: 0.5px;
  min-width: 0;
}
.otp-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease-out, transform 100ms ease-out;
}
.otp-copy-btn:hover  { background: var(--color-primary-pressed); }
.otp-copy-btn:active { transform: scale(0.94); }
.otp-copy-btn.is-copied { background: var(--color-success); animation: mc-pop 280ms ease-out; }
.otp-copy-btn i, .otp-copy-btn svg { width: 18px; height: 18px; }
@keyframes mc-pop {
  0%   { transform: scale(0.92); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
:root[data-theme="dark"] .otp-value { background: var(--color-app-bg); }

/* Body-scroll lock while a modal is open */
body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .modal { padding: 12px; align-items: flex-end; }
  .modal-panel { max-width: 100%; border-radius: 12px 12px 0 0; }
  .grid-form-2, .grid-form-3 { grid-template-columns: 1fr; }
}

/* =========================================================
   Form fields
   ========================================================= */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld label { font-size: 13px; font-weight: 500; color: var(--color-charcoal); }
.fld .hint  { font-size: 12px; color: var(--color-stone); }
.fld .error { font-size: 12px; color: var(--color-error); }

/* The live username verdict, under the field it is about. Sized and
   coloured like .hint / .error above rather than as a new kind of thing:
   it IS a hint, and the state is the only part that varies. */
.username-note { font-size: 12px; color: var(--color-stone); margin: 0; }
.username-note.is-checking { color: var(--color-stone); }
.username-note.is-free     { color: var(--color-success); }
.username-note.is-taken    { color: var(--color-error); }
.username-note.is-invalid  { color: var(--color-error); }
/* Free, but a cashier holds the same name — worth saying, not a refusal. */
.username-note.is-free[data-warn] { color: var(--color-warning); }
/* An action button standing in for an input (the Jawwal token refresh):
   the column's default stretch would blow it out to the full field width. */
.fld > .btn { align-self: flex-start; }
.fld input, .fld select, .fld textarea {
  font-family: var(--font-body);
  background: var(--color-app-panel);
  color: var(--color-ink);
  border: 1px solid var(--color-app-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
  width: 100%;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.fld input[readonly] {
  background: var(--color-app-bg);
  color: var(--color-slate);
  border-style: dashed;
  cursor: not-allowed;
}
.fld input[readonly]:focus {
  border-color: var(--color-app-border);
  box-shadow: none;
}
.fld label .fld-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: var(--color-stone);
  margin-inline-start: 6px;
  vertical-align: -2px;
}
.fld label .fld-lock i, .fld label .fld-lock svg { width: 12px; height: 12px; }

.search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 8px;
  padding: 0 12px;
  height: 38px;
  color: var(--color-stone);
  min-width: 280px;
  font-family: var(--font-body);
}
.search-box input {
  border: none; outline: none;
  flex: 1;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);     /* Tajawal / Cairo — not the browser default */
  font-size: 14px;
  line-height: 1.4;
}
/* A search box with its own submit button, sitting flush inside the end. */
.search-box.has-action { padding-inline-end: 4px; }
.search-box-btn {
  flex: none;
  height: 30px; padding: 0 16px;
  border: none; border-radius: var(--radius-sm);
  background: var(--color-primary); color: #fff;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.search-box-btn:hover { background: var(--color-primary-pressed); }
.search-box-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.search-box-btn-spin {
  display: none;
  position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: chart-spin 720ms linear infinite;
}
/* While a search runs: the label keeps the button's width, the spinner
   takes its place, and the box reads as disabled. */
.is-searching .search-box-btn { cursor: progress; background: var(--color-primary); }
.is-searching .search-box-btn-label { visibility: hidden; }
.is-searching .search-box-btn-spin { display: block; }
.is-searching .search-box { opacity: .75; }
.is-searching .search-box input { cursor: progress; }

/* The results panel under a running search: veiled, with a spinner. */
.search-results { position: relative; }
.search-results-veil {
  position: absolute; inset: 0; z-index: 3;
  display: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  /* Near the top, not centred: on a long table the middle is off-screen. */
  padding-top: 72px;
  background: color-mix(in srgb, var(--color-app-panel) 94%, transparent);
  border-radius: inherit;
  backdrop-filter: blur(1px);
}
.search-results.is-searching .search-results-veil { display: flex; }
.search-results-veil-text { font-size: 13px; color: var(--color-slate); font-weight: 500; }
.search-box-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.search-box input::placeholder {
  font-family: var(--font-body);
  color: var(--color-stone);
  opacity: 1;
}

/* Pill-style select used in filter rows */
.select-pill {
  height: 38px;
  padding: 0 32px 0 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-slate) 50%),
    linear-gradient(135deg, var(--color-slate) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 16px,
    calc(100% - 11px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[dir="rtl"] .select-pill {
  padding: 0 12px 0 32px;
  background-position: 16px 16px, 11px 16px;
}
.select-pill:hover  { border-color: var(--color-hairline-strong); }
.select-pill:focus  { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }

/* =========================================================
   Page header
   ========================================================= */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-header h1 { font-size: 24px; font-weight: 700; }
.filter-row  { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* =========================================================
   Flash / alerts
   ========================================================= */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert .alert-icon { width: 18px; height: 18px; flex-shrink: 0; }
.alert[hidden] { display: none; }
.alert-success { background: var(--color-status-active-bg);  color: var(--color-status-active-fg);  border-color: #BBF7D0; }
.alert-error   { background: var(--color-status-blocked-bg); color: var(--color-status-blocked-fg); border-color: #FECACA; }
.alert-warning { background: var(--color-status-pending-bg); color: var(--color-status-pending-fg); border-color: #FDE68A; }
.alert-info    { background: var(--color-status-published-bg); color: var(--color-status-published-fg); border-color: #BFDBFE; }

/* Floating toast stack — transient success/error feedback, fixed to the
   viewport so it's never tied to the page scroll. Drops in from the top
   inline-end corner (right in LTR, left in RTL). */
.toast-stack {
  position: fixed;
  top: 20px;
  inset-inline-end: 20px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 10000;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  min-width: 280px; max-width: 420px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  box-shadow: var(--shadow-2);
  animation: toast-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.toast.is-leaving { animation: toast-out 200ms ease-in both; }
.toast-icon { width: 20px; height: 20px; flex-shrink: 0; }
.toast-msg  { flex: 1; line-height: 1.4; color: var(--color-charcoal); }
.toast-close {
  background: transparent; border: none; cursor: pointer;
  color: var(--color-stone); font-size: 20px; line-height: 1;
  padding: 2px 6px; border-radius: 6px;
  font-family: inherit;
}
.toast-close:hover { background: var(--color-app-hover); color: var(--color-ink); }
.toast-success { border-color: #BBF7D0; background: var(--color-status-active-bg);  color: var(--color-status-active-fg); }
.toast-success .toast-msg { color: var(--color-status-active-fg); }
.toast-error   { border-color: #FECACA; background: var(--color-status-blocked-bg); color: var(--color-status-blocked-fg); }
.toast-error   .toast-msg { color: var(--color-status-blocked-fg); }
.toast-warning { border-color: #FDE68A; background: var(--color-status-pending-bg); color: var(--color-status-pending-fg); }
.toast-warning .toast-msg { color: var(--color-status-pending-fg); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 640px) {
  .toast-stack { top: 12px; inset-inline-end: 12px; inset-inline-start: 12px; }
  .toast { min-width: 0; max-width: 100%; }
}

/* =========================================================
   Session-expired overlay — shown when the admin's auth
   expiry deadline has elapsed; the JS auto-submits /logout
   right after this fades in.
   ========================================================= */
.session-expired-overlay {
  position: fixed; inset: 0;
  z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 15, 15, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: session-overlay-in 280ms ease-out both;
}
.session-expired-overlay[hidden] { display: none; }
.session-expired-card {
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  padding: 28px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  animation: session-card-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.session-expired-spinner {
  width: 44px; height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid var(--color-app-border);
  border-top-color: var(--color-primary);
  animation: session-spin 700ms linear infinite;
}
.session-expired-title {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 8px;
}
.session-expired-msg {
  font-size: 14px;
  color: var(--color-slate);
  line-height: 1.5;
  margin: 0;
}
@keyframes session-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes session-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes session-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   Icon-prefixed inputs (login fields)
   ========================================================= */
.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon-wrap .input-icon-lead {
  position: absolute;
  width: 18px; height: 18px;
  color: var(--color-stone);
  pointer-events: none;
  z-index: 1;
}
[dir="rtl"] .input-icon-wrap .input-icon-lead { right: 12px; }
[dir="ltr"] .input-icon-wrap .input-icon-lead { left:  12px; }

.input-icon-wrap .input-icon-trail {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: var(--color-stone);
  cursor: pointer;
  border-radius: 6px;
  z-index: 1;
}
.input-icon-wrap .input-icon-trail:hover { color: var(--color-ink); background: var(--color-app-hover); }
.input-icon-wrap .input-icon-trail i { width: 18px; height: 18px; }
[dir="rtl"] .input-icon-wrap .input-icon-trail { left:  6px; }
[dir="ltr"] .input-icon-wrap .input-icon-trail { right: 6px; }

.input-with-icon {
  width: 100%;
  height: 44px;
  font-family: var(--font-body);
  background: var(--color-app-panel);
  color: var(--color-ink);
  border: 1px solid var(--color-app-border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
[dir="rtl"] .input-with-icon { padding: 0 40px 0 14px; }
[dir="ltr"] .input-with-icon { padding: 0 14px 0 40px; }
.input-with-icon.has-trail[dir="rtl"],
[dir="rtl"] .input-with-icon.has-trail { padding-left: 44px; }
.input-with-icon.has-trail[dir="ltr"],
[dir="ltr"] .input-with-icon.has-trail { padding-right: 44px; }
.input-with-icon:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.input-with-icon.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(212, 76, 71, 0.18);
}
.input-with-icon::placeholder { color: var(--color-stone); }

/* =========================================================
   Stateful button (loading / success / error)
   ========================================================= */
.btn-stateful {
  position: relative;
  overflow: hidden;
  transition: background 200ms ease-out, color 200ms ease-out;
}
.btn-stateful .btn-content,
.btn-stateful .btn-state {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity 180ms ease-out, transform 220ms ease-out;
}
.btn-stateful .btn-state {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(0.85);
  pointer-events: none;
}
.btn-stateful[data-state="loading"] .btn-content { opacity: 0; transform: scale(0.95); }
.btn-stateful[data-state="loading"] .btn-state   { opacity: 1; transform: scale(1); }
.btn-stateful[data-state="success"] .btn-content { opacity: 0; }
.btn-stateful[data-state="success"] .btn-state   { opacity: 1; transform: scale(1); }
.btn-stateful[data-state="error"]   .btn-content { opacity: 0; }
.btn-stateful[data-state="error"]   .btn-state   { opacity: 1; transform: scale(1); }
.btn-stateful[data-state]:not([data-state=""]) { pointer-events: none; }
.btn-stateful.btn-primary[data-state="success"] { background: var(--color-success); }
.btn-stateful.btn-primary[data-state="error"]   { background: var(--color-error); }

.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mc-spin 0.7s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* Animated checkmark drawn via stroke-dashoffset */
.checkmark {
  width: 22px; height: 22px;
  display: inline-block;
}
.checkmark svg { width: 100%; height: 100%; overflow: visible; }
.checkmark circle, .checkmark path {
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.checkmark circle { stroke-dasharray: 76; stroke-dashoffset: 76; animation: mc-draw 0.35s ease-out forwards; }
.checkmark path   { stroke-dasharray: 28; stroke-dashoffset: 28; animation: mc-draw 0.3s 0.25s ease-out forwards; }
@keyframes mc-draw { to { stroke-dashoffset: 0; } }

/* Animated X */
.xmark {
  width: 22px; height: 22px;
  display: inline-block;
}
.xmark svg { width: 100%; height: 100%; overflow: visible; }
.xmark line, .xmark circle {
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round;
}
.xmark circle { stroke-dasharray: 76; stroke-dashoffset: 76; animation: mc-draw 0.3s ease-out forwards; }
.xmark line:nth-child(2) { stroke-dasharray: 18; stroke-dashoffset: 18; animation: mc-draw 0.22s 0.22s ease-out forwards; }
.xmark line:nth-child(3) { stroke-dasharray: 18; stroke-dashoffset: 18; animation: mc-draw 0.22s 0.34s ease-out forwards; }

/* Shake on error (applied to the whole login card) */
@keyframes mc-shake {
  0%, 100% { transform: translateX(0); }
  15%, 55% { transform: translateX(-6px); }
  30%, 70% { transform: translateX(6px); }
  85%      { transform: translateX(-3px); }
}
.shake { animation: mc-shake 0.45s ease-in-out; }

/* Fields locked during submit */
.is-locked input, .is-locked button:not(.btn-stateful), .is-locked select { opacity: 0.6; cursor: not-allowed; }

/* =========================================================
   Redirect overlay (full-screen, minimal)
   ========================================================= */
.redirect-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(160deg, var(--color-primary-deep) 0%, var(--color-primary) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  opacity: 0;
  animation: mc-fade-in 0.3s ease-out forwards;
}
@keyframes mc-fade-in { to { opacity: 1; } }
.redirect-overlay .ro-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  padding: 0 16px;
  opacity: 0; transform: translateY(6px);
  animation: mc-rise 0.45s 0.08s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes mc-rise { to { opacity: 1; transform: none; } }
.redirect-overlay .ro-sub {
  font-size: 14px; letter-spacing: 0.2px;
  opacity: 0.82; text-align: center;
}
.redirect-overlay .ro-progress {
  position: relative;
  width: 200px; max-width: 70vw; height: 2px; border-radius: 999px;
  background: rgba(255,255,255,0.16);
  overflow: hidden;
}
.redirect-overlay .ro-progress::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 35%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0));
  animation: mc-slide 1.3s cubic-bezier(.45,0,.55,1) infinite;
}
[dir="rtl"] .redirect-overlay .ro-progress::before { animation-direction: reverse; }
@keyframes mc-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(290%); }
}
@media (prefers-reduced-motion: reduce) {
  .redirect-overlay .ro-inner { animation: none; opacity: 1; transform: none; }
  .redirect-overlay .ro-progress::before { animation-duration: 2.6s; }
}

/* =========================================================
   Login layout
   ========================================================= */
.login-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--color-app-bg);
}
.login-side {
  background: linear-gradient(160deg, var(--color-primary-deep) 0%, var(--color-primary) 100%);
  color: #fff;
  padding: 56px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-side .brand-mark { display: flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-weight: 700; font-size: 20px; }
.login-side .brand-mark .dot { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; }
.login-hero-block { max-width: 100%; }
.login-hero {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 0;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.82) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.login-hero-accent {
  width: 60px;
  height: 4px;
  border-radius: 999px;
  background: #fff;
  margin-top: 20px;
  opacity: 0.95;
}
.login-side .login-foot { font-size: 13px; opacity: 0.75; }

.login-pane {
  background: var(--color-app-panel);
  padding: 64px;
  display: flex; align-items: center; justify-content: center;
}
.login-card { width: 100%; max-width: 380px; }
.login-card h1 { font-size: 28px; font-weight: 700; margin-bottom: 6px; }
.login-card .lede { color: var(--color-slate); font-size: 14px; margin-bottom: 28px; }
.login-row { display: flex; flex-direction: column; gap: 16px; }
.login-options { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--color-slate); }
.login-options label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* =========================================================
   Empty state
   ========================================================= */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px;
  color: var(--color-stone);
  text-align: center;
  gap: 6px;
}
.empty .title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--color-charcoal); }

/* =========================================================
   Utilities
   ========================================================= */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }  .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.flex-1 { flex: 1; }
.mt-2 { margin-top: 8px; }  .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.text-slate { color: var(--color-slate); }
.text-stone { color: var(--color-stone); }
.text-ink   { color: var(--color-ink); }
.text-sm    { font-size: 13px; }
.text-xs    { font-size: 12px; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }

input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }

/* =========================================================
   Responsive
   ========================================================= */
/* =========================================================
   Off-canvas sidebar (mobile drawer)
   ========================================================= */
.menu-btn { display: none; }

.side-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 15, 15, 0.4);
  z-index: 101;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease-out;
}
.side-backdrop.is-active { opacity: 1; pointer-events: auto; }

@media (max-width: 1024px) {
  .grid-kpi   { grid-template-columns: repeat(2, 1fr); }
  .kpi-row    { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grid-2-1   { grid-template-columns: 1fr; }
  .stat-grid  { grid-template-columns: 1fr 1fr; gap: 16px; }
  .stat-card  { padding: 18px; min-height: 200px; }
  .stat-value { font-size: 30px; }
  .chart-panel { padding: 18px; }
  .chart-canvas-tall { height: 300px; }
  .login-grid { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .app-content { padding: 20px 18px; }
  .welcome-title { font-size: 22px; }

  /* Sidebar becomes an off-canvas drawer */
  .menu-btn { display: inline-flex; }
  .side {
    position: fixed; top: 0; bottom: 0;
    z-index: 102;
    width: 280px;
    box-shadow: 0 16px 48px -8px rgba(15, 15, 15, 0.16);
    transition: transform 220ms ease-out;
  }
  [dir="rtl"] .side { right: 0; left: auto; transform: translateX(100%); }
  [dir="ltr"] .side { left:  0; right: auto; transform: translateX(-100%); }
  .side.is-open { transform: translateX(0) !important; }
  .app-main { width: 100%; }
}
@media (max-width: 640px) {
  .grid-kpi   { grid-template-columns: 1fr; gap: 12px; }
  .kpi-row    { grid-template-columns: 1fr; gap: 12px; }
  .grid-1-1   { grid-template-columns: 1fr; gap: 12px; }
  .stat-grid  { grid-template-columns: 1fr; gap: 12px; }
  .kpi        { padding: 16px; }
  .kpi-value  { font-size: 24px; }
  .stat-card  { min-height: 180px; padding: 16px; }
  .stat-value { font-size: 26px; }
  .stat-chart { min-height: 70px; }
  .chart-panel { padding: 16px; }
  .chart-canvas-tall { height: 250px; }
  /* The four resolution buttons need the full width on a phone. */
  .chart-panel-head       { gap: 12px; }
  .chart-panel-intervals  { width: 100%; justify-content: space-between; }
  .chart-panel-intervals .window-toggle-btn { flex: 1; text-align: center; padding: 6px 8px; }
  .chart-svg  { height: 80px; }
  .donut      { width: 88px; height: 88px; }
  .app-content { padding: 16px 14px; }
  .topbar { height: 56px; padding: 0 12px; gap: 8px; }
  .topbar .search-box { display: none; }
  .topbar .topbar-user-text { display: none; }
  .topbar h1 { font-size: 15px; }
  .login-pane { padding: 24px; }
  .login-hero { font-size: 36px; line-height: 1.15; letter-spacing: -0.5px; }
  .login-hero-accent { margin-top: 14px; width: 48px; }
  .welcome { gap: 8px; }
  .welcome-title { font-size: 20px; }
  .btn-export { width: 100%; justify-content: center; }
}

/* =========================================================
   Deploy storefront modal (confirm → progress → result)
   ========================================================= */
.deploy-modal [data-deploy-phase][hidden],
.deploy-modal [data-deploy-title][hidden],
.deploy-modal [data-deploy-footer][hidden] { display: none; }

/* Push the "Download .env" button to the leading edge of the footer
   so it sits apart from the active Retry / Override DNS group. */
.deploy-modal [data-deploy-action="download-env"]:not([hidden]) {
  margin-inline-end: auto;
}

.deploy-progress { display: flex; flex-direction: column; gap: 10px; }

.deploy-progress-meter {
  position: relative;
  height: 8px;
  background: var(--color-app-border);
  border-radius: 999px;
  overflow: hidden;
}
.deploy-progress-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 0%;
  background: linear-gradient(90deg,
    var(--color-primary) 0%,
    var(--color-primary-pressed) 50%,
    var(--color-primary) 100%);
  background-size: 200% 100%;
  border-radius: inherit;
  transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: mc-deploy-shimmer 1.6s linear infinite;
}
@keyframes mc-deploy-shimmer {
  from { background-position:  0% 0; }
  to   { background-position: 200% 0; }
}

.deploy-progress-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
}
.deploy-progress-label { color: var(--color-ink); font-weight: 600; }
.deploy-progress-timer {
  font-family: var(--font-mono);
  color: var(--color-primary-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

/* Result panel — shared layout, icon swaps via data-state */
.deploy-result {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
}
.deploy-result-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.deploy-result-icon svg { width: 28px; height: 28px; stroke-width: 2.5; }
.deploy-modal[data-state="success"] .deploy-result-icon {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success);
  animation: mc-pop 320ms ease-out;
}
.deploy-modal[data-state="error"] .deploy-result-icon {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-error);
  animation: mc-pop 320ms ease-out;
}
.deploy-result-message {
  font-size: 14px; color: var(--color-ink);
  margin: 0;
}
.deploy-result-log {
  width: 100%;
  max-height: 180px;
  overflow: auto;
  background: var(--color-app-bg);
  border: 1px solid var(--color-app-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-stone);
  text-align: start;
  white-space: pre-wrap;
  direction: ltr;
}

/* Domain ↔ deploy_host DNS mismatch panel */
.deploy-mismatch {
  width: 100%;
  background: var(--color-app-bg);
  border: 1px solid var(--color-app-border);
  border-radius: 8px;
  padding: 12px;
}
.deploy-mismatch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: start;
}
.deploy-mismatch-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-stone);
  margin-bottom: 4px;
}
.deploy-mismatch-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 4px;
  word-break: break-all;
}
.deploy-mismatch-ips {
  list-style: none;
  padding: 0;
  margin: 0;
}
.deploy-mismatch-ips li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-primary-deep);
  padding: 2px 0;
}
.deploy-mismatch-ips li.is-empty {
  color: var(--color-stone);
  font-style: italic;
}
@media (max-width: 480px) {
  .deploy-mismatch-grid { grid-template-columns: 1fr; }
}

/* cPanel auto-deploy disclosure on the "Add store" form */
.deploy-disclosure {
  border: 1px solid var(--color-app-border);
  border-radius: 10px;
  background: var(--color-app-bg);
}
.deploy-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink);
  user-select: none;
}
.deploy-disclosure > summary::-webkit-details-marker { display: none; }
.deploy-disclosure > summary::after {
  content: "›";
  margin-inline-start: auto;
  font-size: 18px;
  color: var(--color-stone);
  transition: transform 150ms ease-out;
}
.deploy-disclosure[open] > summary::after { transform: rotate(90deg); }
.deploy-disclosure > summary i { width: 16px; height: 16px; color: var(--color-primary); }
.deploy-disclosure-hint { font-weight: 400; }
.deploy-disclosure-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid var(--color-app-border);
}
.deploy-overrides > summary {
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
}
.deploy-overrides > summary::-webkit-details-marker { display: none; }
.deploy-overrides > summary::before {
  content: "▸";
  display: inline-block;
  margin-inline-end: 6px;
  transition: transform 150ms ease-out;
}
.deploy-overrides[open] > summary::before { transform: rotate(90deg); }

.deploy-disclosure-body input.is-invalid,
.deploy-disclosure-body select.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(212, 76, 71, 0.18);
}

/* ── Copyable command blocks (أوامر مايكروتيك) ────────────────────────
   A router command is copied, not read for pleasure: the block leads
   with what it does and why, and puts the copy button where the eye
   lands before the code. Monospace, LTR and selectable — the commands
   are Latin even on an Arabic page. */
.codebox {
  border: 1px solid var(--color-app-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--color-app-panel);
}
.codebox-primary { border-color: var(--color-primary); }
.codebox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  background: var(--color-app-bg);
  border-bottom: 1px solid var(--color-app-border);
}
.codebox-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.codebox-head p {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-slate);
  max-width: 68ch;
}
.codebox-head .btn { flex: none; }
/* The copied state lives on the button rather than a toast: the pointer
   is already there, and a toast in the corner is a second place to look. */
.codebox-head .btn.is-copied {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #FFFFFF;
}
.codebox-body {
  margin: 0;
  padding: 14px 16px;
  font: 12.5px/1.85 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-charcoal);
  background: var(--color-app-panel);
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}
:root[data-theme="dark"] .codebox-body { color: #D6E2DC; }

.mt-hosts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.mt-host {
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
}
:root[data-theme="dark"] .mt-host { color: var(--color-ink); }
.mt-section-title {
  margin: 22px 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
}

/* The editor's fields sit where the read-only text sat, so the page
   reads the same whether it is being written or looked at. */
.mt-title, .mt-note {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
  color: var(--color-ink);
}
.mt-title { font-size: 14px; font-weight: 700; }
.mt-note  { font-size: 12.5px; color: var(--color-slate); margin-top: 2px; }
.mt-title:hover, .mt-note:hover { border-color: var(--color-app-border); }
.mt-title:focus, .mt-note:focus {
  outline: 0;
  border-color: var(--color-primary);
  background: var(--color-app-panel);
}
.mt-row-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.mt-req {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-slate); cursor: pointer; user-select: none;
}
.mt-req input { accent-color: var(--color-primary); }
.mt-del { color: var(--color-error); background: transparent; border: 1px solid transparent; }
.mt-del:hover { background: var(--color-status-blocked-bg); border-color: #FECACA; }
/* A textarea that looks like the block it replaces: same face, same
   padding, no browser chrome that would make it read as a form field. */
textarea.mt-body {
  width: 100%;
  border: 0;
  resize: vertical;
  min-height: 92px;
  white-space: pre;
  overflow-wrap: normal;
}
textarea.mt-body:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.mt-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px;
}


/* =========================================================
   احصائيات مرئية — small-multiples income cards.
   ========================================================= */
/* auto-fill, not auto-fit: a single subscriber should occupy one card's
   width, not stretch to the full row. */
.spark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.spark-grid.is-busy { opacity: 0.5; pointer-events: none; transition: opacity 120ms; }
.spark-grid-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.spark-card {
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 12px;
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;                     /* let long names ellipsis, not stretch the grid */
  transition: border-color 120ms, box-shadow 120ms;
}
.spark-card {
  /* The whole card opens the full-scale view, so it has to look like it
     does something. */
  cursor: pointer;
}
.spark-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px -6px rgba(15, 15, 15, 0.12);
}
.spark-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; min-width: 0;
}
.spark-titles { min-width: 0; }
.spark-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  color: var(--color-ink);
  /* Subscriber names run long and a card is narrow; one line, clipped,
     with the full name on hover. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spark-sub { font-size: 11px; color: var(--color-stone); }
.spark-value {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Short enough that a grid of them fits on one screen, tall enough that
   a trend is still a shape and not a flat smear. */
.spark-canvas-wrap { position: relative; width: 100%; height: 74px; }
.spark-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

.spark-drill {
  appearance: none;
  background: none; border: 0;
  padding: 4px 0 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 500;
  color: var(--color-slate);
  cursor: pointer;
  align-self: flex-start;
  transition: color 120ms;
}
.spark-drill:hover { color: var(--color-primary); }
.spark-drill i, .spark-drill svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .spark-grid, .spark-grid-sm { grid-template-columns: 1fr; }
}


/* Date-range picker on the visual-statistics header. */
.visual-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: flex-end;
}
.date-range {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border);
  border-radius: 10px;
}
.date-range-label { font-size: 12px; color: var(--color-slate); }
.date-input {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-app-border);
  border-radius: 7px;
  padding: 4px 8px;
  outline: none;
}
.date-input:focus { border-color: var(--color-primary); }
.btn-sm { padding: 5px 12px; font-size: 12.5px; }

@media (max-width: 900px) {
  .visual-controls { width: 100%; justify-content: flex-start; }
  .date-range { flex-wrap: wrap; }
}

/* ---------- payout WhatsApp notices (manager form) ---------- */
.wa-notify {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
  padding: 16px;
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  background: var(--color-app-panel);
}
.wa-notify-head { display: flex; align-items: flex-start; gap: 10px; }
.wa-notify-head > svg, .wa-notify-head > i { color: #25d366; flex-shrink: 0; margin-top: 2px; }
.wa-notify-head > div { display: flex; flex-direction: column; gap: 2px; }
.wa-notify-head .hint { font-size: 12px; color: var(--color-stone); }
.wa-target { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-target-opt { position: relative; cursor: pointer; }
.wa-target-opt input { position: absolute; opacity: 0; pointer-events: none; }
.wa-target-opt span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px;
  border: 1px solid var(--color-hairline);
  transition: background-color .15s, border-color .15s, color .15s;
}
.wa-target-opt span svg { width: 15px; height: 15px; }
.wa-target-opt input:checked + span {
  border-color: #25d366; background: rgba(37, 211, 102, 0.12); color: #128c4b; font-weight: 500;
}
.wa-target-opt input:focus-visible + span { outline: 2px solid #25d366; outline-offset: 2px; }
.wa-group-fields { display: flex; flex-direction: column; gap: 14px; }
.wa-group-fields[hidden] { display: none; }
.wa-group-pick { display: flex; gap: 8px; align-items: stretch; }
.wa-group-pick select { flex: 1; }
/* Searchable group picker — the real <select> stays in the form, hidden. */
.wa-group-pick select.wa-combo-native {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; flex: none;
}
.wa-combo { position: relative; flex: 1; min-width: 0; }
.wa-combo-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 42px;
  padding: 0 12px; border: 1px solid var(--color-app-border); border-radius: 10px;
  background: var(--color-app-panel); color: var(--color-ink); font: inherit; font-size: 14px;
  cursor: pointer; text-align: start; transition: border-color .15s, box-shadow .15s;
}
.wa-combo-btn:hover { border-color: #25d366; }
.wa-combo-btn:focus-visible, .wa-combo-btn[aria-expanded="true"] {
  outline: none; border-color: #25d366; box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}
.wa-combo-icon { width: 16px; height: 16px; color: #25d366; flex-shrink: 0; }
.wa-combo-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-combo-label.is-placeholder { color: var(--color-stone); }
.wa-combo-caret { width: 16px; height: 16px; color: var(--color-stone); flex-shrink: 0; transition: transform .2s; }
.wa-combo-btn[aria-expanded="true"] .wa-combo-caret { transform: rotate(180deg); }
.wa-combo-panel {
  position: fixed; z-index: 2000; display: flex; flex-direction: column;
  border: 1px solid var(--color-app-border); border-radius: 12px;
  background: var(--color-app-panel); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  overflow: hidden; animation: wa-combo-in .12s ease-out;
}
.wa-combo-panel[hidden] { display: none; }
@keyframes wa-combo-in { from { opacity: 0; transform: translateY(-4px); } }
.wa-combo-search {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--color-app-border);
}
.wa-combo-search svg, .wa-combo-search i { width: 16px; height: 16px; color: var(--color-stone); flex-shrink: 0; }
.wa-combo-search input {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--color-app-border);
  border-radius: 8px; background: var(--color-app-bg); color: var(--color-ink); font: inherit; font-size: 14px;
}
.wa-combo-search input:focus { outline: none; border-color: #25d366; }
.wa-combo-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; max-height: 280px; }
.wa-combo-list li {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px;
  font-size: 14px; color: var(--color-ink); cursor: pointer;
}
.wa-combo-list li .wa-combo-check { width: 15px; height: 15px; margin-inline-start: auto; color: #128c4b; visibility: hidden; }
.wa-combo-list li[aria-selected="true"] { background: rgba(37, 211, 102, 0.12); color: #128c4b; font-weight: 600; }
.wa-combo-list li[aria-selected="true"] .wa-combo-check { visibility: visible; }
.wa-combo-list li.is-active { background: var(--color-app-bg); }
.wa-combo-list li[aria-selected="true"].is-active { background: rgba(37, 211, 102, 0.18); }
.wa-combo-list li mark { background: rgba(37, 211, 102, 0.25); color: inherit; border-radius: 3px; padding: 0 1px; }
.wa-combo-list li.is-missing { color: var(--color-stone); font-style: italic; }
.wa-combo-empty { padding: 18px 12px; text-align: center; font-size: 13px; color: var(--color-stone); }
.fld .hint.error { color: var(--color-error); }

/* =========================================================
   Clickable table rows (tr.row-link) — the whole row opens a page
   ========================================================= */
.dt tr.row-link { cursor: pointer; transition: background-color .12s ease; }
.dt tr.row-link:hover td { background: var(--color-app-hover); }
.dt tr.row-link:focus-within td { background: var(--color-app-hover); }
.row-link-anchor { color: inherit; text-decoration: none; }
.row-link-anchor:hover { color: var(--color-primary); }
.row-link-chevron { width: 32px; color: var(--color-stone); }
.row-link-chevron i, .row-link-chevron svg { width: 16px; height: 16px; display: block; }
.dt tr.row-link:hover .row-link-chevron { color: var(--color-primary); }

/* =========================================================
   Subscriber profile (/managers/{id})
   ========================================================= */
.profile-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 16px;
  font-size: 13px; font-weight: 600; color: var(--color-slate); text-decoration: none;
}
.profile-back:hover { color: var(--color-primary); }
.profile-back i, .profile-back svg { width: 16px; height: 16px; }
.profile { display: flex; flex-direction: column; gap: 16px; }

.profile-head { padding: 22px 24px; display: flex; flex-direction: column; gap: 20px; }
.profile-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.profile-avatar {
  width: 64px; height: 64px; font-size: 22px; flex: none;
  border-radius: 18px;
}
.profile-id-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.profile-name {
  margin: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--color-ink);
  overflow-wrap: anywhere;
}
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-facts {
  margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 28px;
  padding-top: 18px; border-top: 1px solid var(--color-app-border);
}
.profile-facts div, .profile-list div { min-width: 0; }
.profile-facts dt, .profile-list dt { font-size: 12px; color: var(--color-stone); font-weight: 500; margin-bottom: 4px; }
.profile-facts dd, .profile-list dd { margin: 0; font-size: 14px; color: var(--color-ink); font-weight: 500; overflow-wrap: anywhere; }
[dir="rtl"] .profile-facts dd[dir="ltr"], [dir="rtl"] .profile-list dd[dir="ltr"] { text-align: right; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile-list { margin: 0; padding: 6px 20px 16px; }
.profile-list div {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0;
}
.profile-list div + div { border-top: 1px solid var(--color-app-border); }
.profile-list dt { margin: 0; font-size: 13px; color: var(--color-slate); }
.profile-list dd { text-align: end; }

.profile-actions {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
  padding: 6px 20px 20px;
}
.profile-action {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; text-align: start;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border); border-radius: 12px;
  font-family: var(--font-body); color: var(--color-ink);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.profile-action:hover { border-color: var(--color-primary); background: var(--color-app-hover); }
.profile-action:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.profile-action-icon {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.profile-action-icon i, .profile-action-icon svg { width: 18px; height: 18px; }
.profile-action-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profile-action-title { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.profile-action-sub { font-size: 12px; color: var(--color-stone); }

.profile-danger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px;
  border-color: color-mix(in srgb, var(--color-error) 35%, var(--color-app-border));
}
.profile-danger-text { display: flex; flex-direction: column; gap: 3px; }

@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .profile-head { padding: 18px 16px; }
  .profile-actions { padding: 6px 12px 14px; grid-template-columns: 1fr; }
  .profile-list { padding: 4px 14px 12px; }
}

/* ---- Subscriber profile: tabs ---- */
.profile-meta { font-size: 12px; color: var(--color-stone); align-self: center; }
.profile-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 4px; width: fit-content; max-width: 100%;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border); border-radius: 12px;
}
.profile-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: none; border-radius: 9px;
  background: transparent; color: var(--color-slate);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.profile-tab i, .profile-tab svg { width: 16px; height: 16px; }
.profile-tab:hover { color: var(--color-ink); background: var(--color-app-hover); }
.profile-tab.is-active { background: var(--color-primary); color: #fff; }
.profile-tab-count {
  min-width: 20px; padding: 1px 6px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 700; text-align: center;
  background: var(--color-app-hover); color: var(--color-slate);
}
.profile-tab.is-active .profile-tab-count { background: rgba(255,255,255,.22); color: #fff; }
.profile-pane { display: flex; flex-direction: column; gap: 16px; }
.profile-pane[hidden] { display: none; }

/* ---- Subscriber profile: the in-place form ---- */
.profile-form { display: flex; flex-direction: column; gap: 16px; }
/* Four separate cards, two by two. */
.profile-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.profile-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.profile-stack > .panel, .profile-cards > .panel { margin: 0; }
/* The other column: an empty card, outlined, as tall as the stack. */
.profile-placeholder { min-height: 200px; }
.profile-form-section { padding: 20px 24px; }
/* The WhatsApp block brings its own box; inside a card it is the card. */
.profile-form-section .wa-notify { border: none; background: none; padding: 0; margin: 0; box-shadow: none; }
.profile-wallet-card .profile-list { padding-top: 6px; }
.profile-form-title { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--color-ink); }
.profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }

.profile-fields .fld { margin-bottom: 10px; }
.profile-field-wide { grid-column: 1 / -1; }
.profile-form-foot {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--color-app-panel);
  box-shadow: 0 -6px 16px rgba(15, 15, 15, 0.04);
}
.profile-form-dirty { margin-inline-end: auto; font-size: 12.5px; font-weight: 600; color: var(--color-warning); }
.profile-form-foot .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Subscriber profile: the Jawwal card's header button ---- */
.panel-head .btn-sm { display: inline-flex; align-items: center; gap: 6px; }
.panel-head .btn-sm i, .panel-head .btn-sm svg { width: 15px; height: 15px; }

/* ---- Subscriber profile: stores tab ---- */
.profile-stores-state {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 140px; font-size: 13px;
}
.profile-stores .store-status { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.profile-stores .row-link-chevron { font-size: 18px; line-height: 1; }

@media (max-width: 1100px) {
  .profile-cards { grid-template-columns: 1fr; }
  .profile-placeholder { display: none; }
  .profile-insights { order: -1; }
}
@media (max-width: 640px) {
  .profile-fields { grid-template-columns: 1fr; }
  .profile-form-section { padding: 16px; }
  .profile-form-foot { padding: 12px 16px; }
  .profile-tabs { width: 100%; }
  .profile-tab { flex: 1; justify-content: center; }
}
.profile-stores-state .text-error { color: var(--color-error); }

/* ---- Subscriber profile: two forms in one stack ---- */
/* #profile-form lends its cards to the stack (they are flex items of it,
   ordered with the wallet card), so it draws no box of its own. */
.profile-stack > #profile-form { display: contents; }
.profile-jawwal-form { padding: 16px 20px 0; }
.profile-jawwal-form .grid-form-2 { gap: 0 16px; }
.profile-jawwal-form.is-loading { opacity: .55; pointer-events: none; }
.profile-jawwal-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 6px -20px 0; padding: 14px 20px;
  border-top: 1px solid var(--color-app-border);
}
.profile-jawwal-foot[hidden] { display: none; }
/* Wallet maintenance: token renewal and unlink, side by side as outlined buttons. */
.profile-token-btn, .profile-unlink-btn {
  flex: none; width: 150px; justify-content: center;
  height: 36px; padding: 0 14px; border-radius: 9px;
  font-size: 13px; font-weight: 600; background: transparent;
}
.profile-token-btn i, .profile-token-btn svg,
.profile-unlink-btn i, .profile-unlink-btn svg { width: 16px; height: 16px; }
.profile-token-btn { color: var(--color-primary); border: 1px solid var(--color-app-border); }
.profile-token-btn:hover { border-color: var(--color-primary); background: var(--color-app-hover); }
.profile-unlink-btn { color: var(--color-error); border: 1px solid rgba(212, 76, 71, 0.35); }
.profile-unlink-btn:hover { background: rgba(212, 76, 71, 0.08); border-color: var(--color-error); }
.profile-wallet-card .panel-head { align-items: center; }
.profile-jawwal-form .fld { margin-bottom: 14px; }
.profile-jawwal-note { margin-inline-start: auto; font-size: 12px; color: var(--color-stone); }

/* =========================================================
   Subscriber profile — no explanatory copy. The help lines under the
   fields stay in the modals; here the fields speak for themselves. Live
   feedback still shows: an applied partner account, a token refresh
   result (both colour themselves when they report), a group-list error.
   ========================================================= */
.profile .hint { display: none; }
.profile [data-partner-profile-status][style*="color"],
.profile [data-wa-group-status].error { display: block; margin-top: 6px; }

/* ---- WhatsApp payout notices, as a profile card ---- */
.profile .wa-notify { gap: 18px; }
.profile .wa-notify-head { align-items: center; gap: 12px; }
.profile .wa-notify-head > svg, .profile .wa-notify-head > i {
  width: 36px; height: 36px; padding: 8px; margin: 0;
  border-radius: 10px; background: rgba(37, 211, 102, 0.12); color: #128c4b;
}
.profile .wa-notify-head strong { font-size: 15px; font-weight: 700; color: var(--color-ink); }
.profile .wa-notify .fld { margin: 0; }
.profile .wa-notify .fld > label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--color-slate); }
/* Send-to: one segmented control across the card. */
.profile .wa-target {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  padding: 4px; border-radius: 12px;
  background: var(--color-app-bg); border: 1px solid var(--color-app-border);
}
.profile .wa-target-opt span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 10px; border: none; border-radius: 9px;
  background: transparent; color: var(--color-slate);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.profile .wa-target-opt span svg { width: 16px; height: 16px; }
.profile .wa-target-opt:hover span { color: var(--color-ink); }
.profile .wa-target-opt input:checked + span {
  background: var(--color-app-panel); color: #128c4b;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.08), inset 0 0 0 1px rgba(37, 211, 102, 0.45);
}
/* The group fields, when the target includes a group. */
.profile .wa-group-fields {
  padding: 16px; gap: 14px; border-radius: 12px;
  background: var(--color-app-bg); border: 1px dashed var(--color-app-border);
}
.profile-inv .text-error { color: var(--color-error); }
.profile-inv-more { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--color-app-border); }
.profile-inv-more[hidden] { display: none; }
.profile-inv .flex-col .pill { margin-top: 4px; align-self: flex-start; }
.profile-inv .flex-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

/* ---- Profile inventory tables: alignment + summary ---- */
/* Numbers are .num (direction: ltr); in an RTL table they must sit on the
   same edge as their header, not drift to the other side of the cell. */
[dir="rtl"] .profile-inv .dt td.num,
[dir="rtl"] .profile-inv .dt td .num { text-align: right; }
.profile-inv .dt th, .profile-inv .dt td { white-space: nowrap; vertical-align: middle; }
.profile-inv .dt td .store-status { display: inline-flex; gap: 6px; }
.profile-inv .dt th[hidden], .profile-inv .dt td[hidden] { display: none; }
.inv-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px 20px; border-bottom: 1px solid var(--color-app-border);
}
.inv-summary[hidden] { display: none; }
.inv-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  background: var(--color-app-bg); border: 1px solid var(--color-app-border);
  font-size: 12.5px; color: var(--color-slate);
}
.inv-chip strong { font-size: 15px; font-weight: 700; color: var(--color-ink); }
.inv-chip.is-good strong { color: var(--color-primary); }
.inv-chip.is-bad strong { color: var(--color-error); }
.inv-chip-note { font-size: 12px; color: var(--color-stone); }
[dir="rtl"] .profile-inv .dt td[dir="ltr"] { text-align: right; }

/* ---- Subscriber profile: tabs + actions toolbar ----
   One outlined bar: tabs at the start, actions at the end, same row. */
.profile-toolbar-wrap { container-type: inline-size; }
.profile-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px;
  background: var(--color-app-panel);
  border: 1px solid var(--color-app-border); border-radius: 14px;
}
.profile-toolbar .profile-tabs {
  flex: none; flex-wrap: nowrap; padding: 0;
  background: transparent; border: none; border-radius: 0;
}
.profile-toolbar .profile-tab { white-space: nowrap; }
.profile-actionbar { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.profile-actionbar-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 12px;
  border-radius: 9px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.profile-actionbar-btn i, .profile-actionbar-btn svg { width: 16px; height: 16px; flex: none; color: var(--color-primary); }
.profile-actionbar-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Desktop: actions are icon buttons on every tab (label in the tooltip),
   sharing the row with the tabs. Measured on the bar itself, so the
   sidebar state does not matter. */
@container (min-width: 901px) {
  .profile-actionbar-btn { width: 38px; padding: 0; justify-content: center; }
  .profile-actionbar-btn span { display: none; }
}
/* Account status button: shows the action it takes — red "disable" while
   the account is active, green "enable" while it is disabled. */
.profile-actionbar-btn.profile-status-btn.is-on {
  color: var(--color-error); border-color: rgba(212, 76, 71, 0.35); background: rgba(212, 76, 71, 0.06);
}
.profile-actionbar-btn.profile-status-btn.is-on i, .profile-actionbar-btn.profile-status-btn.is-on svg { color: var(--color-error); }
.profile-actionbar-btn.profile-status-btn.is-on:hover { border-color: var(--color-error); background: rgba(212, 76, 71, 0.12); color: var(--color-error); }
.profile-actionbar-btn.profile-status-btn.is-off {
  color: #fff; border-color: var(--color-primary); background: var(--color-primary);
}
.profile-actionbar-btn.profile-status-btn.is-off i, .profile-actionbar-btn.profile-status-btn.is-off svg { color: #fff; }
.profile-actionbar-btn.profile-status-btn.is-off:hover { background: var(--color-primary-pressed); color: #fff; }

/* Styled tooltip for the icon-only actions (replaces the browser's title box). */
.profile-actionbar-btn[data-tip] { position: relative; }
.profile-actionbar-btn[data-tip]::after,
.profile-actionbar-btn[data-tip]::before {
  display: none; position: absolute; left: 50%; z-index: 30;
  pointer-events: none; opacity: 0; transition: opacity .12s ease, transform .12s ease;
}
.profile-actionbar-btn[data-tip]::after {
  content: attr(data-tip);
  top: calc(100% + 9px); transform: translate(-50%, -3px);
  padding: 6px 10px; border-radius: 8px;
  background: #1f2328; color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.profile-actionbar-btn[data-tip]::before {
  content: ""; top: calc(100% + 4px); transform: translate(-50%, -3px);
  border: 5px solid transparent; border-top: 0; border-bottom-color: #1f2328;
}
/* The leftmost button anchors its bubble to its own edge, so it stays on screen. */
.profile-actionbar-btn[data-tip]:last-child::after { left: 0; transform: translate(0, -3px); }
.profile-actionbar-btn[data-tip]:hover::after, .profile-actionbar-btn[data-tip]:hover::before,
.profile-actionbar-btn[data-tip]:focus-visible::after, .profile-actionbar-btn[data-tip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
.profile-actionbar-btn[data-tip]:last-child:hover::after,
.profile-actionbar-btn[data-tip]:last-child:focus-visible::after { transform: translate(0, 0); }
@container (min-width: 901px) {
  .profile-actionbar-btn[data-tip]::after, .profile-actionbar-btn[data-tip]::before { display: block; }
}
/* Tablet: tabs on top, actions under them with their labels, inside the same bar. */
@container (max-width: 900px) {
  .profile-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .profile-actionbar {
    flex-wrap: wrap; justify-content: flex-start;
    padding-top: 8px; border-top: 1px solid var(--color-app-border);
  }
  .profile-actionbar-btn { width: auto; padding: 0 12px; }
  .profile-actionbar-btn span { display: inline; }
  .profile-actionbar-btn[data-tip]::after, .profile-actionbar-btn[data-tip]::before { display: none; }
}
/* Phone: tabs scroll sideways in one line; actions as a 3-up grid. */
@media (max-width: 640px) {
  .profile-toolbar .profile-tabs {
    width: 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .profile-toolbar .profile-tabs::-webkit-scrollbar { display: none; }
  .profile-toolbar .profile-tab { flex: 1 0 auto; justify-content: center; gap: 6px; padding: 8px 8px; font-size: 12.5px; white-space: nowrap; }
  .profile-toolbar .profile-tab > i, .profile-toolbar .profile-tab > svg { display: none; }
  .profile-actionbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .profile-actionbar-btn {
    flex-direction: column; justify-content: center; gap: 5px;
    height: auto; min-height: 64px; padding: 8px 6px;
    font-size: 11.5px; line-height: 1.3; white-space: normal; text-align: center;
  }
  .profile-actionbar-btn i, .profile-actionbar-btn svg { width: 18px; height: 18px; }
}

/* =========================================================
   Every option checkbox is a toggle switch. Painted on the input itself
   (appearance:none, knob as a background), so no markup changes and the
   form value, keyboard and labels behave as before. Row-selection boxes
   in tables and the existing .switch component are left alone.
   ========================================================= */
input[type="checkbox"]:not(.switch input):not(.dt-check input):not(td input) {
  -webkit-appearance: none; appearance: none;
  flex: none; width: 38px; height: 22px; margin: 0;
  border-radius: 999px; border: none;
  background-color: var(--color-stone);
  background-image: radial-gradient(circle, #fff 0 8px, transparent 8.5px);
  background-size: 22px 22px; background-repeat: no-repeat;
  background-position: left center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  cursor: pointer; vertical-align: middle;
  transition: background-color .18s ease, background-position .18s ease;
}
[dir="rtl"] input[type="checkbox"]:not(.switch input):not(.dt-check input):not(td input) { background-position: right center; }
input[type="checkbox"]:not(.switch input):not(.dt-check input):not(td input):checked {
  background-color: var(--color-primary); background-position: right center;
}
[dir="rtl"] input[type="checkbox"]:not(.switch input):not(.dt-check input):not(td input):checked { background-position: left center; }
input[type="checkbox"]:not(.switch input):not(.dt-check input):not(td input):focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}
input[type="checkbox"]:not(.switch input):not(.dt-check input):not(td input):disabled { opacity: .5; cursor: not-allowed; }

/* =========================================================
   Confirm dialog — centred icon, title, one line of copy, the subject,
   and two equal buttons. data-tone="danger|success" colours it.
   ========================================================= */
.confirm-dialog { --tone: var(--color-error); --tone-soft: rgba(212, 76, 71, 0.12); }
.confirm-dialog[data-tone="success"] { --tone: var(--color-primary); --tone-soft: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.confirm-dialog .confirm-dialog-panel {
  position: relative; max-width: 400px; padding: 28px 24px 22px;
  text-align: center; border-radius: 18px;
}
.confirm-dialog-close { position: absolute; top: 12px; inset-inline-end: 12px; color: var(--color-stone); }
.confirm-dialog-icon {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--tone-soft); color: var(--tone);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--tone-soft) 45%, transparent);
}
.confirm-dialog-icon > span { display: none; }
.confirm-dialog[data-tone="danger"]  [data-tone-icon="danger"],
.confirm-dialog[data-tone="success"] [data-tone-icon="success"] { display: grid; }
.confirm-dialog-icon i, .confirm-dialog-icon svg { width: 28px; height: 28px; }
.confirm-dialog-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--color-ink); }
.confirm-dialog-text { margin: 0 auto; max-width: 300px; font-size: 13.5px; line-height: 1.6; color: var(--color-slate); }
.confirm-dialog-subject {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 20px;
  padding: 10px 12px; text-align: start;
  background: var(--color-app-bg); border: 1px solid var(--color-app-border); border-radius: 12px;
}
.confirm-dialog-avatar {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 700;
}
.confirm-dialog-who { display: flex; flex-direction: column; min-width: 0; }
.confirm-dialog-who strong { font-size: 13.5px; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirm-dialog-who span { font-size: 12px; color: var(--color-stone); text-align: start; }
[dir="rtl"] .confirm-dialog-who span[dir="ltr"] { text-align: right; }
.confirm-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-dialog-actions .btn { height: 42px; border-radius: 10px; font-weight: 600; }
.confirm-dialog-actions [data-action^="submit-"] { background: var(--tone); color: #fff; border-color: var(--tone); }
.confirm-dialog-actions [data-action^="submit-"]:hover { filter: brightness(0.95); }

/* Change password, in the confirm-dialog language */
.confirm-dialog .change-password-form { margin: 0; padding: 0; text-align: start; }
.confirm-dialog .change-password-form .confirm-dialog-subject { margin-bottom: 14px; }
.confirm-dialog-avatar i, .confirm-dialog-avatar svg { width: 18px; height: 18px; }
.confirm-dialog .pw-field { margin: 0 0 18px; }
.confirm-dialog .pw-field label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--color-slate); }
.pw-input { position: relative; }
.pw-input > i, .pw-input > svg {
  position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--color-stone); pointer-events: none;
}
.confirm-dialog .pw-input input { width: 100%; height: 44px; padding: 0 38px; border-radius: 10px; font-size: 14px; letter-spacing: .02em; }
[dir="rtl"] .pw-input input { text-align: right; }
.pw-input input::placeholder { color: var(--color-stone); letter-spacing: 0; }
.confirm-dialog .otp-result { margin: -4px 0 18px; }

/* ---- Subscriber profile: previous / next pager in the identity card ---- */
.profile-head { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.profile-pager { display: flex; align-items: center; gap: 10px; flex: none; }
.profile-pager-btn {
  position: relative;
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 16px; border: 1px solid var(--color-app-border);
  background: var(--color-app-panel); color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.profile-pager-btn i, .profile-pager-btn svg { width: 28px; height: 28px; stroke-width: 2.5; }
a.profile-pager-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
a.profile-pager-btn:active { transform: scale(.96); }
a.profile-pager-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.profile-pager-btn.is-disabled { opacity: .35; cursor: not-allowed; }
.profile-pager-count { min-width: 56px; text-align: center; font-size: 13px; font-weight: 700; color: var(--color-slate); }
/* Tooltip with the neighbour's name */
.profile-pager-btn[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translate(-50%, -3px); opacity: 0; pointer-events: none; z-index: 30;
  padding: 6px 10px; border-radius: 8px; background: #1f2328; color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap; transition: opacity .12s ease, transform .12s ease;
}
.profile-pager-btn[data-tip]:hover::after, .profile-pager-btn[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.profile-pager > :last-child[data-tip]::after { left: 0; transform: translate(0, -3px); }
.profile-pager > :last-child[data-tip]:hover::after { transform: translate(0, 0); }
@media (max-width: 640px) {
  .profile-pager { width: 100%; justify-content: space-between; }
  .profile-pager-btn { width: 48px; height: 48px; border-radius: 14px; }
  .profile-pager-btn[data-tip]::after { display: none; }
}
.profile-pager > :first-child[data-tip]::after { left: auto; right: 0; transform: translate(0, -3px); }
.profile-pager > :first-child[data-tip]:hover::after { transform: translate(0, 0); }
.profile-pager-count b { color: var(--color-ink); font-size: 15px; }

/* ---- Customers: search-first page ---- */
.cust-search { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; margin-bottom: 16px; }
.cust-search-box { width: 100%; }
.cust-search-box input { font-size: 15px; }
.cust-start {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 56px 24px;
}
.cust-start-icon {
  width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 8px;
  border-radius: 50%; color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.cust-start-icon.is-warn { color: var(--color-error); background: rgba(212, 76, 71, 0.12); }
.cust-start-icon i, .cust-start-icon svg { width: 32px; height: 32px; }
.cust-start h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-ink); }
.cust-start p { margin: 0; max-width: 460px; font-size: 13.5px; line-height: 1.7; color: var(--color-slate); }
.cust-partial {
  margin-bottom: 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--color-status-pending-bg); color: var(--color-status-pending-fg);
  font-size: 13px;
}
.cust-partial summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.cust-partial summary::-webkit-details-marker { display: none; }
.cust-partial summary i, .cust-partial summary svg { width: 16px; height: 16px; flex: none; }
.cust-partial ul { margin: 8px 0 0; padding-inline-start: 24px; font-size: 12px; opacity: .85; }
[data-search-results].is-searching { opacity: .5; pointer-events: none; }
@media (max-width: 640px) {
  .cust-search { padding: 14px; }
}

/* =========================================================
   Resellers (إدارة الموزعين)
   ========================================================= */
.stat-dot.neutral { background: var(--color-stone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-stone) 25%, transparent); }
.reseller-form-foot {
  display: flex; justify-content: flex-end; margin: 8px -24px -4px; padding: 14px 24px 0;
  border-top: 1px solid var(--color-app-border);
}
.reseller-domain-status {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--color-app-border);
  background: var(--color-app-bg);
}
.reseller-domain-status > i, .reseller-domain-status > svg { width: 22px; height: 22px; flex: none; }
.reseller-domain-status div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reseller-domain-status strong { font-size: 14px; color: var(--color-ink); }
.reseller-domain-status span { font-size: 12px; color: var(--color-stone); }
.reseller-domain-status.is-ok   { border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.reseller-domain-status.is-ok > i, .reseller-domain-status.is-ok > svg { color: var(--color-primary); }
.reseller-domain-status.is-wait { border-color: rgba(217, 119, 6, 0.35); background: rgba(245, 158, 11, 0.08); }
.reseller-domain-status.is-wait > i, .reseller-domain-status.is-wait > svg { color: #d97706; }
.reseller-payment-title { display: flex; align-items: center; gap: 10px; }
.reseller-payment-form { max-width: 760px; }
.reseller-payment-form .fld { margin-bottom: 14px; }
.reseller-payment-form .grid-form-2 { gap: 0 16px; }
.reseller-payment-sub { margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--color-app-border); font-size: 14px; font-weight: 700; color: var(--color-ink); }
.reseller-payment-form .reseller-form-foot { gap: 8px; margin-top: 16px; }
.reseller-payment-result { margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; font-size: 13px;
  border: 1px solid rgba(217, 119, 6, 0.35); background: rgba(245, 158, 11, 0.08); color: var(--color-slate); }
.reseller-payment-result ul { margin: 6px 0; padding-inline-start: 20px; }
.wallet-managed { display: flex; gap: 12px; align-items: flex-start; padding: 16px; margin: 16px 20px 20px;
  border-radius: 12px; border: 1px dashed var(--color-app-border); background: var(--color-app-bg); }
.wallet-managed > i, .wallet-managed > svg { width: 22px; height: 22px; flex: none; color: var(--color-primary); }
.wallet-managed div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.wallet-managed strong { font-size: 14px; color: var(--color-ink); }
.wallet-managed > div > span { font-size: 13px; color: var(--color-stone); }
.reseller-domain-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.reseller-domain-form .fld { flex: 1 1 240px; margin: 0; }
.reseller-domain-actions { display: flex; gap: 8px; }
.reseller-dns { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-app-border); }
.reseller-dns h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--color-ink); }
.reseller-dns p { margin: 0 0 10px; font-size: 13px; color: var(--color-slate); }
.reseller-dns-table { margin-bottom: 10px; border: 1px solid var(--color-app-border); border-radius: 10px; overflow: hidden; }
.reseller-statement-note { margin: 0 0 12px; font-size: 13px; color: var(--color-slate); }
.reseller-statement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reseller-stat { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.reseller-stat-title { font-size: 13px; font-weight: 700; color: var(--color-slate); }
.reseller-stat-share { font-size: 26px; font-weight: 800; color: var(--color-primary); text-align: start; }
[dir="rtl"] .reseller-stat-share { text-align: right; }
.reseller-stat-cap { font-size: 12px; color: var(--color-stone); margin-bottom: 10px; }
.reseller-stat dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; padding-top: 10px; border-top: 1px dashed var(--color-app-border); font-size: 13px; }
.reseller-stat dt { color: var(--color-slate); }
.reseller-stat dd { margin: 0; font-weight: 700; color: var(--color-ink); }
@media (max-width: 900px) { .reseller-statement-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .reseller-form-foot { margin: 8px -16px -4px; padding: 12px 16px 0; } .reseller-domain-actions { width: 100%; } .reseller-domain-actions .btn { flex: 1; } }
.reseller-tag {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content;
  padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary);
  text-decoration: none;
}
.reseller-tag i, .reseller-tag svg { width: 12px; height: 12px; }
a.reseller-tag:hover { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }

.dt td .flex-col > .pill { width: fit-content; }
.role-pill.role-reseller { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); }
textarea.no-resize { resize: none; }
.reseller-login-title { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-app-border); }
.reseller-login-note { margin: -4px 0 12px; font-size: 12.5px; color: var(--color-stone); }
.stats-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 16px; color: var(--color-stone); font-size: 13px; }
.kpi-value .kpi-spinner { display: inline-block; vertical-align: middle; }

/* =========================================================
   Subscriber profile — add a brand / import cards for them
   ========================================================= */
.profile-inv .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inv-modal-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inv-modal-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); }
.inv-modal-icon svg, .inv-modal-icon i { width: 20px; height: 20px; }
.inv-modal-sub { margin: 2px 0 0; font-size: 12px; color: var(--color-stone); }
.inv-modal-sub:empty { display: none; }
.inv-form .fld { margin-bottom: 14px; }
.inv-form .grid-form-2 { gap: 0 16px; }
.inv-money { position: relative; }
.inv-money input { padding-right: 34px; }
.inv-money span { position: absolute; top: 50%; transform: translateY(-50%); right: 12px; color: var(--color-stone); font-size: 13px; pointer-events: none; }
.inv-unit { display: flex; gap: 8px; }
.inv-unit input { flex: 1; min-width: 0; }
.inv-unit select { width: 96px; flex: none; }
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-chip-btn { padding: 6px 12px; border-radius: 9px; font-size: 12.5px; border: 1px solid var(--color-app-border);
  background: transparent; color: var(--color-slate); cursor: pointer; }
.inv-chip-btn:hover { border-color: var(--color-primary); }
.inv-chip-btn.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.inv-badge-text { margin-top: 10px; }
.inv-section { border: 1px solid var(--color-app-border); border-radius: 14px; padding: 12px 16px 2px; margin: 0 0 14px; }
.inv-section legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--color-ink); }
.inv-section legend span { font-weight: 400; font-size: 11.5px; color: var(--color-stone); margin-inline-start: 6px; }
.inv-active-row { align-items: flex-start; border: 1px solid var(--color-app-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.inv-active-row strong { display: block; font-size: 13.5px; color: var(--color-ink); }
.inv-active-row small { display: block; margin-top: 2px; font-size: 12px; color: var(--color-stone); font-weight: 400; }
.inv-error { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: rgba(212, 76, 71, 0.08); color: var(--color-error); }
.inv-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; text-align: center;
  border: 2px dashed var(--color-app-border); border-radius: 16px; transition: border-color .15s, background .15s; }
.inv-drop.is-drag { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.inv-drop-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 6px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); }
.inv-drop-icon svg, .inv-drop-icon i { width: 24px; height: 24px; }
.inv-drop strong { font-size: 14px; color: var(--color-ink); }
.inv-drop small { font-size: 11.5px; color: var(--color-stone); margin-top: 6px; }
.inv-link { background: none; border: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--color-primary); cursor: pointer; }
.inv-link:hover { text-decoration: underline; }
.inv-link.is-danger { color: var(--color-error); font-size: 12px; }
.inv-formats { display: flex; gap: 6px; margin-top: 8px; }
.inv-formats span { padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 600; background: var(--color-app-bg); color: var(--color-slate); }
.inv-files { margin-bottom: 14px; }
.inv-files-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--color-slate); margin-bottom: 6px; }
.inv-files ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inv-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-app-border); border-radius: 12px; }
.inv-file-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: rgba(16, 185, 129, 0.1); color: #10b981; }
.inv-file-icon svg, .inv-file-icon i { width: 17px; height: 17px; }
.inv-file-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.inv-file-name { font-size: 13px; font-weight: 600; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-file-state { font-size: 11.5px; color: var(--color-stone); display: flex; align-items: center; gap: 6px; }
.inv-file-state:empty { display: none; }
.inv-file-state.is-done { color: #059669; font-weight: 600; }
.inv-file-state.is-error { color: var(--color-error); font-weight: 600; }
.inv-file-state .kpi-spinner { width: 12px; height: 12px; }
.inv-previewing { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-stone); margin: 8px 0 0; }
.inv-previewing .kpi-spinner { width: 12px; height: 12px; }
.profile-privs { display: flex; flex-direction: column; gap: 10px; }

/* Reseller domain tab — test address + live DNS check */
.reseller-test-live { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.reseller-test-live a { font-weight: 700; color: var(--color-primary-deep, var(--color-primary)); font-size: 14px; }
.reseller-test-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.reseller-test-input { flex: 1 1 320px; display: flex; align-items: center; border: 1px solid var(--color-app-border);
  border-radius: 10px; background: var(--color-app-surface, #fff); overflow: hidden; }
.reseller-test-input span { padding: 0 10px; color: var(--color-stone); font-size: 13px; white-space: nowrap; background: var(--color-app-bg); align-self: stretch; display: flex; align-items: center; }
.reseller-test-input input { flex: 1; min-width: 80px; border: 0; outline: 0; padding: 10px; font-size: 14px; background: transparent; box-shadow: none; }
.reseller-dns-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.reseller-dns-head h3 { margin: 0; }
.reseller-dns-results { display: flex; flex-direction: column; gap: 6px; }
.dns-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-app-border); font-size: 13px; }
.dns-row.is-ok { border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); }
.dns-row.is-bad { border-color: rgba(212, 76, 71, 0.35); }
.dns-row.is-ref { background: var(--color-app-bg); }
.dns-host { font-weight: 600; color: var(--color-ink); word-break: break-all; }
.dns-ips { color: var(--color-slate); word-break: break-all; }
.reseller-dns-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(245, 158, 11, 0.08); color: var(--color-slate); font-size: 12.5px; }
.reseller-dns-note svg, .reseller-dns-note i { width: 16px; height: 16px; flex: none; color: #d97706; margin-top: 1px; }
@media (max-width: 640px) { .dns-row { grid-template-columns: 1fr; } }

/* Reseller panel tab */
.reseller-enforce { flex: none; margin: 0; }
.panel-key-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 4px 0 0; font-size: 13px; }
.panel-key-meta dt { color: var(--color-stone); }
.panel-key-meta dd { margin: 0; color: var(--color-ink); font-weight: 600; }
.panel-key-once { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid rgba(217, 119, 6, 0.4); background: rgba(245, 158, 11, 0.08); }
.panel-key-once[hidden] { display: none; }
.panel-key-once strong { color: #b45309; font-size: 14px; }
.panel-key-once span { font-size: 12.5px; color: var(--color-slate); }
.panel-key-once pre { width: 100%; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--color-app-surface, #fff);
  border: 1px solid var(--color-app-border); font-size: 12.5px; white-space: pre-wrap; word-break: break-all; text-align: left; }

/* ---- Subscriber profile: wallet balances + activity charts ---- */
.profile-insights { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; align-self: start; }
.ins-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ins-wallet { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: 16px;
  border: 1px solid var(--color-app-border); background: var(--color-app-bg); min-width: 0; }
.ins-wallet.is-main { background: linear-gradient(135deg, #0f766e 0%, #0f9b8e 100%); border-color: transparent; color: #fff; }
.ins-wallet-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-slate); }
.ins-wallet.is-main .ins-wallet-label { color: rgba(255,255,255,.85); }
.ins-wallet-label svg, .ins-wallet-label i { width: 16px; height: 16px; }
.ins-wallet-value { font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--color-ink); direction: ltr; text-align: right; min-height: 36px; }
[dir="ltr"] .ins-wallet-value { text-align: left; }
.ins-wallet.is-main .ins-wallet-value { color: #fff; }
.ins-wallet.is-main .kpi-spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.ins-wallet-sub { font-size: 11.5px; color: var(--color-stone); }
.ins-wallet.is-main .ins-wallet-sub { color: rgba(255,255,255,.75); }
.ins-wallet-sub.is-error { color: var(--color-error); }
.ins-wallet.is-main .ins-wallet-sub.is-error { color: #fecaca; }
.ins-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ins-rail { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.ins-rail svg, .ins-rail i { width: 14px; height: 14px; }
.ins-rail.is-jawwal { background: rgba(16, 185, 129, .12); color: #047857; }
.ins-rail.is-sadad { background: rgba(99, 102, 241, .12); color: #4338ca; }
.ins-acct { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--color-app-bg); color: var(--color-slate); border: 1px solid var(--color-app-border); }
.ins-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--color-app-border); }
.ins-head .profile-form-title { margin: 10px 0 0; }
.ins-periods { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--color-app-bg); border: 1px solid var(--color-app-border); margin-top: 10px; }
.ins-periods button { font-family: inherit; border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--color-slate); cursor: pointer; }
.ins-periods button.is-active { background: var(--color-app-panel, #fff); color: var(--color-ink); box-shadow: 0 1px 3px rgba(15,15,15,.1); }
.ins-chart { border: 1px solid var(--color-app-border); border-radius: 14px; padding: 14px 14px 10px; }
.ins-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ins-chart-head span { font-size: 13.5px; font-weight: 700; color: var(--color-ink); }
.ins-chart-head strong { font-size: 16px; font-weight: 800; color: var(--color-ink); direction: ltr; }
.ins-canvas { position: relative; height: 190px; }
.ins-chart-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--color-stone); background: var(--color-app-panel, #fff); }
.ins-chart-state[hidden] { display: none; }
@media (max-width: 640px) {
  .ins-wallets { grid-template-columns: 1fr; }
  .ins-wallet-value { font-size: 26px; }
  .profile-insights { padding: 18px 16px; }
}

.ins-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ins-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--color-app-border); min-width: 0; }
.ins-stat span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--color-slate); }
.ins-stat strong { font-size: 20px; font-weight: 800; color: var(--color-ink); direction: ltr; text-align: right; min-height: 26px; }
[dir="ltr"] .ins-stat strong { text-align: left; }
.ins-stat .kpi-spinner { width: 16px; height: 16px; }
.ins-stat.is-profit { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between;
  background: rgba(245, 158, 11, .08); border-color: rgba(217, 119, 6, .3); }
.ins-stat.is-profit span { color: #b45309; font-size: 13.5px; font-weight: 700; }
.ins-stat.is-profit span svg, .ins-stat.is-profit span i { width: 16px; height: 16px; }
.ins-stat.is-profit strong { font-size: 22px; color: #b45309; }

/* Delete subscriber dialog: what goes and what stays */
.delete-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 18px; text-align: start; }
.delete-scope-col { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--color-app-border); }
.delete-scope-col.is-gone { background: rgba(212, 76, 71, .06); border-color: rgba(212, 76, 71, .25); }
.delete-scope-col.is-kept { background: rgba(16, 185, 129, .06); border-color: rgba(16, 185, 129, .25); }
.delete-scope-head { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.delete-scope-col.is-gone .delete-scope-head { color: var(--color-error); }
.delete-scope-col.is-kept .delete-scope-head { color: #047857; }
.delete-scope-head svg, .delete-scope-head i { width: 15px; height: 15px; }
.delete-scope ul { margin: 0; padding-inline-start: 18px; font-size: 12.5px; color: var(--color-slate); display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 480px) { .delete-scope { grid-template-columns: 1fr; } }

/* Reseller's own storefront server */
.sf-server .reseller-dns-head h3 { display: flex; align-items: center; gap: 8px; }
.sf-server .reseller-domain-actions { flex-wrap: wrap; flex-basis: 100%; }
@media (max-width: 640px) { .sf-server .reseller-domain-actions .btn { flex: 1 1 calc(50% - 4px); } }
.sf-server-result { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.6; }
.sf-server-result.is-ok { background: #ecfdf5; color: #047857; }
.sf-server-result.is-bad { background: #fef2f2; color: #b91c1c; }

/* Reseller payment: the subscribers' current setup */
.pay-setup { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--color-app-border); border-radius: 10px; font-size: 13px; }
.pay-setup > strong { display: block; margin-bottom: 8px; color: var(--color-ink); }
.pay-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pay-setup-item { display: flex; flex-direction: column; gap: 4px; }
.pay-setup-k { color: var(--color-slate); font-size: 12px; }
.pay-setup-v { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-chip { padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); font-weight: 600; font-size: 12px; }
.pay-chip.is-off { background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; }
.hint.hint-warn { color: #b45309; }

/* «نقل» modal (reseller CMS) */
.xfer-fields { display: grid; gap: 12px; margin: 14px 0 6px; text-align: start; }
.xfer-fields .fld { margin: 0; }
.xfer-fields select { width: 100%; }
.xfer-scope { margin-top: 10px; }

/* a menu action that does not apply (e.g. re-linking an inactive store) */
.menu button:disabled { opacity: .45; cursor: not-allowed; }

/* Reseller «الكشف»: the wallet */
.rw-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 20px 22px; margin-bottom: 16px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #0f766e, #14b8a6); }
.rw-hero.is-due { background: linear-gradient(135deg, #b45309, #f59e0b); }
.rw-hero-main { display: flex; flex-direction: column; gap: 6px; }
.rw-hero-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: .9; }
.rw-hero-label i { width: 16px; height: 16px; }
.rw-hero-amount { font-size: 34px; font-weight: 800; line-height: 1.1; }
.rw-hero-sub { font-size: 13px; opacity: .95; }
.rw-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rw-tag { padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.18); font-size: 12px; font-weight: 600; }
.rw-hero .btn-primary { background: #fff; color: #0f766e; border-color: #fff; }
.rw-hero.is-due .btn-primary { color: #b45309; }
.rw-break { padding: 14px 18px; margin-bottom: 16px; }
.rw-break dl { display: grid; grid-template-columns: repeat(3, auto 1fr); gap: 8px 14px; margin: 0; font-size: 13px; }
.rw-break dt { color: var(--color-slate); }
.rw-break dd { margin: 0; font-weight: 700; color: var(--color-ink); }
@media (max-width: 900px) { .rw-break dl { grid-template-columns: auto 1fr; } }
.rw-table { margin-top: 16px; }
.rw-empty { padding: 4px 18px 16px; }

/* الإعدادات › المحفظة في لوحة المشتركين */
.wallet-app-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--color-app-border); border-radius: 10px; cursor: pointer; }
.wallet-app-opt:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.wallet-app-opt input { margin-top: 3px; }
.wallet-app-opt > span { display: flex; flex-direction: column; gap: 3px; }

/* «محفظة شركاء مال كاردز» — the third wallet on a personal account's profile */
.ins-wallets.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ins-wallets.has-3 .ins-wallet-value { font-size: 24px; }
.ins-wallet.is-partner { background: color-mix(in srgb, #4f46e5 6%, var(--color-app-bg)); border-color: color-mix(in srgb, #4f46e5 25%, transparent); }
.ins-wallet.is-partner .ins-wallet-label { color: #4338ca; }
@media (max-width: 1100px) { .ins-wallets.has-3 { grid-template-columns: 1fr 1fr; } .ins-wallets.has-3 .is-partner { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ins-wallets.has-3 { grid-template-columns: 1fr; } }

/* «تسوية المبلغ» on the «محفظة شركاء مال كاردز» card */
.ins-wallet .ins-wallet-action { margin-top: 8px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.ins-wallet .ins-wallet-action svg { width: 15px; height: 15px; }
.ins-wallet .ins-wallet-action[hidden] { display: none; }
.profile-fields .reseller-pricing-note { grid-column: 1 / -1; margin: -4px 0 4px; }

/* «الصلاحيات» on a subscriber's profile */
.mgr-privs { padding: 20px 22px; }
.mgr-privs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.mgr-privs-note { margin: 4px 0 0; font-size: 12.5px; color: var(--color-stone); max-width: 720px; }
.mgr-privs-all { font-weight: 700; padding: 8px 12px; border: 1px solid var(--color-app-border); border-radius: 10px; }
.mgr-privs-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mgr-privs-groups.is-disabled { opacity: .55; }
.mgr-privs-group { border: 1px solid var(--color-app-border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; min-width: 0; }
.mgr-privs-group legend { padding: 0 4px; font-weight: 700; font-size: 13.5px; }
.mgr-privs-keys { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 13px; }
.mgr-privs-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.mgr-privs-count { font-size: 12.5px; color: var(--color-stone); }

/* =========================================================
   متابعة العملاء (reseller stock watch)
   ========================================================= */
.sw-head-actions { display: flex; align-items: center; gap: 10px; }
.sw-head-actions .btn i { width: 15px; height: 15px; }
.sw-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1100px) { .sw-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .sw-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sw-tile {
  display: flex; align-items: center; gap: 12px; text-align: start;
  background: var(--color-app-panel); border: 1px solid var(--color-app-border);
  border-radius: 14px; padding: 14px 16px; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.sw-tile:hover { border-color: var(--sw); }
.sw-tile.is-on { border-color: var(--sw); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sw) 22%, transparent); }
.sw-tile-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sw) 14%, transparent); color: var(--sw);
}
.sw-tile-icon i { width: 20px; height: 20px; }
.sw-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-tile-label { font-size: 12.5px; color: var(--color-slate); font-weight: 500; }
.sw-tile-value { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--color-ink); line-height: 1.1; }
.sw-tile-value small { font-size: 14px; color: var(--color-stone); font-weight: 600; }
.sw-all      { --sw: var(--color-primary); }
.sw-out      { --sw: var(--color-error); }
.sw-critical { --sw: #E8590C; }
.sw-low      { --sw: var(--color-warning); }
.sw-soon     { --sw: var(--color-link-blue); }
.sw-toolbar { margin-bottom: 14px; }
.sw-search {
  display: flex; align-items: center; gap: 8px; max-width: 460px;
  background: var(--color-app-panel); border: 1px solid var(--color-app-border);
  border-radius: 10px; padding: 0 12px;
}
.sw-search i { width: 16px; height: 16px; color: var(--color-stone); }
.sw-search input { flex: 1; border: 0; background: transparent; padding: 10px 0; font: inherit; color: var(--color-ink); outline: none; }
.sw-list { display: grid; gap: 14px; }
.sw-card { border-inline-start: 4px solid var(--sw, var(--color-primary)); overflow: hidden; }
.sw-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--color-app-border);
}
.sw-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sw-who h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sw-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700;
}
.sw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sw-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.sw-actions .btn i { width: 15px; height: 15px; }
.sw-rows { list-style: none; margin: 0; padding: 4px 0; }
.sw-row {
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 14px;
  padding: 10px 18px;
}
.sw-row + .sw-row { border-top: 1px dashed var(--color-app-border); }
.sw-row[hidden] { display: none; }
.sw-row-icon {
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sw) 14%, transparent); color: var(--sw);
}
.sw-row-icon i { width: 17px; height: 17px; }
.sw-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-row-main strong { font-size: 14px; color: var(--color-ink); }
.sw-row-main .text-sm i { width: 12px; height: 12px; vertical-align: -2px; }
.sw-row-side { display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.sw-count { font-family: var(--font-heading); font-size: 24px; font-weight: 800; color: var(--sw); line-height: 1; }
.sw-count-label { font-size: 11px; color: var(--color-stone); margin-top: 3px; }
.sw-row-eta { align-items: flex-end; min-width: 120px; gap: 4px; }
.sw-badge {
  font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--sw) 14%, transparent); color: var(--sw);
}
.sw-row-add {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--color-app-border);
  color: var(--color-primary); background: transparent;
}
.sw-row-add:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); border-color: var(--color-primary); }
.sw-row-add i { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .sw-row { grid-template-columns: auto 1fr auto; }
  .sw-row-eta { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 8px; }
  .sw-row-add { grid-column: 3; justify-self: center; }
}
.sw-empty { text-align: center; }
.sw-empty-icon {
  width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-status-active-bg); color: var(--color-status-active-fg);
}
.sw-empty-icon i { width: 26px; height: 26px; }
.sw-empty h2 { font-size: 17px; margin-bottom: 6px; }

/* =========================================================
   «إدارة المبيعات» — sales / reservations search (/sales).
   ========================================================= */
.ss-form { padding: 16px; margin-bottom: 18px; }
.ss-bar { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.ss-q {
  flex: 1 1 320px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border: 1.5px solid var(--color-app-border); border-radius: 12px; background: var(--color-app-panel);
  transition: border-color 120ms, box-shadow 120ms;
}
.ss-q:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.ss-q i, .ss-q svg { width: 18px; height: 18px; color: var(--color-stone); flex: none; }
.ss-q input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; padding: 12px 0; color: var(--color-ink); min-width: 0; }
.ss-go, .ss-more-btn { min-height: 46px; }
.ss-more-btn.is-on { border-color: var(--color-primary); color: var(--color-primary); }
.ss-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--color-on-primary);
}
.ss-adv { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--color-app-border); display: flex; flex-direction: column; gap: 14px; }
.ss-adv[hidden] { display: none; }
.ss-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ss-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-pair input { min-width: 0; }
.ss-time { border: 1px solid var(--color-app-border); border-radius: 12px; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ss-time legend { font-size: 13px; font-weight: 600; color: var(--color-charcoal); padding: 0 6px; }
.ss-time-body { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.ss-time-body[hidden] { display: none; }
.ss-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--color-app-hover); align-self: flex-start; }
.ss-seg button {
  appearance: none; border: 0; background: none; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--color-slate);
}
.ss-seg button.is-on { background: var(--color-app-panel); color: var(--color-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.ss-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chip {
  appearance: none; border: 1px solid var(--color-app-border); background: var(--color-app-panel); cursor: pointer;
  padding: 4px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--color-slate);
}
.ss-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ss-adv-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-error { margin: 12px 0 0; color: var(--color-error); font-size: 13px; }

.ss-idle { display: flex; justify-content: center; padding: 48px 0; }
.ss-idle[hidden] { display: none; }
.ss-idle-icon {
  width: 84px; height: 84px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary);
}
.ss-idle-icon i, .ss-idle-icon svg { width: 36px; height: 36px; }
.ss-loading { display: flex; justify-content: center; padding: 40px 0; }
.ss-loading[hidden] { display: none; }

.ss-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ss-tab {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--color-app-border); background: var(--color-app-panel);
  font: inherit; font-size: 14px; color: var(--color-slate);
}
.ss-tab[hidden] { display: none; }
.ss-tab i, .ss-tab svg { width: 16px; height: 16px; }
.ss-tab b { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--color-app-hover); color: var(--color-ink); }
.ss-tab.is-on { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.ss-tab.is-on b { background: var(--color-primary); color: var(--color-on-primary); }
.ss-list { display: flex; flex-direction: column; gap: 10px; }
.ss-list[hidden] { display: none; }

.ss-card { padding: 14px 16px; }
.ss-card-head { display: flex; gap: 14px; align-items: flex-start; }
.ss-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ss-inv { font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; color: var(--color-ink); }
.ss-copy { width: 26px; height: 26px; }
.ss-copy i, .ss-copy svg { width: 14px; height: 14px; }
.ss-meta { font-size: 13px; color: var(--color-slate); }
.ss-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.ss-meta i, .ss-meta svg { width: 14px; height: 14px; color: var(--color-stone); }
.ss-who { display: inline-flex; align-items: center; gap: 5px; }
.ss-tag {
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--color-app-hover); color: var(--color-slate);
}
.ss-tag-blue  { background: color-mix(in srgb, #2563EB 12%, transparent); color: #2563EB; }
.ss-tag-green { background: var(--color-status-active-bg); color: var(--color-status-active-fg); }
.ss-tag-warn  { background: var(--color-status-pending-bg); color: var(--color-status-pending-fg); }
.ss-pivot {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--color-link, var(--color-primary)); text-decoration: underline dotted; text-underline-offset: 3px;
}
.ss-pivot:hover { text-decoration-style: solid; }
.ss-matched { font-size: 12px; color: var(--color-stone); }
.ss-matched b { color: var(--color-primary); font-weight: 600; }
.ss-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.ss-amount .num { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--color-ink); }
.ss-amount small { font-size: 12px; color: var(--color-stone); }
.ss-details { margin-top: 10px; border-top: 1px dashed var(--color-app-border); padding-top: 8px; }
.ss-details summary { cursor: pointer; font-size: 13px; color: var(--color-primary); }
.ss-items, .ss-cards { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ss-items li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; font-size: 13px; }
.ss-cards { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.ss-cards li { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.ss-none { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 28px; color: var(--color-stone); }
.ss-none i, .ss-none svg { width: 18px; height: 18px; }
.ss-more { text-align: center; font-size: 13px; color: var(--color-stone); margin: 6px 0 0; }

@media (max-width: 1100px) { .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ss-grid { grid-template-columns: 1fr; }
  .ss-go, .ss-more-btn { flex: 1; }
  .ss-card-head { flex-direction: column; }
  .ss-amount { align-items: flex-start; }
}

/* =========================================================
   «المحاسبة» — reseller ↔ subscriber account (profile tab).
   ========================================================= */
.lg { display: flex; flex-direction: column; gap: 16px; }
.lg-head { padding: 18px; display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 18px; align-items: stretch; }
.lg-balance {
  --lg: var(--color-primary);
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 18px; border-radius: 14px;
  background: color-mix(in srgb, var(--lg) 10%, transparent); border: 1px solid color-mix(in srgb, var(--lg) 25%, transparent);
}
.lg-balance.is-owed  { --lg: #E8590C; }
.lg-balance.is-ahead { --lg: #2563EB; }
.lg-balance-label { font-size: 13px; font-weight: 600; color: var(--lg); }
.lg-balance-value { font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--color-ink); line-height: 1.1; }
.lg-balance-sub { font-size: 12px; color: var(--color-stone); min-height: 1em; }
.lg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lg-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--color-app-border); }
.lg-stats span { font-size: 12px; color: var(--color-stone); }
.lg-stats b { font-size: 17px; color: var(--color-ink); }
.lg-stat-warn.is-on { border-color: color-mix(in srgb, var(--color-error) 40%, transparent); }
.lg-stat-warn.is-on b { color: var(--color-error); }
.lg-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }

.lg-statement { padding: 0; overflow: hidden; }
.lg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--color-app-border); }
.lg-bar h2 { margin: 0; font-size: 16px; }
.lg-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lg-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chip.is-on { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.lg-period input[type="date"] {
  padding: 6px 8px; border: 1px solid var(--color-app-border); border-radius: 8px; background: var(--color-app-panel);
  color: var(--color-ink); font: inherit; font-size: 13px;
}
.lg-table td, .lg-table th { vertical-align: middle; }
.lg-table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-date { white-space: nowrap; color: var(--color-slate); }
.lg-kind { display: block; font-size: 12px; color: var(--color-stone); }
.lg-no { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; color: var(--color-ink); white-space: nowrap; }
.lg-desc { font-size: 13px; min-width: 220px; }
.lg-desc .pill { font-size: 11px; }
.lg-debit { color: #B45309; }
.lg-credit { color: #15803D; }
.lg-bal { font-weight: 700; color: var(--color-ink); }
.lg-acts { white-space: nowrap; text-align: end; }
.lg-acts .btn-icon { width: 30px; height: 30px; }
.lg-acts i, .lg-acts svg { width: 15px; height: 15px; }
.lg-row.is-void td { opacity: .55; }
.lg-row.is-void .lg-debit, .lg-row.is-void .lg-credit { text-decoration: line-through; }
.lg-row.is-void .lg-acts { opacity: 1; }
.lg-sub td { background: var(--color-app-hover); font-weight: 600; font-size: 13px; }
.lg-foot td { border-top: 2px solid var(--color-app-border); }
.lg-wait { text-align: center; padding: 28px !important; color: var(--color-stone); }

.lg-lines { display: flex; flex-direction: column; gap: 6px; }
.lg-line { display: grid; grid-template-columns: minmax(0, 3fr) 80px 110px 90px 34px; gap: 8px; align-items: center; }
.lg-line input {
  width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--color-app-border); border-radius: 8px;
  background: var(--color-app-panel); color: var(--color-ink); font: inherit; font-size: 13px;
}
.lg-line-head { font-size: 12px; color: var(--color-stone); }
.lg-line [data-k="total"] { text-align: end; font-weight: 600; }
.lg-lines > .btn { align-self: flex-start; margin-top: 4px; }
.lg-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--color-app-hover); }
.lg-total b { font-size: 18px; }
.lg-form { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 900px) {
  .lg-head { grid-template-columns: 1fr; }
  .lg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lg-line { grid-template-columns: 1fr 70px 90px; }
  .lg-line-head { display: none; }
  .lg-line [data-k="description"] { grid-column: 1 / -1; }
  .lg-line [data-k="total"] { grid-column: 1 / 3; }
}

/* Period chips: rectangles with rounded corners, all one width; and the
   «المحاسبة» action buttons all one width. */
.ss-chip {
  border-radius: 8px; min-width: 96px; height: 34px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.lg-presets { display: grid; grid-template-columns: repeat(4, minmax(96px, 1fr)); gap: 6px; }
.lg-period input[type="date"], .lg-period .btn { height: 34px; }
.lg-period .btn { min-width: 96px; justify-content: center; }
.lg-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 10px; }
.lg-actions .btn { width: 100%; justify-content: center; }
@media (max-width: 640px) {
  .lg-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-actions { grid-template-columns: 1fr; }
}

/* «فاتورة جديدة» lines: the same height as the window's other fields, with
   room between rows so neighbouring inputs never touch. */
[data-lg-lines] { display: flex; flex-direction: column; gap: 10px; }
.lg-lines { gap: 10px; }
.lg-line { grid-template-columns: minmax(0, 3fr) 90px 120px 90px 40px; gap: 10px; }
.lg-line input { height: 42px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.lg-line input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.lg-line [data-k="total"] { line-height: 42px; }
.lg-line [data-lg-delline] { width: 40px; height: 40px; }
.lg-line [data-lg-delline] i, .lg-line [data-lg-delline] svg { width: 18px; height: 18px; }
.lg-line-head { padding-bottom: 2px; }
@media (max-width: 640px) {
  .lg-line { grid-template-columns: 1fr 80px 100px; padding-bottom: 10px; border-bottom: 1px dashed var(--color-app-border); }
}

/* CMS dialogs (uiConfirm / uiPrompt / uiAlert in app.js) — the confirm-dialog
   look, as their own layer above every .modal. */
.ui-dialog[hidden] { display: none !important; }
.ui-dialog {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: mc-fade-in 160ms ease-out;
}
.ui-dialog[data-tone="info"] { --tone: var(--color-primary); --tone-soft: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.ui-dialog[data-tone="info"] [data-tone-icon="info"] { display: grid; }
.ui-dialog .confirm-dialog-text { white-space: pre-line; max-width: 340px; }
.ui-dialog .confirm-dialog-actions { margin-top: 20px; }
.ui-dialog[data-kind="alert"] .confirm-dialog-actions { grid-template-columns: 1fr; }
.ui-dialog .confirm-dialog-actions [data-ui-ok] { background: var(--tone); color: #fff; border-color: var(--tone); }
.ui-dialog .confirm-dialog-actions [data-ui-ok]:hover { filter: brightness(0.95); }
.ui-dialog .ui-dialog-field { margin: 16px 0 0; }
.ui-dialog .ui-dialog-field input { width: 100%; height: 44px; border-radius: 10px; text-align: center; font-size: 15px; }

/* Search and filters over «فئات الكروت» / «دفعات الكروت». */
.inv-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--color-app-border); }
.inv-filter[hidden] { display: none; }
.inv-filter-q {
  flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border: 1px solid var(--color-app-border); border-radius: 10px; background: var(--color-app-panel);
}
.inv-filter-q:focus-within { border-color: var(--color-primary); }
.inv-filter-q i, .inv-filter-q svg { width: 16px; height: 16px; color: var(--color-stone); flex: none; }
.inv-filter-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--color-ink); }
.inv-filter select, .inv-filter input[type="date"] {
  height: 38px; padding: 0 10px; border: 1px solid var(--color-app-border); border-radius: 10px;
  background: var(--color-app-panel); color: var(--color-ink); font: inherit; font-size: 13px; min-width: 130px;
}
.inv-filter select[hidden] { display: none; }
.inv-filter .btn { height: 38px; }
.inv-filter-count { font-size: 12px; color: var(--color-stone); white-space: nowrap; }
@media (max-width: 640px) { .inv-filter select, .inv-filter input[type="date"] { flex: 1 1 45%; min-width: 0; } }

/* «راديوس» card on the subscriber profile (.profile hides .hint). */
.profile-radius-card .radius-note { font-size: 12px; color: var(--color-stone); margin: 4px 0 10px; }
.profile-radius-card .radius-note:empty { display: none; }