/* ---------- boot ---------- */
.boot { min-height: 100vh; display: grid; place-items: center; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.login-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #142E4B 0%, #122A44 45%, #0C1B2A 100%); color: #FFFFFF; /* navy in both themes → literal light ink, never --on-solid */ display: flex; align-items: center; padding: 60px; }
.login-lockup { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.login-lockup img { width: 310px; max-width: 100%; height: auto; display: block; }
.login-product { font-size: var(--fs-sm); font-weight: var(--fw-semi); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.login-hero-inner { position: relative; z-index: 1; max-width: 520px; display: flex; flex-direction: column; gap: 22px; animation: page-in .6s var(--ease-out) both; }
.login-hero h1 { font-size: var(--fs-hero); line-height: 1.15; } .login-hero p { font-size: var(--fs-lg); opacity: .85; line-height: 1.6; }
.login-features { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.login-features li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.login-features svg { width: 22px; height: 22px; color: var(--lime); flex: none; }
.login-orbs i { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .38; animation: float-y 7s ease-in-out infinite; }
.login-orbs i:nth-child(1) { width: 380px; height: 380px; background: #2E9BD8; top: -120px; inset-inline-end: -100px; } .login-orbs i:nth-child(2) { width: 240px; height: 240px; background: #B4E027; bottom: -120px; inset-inline-start: -60px; animation-delay: 1.5s; } .login-orbs i:nth-child(3) { width: 220px; height: 220px; background: #1668B0; bottom: 120px; inset-inline-end: 80px; animation-delay: 3s; }
.login-form { display: grid; place-items: center; padding: 40px; }
.login-card { width: min(440px, 100%); padding: 32px; display: flex; flex-direction: column; gap: 18px; animation: modal-in .5s var(--ease-spring) both; box-shadow: var(--shadow-lg); }
.login-card .err { color: var(--danger); font-size: var(--fs-sm); background: var(--danger-soft); padding: 10px 12px; border-radius: var(--r-sm); }
@media (max-width: 900px) { .login { grid-template-columns: 1fr; } .login-hero { padding: 40px 24px; min-height: 40vh; } .login-hero h1 { font-size: 28px; } }

/* ---------- home ---------- */
/* fixed dark gradient in both themes → always white text, never --on-solid */
/* One flat brand band, no three-stop gradient and no coral glow behind it. It still marks the top of the day
   as "yours", but it no longer looks like a marketing header sitting on top of a business tool. */
.hero { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 20px 24px; color: #FFFFFF; background: linear-gradient(120deg, #142E4B 0%, #1B3A5C 70%, #1F4470 100%); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hero h1 { font-size: var(--fs-2xl); position: relative; } .hero p { opacity: 1; color: rgba(255,255,255,.92); position: relative; } .hero .hero-stats { display: flex; gap: 18px; position: relative; flex-wrap: wrap; }
.hero .hero-stat { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); padding: 9px 14px; min-width: 106px; }
.hero .hero-stat b { display: block; font-size: var(--fs-2xl); font-weight: var(--fw-semi); line-height: 1.1; color: #FFFFFF; }
.hero .hero-stat span { font-size: var(--fs-xs); opacity: 1; color: rgba(255,255,255,.88); }  /* .85 opacity fell under 4.5:1 */
.hero .hero-stat.alert { background: rgba(255,143,163,.22); border-color: rgba(255,143,163,.45); }
.hero .hero-stat.lime { border-color: var(--lime); }
.home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); } @media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr; } }
.task-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background var(--t-fast); cursor: pointer; }
.task-row:hover { background: var(--surface-hover); } .task-row:last-child { border-bottom: 0; }
.task-row .ttl { font-weight: 600; font-size: var(--fs-sm); } .task-row .meta { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; }
.task-row .progress { width: 90px; } .task-row.overdue .ttl { color: var(--danger); }
.done-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); } .done-row:last-child { border: 0; } .done-row svg { width: 16px; height: 16px; color: var(--success); }
.priority-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); transition: all var(--t-fast); cursor: pointer; }
.priority-card:hover { background: var(--surface-hover); border-color: var(--border-strong); } [dir="rtl"] .priority-card { --dir: -1; }
.priority-card .ico { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; } .priority-card .ico svg { width: 18px; height: 18px; }
.priority-card.ops_overdue .ico { background: var(--danger-soft); color: var(--danger); } .priority-card.stale_negotiation .ico { background: var(--warning-soft); color: var(--warning); } .priority-card.tender_due .ico { background: var(--ai-soft); color: var(--ai); } .priority-card.unassigned_conversations .ico { background: var(--info-soft); color: var(--info); }
/* The team table sits in a narrow side column, so five equal-ish columns squeezed the numbers into each
   other. The name gets the room it needs and the four figures are fixed, right-aligned and tabular so
   they line up in a single readable column each. */
