/* Emdad Global platform. Tokens from DESIGN.md (direction set with the Lovable design review, 13 Oct 2026). */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/PlusJakartaSans-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("/fonts/PlexArabic-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("/fonts/PlexArabic-500-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("/fonts/PlexArabic-600-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url("/fonts/PlexArabic-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("/fonts/PlexArabic-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url("/fonts/PlexArabic-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/fonts/DMSans-latin.woff2") format("woff2"); }

:root {
  /* tonal scales */
  --green-50: #f0f8f4; --green-100: #e0efe7; --green-200: #c3dfd2; --green-300: #9ac8b5; --green-400: #73b29b; --green-500: #4f9a82; --green-600: #397c67; --green-700: #2e6354; --green-800: #284f44; --green-900: #223f37;
  --peach-50: #fff8f0; --peach-100: #ffecd9; --peach-200: #f9dbba; --peach-300: #f5c99b; --peach-400: #efad71; --peach-500: #e88c4c; --peach-600: #d56c2c; --peach-700: #af5022; --peach-800: #8c4123; --peach-900: #713720;
  --neutral-50: #f7f9f8; --neutral-100: #eef2ef; --neutral-200: #dee5e0; --neutral-300: #c3cec7; --neutral-400: #99aaa0; --neutral-500: #75887c; --neutral-600: #586e62; --neutral-700: #40574b; --neutral-800: #293f34; --neutral-900: #192d24;
  /* roles — light. Text and status colours reach 4.5:1 (WCAG AA) on every surface and soft background they sit on. */
  --surface-1: #ffffff; --surface-2: #f7f9f8; --surface-3: #eef2ef;
  --page: var(--surface-2); --surface: var(--surface-1);
  --sidebar: #ffffff; --hero: #e0efe7;
  --text: #223b30; --text-2: #53685c; --text-3: #627167;
  --line: var(--neutral-200); --border: var(--neutral-200);
  --primary: #397c67; --primary-fg: #ffffff; --primary-hover: #2e6354;
  --brand: #4f9a82; --brand-ink: #2e6354; --brand-soft: #e0efe7;
  --accent: #f5c99b; --accent-ink: #8c4123; --accent-soft: #ffecd9;
  --good: #24795a; --good-soft: #e7f4ed; --warn: #96621d; --warn-soft: #fff1d9; --bad: #ae4d4d; --bad-soft: #fcecec; --info: #3f7194; --info-soft: #eaf2f8;
  --scrim: rgba(25, 45, 36, .5);
  /* shape */
  --r-input: 6px; --r-compact: 10px; --r-card: 16px; --r-wide: 18px; --r-hero: 24px; --r-pill: 999px;
  --radius-sm: var(--r-input); --radius: var(--r-card); --radius-lg: var(--r-hero);
  --shadow-sm: 0 2px 5px rgba(25, 45, 36, .03); --shadow-md: 0 4px 16px rgba(25, 45, 36, .05); --shadow-lg: 0 14px 50px rgba(25, 45, 36, .14);
  --font: "DM Sans", "Segoe UI", system-ui, sans-serif; --display: "Plus Jakarta Sans", "DM Sans", "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --rail-w: 238px;
}
.theme-dark, :root[data-theme="dark"] {
  --surface-1: #1b3026; --surface-2: #11231b; --surface-3: #253c30; --page: var(--surface-2); --surface: var(--surface-1);
  --sidebar: #162920; --hero: #284c3b;
  --text: #e8f1eb; --text-2: #b3c7ba; --text-3: #a4b9ad;
  --line: #2d453a; --border: #2d453a;
  --primary: #73b29b; --primary-fg: #223f37; --primary-hover: #9ac8b5;
  --brand: #73b29b; --brand-ink: #c3dfd2; --brand-soft: #284c3b;
  --accent: #efad71; --accent-ink: #f9dbba; --accent-soft: #443724;
  --good: #76c7a2; --good-soft: #203f30; --warn: #edc183; --warn-soft: #443724; --bad: #ee9292; --bad-soft: #422b2a; --info: #91bfdf; --info-soft: #243947;
  --scrim: rgba(0, 0, 0, .55);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .25); --shadow-lg: 0 14px 50px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-1: #1b3026; --surface-2: #11231b; --surface-3: #253c30; --page: var(--surface-2); --surface: var(--surface-1);
    --sidebar: #162920; --hero: #284c3b;
    --text: #e8f1eb; --text-2: #b3c7ba; --text-3: #a4b9ad;
    --line: #2d453a; --border: #2d453a;
    --primary: #73b29b; --primary-fg: #223f37; --primary-hover: #9ac8b5;
    --brand: #73b29b; --brand-ink: #c3dfd2; --brand-soft: #284c3b;
    --accent: #efad71; --accent-ink: #f9dbba; --accent-soft: #443724;
    --good: #76c7a2; --good-soft: #203f30; --warn: #edc183; --warn-soft: #443724; --bad: #ee9292; --bad-soft: #422b2a; --info: #91bfdf; --info-soft: #243947;
    --scrim: rgba(0, 0, 0, .55);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .25); --shadow-lg: 0 14px 50px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55; }
[dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .display, [dir="rtl"] .metric-value, [dir="rtl"] .rail-brand b { font-family: "IBM Plex Sans Arabic", var(--font); letter-spacing: 0; }
/* Arabic: slightly larger and darker, since Arabic glyphs read lighter at the same size. Latin
   names keep their own direction (so "Co." does not jump to the far side) while every cell stays
   aligned to the right edge. */
[dir="rtl"] { --text-2: #44584c; --text-3: #5f746a; }
[dir="rtl"].theme-dark, [dir="rtl"][data-theme="dark"] { --text-2: #c0d2c6; --text-3: #9db5a6; }
[dir="rtl"] body { font-size: 15px; }
[dir="rtl"] table.data { font-size: 14.5px; }
[dir="rtl"] table.data th { font-size: 12.5px; }
[dir="rtl"] .micro { font-size: 12.5px; }
[dir="rtl"] .small, [dir="rtl"] .item .sub, [dir="rtl"] .follow-person, [dir="rtl"] .follow-meta, [dir="rtl"] .subtitle { font-size: 13.5px; }
[dir="rtl"] .dcard .co, [dir="rtl"] .dcard .t, [dir="rtl"] .follow-title > span, [dir="rtl"] .company-top h1, [dir="rtl"] table.data td, [dir="rtl"] table.data td > *, [dir="rtl"] .item .title, [dir="rtl"] .item .sub, [dir="rtl"] .tl .head, [dir="rtl"] .tl .text, [dir="rtl"] .fact-value, [dir="rtl"] .page-heading h1, [dir="rtl"] .contact-item h3, [dir="rtl"] .contact-item p, [dir="rtl"] .company-deal h3, [dir="rtl"] .product-cell, [dir="rtl"] .follow-subject { unicode-bidi: plaintext; text-align: right; }
[dir="rtl"] table.data td.r, [dir="rtl"] table.data th.r { text-align: left; }
[dir="rtl"] .eyebrow, [dir="rtl"] .nav-label, [dir="rtl"] table.data th, [dir="rtl"] .fact-label, [dir="rtl"] .kv div b { letter-spacing: 0; text-transform: none; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, .display { font-family: var(--display); margin: 0; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--text-3); }
.small { font-size: 12.5px; }
.micro { font-size: 11px; color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.right { text-align: end; }
.text-primary { color: var(--primary); }

/* ---------- login ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 10% 0%, var(--green-100), transparent 60%), radial-gradient(900px 500px at 100% 100%, var(--peach-100), transparent 60%), var(--page); }
.login-card { width: min(400px, 100%); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-hero); box-shadow: var(--shadow-lg); padding: 32px; display: grid; gap: 16px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.login-brand b { display: block; font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
.login-brand b i { font-style: normal; color: var(--primary); }
.login-brand small { color: var(--text-3); font-size: 10px; letter-spacing: .08em; font-weight: 600; text-transform: uppercase; }
.login-error { background: var(--bad-soft); color: var(--bad); padding: 8px 12px; border-radius: var(--r-compact); font-size: 13px; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100%; }
.rail { background: var(--sidebar); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 20px 14px 12px; overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 0 12px 26px; color: var(--text); }
.rail-brand svg { width: 40px; height: 40px; color: var(--brand); flex: none; }
.rail-brand b { display: block; font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.rail-brand img { width: 40px; height: 40px; }
.rail-brand b i { font-style: normal; color: var(--primary); }
.rail-brand small { display: block; font-size: 9px; letter-spacing: .08em; color: var(--text-3); font-weight: 600; margin-top: 4px; }
.rail-nav { display: flex; flex-direction: column; }
.nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--text-3); padding: 12px 16px 5px; }
.rail-nav a { height: 44px; display: flex; align-items: center; gap: 13px; padding: 0 17px; border-radius: var(--r-pill); color: var(--text-2); font-size: 14.5px; font-weight: 500; margin: 1px 0; }
.rail-brand { padding-bottom: 14px; }
.connection { padding: 10px 12px 8px; }
[dir="rtl"] .eyebrow, [dir="rtl"] .topbar-date, [dir="rtl"] .micro { unicode-bidi: plaintext; }
.rail-nav a:hover { background: var(--surface-2); text-decoration: none; }
.rail-nav a.active { background: var(--green-100); color: var(--green-800); font-weight: 700; }
.theme-dark .rail-nav a.active, :root[data-theme="dark"] .rail-nav a.active { background: var(--surface-3); color: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rail-nav a.active { background: var(--surface-3); color: var(--text); } }
.rail-nav i { width: 19px; height: 19px; display: inline-block; flex: none; }
.nav-count { margin-inline-start: auto; background: var(--peach-200); color: var(--green-900); border-radius: var(--r-pill); min-width: 23px; height: 23px; padding: 0 7px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.rail-bottom { margin-top: auto; }
.connection { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 11px; padding: 18px 12px 12px; }
.connection i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); display: inline-block; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 14px 8px 2px; border-top: 1px solid var(--line); }
.user-card b { display: block; font-size: 12.5px; font-weight: 600; }
.user-card .micro { margin-top: 2px; }
.user-card a { margin-inline-start: auto; color: var(--text-3); font-size: 12px; }
.avatar { width: 35px; height: 35px; border-radius: 50%; background: var(--green-100); color: var(--green-800); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; font-family: var(--display); }
.avatar.peach { background: var(--peach-100); color: var(--peach-800); }
.avatar.sm { width: 24px; height: 24px; font-size: 9px; }
.theme-dark .avatar, :root[data-theme="dark"] .avatar { background: var(--surface-3); color: var(--text); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 72px; display: flex; align-items: center; gap: 14px; padding: 0 32px; border-bottom: 1px solid var(--line); background: var(--surface-1); position: sticky; top: 0; z-index: 5; }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12.5px; min-width: 0; }
.breadcrumb strong { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-title { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text); }
.topbar-right { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.topbar-date { font-size: 12px; color: var(--text-3); margin-inline-end: 6px; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* One column no wider than the screen: a wide table or a long address scrolls inside its card, the page does not. */
.page { padding: 30px 32px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; max-width: 1500px; width: 100%; }
.menu-btn { display: none; }
.scrim { display: none; }
@media (max-width: 1150px) { :root { --rail-w: 210px; } .page, .topbar { padding-left: 22px; padding-right: 22px; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 238px; z-index: 20; transform: translateX(-100%); transition: transform 200ms; }
  [dir="rtl"] .rail { transform: translateX(100%); }
  .rail.open { transform: none; box-shadow: var(--shadow-lg); }
  .scrim.open { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 15; }
  .menu-btn { display: inline-flex; }
  .topbar { height: 64px; padding: 0 14px; }
  .page { padding: 20px 16px 48px; }
  .topbar-date { display: none; }
}

/* ---------- page heading ---------- */
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.eyebrow { font-size: 10.5px; letter-spacing: .08em; font-weight: 700; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.subtitle { color: var(--text-2); font-size: 13.5px; margin: 8px 0 0; max-width: 80ch; line-height: 1.6; }
.heading-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.explain { color: var(--text-2); font-size: 13.5px; max-width: 80ch; margin: -8px 0 0; line-height: 1.6; }
/* A note that follows a card or a row of tiles sits below it, not against it. */
.card + .explain, .tiles + .explain, .grid-2 + .explain, form.card + .explain { margin-top: 16px; }
.alert-card .item { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.stock-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- metrics (Today) ---------- */
.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.metric { border: 1px solid transparent; border-radius: var(--r-wide); min-height: 138px; background: var(--surface-1); text-align: start; padding: 16px 17px; cursor: pointer; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; min-width: 0; }
.metric:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.metric.bad { background: var(--bad-soft); color: var(--bad); }
.metric.good { background: var(--good-soft); color: var(--good); }
.metric.warn { background: var(--warn-soft); color: var(--warn); }
.metric.info { background: var(--info-soft); color: var(--info); }
.metric.neutral { background: var(--surface-3); color: var(--text-2); }
.metric-top { display: flex; justify-content: space-between; align-items: center; }
.metric-top i { width: 18px; height: 18px; display: inline-block; }
.metric-value { font-family: var(--display); font-size: 38px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.metric-label { color: var(--text); font-weight: 600; font-size: 12.5px; margin-top: auto; padding-top: 12px; }
.metric-detail { font-size: 10.5px; margin-top: 3px; line-height: 1.5; }
@media (max-width: 1150px) { .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .metric { min-height: 120px; } .metric-value { font-size: 32px; } }

/* ---------- layout helpers ---------- */
.today-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 28px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; align-items: start; }
/* The emails page: the list beside the open email, one under the other on a phone. */
.grid-2.mail-grid { grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.4fr); }
@media (max-width: 760px) { .grid-2.mail-grid { grid-template-columns: minmax(0, 1fr); } }
/* The company page: contacts and deals beside the timeline, one under the other below a tablet. */
.grid-2.company-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 900px) { .grid-2.company-grid { grid-template-columns: minmax(0, 1fr); } }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.stack { display: grid; gap: 22px; align-content: start; }
@media (max-width: 900px) { .today-grid { grid-template-columns: 1fr; } }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading h2 { display: flex; align-items: center; gap: 9px; }
.section-heading .spacer { margin-inline-start: auto; }
.small-count { font-family: var(--font); background: var(--surface-3); color: var(--text-2); font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: var(--r-pill); }
.minor-section { margin-top: 10px; }
.empty-line { display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); padding: 16px 0; }
.empty-line:last-child { border-bottom: 0; }
.empty-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--text-3); flex: none; }
.empty-icon i { width: 17px; height: 17px; display: inline-block; }
.empty-line strong { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.empty-line .end { margin-inline-start: auto; }

/* ---------- cards ---------- */
.card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); min-width: 0; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-head .spacer { margin-inline-start: auto; }
.card-body { padding: 16px 18px; }
.hero-panel { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-hero); padding: 26px 28px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
/* A figure keeps to one line; one too long for its tile is made smaller (fitFigures in app.js). */
.tile { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-wide); padding: 14px 16px; min-width: 0; }
.tile b { display: block; font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.tile span { color: var(--text-3); font-size: 12px; }

/* ---------- follow-up cards ---------- */
.follow-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 12px; }
.follow-card.overdue { border-inline-start: 3px solid var(--bad); }
.follow-main { padding: 18px 20px; display: flex; gap: 13px; }
.monogram { background: var(--info-soft); color: var(--info); width: 42px; height: 42px; border-radius: var(--r-compact); display: grid; place-items: center; flex: none; font-family: var(--display); font-weight: 700; font-size: 14px; }
.monogram.green { background: var(--green-100); color: var(--green-800); }
.monogram.peach { background: var(--peach-100); color: var(--peach-800); }
.theme-dark .monogram.green, :root[data-theme="dark"] .monogram.green { background: var(--surface-3); color: var(--text); }
.follow-content { min-width: 0; flex: 1; }
.follow-title { font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.follow-person { color: var(--text-2); font-size: 12px; margin: 4px 0 8px; }
.follow-subject { font-size: 12.5px; font-weight: 500; margin-bottom: 8px; }
.follow-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); margin-top: 10px; }
.follow-meta .late { color: var(--bad); font-weight: 600; }
.follow-actions { padding: 10px 20px; display: flex; align-items: center; gap: 5px; border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.follow-actions .pick { margin-inline-start: auto; }
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 600; padding: 4px 9px; line-height: 1.3; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.peach { background: var(--peach-100); color: var(--peach-800); }
.theme-dark .chip.peach, :root[data-theme="dark"] .chip.peach { background: var(--accent-soft); color: var(--accent-ink); }
.queue-footer { display: flex; align-items: center; gap: 7px; padding: 10px 2px; color: var(--text-3); font-size: 11.5px; }
.queue-footer i { width: 14px; height: 14px; color: var(--good); display: inline-block; }

/* ---------- season panel & coming up ---------- */
.season-panel { border-radius: var(--r-hero); background: var(--hero); overflow: hidden; }
.season-art { height: 150px; background: linear-gradient(135deg, var(--green-200), var(--peach-200)); position: relative; overflow: hidden; }
.season-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.season-body { padding: 22px; }
.season-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); display: flex; align-items: center; gap: 6px; font-weight: 700; }
.season-body h3 { margin: 10px 0 6px; font-size: 22px; font-weight: 700; }
.season-body p { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin: 0 0 16px; }
.season-company { padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .08); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.season-company + .season-company { margin-top: 10px; }
.season-company strong { font-size: 12.5px; display: block; }
.season-company .micro { color: var(--text-2); }
.coming-row { padding: 16px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); display: flex; gap: 12px; margin-bottom: 10px; }
.date-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 44px; height: 48px; background: var(--info-soft); color: var(--info); border-radius: var(--r-compact); flex: none; }
.date-badge span { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.date-badge strong { font-family: var(--display); font-size: 20px; line-height: 1; }
.coming-row h3 { font-family: var(--font); font-size: 12.5px; margin-bottom: 4px; }
.coming-row p { margin: 0 0 6px; font-size: 11.5px; color: var(--text-2); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: start; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-1); white-space: nowrap; }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tr.clickable { cursor: pointer; }
table.data td.r, table.data th.r { text-align: end; font-variant-numeric: tabular-nums; }
.empty { padding: 30px 18px; text-align: center; color: var(--text-3); }
.empty b { display: block; color: var(--text-2); margin-bottom: 4px; font-size: 13.5px; }

