/* The visual language of the CRM mock the product was designed from: navy rail,
   teal action colour, Space Grotesk for figures. What changed is underneath —
   every number here is read from the practice's own data. */
/* Palette taken from Olli's own product: indigo #667eea running into purple
   #764ba2, teal as the positive colour, and warm grey surfaces. The variable
   NAMES are unchanged so every rule below keeps working — only the values move,
   which is why the whole panel changes together rather than in patches. */
:root {
  --navy: #1E1B4B;
  --navy-2: #312E81;
  --teal: #667EEA;          /* the action colour */
  --teal-dark: #5A6AD8;
  --teal-light: #EEF0FE;
  --brand-2: #764BA2;
  --grad: linear-gradient(135deg, #667EEA, #764BA2);
  --amber: #F59E0B;
  --amber-light: #FEF3C6;
  --emerald: #14B8A6;
  --emerald-light: #D6F5F0;
  --rose: #EF4444;
  --rose-light: #FEE2E2;
  --violet: #8B5CF6;
  --violet-light: #EDE9FE;
  --slate: #6B7280;
  --slate-light: #F3F4F6;
  --surface: #F6F7FE;
  --white: #FFFFFF;
  --border: #EBEDF7;
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;
  --sidebar-w: 244px;
  --radius: 16px;
  /* Olli's surfaces sit on shadow rather than on lines: a barely-there border
     and a wide, soft shadow. */
  --shadow-sm: 0 2px 10px rgba(79, 70, 229, .05);
  --shadow: 0 6px 22px rgba(79, 70, 229, .07);
  --shadow-lg: 0 18px 44px rgba(49, 46, 129, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { font-family: 'Urbanist', system-ui, sans-serif; background: var(--surface); color: var(--text-primary); font-size: 14px; }
[dir="rtl"] body { font-family: 'Urbanist', 'Segoe UI', Tahoma, sans-serif; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
.mono { font-variant-numeric: tabular-nums; }

/* ── SIGN IN ── */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(60% 55% at 18% 12%, rgba(118, 75, 162, .16) 0, transparent 70%),
    radial-gradient(55% 50% at 85% 85%, rgba(102, 126, 234, .18) 0, transparent 70%),
    #F6F7FE; }
.auth-card { background: white; border-radius: 22px; padding: 32px; width: 100%; max-width: 410px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 6px; }
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.auth-title { font-family: 'Urbanist', sans-serif; font-size: 20px; font-weight: 700; }
.auth-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.auth-card .form-input { margin-bottom: 8px; }
.auth-lang { margin-top: 10px; align-self: center; border: 0; background: none; color: var(--text-muted); font-size: 12.5px; cursor: pointer; }

/* ── SHELL ── */
.shell { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: var(--sidebar-w); background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 55%, #15123A 100%); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; }
.sidebar-brand { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-icon { width: 36px; height: 36px; flex-shrink: 0; background: var(--grad); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: white; font-family: 'Urbanist', sans-serif; }
.brand-text { color: white; min-width: 0; }
.brand-name { font-family: 'Urbanist', sans-serif; font-size: 14.5px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.brand-sub { font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px; }

.sidebar-section { padding: 16px 12px 4px; }
.sidebar-section-label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.3); letter-spacing: 1.2px; text-transform: uppercase; padding: 0 8px; margin-bottom: 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; transition: all 0.18s; margin-bottom: 2px; color: rgba(255,255,255,0.6); font-size: 13.5px; font-weight: 500; position: relative; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); }
.nav-item.active { background: rgba(14,165,201,0.18); color: var(--teal); }
.nav-item.active::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--teal); border-radius: 0 3px 3px 0; }
.sprite { display: none; }
/* One rule for every icon: they inherit the colour of the text they sit beside,
   so a nav item, a card heading and a button never drift apart. */
svg[class$="-icon"], .icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-icon { width: 18px; height: 18px; }
.icon { width: 17px; height: 17px; }
.icon-chip { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon-chip .icon { width: 18px; height: 18px; }
.nav-badge { margin-inline-start: auto; background: var(--rose); color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.nav-badge.amber { background: var(--amber); color: #78350F; }
.nav-badge.teal { background: var(--teal); color: white; }
.nav-badge.violet { background: var(--violet); color: white; }

.sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.user-card { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 12.5px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 10.5px; color: rgba(255,255,255,0.45); }
.sidebar-logout { background: none; border: 0; color: rgba(255,255,255,0.45); font-size: 16px; cursor: pointer; padding: 4px; }
.sidebar-logout:hover { color: white; }

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.topbar { background: white; border-bottom: 1px solid var(--border); padding: 0 24px; min-height: 60px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }
.topbar-heading { min-width: 0; }
.topbar-title { font-family: 'Urbanist', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.topbar-subtitle { font-size: 12.5px; color: var(--text-muted); margin-inline-start: 6px; }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.search-box { display: flex; align-items: center; gap: 8px; background: var(--slate-light); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; }
.search-box input { border: none; background: transparent; font-size: 13px; color: var(--text-primary); outline: none; width: 200px; }
.lang-select { border: 1px solid var(--border); border-radius: 7px; padding: 7px 6px; font-size: 12.5px; background: white; color: var(--text-secondary); }
.menu-btn { display: none; background: none; border: 0; font-size: 20px; cursor: pointer; }
.demo-banner { background: var(--amber-light); color: #92400E; font-size: 12.5px; font-weight: 500; padding: 8px 24px; border-bottom: 1px solid #FDE68A; }

.content { flex: 1; overflow-y: auto; padding: 24px 28px 40px; }
.loading { padding: 60px; text-align: center; color: var(--text-muted); }
.view { display: none; }
.view.active { display: block; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: background 0.15s, box-shadow 0.15s, transform 0.15s; white-space: nowrap; }
.btn-primary { box-shadow: 0 2px 8px rgba(102, 126, 234, .28); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--teal); color: white; border-radius: 12px; }
.btn-primary:hover:not(:disabled) { background: var(--teal-dark); }
.btn-outline { background: white; color: var(--text-secondary); border: 1px solid var(--border); }
.btn-outline:hover:not(:disabled) { background: var(--slate-light); }
.btn-danger { background: var(--rose-light); color: #9F1239; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-icon { padding: 7px 10px; font-size: 15px; }
.btn-block { width: 100%; margin-top: 6px; padding: 10px; }
.reminder-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; white-space: nowrap; }
/* This used to be WhatsApp green. The action IS a WhatsApp message, but the
   green fought every other colour on the page, and the channel is already said
   in words. */
.reminder-btn.wa { background: var(--teal); color: white; box-shadow: 0 2px 8px rgba(102, 126, 234, .25); }
.reminder-btn.ok { background: var(--emerald-light); color: #0F766E; }
.reminder-btn.soft { background: white; border: 1px solid var(--border); color: var(--text-secondary); }
.reminder-btn.soft:hover { background: var(--slate-light); }

/* ── CARDS & STATS ── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card { background: white; border-radius: var(--radius); padding: 18px 20px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
/* The tinted block that used to sit behind each figure is gone; the colour now
   lives in a small icon chip, which says which number this is instead of just
   decorating it. */
.stat-card.teal .icon-chip { background: var(--teal-light); color: var(--teal); }
.stat-card.amber .icon-chip { background: var(--amber-light); color: #B45309; }
.stat-card.emerald .icon-chip { background: var(--emerald-light); color: #0F766E; }
.stat-card.rose .icon-chip { background: var(--rose-light); color: #B91C1C; }
.stat-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.stat-value { font-family: 'Urbanist', sans-serif; font-size: 29px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; overflow-wrap: anywhere; }
.stat-change { font-size: 11.5px; margin-top: 6px; color: var(--text-muted); }
.stat-change.up { color: var(--emerald); }
.stat-change.down { color: var(--rose); }
.stat-icon { position: absolute; top: 16px; inset-inline-end: 16px; }

/* Olli's own dashboard: one filled gradient card leading a row of white ones,
   each closed off by a thin progress line. */
.stat-card.hero { background: var(--grad); border-color: transparent; color: white; box-shadow: 0 8px 24px rgba(102, 126, 234, .32); }
.stat-card.hero .stat-label, .stat-card.hero .stat-change { color: rgba(255, 255, 255, .82); }
.stat-card.hero .icon-chip { background: rgba(255, 255, 255, .2); color: white; }
.stat-bar { height: 5px; border-radius: 999px; background: var(--slate-light); margin-top: 14px; overflow: hidden; }
.stat-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.stat-card.hero .stat-bar { background: rgba(255, 255, 255, .28); }
.stat-card.hero .stat-bar i { background: white; }

/* The pastel status pills that sit under the heading. */
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip-stat { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.chip-stat i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip-stat.ok { background: var(--emerald-light); color: #0F766E; }
.chip-stat.warn { background: var(--amber-light); color: #B45309; }
.chip-stat.bad { background: var(--rose-light); color: #B91C1C; }
.chip-stat.info { background: var(--teal-light); color: var(--teal); }

/* A line, not bars: the same shape Olli draws for message activity. */
.chart svg { display: block; width: 100%; height: auto; }
.chart-axis { font-size: 10px; fill: var(--text-muted); }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-secondary); margin-top: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 14px; height: 3px; border-radius: 2px; }

.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.dash-comms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-comms-grid .card + .card { margin-top: 0; }
.comms-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--slate-light); font-size: 13px; }
.comms-row:last-child { border-bottom: none; }
.comms-dir { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.comms-dir.in { background: var(--teal-light); color: var(--teal); }
.comms-dir.out { background: var(--slate-light); color: var(--slate); }
.comms-who { font-weight: 600; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.comms-body { flex: 1; min-width: 0; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comms-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.card { background: white; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.card + .card, .mt { margin-top: 16px; }
.card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-title { font-family: 'Urbanist', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.card-action { margin-inline-start: auto; font-size: 12px; color: var(--teal); cursor: pointer; font-weight: 500; }
.card-body { padding: 14px 20px; }
.card-body.flush { padding: 0; }
.card-note { font-size: 12px; color: var(--text-muted); }

.row-kv { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; gap: 10px; }
.row-kv b { font-family: 'Urbanist', sans-serif; font-size: 15px; }

.section-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.section-head > div:first-child { flex: 1; min-width: 240px; }
.section-title { font-family: 'Urbanist', sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 4px; }
.section-desc { font-size: 13px; color: var(--text-muted); }

/* ── TABLES ── */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 14px 10px; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--border); }
td { padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--slate-light); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface); }
.cell-main { font-weight: 600; }
.cell-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.empty { padding: 36px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
.empty b { display: block; color: var(--text-primary); font-size: 14px; margin-bottom: 4px; }

/* ── BADGES ── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge-emerald { background: var(--emerald-light); color: #065F46; }
.badge-amber { background: var(--amber-light); color: #92400E; }
.badge-rose { background: var(--rose-light); color: #9F1239; }
.badge-teal { background: var(--teal-light); color: #0C4A6E; }
.badge-violet { background: var(--violet-light); color: #4C1D95; }
.badge-slate { background: var(--slate-light); color: var(--slate); }
.ai-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(90deg, #0EA5C9, #8B5CF6); color: white; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }

/* ── DEADLINES ── */
.deadline-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--slate-light); }
.deadline-item:last-child { border-bottom: none; }
.deadline-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.deadline-info { flex: 1; min-width: 0; }
.deadline-name { font-size: 13px; font-weight: 500; }
.deadline-client { font-size: 11.5px; color: var(--text-muted); }
.deadline-date { font-size: 12px; font-weight: 600; text-align: end; white-space: nowrap; }
.urgent { color: var(--rose); } .soon { color: var(--amber); } .ok { color: var(--emerald); } .muted { color: var(--text-muted); }

/* ── RISK ── */
.risk-amount { font-family: 'Urbanist', sans-serif; font-size: 26px; font-weight: 700; color: var(--rose); }
.risk-amount.none { color: var(--emerald); }
.risk-line { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--slate-light); font-size: 13px; flex-wrap: wrap; }
.risk-line .who { font-weight: 600; }
.risk-line .what { color: var(--text-secondary); }
.risk-line .rate { color: var(--text-muted); font-size: 12px; }
.risk-line .accrued { margin-inline-start: auto; font-weight: 700; color: var(--rose); }

/* ── CHART ── */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-width: 0; }
.bar i { display: block; border-radius: 1px; }
.legend { display: flex; gap: 9px 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); margin-top: 12px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: block; }

/* ── AGENT ── */
.agent-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.mini-stat { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 12px; }
.mini-stat-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.mini-stat .value { font-family: 'Urbanist', sans-serif; font-size: 21px; font-weight: 700; }
.mini-stat .label { font-size: 12px; color: var(--text-muted); }
.thread-list { background: white; border: 1px solid var(--border); border-radius: 12px; max-height: 560px; overflow-y: auto; }
.thread { padding: 12px 14px; border-bottom: 1px solid var(--slate-light); cursor: pointer; }
.thread:hover { background: var(--surface); }
.thread.active { background: var(--teal-light); }
.thread-name { font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.thread-last { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.thread-time { margin-inline-start: auto; font-size: 10.5px; color: var(--text-muted); font-weight: 400; }
.chat-container { background: white; border-radius: 12px; border: 1px solid var(--border); display: flex; flex-direction: column; height: 560px; }
.chat-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.ai-indicator { width: 8px; height: 8px; background: var(--emerald); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 80%; }
.msg-client { align-self: flex-start; }
.msg-ai { align-self: flex-end; }
.msg-bubble { padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-client .msg-bubble { background: var(--slate-light); border-end-start-radius: 3px; }
.msg-ai .msg-bubble { background: var(--teal); color: white; border-end-end-radius: 3px; }
.msg-subject { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 3px; }
.msg-ai .msg-subject { text-align: end; }
.msg-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }
.msg-ai .msg-meta { text-align: end; }

/* ── DOCUMENTS ── */
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tab { padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 500; cursor: pointer; border: 1.5px solid var(--border); background: white; color: var(--text-secondary); }
.filter-tab.active { border-color: transparent; background: var(--grad); color: white; box-shadow: 0 2px 10px rgba(102, 126, 234, .3); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.client-doc-card { background: white; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.client-doc-header { padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--slate-light); flex-wrap: wrap; }
.client-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; flex-shrink: 0; }
.client-info { min-width: 0; flex: 1; }
.client-info .name { font-size: 14px; font-weight: 600; }
.client-info .meta { font-size: 11.5px; color: var(--text-muted); }
.client-doc-body { padding: 14px 18px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.doc-item { border: 1.5px solid var(--border); border-radius: 8px; padding: 10px; position: relative; cursor: pointer; background: white; text-align: start; font: inherit; color: inherit; }
.doc-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.doc-item.received { border-color: var(--emerald); background: var(--emerald-light); }
.doc-item.pending { border-color: var(--amber); background: var(--amber-light); }
.doc-item.late { border-color: var(--rose); background: var(--rose-light); border-style: dashed; }
.doc-name { font-size: 12px; font-weight: 600; line-height: 1.3; padding-inline-end: 16px; }
.doc-meta { font-size: 10.5px; color: var(--text-secondary); margin-top: 4px; }
.doc-status-icon { position: absolute; top: 7px; inset-inline-end: 7px; display: flex; }
.doc-status-icon svg { width: 14px; height: 14px; stroke-width: 2.2; }
.card-header > svg { color: var(--text-muted); }
.mini-stat-icon svg { width: 18px; height: 18px; }
.kanban-col-title i { margin-inline-end: 2px; vertical-align: middle; }
.progress-bar { height: 5px; background: var(--slate-light); border-radius: 99px; margin-top: 12px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal), var(--emerald)); }
.progress-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ── COMPLIANCE ── */
.count-strip { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.count-box { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 12px 20px; text-align: center; min-width: 110px; }
.count-box b { display: block; font-family: 'Urbanist', sans-serif; font-size: 24px; font-weight: 700; }
.count-box span { font-size: 11px; color: var(--text-muted); }
.month-header { font-family: 'Urbanist', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-muted); padding: 14px 0 8px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.compliance-item { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.compliance-item.urgent { border-inline-start: 4px solid var(--rose); }
.compliance-item.warning { border-inline-start: 4px solid var(--amber); }
.compliance-item.fine { border-inline-start: 4px solid var(--emerald); }
.compliance-item.done { border-inline-start: 4px solid var(--slate); opacity: 0.7; }
.comp-info { flex: 1; min-width: 200px; }
.comp-title { font-size: 13.5px; font-weight: 600; }
.comp-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.comp-penalty { font-size: 11.5px; color: #9F1239; margin-top: 3px; }
.comp-due { text-align: end; min-width: 110px; }
.comp-due-date { font-size: 13px; font-weight: 700; }
.comp-due-label { font-size: 11px; color: var(--text-muted); }
.comp-actions { display: flex; gap: 6px; }

/* ── LEADS ── */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.kanban-col { background: #F1F2FC; border-radius: var(--radius); padding: 12px; min-height: 240px; }
.kanban-col-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.kanban-col-title { font-size: 13px; font-weight: 600; }
.kanban-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: white; color: var(--slate); }
.lead-card { background: white; border: 1px solid var(--border); border-radius: 9px; padding: 12px; margin-bottom: 10px; }
.lead-name { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.lead-service { font-size: 12px; color: var(--text-secondary); }
.lead-contact { font-size: 11px; color: var(--text-muted); margin-top: 4px; overflow-wrap: anywhere; }
.lead-footer { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.lead-source { font-size: 10.5px; padding: 2px 7px; border-radius: 20px; background: var(--slate-light); color: var(--slate); font-weight: 500; }
.lead-move { margin-inline-start: auto; font-size: 11.5px; border: 1px solid var(--border); border-radius: 6px; padding: 3px 4px; background: white; max-width: 120px; }

/* ── INVOICES ── */
.invoice-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.inv-stat { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 18px; text-align: center; }
.inv-stat .amount { font-family: 'Urbanist', sans-serif; font-size: 24px; font-weight: 700; overflow-wrap: anywhere; }
.inv-stat .inv-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.schedule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.schedule > div { border: 1px solid var(--border); border-radius: 8px; padding: 12px; text-align: center; }
.schedule b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.schedule span { font-size: 11.5px; color: var(--text-muted); }

/* ── SETTINGS ── */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kv-grid div span { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.kv-grid div b { font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 20px; color: var(--text-secondary); background: white; }
.secret-box { background: var(--slate-light); border: 1px dashed var(--slate); border-radius: 8px; padding: 12px; font-family: ui-monospace, monospace; font-size: 15px; text-align: center; user-select: all; margin: 8px 0; }

/* ── MODAL / FORMS ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,26,46,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); padding: 16px; }
.modal { background: white; border-radius: 20px; padding: 26px 28px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.15); }
.modal-title { font-family: 'Urbanist', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.form-group { margin-bottom: 12px; }
.form-label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; display: block; }
.form-input { width: 100%; border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; outline: none; background: white; color: var(--text-primary); }
.form-input:focus { border-color: var(--teal); }
textarea.form-input { resize: vertical; min-height: 70px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.form-error { color: #9F1239; font-size: 12.5px; min-height: 0; }
.form-error:not(:empty) { background: var(--rose-light); border-radius: 7px; padding: 8px 10px; margin-top: 8px; }
.checks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.checks label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }

.toast { position: fixed; bottom: 22px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--navy); color: white; padding: 11px 18px; border-radius: 10px; font-size: 13px; z-index: 1100; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: min(560px, calc(100vw - 32px)); }
[dir="rtl"] .toast { transform: translateX(50%); }
.toast.error { background: #9F1239; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ── NARROW SCREENS ── */
@media (max-width: 1100px) {
  .stats-grid, .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-grid, .agent-layout, .settings-grid { grid-template-columns: 1fr; }
  .dash-comms-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 900; transform: translateX(-100%); transition: transform .2s; }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: none !important; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .menu-btn { display: block; }
  .topbar { padding: 0 14px; }
  .topbar-actions { width: 100%; margin: 0; padding-top: 0; }
  .search-box { flex: 1; }
  .search-box input { width: 100%; }
  .content { padding: 16px 14px 40px; }
  .invoice-summary, .schedule { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .topbar-subtitle { display: none; }
}
@media (max-width: 520px) {
  .stats-grid, .mini-stats { grid-template-columns: 1fr; }
  .topbar-actions .btn-primary span { font-size: 0; }
  .topbar-actions .btn-primary span::before { content: '+'; font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   GLASS

   Appended rather than woven in, so taking it out is deleting from here to
   the end of the file and nothing else moves.

   THE BACKGROUND HAD TO COME FIRST. Frosted glass is only visible when there
   is something behind it, and the panel sat on a flat #F6F7FE with white
   cards on top — blurring white over white returns white. So the page gets a
   soft colour field first. The recipe is not new: it is the same pair of
   radial gradients the sign-in screen has always used, moved onto the
   working area so the whole product speaks one language.

   WHAT IS DELIBERATELY NOT GLASS. The figures a partner scans — ₹2.2L
   pending, 7 overdue, a penalty against a name — stay on a surface that is
   still 72% opaque white over a pale wash, so the text contrast barely
   moves. Translucency is decoration here; the number is the product. Rows,
   table cells and badges keep their solid fills.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* The first pass sat at .72 and the before/after screenshots were almost
     indistinguishable — a wash nobody could see is not a redesign, it is a
     performance cost. These are the values where the effect actually reads as
     glass. Anything more transparent starts to cost the numbers, which is the
     line this stops at. */
  --glass: rgba(255, 255, 255, .70);
  --glass-strong: rgba(255, 255, 255, .80);
  --glass-line: rgba(255, 255, 255, .85);
  /* Blur cost rises with the radius, and past about 18px the eye stops being
     able to tell. */
  --glass-blur: 18px;

  /* The greys were chosen against pure white. On a 70% surface over a tinted
     field they lose their footing — the small ones first: a stat label, "4
     clients pending", the axis on the chart. Each is nudged one step darker,
     which costs the design nothing and hands the contrast back.
     --text-muted lands on --slate, a colour the palette already had. */
  --text-secondary: #374151;
  --text-muted: #6B7280;
  /* Glass loses the grounding a border gives, so it borrows a little more
     shadow back — otherwise the cards float without ever landing. */
  --glass-shadow: 0 8px 30px rgba(79, 70, 229, .10), 0 1px 0 rgba(255,255,255,.6) inset;
}

/* The field the glass sits on. On .main rather than on body: the sidebar has
   its own gradient and should not be tinted through. */
.main {
  background:
    radial-gradient(62% 55% at 8% -4%, rgba(102, 126, 234, .34) 0, transparent 72%),
    radial-gradient(55% 48% at 98% 2%, rgba(118, 75, 162, .30) 0, transparent 74%),
    radial-gradient(70% 60% at 60% 104%, rgba(20, 184, 166, .22) 0, transparent 76%),
    radial-gradient(40% 40% at 40% 45%, rgba(139, 92, 246, .14) 0, transparent 70%),
    var(--surface);
}

/* The bar sits over that field, so frosting it now actually shows something. */
.topbar {
  background: rgba(255, 255, 255, .64);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--glass-line);
}

/* Containers, not contents: one blurred surface per panel rather than one per
   row. Ten blurred elements on a page is a look; a hundred is a slideshow on
   a mid-range phone. */
/* Blur costs per element and it is paid again on every scroll frame. These are
   the ones there are a handful of on any screen. */
.card,
.stat-card:not(.hero),
.mini-stat,
.count-box,
.inv-stat,
.thread-list,
.chat-container,
.auth-card {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow);
}

/* And these are the ones there are FIFTY of: one per filing, one per client,
   one per lead. They were in the list above, which contradicted the note at the
   top of this block about containers rather than contents — fifty blur layers
   repainting inside a scrolling column is exactly where a page starts to stutter
   on a mid-range phone.

   They get the same surface with no blur of their own. They sit directly on the
   wash, and the wash is a set of radial gradients with no hard edges in it, so
   there is almost nothing for a blur to soften. The look survives; the cost does
   not. */
.client-doc-card,
.compliance-item,
.lead-card,
.doc-item,
.thread {
  background: var(--glass);
  border-color: var(--glass-line);
  box-shadow: 0 4px 16px rgba(79, 70, 229, .07);
}

/* The kanban lanes read as the surface the cards rest on, so they go the other
   way: barely tinted, so the cards on them still stand out. */
.kanban-col {
  background: rgba(255, 255, 255, .48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .60);
}

/* The hero keeps its gradient — it is the one card that is meant to be solid
   colour — and gains the highlight along its top edge that makes a gradient
   read as glass rather than as paint. */
.stat-card.hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 42%),
    var(--grad);
  box-shadow: 0 10px 28px rgba(102, 126, 234, .34), 0 1px 0 rgba(255,255,255,.45) inset;
}

/* The dark rail gets a sheen rather than transparency. At desktop width it is
   in the layout with nothing behind it, so blurring it would cost frames and
   show nothing; on a phone it slides over the content and the shadow already
   separates it. */
.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 55%, #15123A 100%);
}

/* The modal already blurred its backdrop; it now looks like the same material
   as everything behind it. */
/* CORRECTED. The first attempt took the backdrop from 3px to 10px and the
   dashboard behind became mush — the sidebar a flat dark smear, no sense left
   of what you had been looking at. A dialog should sit ON the page, not erase
   it. Back to something close to the original depth, with a lighter scrim so
   the colour behind still comes through. */
.modal-overlay {
  background: rgba(15, 26, 46, .28);
  backdrop-filter: blur(5px) saturate(130%);
  -webkit-backdrop-filter: blur(5px) saturate(130%);
}
/* And the dialog itself was reading as paper rather than glass: 82% white over
   a heavily blurred backdrop is just a grey card. */
.modal {
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0, rgba(255,255,255,0) 30%), var(--glass-strong);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 24px 60px rgba(30, 27, 75, .22), 0 1px 0 rgba(255,255,255,.7) inset;
}

/* Inputs and the search box are holes in the glass, not more glass — a field
   you type into should look like a field. */
.form-input, .search-box, .lang-select, .btn-outline, .filter-tab:not(.active), .chip, .lead-move {
  background: rgba(255, 255, 255, .78);
}

/* WHERE IT ALL SWITCHES OFF.

   Safari before 15 and every older Android WebView ignore backdrop-filter and
   would render a 72%-transparent card over a tinted field — legible, but
   washed out and clearly wrong. Those browsers get the solid surfaces back.
   The same for anyone who has asked their system to reduce transparency,
   which is usually a person who finds it hard to read. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .stat-card:not(.hero), .mini-stat, .count-box, .inv-stat,
  .thread-list, .chat-container, .client-doc-card, .compliance-item,
  .lead-card, .auth-card, .modal, .topbar { background: var(--white); }
  .kanban-col { background: #F1F2FC; }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .stat-card:not(.hero), .mini-stat, .count-box, .inv-stat,
  .thread-list, .chat-container, .client-doc-card, .compliance-item,
  .lead-card, .auth-card, .modal, .topbar {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .kanban-col { background: #F1F2FC; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .main { background: var(--surface); }
}