.team-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 52px); gap: 8px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.team-row > span:not(:first-child) { text-align: end; font-variant-numeric: tabular-nums; }
.team-row .truncate { min-width: 0; }
.team-row.head { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); position: sticky; top: 0; }
.team-row.head > span:not(:first-child) { text-align: end; }
.agenda-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); } .agenda-item:last-child { border: 0; }
.agenda-item .tm { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); min-width: 46px; } .agenda-item svg { width: 16px; height: 16px; color: var(--brand); }

/* ---------- deals: workflow bar + kanban ---------- */
.workflow-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.wf-step { position: relative; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-xs); transition: transform var(--t-fast) var(--ease); }
.wf-step:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.wf-step .n { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--on-solid); flex: none; background: var(--stage-c); box-shadow: none; }
.wf-step .n svg { width: 16px; height: 16px; } .wf-step b { display: block; font-size: var(--fs-sm); color: var(--text); } .wf-step span { color: var(--text-3); line-height: 1.3; }
.wf-step::after { content: ""; position: absolute; inset-inline-end: -8px; top: 50%; width: 8px; height: 2px; background: var(--border-strong); } .wf-step:last-child::after { display: none; }
.wf-step.locked .n { opacity: .6; } .wf-step.locked::before { content: "🔒"; position: absolute; top: 6px; inset-inline-end: 8px; font-size: 10px; }
@media (max-width: 1100px) { .workflow-bar { grid-template-columns: repeat(3, 1fr); } .wf-step::after { display: none; } } @media (max-width: 640px) { .workflow-bar { grid-template-columns: 1fr 1fr; } }
.kanban { display: grid; grid-template-columns: repeat(6, minmax(250px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; min-height: 60vh; }
.kcol { display: flex; flex-direction: column; gap: 8px; border-radius: var(--r-lg); padding: 8px; background: var(--surface-2); border: 1px solid var(--border); min-height: 280px; transition: background var(--t-fast), box-shadow var(--t-fast); }
.kcol.over { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--stage-c); }
.kcol.locked-drop { opacity: .6; cursor: not-allowed; }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 8px; border-bottom: 3px solid var(--stage-v, var(--stage-c)); margin-bottom: 4px; }
.kcol-head .ico { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--stage-soft, color-mix(in srgb, var(--stage-c) 12%, transparent)); color: var(--stage-c); display: grid; place-items: center; } .kcol-head .ico svg { width: 15px; height: 15px; }
.kcol-head b { font-size: var(--fs-sm); }
/* What the stage means, said once, in the column it belongs to. */
.kcol-hint { font-size: 11px; line-height: 1.4; color: var(--text-4); padding: 0 6px 6px; margin: 0; } .kcol-head .cnt { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; } .kcol-head .sum { font-size: 10.5px; color: var(--text-4); display: block; }
/* Deal cards sit still. Twenty cards each lifting 2px as the pointer crosses them turned the board into a
   ripple; a border and a hairline shadow are enough to say "this is a card you can pick up". */
.kcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; cursor: grab; box-shadow: var(--shadow-sm); transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); animation: rise-in var(--t-base) var(--ease-out) both; position: relative; }
.kcard:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); transform: translateY(-2px); } .kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .92; transform: rotate(1.5deg) scale(1.03); box-shadow: var(--shadow-lg); border-color: var(--brand); } .kcard.ghost { border: 2px dashed var(--stage-c); background: transparent; box-shadow: none; height: 80px; animation: none; }
.kcard .ref { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-4); } .kcard .ttl { font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; margin: 3px 0 6px; }
.kcard .cli { font-size: var(--fs-xs); color: var(--text-2); display: flex; align-items: center; gap: 5px; } .kcard .cli svg { width: 13px; height: 13px; color: var(--text-4); }
.kcard .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; } .kcard .val { font-weight: var(--fw-semi); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.kcard .services { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .kcard .services span { font-size: 10px; padding: 1px 6px; border-radius: var(--r-xs); background: var(--brand-soft); color: var(--brand); }
.kcard .prio-strip { position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; } .kcard.p-high .prio-strip { background: var(--warning); } .kcard.p-urgent .prio-strip { background: var(--danger); }
.kcard.pop-in { animation: pop var(--t-slow) var(--ease-spring) both; }
.deal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.deal-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-4); align-items: start; } @media (max-width: 1100px) { .deal-grid { grid-template-columns: 1fr; } }
.stage-stepper { display: flex; gap: 4px; } .stage-stepper button, .stage-stepper > span { flex: 1; height: var(--control-h); border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--t-fast); }
.stage-stepper button svg, .stage-stepper > span svg { width: 14px; height: 14px; }
/* Every finished stage used to keep its own colour, so the stepper read as four unrelated pastel boxes
   instead of a path. Done is one quiet treatment; only the stage you are actually in carries its colour. */
.stage-stepper button.done, .stage-stepper > span.done { background: var(--surface-2); color: var(--text-3); border-color: var(--border); }
.stage-stepper button.done svg, .stage-stepper > span.done svg { color: var(--success); }
.stage-stepper button.current, .stage-stepper > span.current { background: var(--stage-c); color: var(--on-solid); border-color: var(--stage-c); }
.stage-stepper button:not(:disabled):hover { border-color: var(--stage-c); color: var(--stage-c); } .stage-stepper button.current:hover { color: var(--on-solid); } .stage-stepper button:disabled { opacity: .5; cursor: not-allowed; }
.ops-window { border-radius: var(--r-lg); padding: 16px; background: linear-gradient(135deg, var(--ai-soft), var(--surface)); border: 1px solid var(--border); }
.quote-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.quote-row .num { font-weight: 700; } .quote-row .meta { font-size: var(--fs-xs); color: var(--text-3); }
.form-preview { font-size: var(--fs-sm); } .form-preview dt { color: var(--text-3); font-size: var(--fs-xs); } .form-preview dd { margin: 0 0 8px; font-weight: 500; }
.tender-line { display: grid; grid-template-columns: 1fr 1fr 1fr 80px 32px; gap: 8px; align-items: center; }

/* ---------- database ---------- */
.client-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.client-head .avatar.xl { border-radius: var(--r-xl); } .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .fact { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); } .fact b { display: block; font-size: var(--fs-lg); } .fact span { font-size: var(--fs-xs); color: var(--text-3); }
.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-5); align-items: start; } @media (max-width: 1100px) { .detail-grid { grid-template-columns: 1fr; } }
.expo-card { position: relative; overflow: hidden; padding: 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: all var(--t-base) var(--ease); }
.expo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .expo-card::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 5px; background: linear-gradient(90deg, var(--blue-500), var(--rose-500), var(--indigo-500)); }
.expo-card h3 { font-size: var(--fs-lg); } .temp-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); } .temp-bar i { display: block; height: 100%; } .temp-bar .hot { background: var(--hot); } .temp-bar .warm { background: var(--warm); } .temp-bar .cold { background: var(--cold); }
.import-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.dup { color: var(--warning); } .lead-row.dup td { background: var(--warning-soft); }
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--r-lg); padding: 30px; text-align: center; color: var(--text-3); transition: all var(--t-fast); cursor: pointer; } .dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.dropzone svg { width: 36px; height: 36px; margin: 0 auto 8px; }

