/* =========================================================================
   Maxab Hub — Design Tokens
   Colors, typography, spacing, radii, shadows & elevation.
   Based on the brand guide (01 Colors, 02 Typography, 04 Corner radius,
   05 Spacing, 06 Screen Size).
   ========================================================================= */

/* --- Fonts -------------------------------------------------------------- */
/* Inter is the primary Latin face. Montserrat Arabic for RTL/Arabic. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Arabic:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ----------------------------------------------------------------------
     01 · Color · Primary / Secondary
     Primary lime (#C7F262) is the brand accent — used for CTAs, active
     states and key highlights. Tints at 20% opacity are used for surfaces.
     Secondary deep-green (#00654B) anchors headings & serious surfaces.
     ---------------------------------------------------------------------- */
  --color-primary:          #C7F262;
  --color-primary-tint:     rgba(199, 242, 98, 0.20);
  --color-primary-tint-soft:rgba(199, 242, 98, 0.10);

  --color-secondary:        #00654B;
  --color-secondary-hover:  #004F3A;

  /* Background ----------------------------------------------------------- */
  --color-bg:               #FFFFFF;
  --color-bg-muted:         #F7F6F9;

  /* Text ----------------------------------------------------------------- */
  --color-text-accent:      #4A6400;   /* primary text on light, olive */
  --color-text:             #000000;   /* strongest body */
  --color-text-strong:      #404040;   /* body */
  --color-text-muted:       #4B5563;   /* secondary body / labels */
  --color-text-subtle:      #6B7280;   /* tertiary / meta */
  --color-text-disabled:    #9CA3AF;   /* disabled / placeholder */

  /* Shade / Overlay / Divider ------------------------------------------- */
  --color-shade-dark:       #000000;
  --color-shade-light:      #FFFFFF;
  --color-overlay:          rgba(0, 0, 0, 0.40);
  --color-divider:          #E5E7EB;

  /* Semantic / Other colors --------------------------------------------- */
  --color-purple:           #7E22CE;
  --color-purple-soft:      #FAF5FF;
  --color-orange:           #EA580C;
  --color-orange-soft:      #FFF7ED;
  --color-blue:             #2563EB;
  --color-blue-soft:        #EFF6FF;

  --color-success:          #22C55E;
  --color-success-soft:     #F0FDF4;
  --color-warning:          #F95630;
  --color-danger:           #B91C1C;
  --color-danger-soft:      #FEE2E2;

  /* Semantic aliases for app surfaces ------------------------------------ */
  --fg-1: var(--color-text);
  --fg-2: var(--color-text-strong);
  --fg-3: var(--color-text-muted);
  --fg-4: var(--color-text-subtle);
  --fg-disabled: var(--color-text-disabled);

  --bg-1: var(--color-bg);
  --bg-2: var(--color-bg-muted);

  --border-1: var(--color-divider);
  --border-2: #D1D5DB;

  /* ----------------------------------------------------------------------
     02 · Typography
     Inter-based scale H1 → H14, matching the guide's tokens.
     H1 72 / 88  · H2 64 / 80 · H3 60 / 72 · H4 52 / 64 · H5 48 / 56
     H6 42 / 52  · H7 34 / 44 · H8 30 / 40 · H9 28 / 36 · H10 24 / 28
     H11 24 / 22 · H12 22 / 20 · H13 20 / 24 · H14 16 / 20
     ---------------------------------------------------------------------- */
  --font-sans:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-arabic:   'Montserrat Arabic', 'Inter', system-ui, sans-serif;
  --font-display:  'Inter', system-ui, -apple-system, sans-serif;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* Heading sizes (px) */
  --fs-h1:  72px;  --lh-h1:  88px;  --fw-h1:  var(--fw-black);
  --fs-h2:  64px;  --lh-h2:  80px;  --fw-h2:  var(--fw-extrabold);
  --fs-h3:  60px;  --lh-h3:  72px;  --fw-h3:  var(--fw-extrabold);
  --fs-h4:  52px;  --lh-h4:  64px;  --fw-h4:  var(--fw-semibold);
  --fs-h5:  48px;  --lh-h5:  56px;  --fw-h5:  var(--fw-semibold);
  --fs-h6:  42px;  --lh-h6:  52px;  --fw-h6:  var(--fw-medium);
  --fs-h7:  34px;  --lh-h7:  44px;  --fw-h7:  var(--fw-medium);
  --fs-h8:  30px;  --lh-h8:  40px;  --fw-h8:  var(--fw-medium);
  --fs-h9:  28px;  --lh-h9:  36px;  --fw-h9:  var(--fw-medium);
  --fs-h10: 24px;  --lh-h10: 28px;  --fw-h10: var(--fw-semibold);
  --fs-h11: 24px;  --lh-h11: 22px;  --fw-h11: var(--fw-medium);
  --fs-h12: 22px;  --lh-h12: 20px;  --fw-h12: var(--fw-semibold);
  --fs-h13: 20px;  --lh-h13: 24px;  --fw-h13: var(--fw-semibold);
  --fs-h14: 16px;  --lh-h14: 20px;  --fw-h14: var(--fw-medium);

  /* Body tokens (conventional aliases) */
  --fs-body-lg: 18px; --lh-body-lg: 28px;
  --fs-body:    16px; --lh-body:    24px;
  --fs-body-sm: 14px; --lh-body-sm: 20px;
  --fs-caption: 12px; --lh-caption: 16px;

  /* ----------------------------------------------------------------------
     04 · Corner radius
     4, 8, 12, 16, 24, 32 — plus full for pills.
     ---------------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------------------
     05 · Spacing — 4, 8, 12, 16, 24, 32, 64, 80, 88, 96
     ---------------------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-16:  64px;
  --space-20:  80px;
  --space-22:  88px;
  --space-24:  96px;

  /* ----------------------------------------------------------------------
     Shadows — soft, low-contrast drop shadows seen in the brand guide.
     ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 8px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.08), 0 4px 8px rgba(16, 24, 40, 0.04);
  --shadow-xl: 0 24px 48px rgba(16, 24, 40, 0.10), 0 8px 16px rgba(16, 24, 40, 0.05);
  --shadow-primary: 0 8px 20px rgba(199, 242, 98, 0.35);

  /* ----------------------------------------------------------------------
     06 · Screen — desktop design canvas is 1280 × 1028.
     ---------------------------------------------------------------------- */
  --screen-desktop-w: 1280px;
  --screen-desktop-h: 1028px;
  --container-max:    1200px;

  /* Motion --------------------------------------------------------------- */
  --motion-fast:    120ms;
  --motion-base:    200ms;
  --motion-slow:    320ms;
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
}