/* ---------- badges ---------- */
.badge { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.badge.brand { background: var(--brand-soft); color: var(--brand-ink); }
.badge.accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: var(--info-soft); color: var(--info); }
.stage-lead { background: var(--surface-3); color: var(--text-2); }
.stage-contacted, .stage-qualified { background: var(--info-soft); color: var(--info); }
.stage-quoted, .stage-sample, .stage-negotiation { background: var(--accent-soft); color: var(--accent-ink); }
.stage-order, .stage-shipment { background: var(--brand-soft); color: var(--brand-ink); }
.stage-delivered { background: var(--good-soft); color: var(--good); }
.stage-lost, .stage-disqualified { background: var(--bad-soft); color: var(--bad); }

/* ---------- buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-1); color: var(--text); cursor: pointer; font-weight: 600; font-size: 13px; transition: background 140ms, border-color 140ms; white-space: nowrap; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.accent { background: var(--peach-300); border-color: var(--peach-300); color: var(--green-900); }
.btn.soft { background: var(--green-100); border-color: var(--green-100); color: var(--green-800); }
.btn.danger { color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.sm { height: 29px; padding: 0 11px; font-size: 12px; }
.btn.wide { width: 100%; justify-content: center; }
.btn:disabled { opacity: .55; cursor: default; }
.btn i { width: 15px; height: 15px; display: inline-block; }
.btn > svg, .step > svg, .chip > svg, .tab > svg { width: 15px; height: 15px; flex: none; }
.form > .btn, .card-body > .btn { justify-self: start; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-compact); border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn i { width: 18px; height: 18px; display: inline-block; }
.notification-dot { position: absolute; width: 6px; height: 6px; top: 8px; inset-inline-end: 9px; background: var(--bad); border-radius: 50%; }
label.f { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); font-weight: 500; min-width: 0; }
label.f > span .req { color: var(--bad); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=url], select, textarea {
  width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface-1); color: var(--text); min-width: 0; font-size: 13px;
}
textarea { height: auto; min-height: 92px; padding: 9px 11px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.form { display: grid; gap: 14px; }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.form .row.c2 { grid-template-columns: 1fr 1fr; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--r-compact); padding: 10px 12px 12px; margin: 0; display: grid; gap: 10px; }
.form legend { font-size: 12px; color: var(--text-3); padding: 0 4px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters input, .filters select { width: auto; min-width: 150px; }
.filters input[type=search] { min-width: 240px; }
.topbar-actions input, .topbar-actions select { width: auto; min-width: 150px; height: 36px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { cursor: pointer; border: 1px solid var(--line); background: var(--surface-1); }
.chips .chip.on, .chips .chip:has(input:checked) { background: var(--green-100); color: var(--green-800); border-color: var(--green-200); }
.segmented { display: flex; padding: 3px; background: var(--surface-3); border-radius: var(--r-pill); gap: 2px; }
.segmented .tab { height: 28px; font-size: 11.5px; padding: 0 12px; border-radius: var(--r-pill); color: var(--text-2); border: 0; background: transparent; cursor: pointer; font-weight: 600; }
.segmented .tab.on { background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { width: min(640px, 100%); max-height: 92vh; overflow: auto; background: var(--surface-1); border-radius: var(--r-hero); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.modal.wide { width: min(900px, 100%); }
.modal-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 17px; }
.modal-head .icon-btn { margin-inline-start: auto; }
.modal-body { padding: 18px 20px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--line); }
.modal-error { background: var(--bad-soft); color: var(--bad); padding: 8px 12px; border-radius: var(--r-compact); font-size: 13px; margin-bottom: 10px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; }
.toast { background: var(--text); color: var(--page); padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); font-size: 13px; max-width: 420px; }
.toast.bad { background: var(--bad); color: #fff; }
.toast.good { background: var(--good); color: #fff; }

/* ---------- lists ---------- */
.list { display: grid; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); align-items: start; }
.item:last-child { border-bottom: 0; }
.item .title { font-weight: 600; }
.item .sub { color: var(--text-3); font-size: 12.5px; }
.item .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- timeline ---------- */
.timeline { display: grid; }
.tl { position: relative; padding-inline-start: 48px; padding-bottom: 22px; min-height: 60px; }
.tl::before { content: ""; position: absolute; inset-inline-start: 16px; top: 36px; bottom: 0; width: 1px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl .dot { position: absolute; inset-inline-start: 0; top: 0; width: 34px; height: 34px; border-radius: var(--r-compact); background: var(--green-100); color: var(--green-800); display: grid; place-items: center; }
.tl .dot i { width: 16px; height: 16px; display: inline-block; }
.tl .dot.in { background: var(--peach-100); color: var(--peach-800); border-radius: 50%; }
.tl .dot.event { background: var(--info-soft); color: var(--info); border-radius: 50%; }
.tl .dot.plain { background: var(--surface-3); color: var(--text-2); }
.theme-dark .tl .dot, :root[data-theme="dark"] .tl .dot { background: var(--good-soft); color: var(--good); }
.theme-dark .tl .dot.in, :root[data-theme="dark"] .tl .dot.in { background: var(--warn-soft); color: var(--warn); }
.tl .head { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.tl .head b { font-weight: 700; font-size: 13px; }
.tl .when { color: var(--text-3); font-size: 11px; display: block; margin-top: 5px; }
.tl .text { color: var(--text-2); white-space: pre-wrap; margin-top: 3px; font-size: 12.5px; line-height: 1.6; }
.tl .text.clamp { max-height: 4.8em; overflow: hidden; }
.timeline-date { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-3); margin-bottom: 16px; }

/* ---------- pipeline ---------- */
.pipeline-summary { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pipeline-summary strong { font-family: var(--display); font-size: 24px; font-weight: 700; }
.pipeline-summary .summary-label { font-size: 11.5px; color: var(--text-3); margin-right: 8px; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.col { border-radius: var(--r-wide); background: var(--surface-3); padding: 14px 12px; border-top: 3px solid var(--neutral-400); display: flex; flex-direction: column; min-height: 200px; min-width: 0; }
.col.info { background: var(--info-soft); border-top-color: var(--info); }
.col.peach { background: var(--warn-soft); border-top-color: var(--peach-400); }
.col.good { background: var(--good-soft); border-top-color: var(--good); }
.col.over { outline: 2px dashed var(--brand); }
.col-head { display: flex; align-items: center; gap: 8px; padding: 0 3px; }
.col-head b { font-family: var(--display); font-size: 13.5px; font-weight: 700; }
.col-head .v { font-size: 11.5px; color: var(--text-2); margin: 8px 3px 14px; display: block; }
.col-body { display: grid; gap: 10px; align-content: start; flex: 1; }
.dcard { background: var(--surface-1); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 14px; cursor: grab; display: grid; gap: 4px; }
.dcard:hover { border-color: var(--green-400); }
.dcard:active { cursor: grabbing; }
.dcard .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dcard .co { font-weight: 700; font-size: 13.5px; margin-top: 8px; }
.dcard .t { color: var(--text-2); font-size: 12px; line-height: 1.5; }
.dcard .val { font-family: var(--display); font-size: 19px; font-weight: 700; margin: 8px 0 6px; }
.dcard .val small { font-family: var(--font); font-size: 10px; color: var(--text-3); font-weight: 400; }
.dcard .owner { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-2); }
.dcard .next { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.dcard .next.late { color: var(--bad); font-weight: 600; }
.dcard .next.due { color: var(--peach-700); }
.empty-stage { border: 1px dashed var(--neutral-300); border-radius: 14px; padding: 26px 10px; text-align: center; color: var(--text-3); font-size: 11.5px; }

/* ---------- stage stepper (deal page) ---------- */
.stepper { display: flex; flex-wrap: wrap; gap: 6px; }
.step { height: 32px; padding: 0 14px; border-radius: var(--r-pill); font-size: 12.5px; border: 1px solid var(--line); background: var(--surface-1); cursor: pointer; color: var(--text-2); font-weight: 600; }
.step.done { background: var(--green-100); border-color: var(--green-100); color: var(--green-800); }
.step.now { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.step.closed { border-style: dashed; }
.step:disabled { cursor: default; }

/* ---------- company hero & facts ---------- */
.company-top { display: flex; align-items: center; gap: 17px; flex-wrap: wrap; }
.company-logo { width: 66px; height: 66px; background: var(--hero); color: var(--primary); border-radius: var(--r-wide); display: grid; place-items: center; flex: none; font-family: var(--display); font-weight: 800; font-size: 22px; }
.company-top h1 { font-size: 26px; margin-bottom: 8px; }
.company-top .heading-actions { margin-inline-start: auto; }
.company-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.fact-label { color: var(--text-3); font-size: 10.5px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.fact-value { font-size: 13px; line-height: 1.5; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; }
.kv div b { display: block; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 3px; }
.kv div span { font-size: 13.5px; }
.contact-item { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-1); padding: 16px; display: flex; gap: 12px; margin-bottom: 10px; }
.contact-item h3 { font-family: var(--font); font-size: 13.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.contact-item p { font-size: 12px; color: var(--text-2); margin: 3px 0; overflow-wrap: anywhere; }
.contact-item .actions { margin-inline-start: auto; display: flex; gap: 4px; align-self: flex-start; }
.company-deal { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; margin-bottom: 10px; }
.company-deal h3 { font-size: 13.5px; }
.company-deal .val { font-family: var(--display); font-size: 19px; font-weight: 700; margin: 12px 0 8px; }
.company-deal .val small { font-family: var(--font); font-size: 10px; color: var(--text-3); font-weight: 400; }

/* ---------- bars (reports) ---------- */
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 130px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; }
.bar .track { height: 16px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.bar .fill { height: 100%; background: linear-gradient(90deg, var(--green-500), var(--green-300)); border-radius: var(--r-pill); }
.bar .r { text-align: end; font-variant-numeric: tabular-nums; color: var(--text-2); font-family: var(--display); font-weight: 700; }

/* ---------- quote editor ---------- */
.lines td input, .lines td select { height: 34px; padding: 0 8px; }
.lines td { vertical-align: middle; }
.total-row td { font-weight: 700; border-top: 2px solid var(--primary); font-family: var(--display); }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: var(--surface-3); border-radius: var(--r-pill); width: fit-content; max-width: 100%; }
.tab { height: 34px; padding: 0 16px; border: 0; background: none; cursor: pointer; color: var(--text-2); border-radius: var(--r-pill); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; }
.tab.on { background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-sm); }
.tab:hover { text-decoration: none; }

.page-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--text-3); }

/* ---------- phone: tables become labelled cards, no sideways scroll ---------- */
.filters input[type=checkbox] { min-width: 0; width: auto; height: auto; }
/* Read by screen readers, not shown: a heading for a column of buttons, the sign-in page's title. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* A link inside a sentence is underlined, so it is not told apart by colour alone. */
p a:not(.btn), .eyebrow a, .muted a:not(.btn), .micro a, .small a:not(.btn), .check a, .buyer-pick a { text-decoration: underline; text-underline-offset: 2px; }
.section-heading h2 { text-wrap: nowrap; }
@media (max-width: 640px) {
  .breadcrumb > span:first-child, .breadcrumb > i { display: none; }
  .table-wrap { overflow: visible; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data thead { display: none; }
  table.data tbody tr { border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 0; margin: 0 0 10px; background: var(--surface-1); }
  table.data tbody tr:nth-child(even) { background: var(--surface-1); }
  table.data td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 14px; border-bottom: 0; text-align: end; overflow-wrap: anywhere; }
  table.data td .micro { white-space: normal; }
  table.data td::before { content: attr(data-label); color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; text-align: start; flex: none; min-width: 90px; padding-top: 2px; }
  table.data td.no-label::before { content: ""; min-width: 0; }
  table.data td.r { text-align: end; }
  table.data td:empty { display: none; }
  .lines td { display: table-cell; text-align: start; }
  .lines, .lines tbody, .lines tr { display: table; width: 100%; }
  .lines thead { display: table-header-group; }
  .lines td::before { content: none; }
  .lines .table-wrap, .table-wrap:has(.lines) { overflow-x: auto; }
  .btn.sm { height: 36px; }
  .icon-btn { width: 40px; height: 40px; }
  .section-heading h2 { text-wrap: balance; }
  .segmented .tab { height: 32px; }
}

.page-enter { animation: enter 280ms ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page-enter { animation: none; } .rail, .metric { transition: none; } }
@media print { .rail, .topbar, .toasts { display: none !important; } .app { grid-template-columns: 1fr; } }

/* ---------- brand & product icons ---------- */
.rail-brand img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.login-logo { display: block; width: min(260px, 80%); height: auto; margin: 0 auto 6px; }
.picon { display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--picon) center / contain no-repeat; mask: var(--picon) center / contain no-repeat; vertical-align: middle; flex: none; }
.picon.lg { width: 120px; height: 120px; }
.season-art { height: 150px; display: grid; place-items: center; background: linear-gradient(135deg, var(--green-200), var(--peach-200)); color: var(--green-700); position: relative; overflow: hidden; }
.season-art .picon { opacity: .9; }
.season-art .ghost { position: absolute; inset-inline-end: -20px; bottom: -30px; width: 170px; height: 170px; opacity: .18; }
.product-cell { display: flex; align-items: center; gap: 10px; }
.product-cell .picon { color: var(--good); width: 22px; height: 22px; }
.picon-box { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--good-soft); flex: none; }
/* The documents card: issue buttons on their own wrapping row under the title. */
.doc-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
/* Seven metrics on Today (late payments present) stay on one row at desktop width. */
.metrics:has(> :nth-child(7)) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1150px) { .metrics:has(> :nth-child(7)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .metrics:has(> :nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Settings: a unified page heading and number fields that are as short as their numbers. */
.page-heading.compact { margin-bottom: 14px; }
.page-heading.compact .subtitle { margin-top: 2px; }
.settings-tabs { margin-bottom: 18px; }
.settings-body .form input[type=number] { max-width: 140px; }
.settings-body .form .f:has(> input[type=number]) { max-width: 560px; }
.popover { position: absolute; top: 64px; inset-inline-end: 24px; width: min(380px, calc(100vw - 32px)); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lg); z-index: 40; overflow: hidden; }
.popover-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-weight: 700; }
.popover-head svg { width: 16px; height: 16px; flex: none; color: var(--primary); }
.rail-brand span { min-width: 0; }
.rail-brand small { white-space: normal; line-height: 1.3; }
.popover-head .micro { margin-inline-start: auto; }
.popover .item { padding: 10px 16px; }
.popover-foot { padding: 10px 16px; border-top: 1px solid var(--line); }
.lang-btn { font-family: var(--display); font-weight: 700; font-size: 12px; width: auto; padding: 0 10px; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.file-row:last-child { border-bottom: 0; }
.file-row .meta { color: var(--text-3); font-size: 11.5px; }
.file-row .end { margin-inline-start: auto; display: flex; gap: 4px; }
.doc-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-row .state { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bad-soft); color: var(--bad); }
.doc-row .state.issued { background: var(--good-soft); color: var(--good); }
.doc-row .state.draft { background: var(--warn-soft); color: var(--warn); }
.doc-row .state.not_required { background: var(--surface-3); color: var(--text-3); }
.doc-row .state i { width: 14px; height: 14px; display: inline-block; }
.doc-row b { display: block; font-size: 13px; }
.doc-row .micro { display: block; }
.ship-steps { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- v2: lead lists, campaigns, approvals, queue, research, accounting ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-compact); background: var(--info-soft); color: var(--text); border: 1px solid transparent; margin: 0 0 16px; font-size: 13.5px; }
.notice.warn { background: var(--warn-soft); }
.notice > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--warn); }
.notice p { margin: 0; line-height: 1.55; }
.notice p + p { margin-top: 4px; }
.card-head h2 svg { width: 16px; height: 16px; vertical-align: -2px; margin-inline-end: 4px; color: var(--primary); }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* upload */
.dropzone { position: relative; display: grid; gap: 4px; place-items: center; text-align: center; padding: 28px 16px; border: 2px dashed var(--brand); border-radius: var(--r-wide); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: background .15s, border-color .15s; }
.dropzone:hover, .dropzone.over { background: var(--brand-soft); border-color: var(--primary); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dropzone b { color: var(--text); font-size: 15px; }
.dropzone span { font-size: 12.5px; }
.dropzone .picked { color: var(--primary); font-weight: 600; word-break: break-word; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 14px; }
.map-row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.map-row .req { color: var(--bad); }

/* campaigns */
.campaign-form { display: grid; gap: 18px; }
.step-card { border: 1px solid var(--line); border-radius: var(--r-compact); padding: 12px 14px 14px; display: grid; gap: 10px; margin: 0 0 12px; background: var(--surface-2); }
.step-card legend { font-weight: 700; color: var(--text); font-size: 13px; padding: 0 6px; }
.step-card textarea { font-family: var(--font); line-height: 1.55; }
.preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pre { white-space: pre-wrap; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* approvals */
.approval-list { display: grid; gap: 16px; }
.approval .card-head { align-items: flex-start; }
.approval .card-head h2 { font-size: 16px; margin: 0; }
.approval-body { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 20px; }
.approval-facts { display: grid; gap: 10px; align-content: start; font-size: 13px; }
.approval-facts b { display: block; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.approval-facts span { word-break: break-word; }
.approval textarea { font-family: var(--font); line-height: 1.6; min-height: 220px; }
.approval-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.decided { opacity: .62; }
.decided .card-body { padding: 12px 18px; }

/* queue */
.progress-line { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.progress-line .track { flex: 1; height: 10px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.progress-line .fill { height: 100%; background: linear-gradient(90deg, var(--green-500), var(--peach-300)); border-radius: var(--r-pill); transition: width .3s; }
.queue-list { display: grid; gap: 14px; }
.queue-item .card-head h2 { font-size: 16px; margin: 0; }
.queue-item textarea { margin-top: 12px; width: 100%; }
.outcome-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* company page additions */
.kind-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.kind-row .micro { margin-inline-end: 4px; }
/* buyer data waiting for approval (company page and Approvals) */
.buyer-review { margin: 12px 0 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.buyer-pick { align-items: flex-start; margin: 6px 0; line-height: 1.5; }
.buyer-pick input { margin-top: 3px; flex: none; }
.buyer-pick .mono { overflow-wrap: anywhere; }
.buyer-review .approval-actions { margin-top: 8px; }
.growth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin: 18px 0 22px; align-items: start; }
.growth-grid .notice { margin: 0; grid-column: 1 / -1; }

/* pickers inside modals */
.list .pick { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: start; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 9px 12px; cursor: pointer; color: var(--text); font: inherit; }
.list .pick:hover { background: var(--surface-2); }
.list .pick.on { background: var(--brand-soft); }
.list .pick .sub { color: var(--text-3); font-size: 12px; }

/* research */
.price-card { margin-top: 14px; }
.price-card .kv span.num { font-family: var(--display); font-weight: 700; font-size: 16px; display: block; }

/* accounting */
.gain { color: var(--good); font-weight: 600; }
.loss { color: var(--bad); font-weight: 600; }
table.data tr.voided td { opacity: .5; text-decoration: line-through; }
table.data tr.voided td:last-child { text-decoration: none; }
table.data td.late { color: var(--bad); font-weight: 600; }
.modal table.lines { width: 100%; border-collapse: collapse; }
.modal table.lines th { font-size: 11px; color: var(--text-3); text-align: start; padding: 4px; font-weight: 600; }
.modal table.lines td { padding: 3px; }

/* settings → integrations */
.integration .card-body > p.muted { margin: 0; }

@media (max-width: 760px) {
  .approval-body { grid-template-columns: 1fr; }
  .map-row { grid-template-columns: 1fr; gap: 4px; }
  .growth-grid { grid-template-columns: 1fr; }
  .modal table.lines thead { display: none; }
  .modal table.lines tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .modal table.lines td:first-child { grid-column: 1 / -1; }
}
.kv div span.strong { font-weight: 700; }

/* Names and data from the lists keep their own direction inside the Arabic interface. */
.approval .card-head h2, .queue-item .card-head h2, .company-top h2, .page-heading h1, table.data td, .item .title, .item .sub, .approval-facts span, .kv div span { unicode-bidi: plaintext; }
.stack-v { display: grid; gap: 16px; }
.kv div span + span { display: block; margin-top: 2px; }
input[type=file] { font: inherit; font-size: 13px; color: var(--text-2); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: 12.5px; margin-inline-end: 10px; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-1); color: var(--text); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--surface-3); }

/* ---------- work order: pickers, record buttons, bulk bar, archived rows, health ---------- */
.picker { position: relative; }
.picker-list { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 45; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-compact); box-shadow: var(--shadow-lg); max-height: 300px; overflow: auto; }
.picker-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: start; cursor: pointer; color: var(--text); font: inherit; }
.picker-list button:last-child { border-bottom: 0; }
.picker-list button:hover, .picker-list button:focus-visible { background: var(--surface-2); outline: none; }
.btn.ghost.danger { color: var(--bad); }
.rec-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
tr.archived td { color: var(--text-3); }
tr.archived td b, tr.archived td a { color: var(--text-2); }
.bulk-bar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; border-radius: var(--r-card); background: var(--surface-1); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.bulk-bar b { font-variant-numeric: tabular-nums; }
td.pick, th.pick { width: 34px; text-align: center; }
td.pick input, th.pick input { width: 16px; height: 16px; }
.view-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); }
.view-tabs button { border: 0; background: none; padding: 6px 12px; border-radius: var(--r-pill); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.view-tabs button[aria-pressed="true"] { background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-sm); }
.tl .tl-tools { display: inline-flex; gap: 4px; margin-inline-start: 8px; opacity: .75; }
.tl:hover .tl-tools, .tl:focus-within .tl-tools { opacity: 1; }
.tl.archived { opacity: .6; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.health-grid .tile { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-compact); background: var(--surface-1); display: grid; gap: 4px; }
.health-grid .tile b { font-size: 18px; white-space: normal; }
.health-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--good); margin-inline-end: 6px; vertical-align: middle; }
.health-dot.warn { background: var(--warn); }
.health-dot.bad { background: var(--bad); }
.page-help { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; padding: 10px 14px; border-radius: var(--r-compact); background: var(--brand-soft); color: var(--text); font-size: 13.5px; line-height: 1.6; max-width: 110ch; }
.page-help svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--brand); }
.archived-block { margin-top: 10px; }
.archived-block summary { cursor: pointer; padding: 6px 0; }
.contact-item.archived, .company-deal.archived { opacity: .75; }