/* ---------- inbox ---------- */
.inbox { display: grid; grid-template-columns: 340px 1fr 320px; height: calc(100vh - var(--topbar-h)); margin: calc(-1 * var(--sp-6)); } @media (max-width: 1200px) { .inbox { grid-template-columns: 300px 1fr; } .inbox .ctx { display: none; } }
.inbox > * { min-height: 0; } .conv-list { border-inline-end: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; }
.conv-list .head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .conv-list .items { overflow: auto; flex: 1; }
.conv { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--t-fast); position: relative; } .conv:hover { background: var(--surface-hover); } .conv.active { background: var(--brand-soft); }
.conv .who { font-weight: 600; font-size: var(--fs-sm); display: flex; justify-content: space-between; gap: 6px; } .conv .who time { font-size: 10.5px; color: var(--text-4); font-weight: 400; } .conv .prev { font-size: var(--fs-xs); color: var(--text-3); }
.conv.unread .prev { color: var(--text); font-weight: 500; } .conv .unread-n { position: absolute; inset-inline-end: 14px; bottom: 12px; background: var(--accent); color: var(--on-solid); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.conv .kind { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; } .conv .kind.whatsapp { background: var(--success-soft); color: var(--leaf-600); } .conv .kind.email { background: var(--info-soft); color: var(--sky-600); } .conv .kind svg { width: 17px; height: 17px; }
.thread { display: flex; flex-direction: column; background: var(--bg); } .thread .head { padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; gap: 12px; }
.thread .msgs { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 72%; padding: 10px 14px; border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: 1.5; position: relative; animation: rise-in var(--t-base) var(--ease-out) both; white-space: pre-wrap; word-break: break-word; }
.msg.in { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-start-start-radius: 4px; } .msg.out { align-self: flex-end; background: linear-gradient(135deg, var(--blue-600), var(--blue-700)); color: var(--on-solid); border-start-end-radius: 4px; }
.msg .meta { display: block; font-size: 10px; opacity: .65; margin-top: 4px; text-align: end; } .msg.failed { border-color: var(--danger); } .msg .att { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px; border-radius: var(--r-sm); background: rgba(0,0,0,.08); font-size: var(--fs-xs); }
.day-sep { align-self: center; font-size: 10.5px; color: var(--text-4); background: var(--surface-3); padding: 2px 10px; border-radius: 999px; margin: 6px 0; }
.composer { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 8px; } .composer textarea { min-height: 64px; }
.composer .tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctx { border-inline-start: 1px solid var(--border); background: var(--surface); overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ctx h4 { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; } .ctx h4 svg { width: 14px; height: 14px; }
.mynote { padding: 10px 12px; border-radius: var(--r-md); background: var(--amber-50); border: 1px solid var(--amber-100); font-size: var(--fs-sm); } [data-theme="dark"] .mynote { background: rgba(255,190,69,.10); border-color: rgba(255,190,69,.25); }
.mynote .meta { font-size: 10.5px; color: var(--text-3); margin-top: 4px; display: flex; justify-content: space-between; }

/* ---------- activities & tasks ---------- */
.task-card { padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: all var(--t-fast); } .task-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.checklist { display: flex; flex-direction: column; gap: 6px; } .checklist label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; } .checklist label.done span { text-decoration: line-through; color: var(--text-4); }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-day { min-height: 110px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); padding: 6px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); }
.cal-day.today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .cal-day.other { opacity: .5; } .cal-day .d { font-weight: 700; color: var(--text-3); } .cal-day .ev { padding: 2px 6px; border-radius: var(--r-xs); background: var(--brand-soft); color: var(--brand-ink); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-day .ev.task { background: var(--warning-soft); color: var(--warning); } .cal-day .ev.tender { background: var(--ai-soft); color: var(--ai); } .cal-head { text-align: center; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; padding: 4px; }
.step-row { display: grid; grid-template-columns: 70px 120px 1fr 32px; gap: 8px; align-items: center; }
.update-item { padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); } .update-item .meta { font-size: 10.5px; color: var(--text-4); }