/* =========================================================================
   Base element styles — apply the tokens to bare HTML so pages feel "right"
   without extra classes.
   ========================================================================= */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[dir="rtl"], .rtl {
  font-family: var(--font-arabic);
}

/* Headings — map semantic tags to mid-range display tokens.
   (Full H1…H14 ramp is available via .h1 – .h14 utility classes.) */
h1 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); letter-spacing: -0.02em; margin: 0; }
h2 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-h5); letter-spacing: -0.015em; margin: 0; }
h3 { font-size: var(--fs-h7); line-height: var(--lh-h7); font-weight: var(--fw-h7); letter-spacing: -0.01em; margin: 0; }
h4 { font-size: var(--fs-h9); line-height: var(--lh-h9); font-weight: var(--fw-h9); margin: 0; }
h5 { font-size: var(--fs-h10); line-height: var(--lh-h10); font-weight: var(--fw-h10); margin: 0; }
h6 { font-size: var(--fs-h13); line-height: var(--lh-h13); font-weight: var(--fw-h13); margin: 0; }

p { margin: 0; }
small { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }

/* Typographic utility classes — one per H step */
.h1  { font: var(--fw-h1)  var(--fs-h1)/var(--lh-h1)   var(--font-sans); letter-spacing: -0.025em; }
.h2  { font: var(--fw-h2)  var(--fs-h2)/var(--lh-h2)   var(--font-sans); letter-spacing: -0.02em; }
.h3  { font: var(--fw-h3)  var(--fs-h3)/var(--lh-h3)   var(--font-sans); letter-spacing: -0.02em; }
.h4  { font: var(--fw-h4)  var(--fs-h4)/var(--lh-h4)   var(--font-sans); letter-spacing: -0.015em; }
.h5  { font: var(--fw-h5)  var(--fs-h5)/var(--lh-h5)   var(--font-sans); letter-spacing: -0.015em; }
.h6  { font: var(--fw-h6)  var(--fs-h6)/var(--lh-h6)   var(--font-sans); letter-spacing: -0.01em; }
.h7  { font: var(--fw-h7)  var(--fs-h7)/var(--lh-h7)   var(--font-sans); }
.h8  { font: var(--fw-h8)  var(--fs-h8)/var(--lh-h8)   var(--font-sans); }
.h9  { font: var(--fw-h9)  var(--fs-h9)/var(--lh-h9)   var(--font-sans); }
.h10 { font: var(--fw-h10) var(--fs-h10)/var(--lh-h10) var(--font-sans); }
.h11 { font: var(--fw-h11) var(--fs-h11)/var(--lh-h11) var(--font-sans); }
.h12 { font: var(--fw-h12) var(--fs-h12)/var(--lh-h12) var(--font-sans); }
.h13 { font: var(--fw-h13) var(--fs-h13)/var(--lh-h13) var(--font-sans); }
.h14 { font: var(--fw-h14) var(--fs-h14)/var(--lh-h14) var(--font-sans); }

