/* =========================================================================
   Design system — white-label CRM
   Colors marked with var(--indigo) / var(--accent) are overridden at runtime
   by applyBranding() so every org can re-skin the whole app.
   ========================================================================= */
:root{
  --indigo:#3B3B96; --indigo-2:#2D2D74; --indigo-3:#333388;
  --accent:#F07C22; --accent-deep:#C85F12;
  --canvas:#F4F5F8; --card:#FFFFFF; --ink:#16202B; --muted:#5C6B7A; --muted-2:#8A95A3;
  --line:#E5E8EF; --line-2:#EEF0F5;
  --lead:#5C6B7A; --walk:#3E6E8E; --quote:#C2A24B; --job:#2F6E4F;
  --bill:#1E5540; --lost:#B5562E; --follow:#7A6E94;
  --ok:#2F6E4F; --warn:#C2862B; --bad:#B5562E; --info:#3E6E8E;
  --shadow-sm:0 1px 2px rgba(16,36,58,.06);
  --shadow:0 14px 38px -22px rgba(16,36,58,.5);
  --shadow-lg:0 30px 80px -30px rgba(16,36,58,.55);
  --radius:13px; --radius-sm:9px;
  --side:240px;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--canvas);color:var(--ink);font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:inherit;}
::selection{background:rgba(194,162,75,.28);}

.app{display:flex;min-height:100vh;}
.hidden{display:none !important;}
.serif{font-family:Georgia,'Times New Roman',serif;}