/* ---------- chat ---------- */
.chat { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - var(--topbar-h)); margin: calc(-1 * var(--sp-6)); } .chat > * { min-height: 0; }
.chat .chans { border-inline-end: 1px solid var(--border); background: var(--surface); overflow: auto; } .chan { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); } .chan:hover { background: var(--surface-hover); } .chan.active { background: var(--brand-soft); }
.chat .thread .msgs { gap: 4px; } .cmsg { display: flex; gap: 10px; padding: 6px 4px; border-radius: var(--r-sm); animation: rise-in var(--t-base) var(--ease-out) both; } .cmsg:hover { background: var(--surface-hover); }
.cmsg .who { font-weight: 700; font-size: var(--fs-sm); } .cmsg .when { font-size: 10.5px; color: var(--text-4); margin-inline-start: 6px; } .cmsg .body { font-size: var(--fs-sm); white-space: pre-wrap; } .cmsg .mention { color: var(--brand); font-weight: 600; background: var(--brand-soft); padding: 0 4px; border-radius: 4px; }
.cmsg.mine .who { color: var(--brand-ink); }

/* ---------- reports ---------- */
.report-nav { display: flex; gap: 6px; flex-wrap: wrap; } .report-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); border: 1px solid var(--border); background: var(--surface); } .report-nav a.active { background: var(--brand); color: var(--on-solid); border-color: var(--brand); } .report-nav a svg { width: 16px; height: 16px; }
.chart { width: 100%; } .chart-card { padding: 18px; } .chart-card h3 { margin-bottom: 12px; font-size: var(--fs-md); }
.health-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .health-dot.healthy { background: var(--success); } .health-dot.at_risk { background: var(--warning); } .health-dot.silent { background: var(--danger); }

/* ---------- settings ---------- */
.settings { display: grid; grid-template-columns: 250px 1fr; gap: var(--sp-5); align-items: start; } @media (max-width: 900px) { .settings { grid-template-columns: 1fr; } }
.settings-nav { position: sticky; top: calc(var(--topbar-h) + 16px); display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.settings-nav .grp { font-size: 10.5px; color: var(--text-4); text-transform: uppercase; letter-spacing: .06em; padding: 10px 12px 4px; } .settings-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-2); } .settings-nav a svg { width: 17px; height: 17px; color: var(--text-4); }
.settings-nav a:hover { background: var(--surface-hover); } .settings-nav a.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; } .settings-nav a.active svg { color: var(--brand); }
.provider { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); transition: all var(--t-fast); } .provider.active-p { border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-soft); }
.provider .ph { display: flex; align-items: center; gap: 12px; } .provider .logo { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; font-weight: 800; color: var(--on-solid); font-size: 14px; }
.ladder { display: flex; flex-direction: column; gap: 4px; } .rung { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-xs); background: var(--surface-2); font-size: var(--fs-xs); font-family: var(--font-mono); }
.rung .st { width: 8px; height: 8px; border-radius: 50%; background: var(--text-4); } .rung.ok .st { background: var(--success); } .rung.quota .st { background: var(--warning); } .rung.fail .st, .rung.auth .st, .rung.not_found .st { background: var(--danger); } .rung.active-m { background: var(--ai-soft); color: var(--ai-strong); font-weight: 700; }
.rung .lvl { color: var(--text-4); width: 16px; }
.channel-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.stage-editor { display: grid; grid-template-columns: 36px 1fr 1fr 1fr 120px 32px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.perm-grid { display: grid; grid-template-columns: 160px repeat(6, 1fr); gap: 6px; font-size: var(--fs-xs); align-items: center; } .perm-grid > div { padding: 6px; } .perm-grid .h { font-weight: 700; color: var(--text-3); text-align: center; }
.org-node { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); margin-bottom: 6px; } .org-children { padding-inline-start: 28px; border-inline-start: 2px dashed var(--border); margin-inline-start: 18px; }
.code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-3); padding: 2px 6px; border-radius: var(--r-xs); direction: ltr; display: inline-block; }
.hide-lg { display: none; } @media (max-width: 900px) { .hide-lg { display: grid; } }