.text-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.text-body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.text-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.text-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); }

.text-muted   { color: var(--fg-3); }
.text-subtle  { color: var(--fg-4); }
.text-accent  { color: var(--color-text-accent); }
.text-primary { color: var(--color-secondary); }

/* =========================================================================
   Maxab Hub — AI Sales Agent · App styles
   Builds on assets/maxab-tokens.css (brand design system).
   Light, premium-retail SaaS. Desktop-first. EN + AR (RTL) aware.
   ========================================================================= */

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

html, body { margin: 0; height: 100%; }
body {
  background: var(--bg-2);
  color: var(--fg-1);
  overflow: hidden;
}
#root { height: 100vh; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D8D6DE; border-radius: 999px; border: 3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: #C2BFC9; }

/* RTL: Montserrat Arabic comes from tokens via [dir=rtl] */
[dir="rtl"] body { font-family: var(--font-arabic); }

/* ---- App frame --------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: 256px 1fr;
  height: 100vh;
  background: var(--bg-2);
}
[dir="rtl"] .app { direction: rtl; }

/* ---- Sidebar ----------------------------------------------------------- */
.sidebar {
  background: var(--color-bg);
  border-inline-end: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-4);
}
.sidebar__brand img { height: 30px; width: auto; display: block; }
.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4); }
.sidebar__section-label {
  font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-disabled);
  padding: var(--space-4) var(--space-3) var(--space-2);
}
.navitem {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3); border-radius: var(--radius-sm);
  color: var(--fg-2); font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  width: 100%; text-align: start; margin-bottom: 2px;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast);
  position: relative;
}
.navitem:hover { background: var(--bg-2); color: var(--fg-1); }
.navitem.is-active {
  background: var(--color-primary-tint-soft);
  color: var(--color-secondary);
  font-weight: var(--fw-semibold);
}
.navitem.is-active::before {
  content: ""; position: absolute; inset-inline-start: -16px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 999px; background: var(--color-secondary);
}
.navitem .navitem__count {
  margin-inline-start: auto; font-size: 11px; font-weight: var(--fw-bold);
  background: var(--color-secondary); color: #fff; min-width: 20px; height: 20px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
}
.navitem.is-active .navitem__count { background: var(--color-secondary); }

.sidebar__foot { padding: var(--space-4); border-top: 1px solid var(--border-1); }