/* ---------------- Sidebar ---------------- */
.side{width:var(--side);flex:none;background:linear-gradient(180deg,var(--indigo),var(--indigo-2));color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:20;}
.side .brand{display:flex;align-items:center;gap:11px;padding:18px 16px 15px;border-bottom:1px solid rgba(255,255,255,.08);}
.side .brand .logo{width:40px;height:40px;border-radius:11px;background:var(--accent);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;letter-spacing:.02em;flex:none;overflow:hidden;}
.side .brand .logo img{width:100%;height:100%;object-fit:cover;}
.side .brand .nm{font-family:Georgia,serif;font-weight:600;font-size:1rem;line-height:1.15;}
.side .brand .tag{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:3px;}
.nav{flex:1;overflow-y:auto;padding:8px 12px;}
.nav .grouplbl{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.38);padding:14px 10px 6px;font-weight:700;}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:rgba(255,255,255,.78);text-decoration:none;font-size:.9rem;font-weight:500;margin-bottom:2px;cursor:pointer;transition:background .15s,color .15s;}
.nav a svg{width:17px;height:17px;flex:none;opacity:.85;}
.nav a .ct{margin-left:auto;background:rgba(255,255,255,.12);border-radius:20px;font-size:.7rem;font-weight:700;padding:1px 8px;min-width:22px;text-align:center;}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav a.on{background:var(--accent);color:var(--indigo);box-shadow:0 8px 18px -10px rgba(194,162,75,.6);}
.nav a.on .ct{background:rgba(16,36,58,.18);color:var(--indigo);}
.side .me{margin:10px 12px;padding:11px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:11px;display:flex;align-items:center;gap:10px;}
.side .me .av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex:none;}
.side .me .who{font-size:.8rem;line-height:1.2;min-width:0;}
.side .me .who b{display:block;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side .me .who span{color:rgba(255,255,255,.5);font-size:.72rem;}

/* ---------------- Main ---------------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;gap:14px;padding:18px 26px 12px;}
.topbar .h{flex:1;min-width:0;}
.topbar h1{font-family:Georgia,serif;font-weight:600;font-size:1.45rem;margin:0;color:var(--indigo);}
.topbar .sub{color:var(--muted);font-size:.86rem;margin-top:2px;}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;width:260px;transition:border .15s,box-shadow .15s;}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,162,75,.16);}
.search input{border:none;outline:none;font-size:.9rem;width:100%;color:var(--ink);background:none;}
.search svg{color:var(--muted);flex:none;}
.btn{border:none;border-radius:10px;padding:9px 15px;font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:transform .12s,background .15s,box-shadow .15s,border-color .15s;white-space:nowrap;}
.btn svg{width:16px;height:16px;}
.btn-primary{background:var(--indigo);color:#fff;box-shadow:0 9px 20px -10px rgba(16,36,58,.5);}
.btn-primary:hover{background:var(--indigo-3);transform:translateY(-1px);}
.btn-accent{background:var(--accent);color:var(--indigo);}
.btn-accent:hover{filter:brightness(1.04);transform:translateY(-1px);}
.btn-soft{background:#fff;color:var(--ink);border:1px solid var(--line);}
.btn-soft:hover{border-color:#c9cfdc;}
.btn-del{background:none;color:#C0392B;border:1px solid #ECC9C4;}
.btn-del:hover{background:#FBEEEC;}
.btn-ghost{background:none;color:var(--muted);padding:7px 10px;}
.btn-ghost:hover{background:var(--line-2);color:var(--ink);}
.btn.sm{padding:6px 11px;font-size:.82rem;}
.content{padding:6px 26px 40px;flex:1;}

.section{display:none;animation:fade .2s ease;}
.section.on{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ---------------- Stat cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px;}
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;position:relative;overflow:hidden;}
.scard .k{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.scard .v{font-size:1.55rem;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums;color:var(--ink);}
.scard .d{font-size:.74rem;margin-top:4px;font-weight:600;}
.scard .d.up{color:var(--ok);} .scard .d.down{color:var(--bad);}
.scard .spark{position:absolute;right:12px;top:12px;opacity:.5;}

.panels{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;}
.panel h2{font-size:.95rem;font-weight:700;margin:0 0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.panel h2 .small{font-size:.78rem;font-weight:500;color:var(--muted);}

/* phase bars */
.pbar{display:flex;height:13px;border-radius:7px;overflow:hidden;margin-bottom:12px;background:var(--line-2);}
.pbar span{height:100%;transition:width .4s ease;}
.plegend{display:flex;flex-wrap:wrap;gap:8px 16px;}
.plegend .it{display:flex;align-items:center;gap:7px;font-size:.82rem;}
.plegend .dot{width:9px;height:9px;border-radius:50%;}
.plegend .n{color:var(--muted);font-variant-numeric:tabular-nums;}

/* lists */
.list .row{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--line-2);cursor:pointer;border-radius:6px;}
.list .row:last-child{border-bottom:none;}
.list .row:hover{background:#FAFBFE;}
.list .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.list .nm{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list .meta{font-size:.8rem;color:var(--muted);text-align:right;white-space:nowrap;}
.list .when{font-size:.78rem;font-weight:600;color:var(--accent-deep);}
.emptynote{color:var(--muted);font-size:.86rem;padding:22px 0;text-align:center;}
.emptynote.big{padding:48px 0;}
.emptynote .ico{font-size:1.6rem;display:block;margin-bottom:6px;opacity:.5;}

/* ---------------- Toolbar (filters + view toggle) ---------------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.toolbar select,.toolbar input{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:.85rem;color:var(--ink);}
.toolbar .lbl{font-size:.78rem;color:var(--muted);font-weight:700;}
.toolbar .spacer{flex:1;}
.clearf{font-size:.82rem;color:var(--accent-deep);background:none;border:none;font-weight:600;}
.segmented{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:9px;padding:2px;}
.segmented button{border:none;background:none;padding:6px 12px;border-radius:7px;font-size:.82rem;font-weight:600;color:var(--muted);}
.segmented button.on{background:var(--indigo);color:#fff;}

/* ---------------- Pipeline board ---------------- */
.boardscroll{overflow-x:auto;padding-bottom:8px;}
.board{display:flex;gap:13px;align-items:flex-start;width:max-content;}
.col{width:248px;flex:none;background:#ECEEF3;border-radius:13px;display:flex;flex-direction:column;min-height:320px;max-height:calc(100vh - 240px);}
.col-head{padding:12px 13px 9px;}
.col-head .row1{display:flex;align-items:center;gap:8px;}
.col-head .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.col-head .name{font-weight:700;font-size:.84rem;flex:1;}
.col-head .count{background:#fff;border-radius:20px;padding:1px 8px;font-size:.72rem;font-weight:700;color:var(--muted);}
.col-head .val{font-size:.72rem;color:var(--muted);margin-top:4px;font-weight:600;font-variant-numeric:tabular-nums;}
.col-body{padding:3px 9px 11px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.col.dragover{outline:2px dashed var(--accent);outline-offset:-3px;background:#E6E9F0;}
.dcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px;box-shadow:var(--shadow-sm);cursor:pointer;border-left:3px solid var(--lead);transition:box-shadow .15s,transform .05s;}
.dcard:hover{box-shadow:var(--shadow);}
.dcard:active{transform:scale(.99);}
.dcard .cname{font-weight:600;font-size:.88rem;margin-bottom:5px;}
.dcard .sub{font-size:.74rem;color:var(--muted);margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dcard .chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px;}
.chip{font-size:.66rem;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--canvas);color:var(--muted);}
.chip.sit{background:#F3EAD4;color:#9C7F2F;}
.chip.src{background:#E6EDF2;color:#3E6E8E;}
.dcard .meta{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--muted);}
.dcard .amt{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.dcard .flag{font-size:.66rem;font-weight:600;color:#B5562E;margin-top:6px;display:flex;align-items:center;gap:4px;}
.dcard .av{width:20px;height:20px;border-radius:50%;background:var(--indigo);color:#fff;font-size:.62rem;display:inline-flex;align-items:center;justify-content:center;font-weight:700;}

/* ---------------- Tables ---------------- */
.tablewrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:auto;}
table{width:100%;border-collapse:collapse;font-size:.86rem;}
thead th{text-align:left;padding:11px 14px;background:#F7F8FB;color:var(--muted);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;position:sticky;top:0;}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;}
tbody tr{cursor:pointer;}
tbody tr:hover{background:#FAFBFE;}
tbody tr:last-child td{border-bottom:none;}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--canvas);white-space:nowrap;}
.pill .dot{width:8px;height:8px;border-radius:50%;}
.num{font-variant-numeric:tabular-nums;text-align:right;}
.idcell{display:flex;align-items:center;gap:9px;}
.idcell .av{width:30px;height:30px;border-radius:50%;background:var(--indigo);color:#fff;font-size:.74rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.idcell .av.co{border-radius:8px;background:var(--accent);color:var(--indigo);}
.idcell .nm{font-weight:600;}
.idcell .em{font-size:.76rem;color:var(--muted);}
.linklike{color:var(--info);font-weight:600;}
.muted{color:var(--muted);}

/* ---------------- Tasks ---------------- */
.taskrow{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;cursor:pointer;border-left:3px solid var(--accent);}
.taskrow:hover{box-shadow:var(--shadow);}
.taskrow.done{opacity:.55;border-left-color:var(--ok);}
.taskrow.done .tk-title{text-decoration:line-through;}
.tk-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.tk-check.on{background:var(--ok);border-color:var(--ok);color:#fff;}
.tk-title{font-weight:600;flex:1;}
.tk-meta{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:8px;}
.tk-type{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:5px;background:var(--line-2);color:var(--muted);}
.tk-due{font-weight:700;}
.tk-due.over{color:var(--bad);} .tk-due.today{color:var(--warn);}

/* ---------------- Bars (insights) ---------------- */
.bars{display:flex;flex-direction:column;gap:10px;}
.barrow{display:grid;grid-template-columns:160px 1fr 70px;align-items:center;gap:10px;font-size:.84rem;}
.barrow .bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bartrack{background:var(--line-2);border-radius:6px;height:15px;overflow:hidden;}
.bartrack span{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .4s;}
.barrow .bv{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted);}
.reportgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.funnel{display:flex;flex-direction:column;gap:7px;}
.fstep{display:flex;align-items:center;gap:12px;}
.fbar{height:38px;border-radius:8px;background:linear-gradient(90deg,var(--indigo),var(--indigo-3));display:flex;align-items:center;padding:0 12px;color:#fff;font-weight:700;font-size:.84rem;min-width:54px;transition:width .4s;}
.fstep .fl{width:150px;font-size:.82rem;font-weight:600;}
.fstep .fr{font-size:.78rem;color:var(--muted);font-weight:600;white-space:nowrap;}

/* ---------------- Modal ---------------- */
.overlay{position:fixed;inset:0;background:rgba(16,22,34,.5);backdrop-filter:blur(2px);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:100;overflow:auto;}
.overlay.open{display:flex;}
.modal{background:#fff;border-radius:16px;width:100%;max-width:720px;box-shadow:var(--shadow-lg);animation:pop .2s ease;}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;border-radius:16px 16px 0 0;z-index:2;}
.modal-head h2{font-family:Georgia,serif;font-weight:600;font-size:1.15rem;margin:0;color:var(--indigo);}
.modal-head .x{background:none;border:none;font-size:1.4rem;color:var(--muted);line-height:1;padding:4px 9px;border-radius:8px;}
.modal-head .x:hover{background:var(--canvas);}
.modal-body{padding:18px 22px;}
.group{margin-bottom:18px;}
.group h3{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;margin:0 0 11px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.f{display:flex;flex-direction:column;gap:5px;}
.f label{font-size:.76rem;font-weight:600;color:var(--ink);}
.f input,.f select,.f textarea{border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:.88rem;color:var(--ink);background:#fff;width:100%;}
.f textarea{resize:vertical;min-height:64px;}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,162,75,.16);}
.f.check{flex-direction:row;align-items:center;gap:8px;}
.f.check input{width:auto;} .f.check label{font-weight:500;}
.modal-foot{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;border-top:1px solid var(--line);position:sticky;bottom:0;background:#fff;border-radius:0 0 16px 16px;}
.modal-foot .right{display:flex;gap:10px;}

/* ---------------- Record drawer ---------------- */
.drawer-ov{position:fixed;inset:0;background:rgba(16,22,34,.45);display:none;z-index:90;}
.drawer-ov.open{display:block;}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(960px,94vw);background:var(--canvas);box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:91;display:flex;flex-direction:column;}
.drawer.open{transform:none;}
.drawer-top{background:#fff;border-bottom:1px solid var(--line);padding:16px 22px;display:flex;align-items:center;gap:14px;}
.drawer-top .av{width:48px;height:48px;border-radius:50%;background:var(--indigo);color:#fff;font-weight:700;font-size:1.1rem;display:flex;align-items:center;justify-content:center;flex:none;}
.drawer-top .av.co{border-radius:11px;background:var(--accent);color:var(--indigo);}
.drawer-top .ti{flex:1;min-width:0;}
.drawer-top .ti h2{margin:0;font-family:Georgia,serif;font-size:1.3rem;color:var(--indigo);}
.drawer-top .ti .meta{color:var(--muted);font-size:.84rem;margin-top:2px;}
.drawer-top .x{background:none;border:none;font-size:1.5rem;color:var(--muted);padding:4px 10px;border-radius:8px;}
.drawer-top .x:hover{background:var(--canvas);}
.drawer-body{flex:1;overflow:auto;display:grid;grid-template-columns:300px 1fr;gap:0;}
.drawer-left{border-right:1px solid var(--line);padding:18px 20px;overflow:auto;}
.drawer-main{padding:18px 22px;overflow:auto;}
.prop{margin-bottom:13px;}
.prop .pl{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:3px;}
.prop .pv{font-size:.88rem;font-weight:600;}
.prop .pv.empty{color:var(--muted-2);font-weight:500;}
.assoc{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--line);border-radius:9px;background:#fff;margin-bottom:7px;cursor:pointer;}
.assoc:hover{border-color:var(--accent);}
.assoc .av{width:28px;height:28px;font-size:.7rem;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;}
.assoc .av.co{border-radius:7px;background:var(--accent);color:var(--indigo);}

/* activity composer + timeline */
.composer{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;margin-bottom:18px;}
.composer-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-2);padding:4px 4px 0;}
.composer-tabs button{border:none;background:none;padding:8px 12px;font-size:.82rem;font-weight:600;color:var(--muted);border-radius:7px 7px 0 0;display:flex;align-items:center;gap:6px;}
.composer-tabs button.on{color:var(--indigo);background:var(--canvas);}
.composer-body{padding:10px;}
.composer textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;font-size:.88rem;min-height:70px;resize:vertical;}
.composer textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,162,75,.16);}
.composer-foot{display:flex;align-items:center;gap:10px;margin-top:9px;}
.composer-foot .spacer{flex:1;}
.composer-foot input[type=date]{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:.82rem;}

.tl{position:relative;padding-left:26px;}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line);}
.tlitem{position:relative;margin-bottom:16px;}
.tlitem .ic{position:absolute;left:-26px;top:0;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--muted);}
.tlitem .ic.note{border-color:var(--accent);color:var(--accent-deep);}
.tlitem .ic.call{border-color:var(--info);color:var(--info);}
.tlitem .ic.email{border-color:var(--walk);color:var(--walk);}
.tlitem .ic.task{border-color:var(--job);color:var(--job);}
.tlitem .ic.stage{border-color:var(--accent);color:var(--accent-deep);}
.tlitem .bub{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px;}
.tlitem .bub .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px;}
.tlitem .bub .ti2{font-weight:600;font-size:.86rem;}
.tlitem .bub .tm{font-size:.74rem;color:var(--muted);white-space:nowrap;}
.tlitem .bub .bd{font-size:.85rem;color:var(--ink);white-space:pre-wrap;line-height:1.5;}
.tlitem.system .bub{background:var(--canvas);border-style:dashed;}

/* tabs inside drawer-main */
.dtabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line);}
.dtabs button{border:none;background:none;padding:9px 4px;margin-right:14px;font-size:.86rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;}
.dtabs button.on{color:var(--indigo);border-bottom-color:var(--accent);}

/* ---------------- Toast ---------------- */
.toast{position:fixed;bottom:22px;left:calc(50% + var(--side)/2);transform:translateX(-50%) translateY(20px);background:var(--indigo);color:#fff;padding:11px 20px;border-radius:10px;font-size:.88rem;font-weight:600;opacity:0;transition:all .25s;z-index:300;box-shadow:var(--shadow);display:flex;align-items:center;gap:9px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .undo{color:var(--accent);text-decoration:underline;cursor:pointer;}

/* ---------------- Auth screen ---------------- */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,var(--indigo),var(--indigo-2));}
.authcard{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:400px;padding:32px 30px;}
.authcard .logo{width:54px;height:54px;border-radius:14px;background:var(--accent);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;margin-bottom:18px;}
.authcard h1{font-family:Georgia,serif;font-size:1.4rem;color:var(--indigo);margin:0 0 4px;}
.authcard p{color:var(--muted);font-size:.88rem;margin:0 0 22px;}
.authcard .f{margin-bottom:14px;}
.authcard .btn{width:100%;justify-content:center;padding:12px;}
.authcard .alt{text-align:center;font-size:.82rem;color:var(--muted);margin-top:16px;}
.authcard .demo{margin-top:16px;padding:12px;background:var(--canvas);border-radius:10px;font-size:.8rem;color:var(--muted);text-align:center;}