/* attachment chips carry their own remove button — a wrong PDF used to be permanent */
.file-chip { display: inline-flex; align-items: center; gap: 6px; padding-inline-end: 4px; }
.file-chip a { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.file-chip .x { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  line-height: 1; color: inherit; opacity: .6; transition: all var(--t-fast); }
.file-chip .x:hover { opacity: 1; background: var(--danger-soft); color: var(--danger); }

/* The stage line on a deal is a READ-ONLY indicator: a deal moves by dragging it on the board or with the
   explicit step button, never by clicking the line — that was too easy to do by accident. */
.stage-stepper.is-readonly > span { cursor: default; pointer-events: none; }
.stage-stepper.is-readonly > span:hover { transform: none; }

/* Sticky action bar at the END of a long form. The client asked for the create button
   "at the bottom of the page": on the request form the save used to live in the header,
   which meant scrolling all the way back up to submit. It is now the last thing in the
   form, and it sticks to the bottom of the viewport so it is reachable from any scroll
   position without hunting for it. */
.form-footer {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 -6px 18px -12px rgb(0 0 0 / .28);
}
.form-footer > .row { margin-inline-start: auto; }
/* The floating assistant sits in the bottom trailing corner, so the footer's own buttons must not end there
   or the FAB lands on top of Create — which is exactly what happened to the Inbox composer before. */
.form-footer { padding-inline-end: 150px; }
@media (max-width: 640px) { .form-footer { padding-inline-end: 12px; padding-bottom: 56px; } }
@media (max-width: 640px) { .form-footer { padding: 10px 12px; } .form-footer [data-foot-note] { display: none; } }

/* stage vivid per column (board.js sets --stage-c; the header bar uses the vivid twin) */
.kcol[data-stage="new"] { --stage-v: var(--stage-new-vivid); --stage-soft: var(--stage-new-soft); }
.kcol[data-stage="at_operations"] { --stage-v: var(--stage-at_operations-vivid); --stage-soft: var(--stage-at_operations-soft); }
.kcol[data-stage="quoted"] { --stage-v: var(--stage-quoted-vivid); --stage-soft: var(--stage-quoted-soft); }
.kcol[data-stage="negotiation"] { --stage-v: var(--stage-negotiation-vivid); --stage-soft: var(--stage-negotiation-soft); }
.kcol[data-stage="won"] { --stage-v: var(--stage-won-vivid); --stage-soft: var(--stage-won-soft); }
.kcol[data-stage="lost"] { --stage-v: var(--stage-lost-vivid); --stage-soft: var(--stage-lost-soft); }
/* charts draw themselves once, on mount */
.chart-line svg, .chart-bars svg { animation: chart-wipe 1s var(--ease-out) both; }
.chart-line circle { animation: fade-in .4s var(--ease-out) .8s both; }
.chart-bars rect { transform-origin: 50% 100%; transform-box: fill-box; animation: bar-grow .7s var(--ease-out) both; }

/* Which build this page is running — the answer to "why am I not seeing my change?". */
.build-stamp { margin-top: var(--sp-4); text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-4); letter-spacing: .02em; }