/* SocialPulse — design tokens follow the validated data-viz palette.
   Light and dark are both selected sets, not an automatic inversion. */

/* ===== Tajawal — خط العناوين، مخزّن محلياً عشان يشتغل أوفلاين مع التطبيق.
   مقسوم عربي/لاتيني بـ unicode-range عشان الأرقام والإنجليزي يطلعوا من الملف الصح. ===== */
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/tajawal-arabic-500.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0660-0669,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/tajawal-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/tajawal-arabic-700.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0660-0669,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/tajawal-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/tajawal-arabic-800.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0660-0669,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/tajawal-latin-800.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD;}

:root {
  --plane:        #f4f4f7;
  --surface:      #ffffff;
  --surface-2:    #f1f1f5;
  --surface-3:    #ebeaf1;
  --ink:          #15141a;
  --ink-2:        #56555f;
  --muted:        #8e8d98;
  --grid:         #e4e3ea;
  --axis:         #c6c5d0;
  --border:       rgba(23, 22, 34, .09);
  --border-2:     rgba(23, 22, 34, .055);
  --shadow:       0 1px 2px rgba(23,22,34,.04), 0 6px 20px -6px rgba(23,22,34,.10);

  /* Brand purple, taken from the MASH mark and validated against the
     data-viz gates (lightness band, chroma, CVD separation, contrast). */
  --brand:    #9d25cd;
  --brand-2:  #c251f1;
  --brand-soft: rgba(157, 37, 205, .10);
  --series-1: #9d25cd;  /* brand purple */
  --series-2: #eb6834;  /* orange       */
  --series-3: #1baf7a;  /* aqua         */
  --series-4: #eda100;  /* yellow       */

  --good:     #0ca30c;
  --warning:  #eab308;
  --serious:  #e0702f;
  --critical: #e0443f;
  --good-ink: #077a07;

  --radius: 16px;
  --radius-sm: 10px;
  --font: "Almarai", system-ui, -apple-system, "Segoe UI", "Noto Kufi Arabic", sans-serif;
  --font-head: "Cairo", "Almarai", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* الوضع الداكن مطابق لتصور إعادة التصميم (palette أغمق وأغنى). */
    --plane:     #0a0a11;
    --surface:   #13131d;
    --surface-2: #181824;
    --surface-3: #1d1d2c;
    --ink:       #eceaf4;
    --ink-2:     #a6a6bc;
    --muted:     #6e6e84;
    --grid:      #232330;
    --axis:      #2f2f3c;
    --border:    #232330;
    --border-2:  #1b1b27;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 12px 30px -8px rgba(0,0,0,.6);
    --brand:     #c251f1;
    --brand-2:   #d47bf5;
    --brand-soft: rgba(157, 37, 205, .18);
    --series-1:  #c251f1;
    --series-2:  #eb6834;
    --series-3:  #34d399;
    --series-4:  #60a5fa;
    --good:      #34d399;
    --good-ink:  #34d399;
    --warning:   #fbbf24;
    --serious:   #fbbf24;
    --critical:  #f87171;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --plane:     #0a0a11;
  --surface:   #13131d;
  --surface-2: #181824;
  --surface-3: #1d1d2c;
  --ink:       #eceaf4;
  --ink-2:     #a6a6bc;
  --muted:     #6e6e84;
  --grid:      #232330;
  --axis:      #2f2f3c;
  --border:    #232330;
  --border-2:  #1b1b27;
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 12px 30px -8px rgba(0,0,0,.6);
  --brand:     #c251f1;
  --brand-2:   #d47bf5;
  --brand-soft: rgba(157, 37, 205, .18);
  --series-1:  #c251f1;
  --series-2:  #eb6834;
  --series-3:  #34d399;
  --series-4:  #60a5fa;
  --good:      #34d399;
  --good-ink:  #34d399;
  --warning:   #fbbf24;
  --serious:   #fbbf24;
  --critical:  #f87171;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plane);
  background-image: radial-gradient(circle at 12% -4%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 46%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* العناوين بخط Tajawal المودرن */
h1, h2, h3, .page-head h1, .card__head h2, .card__head h3,
.stat__value, .brand, .empty h3, .auth__brand h1, .section-title {
  font-family: var(--font-head);
}
.section-title {
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .04em; margin: 32px 2px 14px; text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.secondary { color: var(--ink-2); }
.tabular { font-variant-numeric: tabular-nums; }
.ts { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* ------------------------------------------------------------ top bar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner {
  max-width: 1240px; margin: 0 auto; padding: 0 20px; height: 60px;
  display: flex; align-items: center; gap: 24px;
}
.brand { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.brand__logo { width: 26px; height: 26px; flex: none; display: block; }
.brand__text { white-space: nowrap; }
.brand__text small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); letter-spacing: .02em; margin-top: -3px; }
.nav { display: flex; gap: 4px; margin-inline-start: auto; }
.nav a {
  padding: 7px 14px; border-radius: var(--radius-sm); color: var(--ink-2);
  font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 15px;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 14px;
}
.menu__body {
  position: absolute; inset-inline-start: auto; inset-inline-end: 0; top: 48px;
  min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: grid; gap: 2px;
}
.menu__head { padding: 8px 10px 10px; display: grid; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu__head span { font-size: 12px; }
.menu__body a, .menu__body button {
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 14px; text-align: start;
  border: 0; background: none; color: var(--ink); cursor: pointer; font-family: inherit; width: 100%;
}
.menu__body a:hover, .menu__body button:hover { background: var(--surface-2); }

/* ------------------------------------------------------------ layout */
.page { max-width: 1240px; margin: 0 auto; padding: 28px 20px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; margin: 0 0 2px; letter-spacing: -.01em; }
.page-head p { margin: 0; color: var(--muted); font-size: 14px; }

.grid { display: grid; gap: 16px; }
/* A grid track is `minmax(auto, 1fr)`, and that `auto` floor is the item's
   min-content width — so one long word, a wide table or a chart canvas can
   push a column past the screen and, on RTL, silently push its far edge off
   to the left. Releasing the floor lets the scroll containers inside do
   their job instead. */
.grid > *, .list > * { min-width: 0; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card__head h2, .card__head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.card__sub { font-size: 12.5px; color: var(--muted); margin: -8px 0 14px; }

/* ------------------------------------------------------------ stat tiles */
.stat { display: grid; gap: 4px; position: relative; overflow: hidden; }
/* شريط لوني رفيع على الحافة بيدّي الكارت لمسة ومكان للتمييز باللون */
.stat::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 3px; background: var(--accent, var(--brand)); border-radius: 0 3px 3px 0;
}
.stat__label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.stat__value { font-size: 29px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.stat__meta { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.delta--up { color: var(--good-ink); font-weight: 600; }
.delta--down { color: var(--critical); font-weight: 600; }

/* ------------------------------------------------------------ status */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot--green { background: var(--good); }
.dot--amber { background: var(--warning); }
.dot--red   { background: var(--critical); }
/* watch-only: an account we mirror from, never late, so never a warm colour */
.dot--watch { background: var(--ink-3, #9aa0a6); }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.7;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border);
}
.pill--good     { background: color-mix(in srgb, var(--good) 14%, transparent);     color: var(--good-ink);  border-color: transparent; }
.pill--warning  { background: color-mix(in srgb, var(--warning) 22%, transparent);  color: #7a5200;          border-color: transparent; }
.pill--serious  { background: color-mix(in srgb, var(--serious) 22%, transparent);  color: #8a3d18;          border-color: transparent; }
.pill--critical { background: color-mix(in srgb, var(--critical) 15%, transparent); color: var(--critical);  border-color: transparent; }
.pill--info     { background: var(--surface-2); color: var(--ink-2); border-color: var(--border); }
:root[data-theme="dark"] .pill--warning { color: var(--warning); }
:root[data-theme="dark"] .pill--serious { color: var(--serious); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill--warning { color: var(--warning); }
  :root:not([data-theme="light"]) .pill--serious { color: var(--serious); }
}

/* ------------------------------------------------------------ diagnostics */
.card--alarm { border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.diag {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.diag__icon {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font-size: 12px; font-weight: 700; color: #fff;
}
.diag--ok   .diag__icon { background: var(--good); }
.diag--warn .diag__icon { background: var(--warning); color: #4a3200; }
.diag--fail .diag__icon { background: var(--critical); }
.diag--fail { border-color: color-mix(in srgb, var(--critical) 35%, transparent); }
.diag__body { flex: 1; min-width: 0; }
.diag__title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.diag__detail { font-size: 12.8px; color: var(--ink-2); line-height: 1.65; }
.diag__fix { font-size: 12.5px; color: var(--brand); margin-top: 6px; font-weight: 500; }
.diag__env {
  margin: 8px 0 0; padding: 9px 11px; background: var(--surface-2); border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  white-space: pre-wrap; overflow-x: auto; color: var(--ink); line-height: 1.7;
}

/* ------------------------------------------------------------ reach strip */
.reach {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 13.5px;
}
.reach--warn { background: color-mix(in srgb, var(--critical) 9%, var(--surface-2)); }
.reach__label { color: var(--muted); font-size: 12.5px; }

/* ------------------------------------------------------------ add bar */
.addbar { padding: 16px; border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); }
.addbar__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.addbar__head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.addbar__row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* ------------------------------------------------------------ owner chip */
.owner { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; white-space: nowrap; }
.avatar--sm { width: 24px; height: 24px; font-size: 11px; }

/* ------------------------------------------------------------ dialog */
.sheet {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  background: var(--surface); color: var(--ink); max-width: 460px; width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(11,11,11,.22);
}
.sheet::backdrop { background: rgba(11,11,11,.42); backdrop-filter: blur(2px); }

/* ------------------------------------------------------------ filter bar */
.filterbar { padding: 14px 16px; margin-bottom: 16px; }
.filterbar__row {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px;
}
.filterbar__field { display: grid; gap: 0; min-width: 175px; }
.filterbar__field--grow { flex: 1; min-width: 220px; }
.filterbar__field label { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.filterbar__platforms {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.filterbar__legend { font-size: 12px; color: var(--muted); margin-inline-end: 4px; }
.filterbar__platforms .chip {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit;
}
.filterbar__platforms .chip .badge-platform { transition: none; }
.filterbar__platforms .chip.is-active .badge-platform { box-shadow: 0 0 0 1.5px var(--plane); }

/* ------------------------------------------------------------ scroll boxes
   Long lists used to push everything below them off the screen — you had to
   scroll past all 28 pages to reach the next card. Each list now scrolls
   inside its own box, so the page stays the same height no matter how many
   rows are in it. --rows sets how many are visible.

   The height is FIXED, not a maximum: a card with three rows is exactly as tall
   as the same card with thirty. Cards that grow and shrink as data changes make
   the whole page jump around between refreshes. */
.scrollbox {
  --rows: 8;
  --row-h: 49px;
  height: calc(var(--rows) * var(--row-h));
  overflow-y: auto;
  overflow-x: hidden;               /* sideways scrolling is never wanted here */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--axis) transparent;
}
.scrollbox--list { --row-h: 68px; }
.scrollbox--sm { --rows: 5; }
/* Grid lists must not stretch their rows to fill the fixed height. */
.list.scrollbox { align-content: start; }

/* Phones are narrow enough that some tables genuinely cannot fit; there,
   sideways scrolling beats squashing the text to nothing. */
@media (max-width: 900px) {
  .table-wrap.scrollbox { overflow-x: auto; }
}
.scrollbox::-webkit-scrollbar { width: 9px; height: 9px; }
.scrollbox::-webkit-scrollbar-track { background: transparent; }
.scrollbox::-webkit-scrollbar-thumb {
  background: var(--grid); border-radius: 999px; border: 2px solid var(--surface);
}
.scrollbox::-webkit-scrollbar-thumb:hover { background: var(--axis); }

/* The header has to stay put, otherwise you scroll and lose which column is which. */
.scrollbox thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border);
}
.scrollbox table { border-collapse: separate; border-spacing: 0; }
.scrollbox tbody td { border-bottom: 1px solid var(--border); }

/* A quiet hint that there is more below. */
.scrollhint { font-size: 11.5px; color: var(--muted); padding-top: 8px; text-align: center; }

/* ------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; margin: 0 -18px -18px; padding: 0 4px 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: start; font-size: 11.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .02em; padding: 11px 12px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: 12px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
/* تظليل خفيف للصف التاني (zebra) يريّح العين على الجداول الطويلة */
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
/* التمييع على td (مش tr) عشان يغطّي الـzebra ويتوافق مع تمييز التحديد */
tbody tr:hover td { background: var(--brand-soft); }
td.num, th.num { text-align: start; font-variant-numeric: tabular-nums; }

.acct { display: flex; align-items: center; gap: 9px; min-width: 120px; }
/* Long page names wrap instead of forcing the table wider than its card. */
.acct__body { min-width: 0; overflow-wrap: anywhere; }
.cell-tight { font-size: 12.5px; line-height: 1.45; }

/* ------------------------------------------------------------ pictures
   The platform badge sits underneath as the fallback: if the picture 404s the
   badge is already there, so nothing collapses or shows a broken-image icon. */
.pic { position: relative; width: 34px; height: 34px; flex: none; }
.pic--sm { width: 26px; height: 26px; }
.pic--lg { width: 46px; height: 46px; }
.pic__img {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px;
  object-fit: cover; background: var(--surface-2); display: block;
}
.pic--round .pic__img, .pic--round .badge-platform, .pic--round .avatar { border-radius: 50%; }
.pic .badge-platform, .pic .avatar { width: 100%; height: 100%; font-size: 12px; }
.pic__flag {
  position: absolute; inset-block-end: -3px; inset-inline-end: -3px;
  width: 15px; height: 15px; border-radius: 5px; font-size: 8px;
  display: grid; place-items: center; color: #fff; font-weight: 700;
  box-shadow: 0 0 0 2px var(--surface);
}
/* Picture URL died (token expired, page renamed). Hide the photo AND its corner
   flag together so the badge underneath is all that shows — a lone flag floating
   over the badge looks like a rendering bug. */
.pic.is-broken .pic__img, .pic.is-broken .pic__flag { display: none; }

/* A file input dressed as the picture itself: click the photo to replace it. */
.pic-upload { display: inline-flex; flex: none; margin: 0; cursor: pointer; position: relative; }
.pic-upload::after {
  content: "✎"; position: absolute; inset-block-end: -2px; inset-inline-start: -2px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 9px; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface);
}
.acct__name { font-weight: 600; display: block; line-height: 1.3; }
.acct__meta { font-size: 11.5px; color: var(--muted); }

.badge-platform {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; flex: none;
}
.badge-platform--facebook { background: #1877f2; }
.badge-platform--youtube  { background: #ff0033; }
.badge-platform--tiktok   { background: #010101; border: 1px solid rgba(255,255,255,.25); }
.badge-platform--instagram {
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
}

/* ------------------------------------------------------------ forms & buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px;
  font-weight: 500; cursor: pointer; transition: background .12s ease;
}
.btn:hover { background: var(--surface-2); }
.btn--primary {
  background: linear-gradient(140deg, var(--brand), var(--brand-2));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px -5px color-mix(in srgb, var(--brand) 55%, transparent);
}
.btn--primary:hover { filter: brightness(1.07); }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--ghost { background: none; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink-2); }
input, select, textarea {
  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); font: inherit; font-size: 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
/* Checkboxes and radios must never stretch to the 100% above — otherwise a
   checkbox in a flex row blows out to full width and drags its label away. */
input[type="checkbox"], input[type="radio"] {
  width: auto; padding: 0; accent-color: var(--brand);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--brand-soft); outline-offset: 0;
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
}
.field { margin-bottom: 14px; }
.field-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.switch { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.switch input { width: auto; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.chip {
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: 13px; color: var(--ink-2); cursor: pointer;
  font-weight: 600; transition: .14s;
}
.chip:hover { border-color: color-mix(in srgb, var(--brand) 38%, var(--border)); }
.chip.is-active {
  background: var(--brand-soft); color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 42%, transparent); font-weight: 700;
}

/* A tick-list of chips is a different thing from a one-of-many filter: nearly
   all of them are on at once, so the loud selected state becomes a black wall.
   Selected here means "included", and it should read as calm. */
.chip--pick { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip--pick.is-active {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--ink); border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  font-weight: 500;
}

/* The `hidden` attribute comes from the UA stylesheet, so any class that sets
   `display` beats it. Fields hidden by script would otherwise stay on screen. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------ bulk selection
   Appears only once something is ticked, docked to the bottom so it is reachable
   without scrolling back up after selecting rows far down a long list. */
.bulkbar {
  position: sticky; inset-block-end: 12px; z-index: 30; margin-top: 12px;
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--ink); color: var(--plane);
  box-shadow: 0 10px 30px rgba(11,11,11,.28);
}
.bulkbar.is-visible { display: flex; }
.bulkbar__count { font-weight: 700; font-size: 14px; white-space: nowrap; }
.bulkbar__spacer { flex: 1; }
.bulkbar select {
  width: auto; min-width: 150px; padding: 6px 10px; font-size: 13px;
  background: color-mix(in srgb, var(--plane) 14%, transparent);
  color: var(--plane); border-color: color-mix(in srgb, var(--plane) 26%, transparent);
}
.bulkbar select option { background: var(--surface); color: var(--ink); }
.bulkbar .btn {
  background: color-mix(in srgb, var(--plane) 14%, transparent);
  border-color: color-mix(in srgb, var(--plane) 26%, transparent); color: var(--plane);
}
.bulkbar .btn:hover { background: color-mix(in srgb, var(--plane) 26%, transparent); }
.bulkbar .btn--danger { background: var(--critical); border-color: transparent; color: #fff; }

td.pick, th.pick { width: 34px; padding-inline-end: 0; }
.pick input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
tr.is-picked td { background: color-mix(in srgb, var(--brand) 8%, transparent); }

/* ------------------------------------------------------------ revenue page */
.revenue-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px -18px -18px; padding: 13px 18px;
  border-top: 1px solid var(--border); background: var(--surface-2);
  border-end-start-radius: var(--radius); border-end-end-radius: var(--radius);
  font-size: 13px; color: var(--muted);
}
.revenue-foot .money { color: var(--ink); font-weight: 600; margin-inline-end: 14px; }
tr.is-dirty td { background: color-mix(in srgb, var(--warning) 12%, transparent); }
tr.is-dirty [data-save-row]::after { content: " •"; }

/* ------------------------------------------------------------ dues page */
.dirbar { width: 4px; align-self: stretch; border-radius: 99px; flex: none; min-height: 34px; }
.dirbar--in  { background: var(--good); }
.dirbar--out { background: var(--serious); }
.list-item.is-late {
  border-color: color-mix(in srgb, var(--critical) 40%, transparent);
  background: color-mix(in srgb, var(--critical) 5%, var(--surface));
}

/* A message the other side will actually read deserves to be shown as they
   will see it, not as a form field. */
.preview {
  white-space: pre-wrap; background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: 13px; line-height: 1.9; color: var(--ink);
  min-height: 120px; border: 1px solid var(--border);
}

/* سيجمنت/تابات موحّدة بشكل الـpills الجديد (زي .subtabs) — نفس اللوك في كل الصفحات */
.seg {
  display: inline-flex; gap: 4px; flex-wrap: wrap; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px;
}
.seg__btn {
  flex: 0 0 auto; padding: 8px 15px; border-radius: 9px; border: 0; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  font-family: var(--font-head);
}
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-on { background: var(--brand); color: #fff; }

textarea { resize: vertical; font-family: inherit; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; direction: ltr;
       unicode-bidi: isolate; }

/* ------------------------------------------------------------ 2FA / logins
   كود المصادقة اللايف مع حلقة عدّاد، وأيقونات لينكات مرتبة بدل كلمة «فتح». */
.otp { display: inline-flex; align-items: center; gap: 9px; }
.otp .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px;
  font-weight: 800; letter-spacing: 2px; color: var(--brand); direction: ltr; min-width: 70px;
}
.otp__ring {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--p, 100) * 1%), var(--surface-3) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 58%, #000 60%);
          mask: radial-gradient(farthest-side, transparent 58%, #000 60%);
}
.brwcode {
  display: inline-flex; align-items: center; font-weight: 700; font-size: 12.5px;
  padding: 3px 9px; border-radius: 7px; background: var(--surface-3); color: var(--ink-2);
}
.lnk {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; background: var(--surface-3); color: var(--ink-2); font-size: 13px; transition: .14s;
}
.lnk:hover { background: var(--brand-soft); color: var(--brand); }
.iconbtn-sm {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 12.5px;
  display: inline-grid; place-items: center; vertical-align: middle; transition: .14s;
}
.iconbtn-sm:hover { background: var(--surface-2); color: var(--ink); }

/* ------------------------------------------------------------ money */
.money { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
/* The revenue cell is a button; without a hint nobody discovers it is editable. */
[data-earnings] { border: 1px dashed var(--border) !important; text-align: start; }
[data-earnings]:hover { border-color: var(--brand) !important; }
.money--none { color: var(--muted); }
.money__meta { font-size: 11px; color: var(--muted); display: block; }

/* ------------------------------------------------------------ charts */
.chart { width: 100%; display: block; overflow: visible; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.sp-tooltip {
  position: fixed; z-index: 60; pointer-events: none; padding: 8px 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); font-size: 12.5px; color: var(--ink); white-space: nowrap;
  opacity: 0; transition: opacity .1s ease;
}
.sp-tooltip.is-visible { opacity: 1; }
.sp-tooltip b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ misc */
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty h3 { color: var(--ink); margin: 0 0 6px; font-size: 16px; }

.list { display: grid; gap: 10px; }
.list-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.list-item__body { flex: 1; min-width: 0; }
.list-item__title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.list-item__meta { font-size: 12.5px; color: var(--muted); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The row of buttons at the end of a table row. On a laptop they stay on one
   line; on a phone they wrap rather than dragging the whole table sideways. */
.cell-actions { white-space: nowrap; }
.hide-lg { display: none; }

.toast {
  position: fixed; inset-block-end: 24px; inset-inline-start: 50%; transform: translateX(50%) translateY(20px);
  background: var(--ink); color: var(--plane); padding: 11px 20px; border-radius: 999px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: all .18s ease; z-index: 80;
}
.toast.is-visible { opacity: 1; transform: translateX(50%) translateY(0); }

.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.auth__card { width: 100%; max-width: 400px; }
.auth__brand { text-align: center; margin-bottom: 22px; }
.auth__brand h1 { font-size: 21px; margin: 12px 0 4px; }
.auth__logo { width: 62px; height: 62px; margin: 0 auto; display: block; }
.auth__hint {
  margin-top: 16px; padding: 11px 13px; background: var(--surface-2);
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink-2); line-height: 1.8;
}
.error-msg { color: var(--critical); font-size: 13px; margin-bottom: 12px; min-height: 18px; }
.ok-msg { color: var(--success, #12805c); font-size: 13.5px; margin-bottom: 12px; font-weight: 600; }

.progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

/* ------------------------------------------------------------ phones
   The page itself must never slide sideways. Tables are allowed to scroll
   inside their own card, but that scrolling has to stay contained — a table
   wider than the screen used to drag the whole layout with it, which is what
   made the page feel like it was swinging left and right. */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 900px) {
  .table-wrap.scrollbox {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 720px) {
  .topbar__inner { gap: 10px; padding: 0 12px; height: 54px; }
  /* Six tabs cannot fit a phone. They scroll sideways instead of wrapping onto
     a second line and pushing the whole page down. */
  .nav {
    gap: 2px; margin-inline-start: auto; flex: 1; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  .brand__text { display: none; }

  .page { padding: 18px 12px 56px; }
  .card { padding: 14px; }
  .card__head { flex-wrap: wrap; gap: 8px; }
  .table-wrap { margin: 0 -14px -14px; }
  .stat__value { font-size: 23px; }
  .grid--2 { grid-template-columns: 1fr; }
  .grid--stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

  /* On a phone a fixed pixel height is the wrong idea: rows wrap to different
     heights, so it either clips a row in half or leaves a dead gap. Cap it
     against the screen instead. */
  .scrollbox {
    height: auto; max-height: 62vh; min-height: 150px; overflow-anchor: none;
  }

  /* Rows with many small controls stack instead of forcing the card wider:
     the text takes a line of its own, the buttons line up under it. */
  .list-item { flex-wrap: wrap; gap: 8px; align-items: center; }
  .list-item__body { flex: 1 1 100%; }
  .list-item .btn { flex: 0 0 auto; }
  .list-item .money { margin-inline-end: auto; }
  .dirbar { min-height: 26px; }

  /* Columns that are useful on a laptop and just noise on a phone. */
  .hide-sm { display: none !important; }
  /* ...and the mirror: a badge that only earns its place once the column
     carrying the same fact has been hidden. */
  .hide-lg { display: inline-flex !important; }

  /* Stacked, and tighter — every pixel the buttons give back goes to the name
     column, which is the one you actually read. */
  .cell-actions { white-space: normal; width: 1%; }
  .cell-actions .btn { margin: 1px 0; padding: 4px 8px; font-size: 12px; }
  /* The name column earns the space the buttons gave back — but not the
     checkbox column, which only ever needs room for a checkbox. */
  table th:first-child:not(.pick), table td:first-child:not(.pick) { min-width: 108px; }
  table th.pick, table td.pick { width: 1%; min-width: 0; padding-inline: 6px; }
  table th:nth-child(2), table td:nth-child(2) { min-width: 104px; }

  /* The account menu hangs off the inline-end of a topbar that is already at
     the screen edge, so it needs pinning to the viewport, not to the avatar. */
  .menu__body {
    position: fixed; top: 58px; left: 10px; right: auto;
    inset-inline-start: auto; width: min(240px, calc(100vw - 20px));
  }

  /* Docked bars behave badly on mobile browsers whose toolbars come and go. */
  .bulkbar { position: static; }

  .filterbar__field, .filterbar__field--grow { min-width: 100%; }
  .addbar__row { gap: 10px; }
  .addbar__row > .btn { width: 100%; }
  .sheet { max-width: 100% !important; width: calc(100% - 20px); padding: 18px; }
  .field-row { grid-template-columns: 1fr; }
  .page-head { gap: 10px; }
  .page-head h1 { font-size: 20px; }
  .revenue-foot { margin: 12px -14px -14px; padding: 12px 14px; }
}

/* ============================================================
   الهيكل الجديد — سايدبار يمين + شريط علوي للإجراءات (إعادة تصميم ١)
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; }

/* السايدبار ثابت بالنسبة للشاشة (fixed) — عشان overflow-x:hidden على الـbody
   بيكسر position:sticky. كده الجنب اليمين يفضل ثابت والمحتوى في النص بس يتمرّر. */
.sidebar {
  width: 272px; flex: none; background: var(--surface);
  border-inline-start: 1px solid var(--border);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 3px;
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50;
  overflow-y: auto; transition: transform .22s ease;
  scrollbar-width: thin; scrollbar-color: var(--axis) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 999px; }
.side-logo { display: flex; align-items: center; gap: 12px; padding: 4px 6px 16px; }
.side-logo__mark {
  width: 48px; height: 48px; border-radius: 13px; flex: none;
  object-fit: contain; display: block; background: var(--brand-soft);
  box-shadow: 0 4px 14px -3px color-mix(in srgb, var(--brand) 45%, transparent);
}
.side-logo__text b { font-family: var(--font-head); font-size: 19px; display: block; line-height: 1.15; }
.side-logo__text small { color: var(--muted); font-size: 11px; }
.side-group {
  font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .04em;
  padding: 14px 10px 6px;
}
.side-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: var(--radius-sm); color: var(--ink-2); font-size: 14.5px;
  font-weight: 600; position: relative; border: 1px solid transparent;
}
.side-link:hover { background: var(--surface-2); color: var(--ink); }
.side-link.is-active {
  background: var(--brand-soft); color: var(--ink);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
.side-link.is-active::before {
  content: ""; position: absolute; inset-inline-end: -14px; top: 10px; bottom: 10px;
  width: 3px; border-radius: 3px; background: linear-gradient(var(--brand), var(--brand-2));
}
.side-ico { width: 22px; text-align: center; font-size: 17px; flex: none; }
.side-cnt {
  margin-inline-start: auto; background: var(--critical); color: #fff; font-size: 11px;
  min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px;
}

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-inline-start: 272px; padding-top: 58px; }
.appbar {
  position: fixed; top: 0; inset-inline-start: 272px; inset-inline-end: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px; min-height: 58px;
  padding: 10px 20px; background: color-mix(in srgb, var(--plane) 90%, transparent);
  backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border);
}
.appbar__menu { display: none; }
.appbar__brand { font-family: var(--font-head); font-weight: 800; font-size: 16px; display: none; color: var(--ink); }
.appbar__sp { flex: 1; }
.app-shell .page { max-width: 1280px; width: 100%; margin: 0 auto; padding: 22px 26px 64px; }
.shell-backdrop { display: none; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.5); }

/* تبويبات فرعية أعلى الصفحة (الموظفين | الأجهزة) */
.subtabs {
  display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px; margin-bottom: 18px;
}
.subtabs a {
  padding: 8px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
  color: var(--ink-2); font-family: var(--font-head);
}
.subtabs a:hover { color: var(--ink); }
.subtabs a.is-active { background: var(--brand); color: #fff; }

/* الأزرار والتبويبات بخط Cairo في الإطار الجديد */
.btn, .side-link, .seg__btn { font-family: var(--font-head); }

@media (max-width: 760px) {
  /* على الموبايل: المحتوى بياخد العرض كله، والسايدبار بيتحوّل لدرج بيطلع بزر ☰ */
  .shell-main { margin-inline-start: 0; }
  .appbar { inset-inline-start: 0; }
  .sidebar { transform: translateX(100%); box-shadow: -8px 0 30px rgba(0,0,0,.45); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .shell-backdrop { display: block; }
  .appbar__menu { display: inline-flex; }
  .appbar__brand { display: block; }
  .app-shell .page { padding: 16px 14px 56px; }
}

/* ============================================================
   كروت KPI الموحّدة (إعادة تصميم ٢) — أيقونة ملوّنة + رقم كبير + اتجاه + شريط علوي
   تُستخدم عبر ماكرو kpi() في _macros.html. بتتحط جوه .grid--stats زي .stat.
   ============================================================ */
.kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.kpi::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px; background: var(--ac, var(--brand)); opacity: .95;
}
.kpi__ic {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 10px;
  display: grid; place-items: center; font-size: 18px;
  background: var(--ac-soft, var(--brand-soft));
}
.kpi__lb { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kpi__vl {
  font-size: 25px; font-weight: 800; font-family: var(--font-head);
  letter-spacing: -.02em; line-height: 1.15; margin: 3px 0;
}
.kpi__vl small, .kpi__vl .unit { font-size: 13px; color: var(--muted); font-weight: 400; }
.kpi__tr {
  font-size: 12px; color: var(--ink-2); display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; min-height: 18px;
}
@media (max-width: 720px) {
  .kpi__vl { font-size: 22px; }
  .kpi__ic { width: 34px; height: 34px; font-size: 16px; }
}
/* قيمة KPI صغيرة (للتواريخ/الأوقات بدل الأرقام الكبيرة) */
.kpi__vl--sm { font-size: 15px; font-weight: 700; line-height: 1.5; }