/* ============================================================
   MFT Dashboard — shared design system
   Inherits brand tokens; dashboard-specific UI on top
   ============================================================ */

:root {
  --ink:#10231D; --pine:#16352C; --pine-deep:#0C1F1A;
  --stone:#EFF1EC; --panel:#FFFFFF; --gold:#B8862B;
  --gold-bright:#D9A93F; --gold-soft:#F3E8D2; --muted:#5B655F;
  --line:#D8DBD2; --radius:6px;
  --font-display:"Spectral",Georgia,serif;
  --font-body:"Public Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",monospace;
  /* status colours */
  --c-blue:#3B82F6; --c-purple:#8B5CF6; --c-amber:#F59E0B;
  --c-red:#EF4444; --c-green:#10B981; --c-teal:#059669;
  --c-dark-green:#065F46; --c-gold:#B8862B; --c-gray:#6B7280;
}
[data-theme="dark"] {
  --ink:#E9ECE5; --stone:#0D1714; --panel:#152420;
  --muted:#A4B0A7; --line:#2B3C35; --gold-soft:rgba(184,134,43,.14);
}
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { font-size:15px; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); color:var(--ink); background:var(--stone); line-height:1.6; min-height:100vh; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; line-height:1.15; }

/* ── Layout ─────────────────────────────────────────────────── */
.dash-wrap { display:flex; min-height:100vh; }
.sidebar { width:248px; flex:0 0 248px; background:var(--pine-deep); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.main-area { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { background:var(--panel); border-bottom:1px solid var(--line); padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.page-body { padding:28px; flex:1; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar-brand { padding:22px 20px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-brand .mark { width:34px; height:34px; border-radius:50%; border:1.5px solid var(--gold); display:grid; place-items:center; font-family:var(--font-display); font-size:.85rem; color:var(--gold-bright); background:rgba(184,134,43,.1); flex:0 0 34px; }
.sidebar-brand .name { font-family:var(--font-display); font-size:.95rem; color:#fff; line-height:1.1; }
.sidebar-brand .name small { display:block; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.22em; color:rgba(255,255,255,.45); }
.sidebar-client { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-client .label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:4px; }
.sidebar-client .cname { font-weight:600; color:#fff; font-size:.88rem; }
.sidebar-client .ref { font-family:var(--font-mono); font-size:.65rem; color:var(--gold-bright); }
.sidebar nav { flex:1; padding:12px 0; }
.sidebar nav a { display:flex; align-items:center; gap:10px; padding:11px 20px; color:rgba(255,255,255,.65); font-size:.88rem; font-weight:500; transition:background .12s; }
.sidebar nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar nav a.active { background:rgba(184,134,43,.15); color:var(--gold-bright); border-left:3px solid var(--gold); }
.sidebar nav a .ico { font-size:1rem; width:18px; text-align:center; }
.sidebar nav a .badge { margin-left:auto; background:var(--c-red); color:#fff; border-radius:99px; font-size:.6rem; font-family:var(--font-mono); padding:2px 7px; }
.sidebar-foot { padding:14px 20px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-foot a { color:rgba(255,255,255,.5); font-size:.8rem; }

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar h1 { font-size:1.2rem; }
.topbar .user { font-size:.82rem; color:var(--muted); font-family:var(--font-mono); }

/* ── Pipeline progress bar ───────────────────────────────────── */
.pipeline-bar { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin-bottom:24px; }
.pipeline-bar h3 { font-size:.9rem; margin-bottom:16px; color:var(--muted); font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.pipeline-track { display:flex; gap:0; position:relative; }
.pipeline-track::before { content:""; position:absolute; top:13px; left:0; right:0; height:3px; background:var(--line); z-index:0; }
.p-step { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; z-index:1; }
.p-step .dot { width:28px; height:28px; border-radius:50%; border:3px solid var(--line); background:var(--panel); display:grid; place-items:center; font-size:.55rem; transition:all .2s; }
.p-step.done .dot { background:var(--c-teal); border-color:var(--c-teal); color:#fff; }
.p-step.active .dot { background:var(--gold); border-color:var(--gold); color:#fff; box-shadow:0 0 0 4px rgba(184,134,43,.2); }
.p-step .lbl { font-family:var(--font-mono); font-size:.54rem; letter-spacing:.06em; text-transform:uppercase; text-align:center; color:var(--muted); max-width:64px; line-height:1.3; }
.p-step.active .lbl { color:var(--gold); font-weight:600; }
.p-step.done .lbl { color:var(--c-teal); }
@media(max-width:900px) { .p-step .lbl { display:none; } }

/* ── Action checklist ────────────────────────────────────────── */
.checklist { list-style:none; }
.checklist li { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.checklist li:last-child { border-bottom:none; }
.checklist .ci { width:22px; height:22px; border-radius:50%; border:2px solid var(--line); flex:0 0 22px; display:grid; place-items:center; font-size:.7rem; margin-top:1px; }
.checklist li.done .ci { border-color:var(--c-teal); background:var(--c-teal); color:#fff; }
.checklist li.pending .ci { border-color:var(--gold); }
.checklist li.blocked .ci { border-color:var(--line); background:var(--stone); }
.checklist .ct h4 { font-size:.92rem; margin-bottom:2px; }
.checklist .ct p { font-size:.8rem; color:var(--muted); }

/* ── Cards / KPI row ─────────────────────────────────────────── */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; }
.kpi .kv { font-family:var(--font-display); font-size:2rem; font-weight:600; color:var(--ink); }
.kpi .kl { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.card h2 { font-size:1.05rem; margin-bottom:16px; }
.cards-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ── Document upload zone ────────────────────────────────────── */
.doc-zone { border:2px dashed var(--line); border-radius:var(--radius); padding:28px; text-align:center; cursor:pointer; transition:border-color .15s; }
.doc-zone:hover, .doc-zone.drag { border-color:var(--gold); background:var(--gold-soft); }
.doc-zone .dz-icon { font-size:2rem; margin-bottom:8px; }
.doc-zone p { font-size:.88rem; color:var(--muted); }
.doc-zone strong { color:var(--ink); }
.doc-list { list-style:none; margin-top:16px; }
.doc-list li { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.88rem; }
.doc-list .dtype { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); flex:0 0 100px; }
.doc-list .dname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-list .dstatus { font-family:var(--font-mono); font-size:.6rem; padding:3px 8px; border-radius:99px; }
.dstatus.reviewed { background:#E8F3EC; color:#1F7A4D; }
.dstatus.pending { background:#FEF3C7; color:#92400E; }

/* ── Messaging ───────────────────────────────────────────────── */
.msg-thread { max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:4px 0; }
.msg { max-width:78%; }
.msg.from-admin { align-self:flex-start; }
.msg.from-client { align-self:flex-end; }
.msg .mb { padding:12px 16px; border-radius:12px; font-size:.88rem; line-height:1.55; }
.msg.from-admin .mb { background:var(--stone); border:1px solid var(--line); border-radius:12px 12px 12px 2px; }
.msg.from-client .mb { background:var(--pine); color:#fff; border-radius:12px 12px 2px 12px; }
.msg .mt { font-family:var(--font-mono); font-size:.6rem; color:var(--muted); margin-top:4px; }
.msg.from-client .mt { text-align:right; }
.msg-input { display:flex; gap:10px; margin-top:16px; }
.msg-input textarea { flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius); font-family:var(--font-body); font-size:.9rem; resize:none; background:var(--panel); color:var(--ink); }

/* ── Forms ───────────────────────────────────────────────────── */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { margin-bottom:14px; }
.field label { display:block; font-weight:600; font-size:.84rem; margin-bottom:6px; }
.field input,.field select,.field textarea {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:.9rem; background:var(--panel); color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus { outline:2px solid var(--gold); outline-offset:1px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 22px; border-radius:var(--radius); font-weight:600; font-size:.88rem; border:1.5px solid transparent; cursor:pointer; font-family:var(--font-body); }
.btn-gold { background:var(--gold); color:#fff; border-color:var(--gold); }
.btn-gold:hover { background:#a07726; }
.btn-outline { border-color:var(--line); color:var(--ink); background:transparent; }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.btn-sm { padding:6px 14px; font-size:.8rem; }
.btn-danger { background:#EF4444; color:#fff; border-color:#EF4444; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:var(--radius); font-size:.88rem; margin-bottom:18px; }
.alert-ok { background:#E8F3EC; color:#1F5C3C; border:1px solid #BCDCC8; }
.alert-err { background:#F9ECEA; color:#8A2E22; border:1px solid #E7C4BD; }
.alert-warn { background:#FEF3C7; color:#92400E; border:1px solid #F6D860; }
.alert-info { background:#EFF6FF; color:#1E40AF; border:1px solid #BFDBFE; }

/* ── Tables ──────────────────────────────────────────────────── */
.tbl { width:100%; border-collapse:collapse; font-size:.88rem; }
.tbl th { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; text-align:left; padding:10px 12px; border-bottom:2px solid var(--ink); color:var(--muted); }
.tbl td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:hover td { background:var(--stone); }
.stage-pill { display:inline-block; padding:3px 10px; border-radius:99px; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; }

/* ── Auth (login) page ───────────────────────────────────────── */
.auth-page { min-height:100vh; display:grid; place-items:center; background:var(--pine-deep); }
.auth-box { background:var(--panel); border-radius:10px; padding:40px; width:100%; max-width:400px; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.auth-box .logo { text-align:center; margin-bottom:28px; }
.auth-box h1 { font-size:1.4rem; text-align:center; margin-bottom:6px; }
.auth-box p.sub { text-align:center; color:var(--muted); font-size:.88rem; margin-bottom:24px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:900px) {
  .sidebar { display:none; }
  .kpi-row { grid-template-columns:1fr 1fr; }
  .cards-2 { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
}