/* ---------------- Client portal ---------------- */
.portal-wrap{min-height:100vh;background:var(--canvas);}
.portal-loading{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--muted);font-size:1rem;}
.portal-head{background:linear-gradient(180deg,var(--indigo),var(--indigo-2));color:#fff;padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.portal-brand{display:flex;align-items:center;gap:12px;}
.portal-brand .logo{width:42px;height:42px;border-radius:11px;background:var(--accent);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-weight:800;overflow:hidden;}
.portal-brand .logo img{width:100%;height:100%;object-fit:cover;}
.portal-brand .bn{font-family:Georgia,serif;font-weight:600;font-size:1.1rem;}
.portal-brand .bt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:2px;}
.portal-me{display:flex;align-items:center;gap:14px;}
.portal-contact{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:.78rem;}
.portal-contact a{color:rgba(255,255,255,.82);text-decoration:none;font-weight:600;}
.portal-contact a:hover{color:#fff;text-decoration:underline;}
.portal-me .who{text-align:right;font-size:.82rem;line-height:1.25;}
.portal-me .who b{display:block;}
.portal-me .who span{color:rgba(255,255,255,.6);font-size:.74rem;}
.portal-main{max-width:880px;margin:0 auto;padding:30px 22px 60px;}
.portal-h1{font-family:Georgia,serif;font-size:1.7rem;color:var(--indigo);margin:0 0 4px;}
.portal-sub{color:var(--muted);margin:0 0 22px;}
.portal-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:18px;}
.pc-title{font-size:1.15rem;font-weight:700;}
.pc-status{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--muted);margin-top:5px;font-size:.9rem;}
.pc-status .dot{width:10px;height:10px;border-radius:50%;}
.pc-meta{display:flex;gap:22px;}
.pc-meta>div{text-align:right;}
.pc-meta span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;}
.pc-meta b{font-size:1.05rem;font-variant-numeric:tabular-nums;}
.milestones{display:flex;justify-content:space-between;gap:4px;margin:6px 0 24px;position:relative;}
.milestones::before{content:"";position:absolute;top:13px;left:14px;right:14px;height:2px;background:var(--line);z-index:0;}
.ms{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;z-index:1;min-width:0;}
.ms .dot{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--muted);font-weight:700;}
.ms.done .dot{background:var(--accent);border-color:var(--accent);color:var(--indigo);}
.ms.cur .dot{border-color:var(--accent);color:var(--accent-deep);box-shadow:0 0 0 4px rgba(194,162,75,.18);}
.ms .lbl{font-size:.68rem;text-align:center;color:var(--muted);line-height:1.2;max-width:80px;}
.ms.done .lbl,.ms.cur .lbl{color:var(--ink);font-weight:600;}
/* scope of work */
.scope{margin:4px 0 22px;}
.scope-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;}
.scope-head h3{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;margin:0;}
.scope-prog{display:flex;align-items:center;gap:9px;}
.scope-prog .bar{width:120px;height:8px;background:var(--line-2);border-radius:5px;overflow:hidden;}
.scope-prog .bar span{display:block;height:100%;background:var(--ok);border-radius:5px;transition:width .4s;}
.scope-prog .pct{font-size:.74rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.phase{margin-bottom:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.phase-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;background:var(--canvas);border-bottom:1px solid var(--line);}
.phase-name{font-weight:700;font-size:.88rem;}
.phase-meta{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
.phase-meta.complete{color:var(--ok);}
.phase-meta.inprogress{color:var(--accent-deep);}
.scope-item{display:flex;align-items:center;gap:11px;padding:10px 13px;border-bottom:1px solid var(--line-2);}
.scope-item:last-child{border-bottom:none;}
.scope-item .si-ic{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;flex:none;border:2px solid var(--line);color:var(--muted-2);}
.scope-item.done .si-ic{background:var(--ok);border-color:var(--ok);color:#fff;}
.scope-item.doing .si-ic{border-color:var(--accent);color:var(--accent-deep);}
.scope-item .si-title{flex:1;font-size:.9rem;font-weight:500;}
.scope-item.done .si-title{color:var(--muted);}
.scope-item .si-lbl{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted-2);}
.scope-item.doing .si-lbl{color:var(--accent-deep);}
.scope-item.done .si-lbl{color:var(--ok);}

.pc-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;border-top:1px solid var(--line-2);padding-top:18px;}
.pc-cols h3{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;margin:0 0 12px;}
.upd{padding:10px 0;border-bottom:1px solid var(--line-2);}
.upd:last-child{border-bottom:none;}
.upd-when{font-size:.72rem;color:var(--muted);font-weight:600;}
.upd-body{font-size:.88rem;margin-top:3px;white-space:pre-wrap;line-height:1.5;}
.msg-thread{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px;margin-bottom:10px;background:var(--canvas);border-radius:10px;min-height:90px;}
.bubble{max-width:80%;display:flex;flex-direction:column;}
.bubble .bb{padding:8px 12px;border-radius:13px;font-size:.86rem;line-height:1.4;}
.bubble .bw{font-size:.68rem;color:var(--muted);margin-top:2px;}
.bubble.mine{align-self:flex-end;align-items:flex-end;}
.bubble.mine .bb{background:var(--indigo);color:#fff;border-bottom-right-radius:4px;}
.bubble.them{align-self:flex-start;}
.bubble.them .bb{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;}
.msg-compose{display:flex;gap:8px;align-items:flex-end;}
.msg-compose textarea{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:.88rem;resize:none;}
.msg-compose textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,162,75,.16);}

@media (max-width:720px){ .pc-cols{grid-template-columns:1fr;} .ms .lbl{display:none;} }

@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr);}
  .panels,.reportgrid{grid-template-columns:1fr;}
  .drawer-body{grid-template-columns:1fr;}
  .drawer-left{border-right:none;border-bottom:1px solid var(--line);}
}
@media (max-width:760px){
  .side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;}
  .side.open{transform:none;}
  .toast{left:50%;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}