/* ---- Topbar ------------------------------------------------------------ */
.main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar {
  height: 68px; flex-shrink: 0; background: var(--color-bg);
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-8);
}
.topbar__title { font-size: var(--fs-h13); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.topbar__sub { font-size: var(--fs-caption); color: var(--fg-4); margin-top: 1px; }
.topbar__spacer { flex: 1; }

.content { flex: 1; overflow-y: auto; }
.content__inner { max-width: 1240px; margin: 0 auto; padding: var(--space-8); }
.content__inner--wide { max-width: none; }

/* ---- Search ------------------------------------------------------------ */
.search {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--bg-2); border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 0 var(--space-3); height: 40px; width: 280px;
  color: var(--fg-4);
}
.search:focus-within { background: #fff; border-color: var(--border-2); }
.search input { border: none; background: none; outline: none; flex: 1; font-size: var(--fs-body-sm); color: var(--fg-1); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); white-space: nowrap;
  transition: background var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast), border-color var(--motion-fast);
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-primary); color: var(--color-secondary); }
.btn--primary:hover { background: #bdea4f; box-shadow: var(--shadow-primary); }
.btn--dark { background: var(--color-secondary); color: #fff; }
.btn--dark:hover { background: var(--color-secondary-hover); }
.btn--ghost { background: transparent; color: var(--fg-2); border-color: var(--border-2); }
.btn--ghost:hover { background: var(--bg-2); }
.btn--subtle { background: var(--bg-2); color: var(--fg-2); }
.btn--subtle:hover { background: #ECEAF0; }
.btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--fs-caption); }
.btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--fs-body); }
.btn--icon { width: 40px; padding: 0; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.iconbtn {
  width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.iconbtn:hover { background: var(--bg-2); color: var(--fg-1); }
.iconbtn__dot { position: absolute; top: 8px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--color-warning); border: 2px solid #fff; }

/* ---- Card -------------------------------------------------------------- */
.card {
  background: var(--color-bg); border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.card--flush { padding: 0; overflow: hidden; }
.card--hover { transition: box-shadow var(--motion-base), border-color var(--motion-base), transform var(--motion-base); }
.card--hover:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }
.card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.card__title { font-size: var(--fs-h14); font-weight: var(--fw-bold); }

/* ---- Badge / pill ------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: var(--fw-semibold); white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 999px; }
.badge--neutral { background: var(--bg-2); color: var(--fg-3); }
.badge--lime  { background: var(--color-primary-tint); color: var(--color-text-accent); }
.badge--green { background: var(--color-success-soft); color: #15803D; }
.badge--blue  { background: var(--color-blue-soft); color: var(--color-blue); }
.badge--purple{ background: var(--color-purple-soft); color: var(--color-purple); }
.badge--orange{ background: var(--color-orange-soft); color: var(--color-orange); }
.badge--red   { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--dark  { background: var(--color-secondary); color: #fff; }

/* ---- Avatar ------------------------------------------------------------ */
.avatar {
  width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: 13px; color: #fff; letter-spacing: -0.01em;
}
.avatar--sq { border-radius: var(--radius-md); }
.avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }

/* ---- Table ------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  text-align: start; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fg-4); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1); background: var(--bg-2); position: sticky; top: 0; z-index: 1;
}
.table tbody td { padding: var(--space-4); border-bottom: 1px solid var(--border-1); font-size: var(--fs-body-sm); vertical-align: middle; }
.table tbody tr { transition: background var(--motion-fast); cursor: pointer; }
.table tbody tr:hover { background: var(--bg-2); }
.table tbody tr:last-child td { border-bottom: none; }

/* ---- Score chips ------------------------------------------------------- */
.score { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); font-size: 13px; }
.score__bar { width: 44px; height: 6px; border-radius: 999px; background: var(--border-1); overflow: hidden; }
.score__bar > i { display: block; height: 100%; border-radius: 999px; }

.opp { width: 26px; height: 26px; border-radius: var(--radius-xs); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-bold); }
.opp--S { background: var(--bg-2); color: var(--fg-3); }
.opp--M { background: var(--color-blue-soft); color: var(--color-blue); }
.opp--L { background: var(--color-primary-tint); color: var(--color-text-accent); }
.opp--XL{ background: var(--color-secondary); color: #fff; }

/* ---- Form fields ------------------------------------------------------- */
.field { display: block; margin-bottom: var(--space-4); }
.field__label { display: block; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); color: var(--fg-2); }
.field__hint { font-size: var(--fs-caption); color: var(--fg-4); margin-top: 6px; }
.input, .textarea, .select {
  width: 100%; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 0 var(--space-3); height: 44px; font-size: var(--fs-body-sm); color: var(--fg-1); background: #fff;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.textarea { height: auto; padding: var(--space-3); resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px var(--color-primary-tint-soft); }
.input::placeholder, .textarea::placeholder { color: var(--fg-disabled); }

/* ---- Selectable option card ------------------------------------------- */
.optcard {
  border: 1.5px solid var(--border-2); border-radius: var(--radius-md); padding: var(--space-4);
  display: flex; gap: var(--space-3); align-items: flex-start; text-align: start; width: 100%;
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
  background: #fff;
}
.optcard:hover { border-color: var(--color-secondary); }
.optcard.is-selected { border-color: var(--color-secondary); background: var(--color-primary-tint-soft); box-shadow: 0 0 0 3px var(--color-primary-tint-soft); }
.optcard__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---- Stepper ----------------------------------------------------------- */
.stepper { display: flex; align-items: center; gap: var(--space-2); }
.step { display: flex; align-items: center; gap: var(--space-2); color: var(--fg-disabled); }
.step__num { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: var(--fw-bold); border: 1.5px solid var(--border-2); background: #fff; color: var(--fg-disabled); flex-shrink: 0; }
.step.is-active .step__num { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.step.is-done .step__num { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-secondary); }
.step.is-active .step__label, .step.is-done .step__label { color: var(--fg-1); }
.step__label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.step__line { width: 28px; height: 2px; background: var(--border-1); border-radius: 999px; }
.step.is-done + .step__line, .step__line.is-done { background: var(--color-primary); }

/* ---- Misc -------------------------------------------------------------- */
.divider { height: 1px; background: var(--border-1); border: none; margin: 0; }
.kbd { font-size: 11px; font-weight: var(--fw-bold); background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 5px; padding: 2px 6px; color: var(--fg-4); }
.muted { color: var(--fg-3); }
.subtle { color: var(--fg-4); }
.skel { background: linear-gradient(90deg, #EEECF1 25%, #F6F5F8 50%, #EEECF1 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@keyframes fadeUp { from { transform: translateY(8px); } to { transform: none; } }
.fade-up { animation: fadeUp var(--motion-base) var(--ease-out); }

/* drawer + modal — entrances use transform-only (never animate opacity from 0,
   so a paused/inactive tab can't leave them invisible) */
.scrim { position: fixed; inset: 0; background: var(--color-overlay); z-index: 40; }
.drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: 480px; max-width: 92vw;
  background: var(--bg-2); z-index: 50; box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; animation: slideIn var(--motion-slow) var(--ease-out);
}
[dir="rtl"] .drawer { animation: slideInRtl var(--motion-slow) var(--ease-out); }
@keyframes slideIn { from { transform: translateX(16%); } to { transform: none; } }
@keyframes slideInRtl { from { transform: translateX(-16%); } to { transform: none; } }
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  width: 520px; max-width: 92vw; animation: modalIn var(--motion-base) var(--ease-out);
  /* Phase 9 — never taller than the viewport: tall content (e.g. the Brief popup)
     scrolls inside so the footer actions stay reachable on a laptop or phone without
     zooming the browser out. */
  max-height: 90vh; overflow-y: auto;
}
@keyframes modalIn { from { transform: translate(-50%, calc(-50% + 8px)); } to { transform: translate(-50%, -50%); } }

/* segmented toggle */
.seg { display: inline-flex; background: var(--bg-2); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.seg button { height: 32px; padding: 0 var(--space-3); border-radius: 6px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--fg-3); }
.seg button.is-on { background: #fff; color: var(--fg-1); box-shadow: var(--shadow-xs); }

/* status dot */
.sdot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex-shrink: 0; }

/* grid helpers */
.row { display: flex; align-items: center; gap: var(--space-3); }
.col { display: flex; flex-direction: column; }
.grid { display: grid; gap: var(--space-6); }
.between { display: flex; align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }
/* horizontal-scroll chip/tab strip (e.g. the Lead Drawer tab bar) — never wraps to
   multiple rows; scrolls sideways on narrow viewports. Scrollbar hidden for a clean look. */
.chipscroll { display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chipscroll::-webkit-scrollbar { display: none; }
.chipscroll > * { flex-shrink: 0; }

/* density + radius tweaks */
.card { border-radius: var(--app-radius, 16px); }
.app[data-density="compact"] .card { padding: 16px; }
.app[data-density="compact"] .table tbody td { padding: 10px 14px; }
.app[data-density="compact"] .navitem { padding: 8px 12px; }
.app[data-density="compact"] .content__inner { padding: 24px; }
.app[data-density="compact"] .topbar { height: 60px; }

/* =====================================================================
   RESPONSIVE / MOBILE  (desktop layout is preserved above; these only
   take effect on narrow viewports via media queries — no duplicate screens)
   ===================================================================== */

/* Conversations: real grid on desktop (replaces the old inline grid) */
.conv { height: 100%; display: grid; grid-template-columns: 340px 1fr; }
.conv--rail { grid-template-columns: 340px 1fr 300px; }
.conv__inbox, .conv__thread { min-width: 0; }

/* mobile-only affordances are hidden on desktop */
.topbar__menu, .conv__back, .nav-scrim, .conv__rail-scrim { display: none; }

/* ---- Conversations stack (covers phones + 768px tablet portrait) ---- */
@media (max-width: 900px) {
  .conv, .conv--rail { grid-template-columns: 1fr; }
  .conv__inbox, .conv__thread { grid-column: 1; }
  .conv[data-mv="thread"] .conv__inbox { display: none !important; }
  .conv[data-mv="inbox"]  .conv__thread { display: none !important; }
  .conv__back { display: inline-flex; }
  /* details rail overlays as a drawer */
  .conv__rail {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0;
    width: 320px; max-width: 86vw; z-index: 55; box-shadow: var(--shadow-xl);
  }
  .conv__rail-scrim { display: block; position: fixed; inset: 0; background: var(--color-overlay); z-index: 54; }
}

/* ---- Mobile shell + content (below 768px) ---- */
@media (max-width: 767px) {
  /* sidebar → off-canvas drawer */
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    width: 264px; max-width: 84vw; z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--motion-base) var(--ease-standard);
    box-shadow: var(--shadow-xl);
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.is-open { transform: none; }
  .nav-scrim { display: block; position: fixed; inset: 0; background: var(--color-overlay); z-index: 55; }

  /* topbar: hamburger + compact actions, nothing overflows */
  .topbar { height: 60px; padding: 0 12px; gap: 8px; }
  .topbar__menu { display: inline-flex; }
  .topbar__sub { display: none; }
  .topbar__title { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .search { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
  .search > span, .search .kbd { display: none; }
  .topbar .btn .btn__label { display: none; }            /* action buttons → icon-only */
  .topbar .btn { width: 40px; min-width: 40px; padding: 0; }

  /* any multi-column grid stacks (beats inline grid-template-columns) */
  .grid { grid-template-columns: 1fr !important; }

  /* content breathing room + no document-level horizontal scroll */
  .content { overflow-x: hidden; }
  .content__inner { padding: 16px; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal .table { display: block; overflow-x: auto; }   /* tables inside modals scroll, never overflow */

  /* Settings → WhatsApp: Connect-lines modal stacks list above form */
  .wa-connect-body { flex-direction: column; }
  .wa-connect-list { width: auto !important; border-inline-end: none !important; border-bottom: 1px solid var(--border-1); }
  .wa-linecard-head { flex-wrap: wrap; row-gap: 8px; }

  /* comfortable touch targets */
  .iconbtn { min-width: 40px; min-height: 40px; }
}