@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=block');
@import url('fonts/fonts.css');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0A0A0A;--white:#FFFFFF;--gray-1:#E8E7E2;--gray-2:#C8C7C0;
  --gray-3:#8A8980;--gray-4:#3A3A36;--red:#D94030;--yellow:#13D4D4;
  --green:#3A8C5C;--blue:#2A5CAA;--col:72px;--module:rgba(0,0,0,.04);
}
html{font-size:13px}
body{background:var(--white);color:var(--black);font-family:'DM Mono',monospace;min-height:100vh;overflow-x:hidden}
body::before{content:'';display:none} /* column grid removed — clean white background */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--gray-1)}
::-webkit-scrollbar-thumb{background:var(--gray-2)}
::-webkit-scrollbar-thumb:hover{background:var(--black)}

/* ── SHELL ────────────────────────────── */
.shell{display:grid;grid-template-columns:220px 1fr;grid-template-rows:48px 1fr;min-height:100vh;position:relative;z-index:1}

/* ── TOPBAR ───────────────────────────── */
.topbar{grid-column:1/-1;background:var(--black);color:var(--white);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:500}
.logo{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--white);padding-right:26px;border-right:1px solid var(--gray-4);margin-right:26px;text-decoration:none}
.logo span{color:var(--white)}
.topbar-nav{display:flex;align-items:center;flex:1}
.topbar-nav a{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-3);text-decoration:none;padding:0 15px;height:48px;display:flex;align-items:center;border-right:1px solid var(--gray-4);transition:color .15s,background .15s}
.topbar-nav a:first-child{border-left:1px solid var(--gray-4)}
.topbar-nav a.active{color:var(--white);background:var(--gray-4)}
.topbar-nav a:hover:not(.active){color:var(--white)}
.topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.topbar-date{font-size:10px;color:var(--gray-3);letter-spacing:.06em}
.plan-badge-top{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-3);padding:3px 8px;border:1px solid var(--gray-4)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:var(--black);cursor:pointer;flex-shrink:0;text-decoration:none}
.user-menu-wrap{position:relative}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--black);border:1px solid var(--gray-4);width:190px;display:none;z-index:600}
.user-dropdown.open{display:block}
.udd{display:block;padding:10px 16px;font-size:11px;letter-spacing:.04em;color:var(--gray-2);cursor:pointer;border-bottom:1px solid var(--gray-4);transition:background .1s,color .1s;text-decoration:none}
.udd:last-child{border-bottom:none}
.udd:hover{background:var(--gray-4);color:var(--white)}
.udd.u-name{color:var(--white);font-size:10px;cursor:default}
.udd.u-name:hover{background:transparent}
.udd.danger{color:var(--red)}
.udd.danger:hover{background:rgba(217,64,48,.12)}

/* ── SIDEBAR ──────────────────────────── */
.sidebar{background:var(--black);color:var(--white);display:flex;flex-direction:column;position:sticky;top:48px;height:calc(100vh - 48px);overflow-y:auto}
.sb-sec{padding:16px 0 6px;border-bottom:1px solid var(--gray-4)}
.sb-lbl{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-3);padding:0 20px 8px}
.sb-item{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:11px;letter-spacing:.04em;color:var(--gray-2);cursor:pointer;transition:background .1s,color .1s;border-left:2px solid transparent;text-decoration:none;-webkit-tap-highlight-color:rgba(255,255,255,.1);touch-action:manipulation}
.sb-item:hover{background:var(--gray-4);color:var(--white)}
.sb-item.active{color:var(--white);border-left-color:var(--yellow);background:rgba(255,255,255,.04)}
.sb-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sb-count{margin-left:auto;font-size:10px;background:var(--gray-4);color:var(--gray-2);padding:1px 7px;border-radius:2px}
.sb-item.active .sb-count{background:var(--yellow);color:var(--black)}

/* ── MAIN ─────────────────────────────── */
.main{background:var(--white);overflow-y:auto}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;padding:26px 36px 20px}
.page-title{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1}
.page-sub{font-size:11px;color:var(--gray-3);letter-spacing:.06em;margin-top:5px}
.hdr-btns{display:flex}
.btn{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:9px 15px;border:none;background:var(--module);cursor:pointer;transition:background .15s,color .15s;margin-left:-1px;text-decoration:none;color:var(--black)}
.btn:hover{background:rgba(0,0,0,.08);color:var(--black)}
.btn.primary{background:var(--black);color:var(--white)}
.btn.primary:hover{background:var(--gray-4)}
.divider{height:1px;background:var(--gray-1);margin:18px 0}

/* ── STATS ────────────────────────────── */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);background:var(--module);border-radius:12px;overflow:hidden}
.stat-cell{padding:20px 32px;animation:fadeUp .4s ease both}
.sn{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:28px;font-weight:900;line-height:1;letter-spacing:-.02em}
.sl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-3);margin-top:4px}
.sd{font-size:10px;margin-top:3px}
.up{color:var(--green)}.dn{color:var(--red)}
.stat-cell:nth-child(1){animation-delay:.05s}.stat-cell:nth-child(2){animation-delay:.1s}.stat-cell:nth-child(3){animation-delay:.15s}.stat-cell:nth-child(4){animation-delay:.2s}

/* ── CONTENT GRID ─────────────────────── */
.content-grid{display:grid;grid-template-columns:1fr 320px}
.col-left{border-right:1px solid var(--gray-1);padding:24px 32px}
.col-right{padding:24px 20px}
.sec-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.sec-title{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sec-action{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-3);cursor:pointer;text-decoration:none}
.sec-action:hover{color:var(--black)}

/* ── PHASE TRACKER ────────────────────── */
.phase-tracker{display:flex;align-items:center;margin-top:7px}
.phase-step{display:flex;align-items:center;flex:1}
.phase-pill{font-size:9px;font-weight:500;letter-spacing:.08em;padding:2px 5px;border:1px solid var(--gray-2);color:var(--gray-3);background:transparent;white-space:nowrap;flex-shrink:0}
.phase-pill.done{background:var(--black);border-color:var(--black);color:var(--white)}
.phase-pill.curr{border-width:1.5px;color:var(--white);font-weight:700}
.phase-conn{height:1px;flex:1;background:var(--gray-2);min-width:3px}
.phase-conn.done{background:var(--black)}

/* ── PROJECT CARDS ────────────────────── */
.project-list{display:flex;flex-direction:column;margin-bottom:32px}
.project-card{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--gray-1);cursor:pointer;transition:background .1s;animation:fadeUp .4s ease both}
.project-card:hover{background:rgba(0,0,0,.015);margin:0 -8px;padding:14px 8px}
.p-accent{width:4px;border-radius:1px;min-height:32px;flex-shrink:0}
.p-name{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:0}
.p-meta{display:flex;gap:12px;margin-top:3px;margin-bottom:0;font-size:10px;color:var(--gray-3);letter-spacing:.04em}
.stag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:1px}
.s-active{background:rgba(58,140,92,.12);color:var(--green)}
.s-hold{background:rgba(19,212,212,.15);color:#0a9090}
.s-review{background:rgba(42,92,170,.12);color:var(--blue)}
.s-complete{background:var(--gray-1);color:var(--gray-3)}
.project-card:nth-child(1){animation-delay:.07s}.project-card:nth-child(2){animation-delay:.12s}.project-card:nth-child(3){animation-delay:.17s}.project-card:nth-child(4){animation-delay:.22s}.project-card:nth-child(5){animation-delay:.27s}

/* ── CONSULTANTS ──────────────────────── */
.proj-lower{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--gray-1);margin-top:9px;padding-top:9px}
.cg{padding-right:12px}
.cg+.cg{padding-right:0;padding-left:12px;border-left:1px solid var(--gray-1)}
.cg-lbl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-3);margin-bottom:4px}
.c-row{display:flex;align-items:center;justify-content:space-between;padding:2px 0;gap:6px}
.c-nm{font-size:10px;letter-spacing:.02em}
.cbdg{font-size:9px;letter-spacing:.06em;padding:1px 5px;border-radius:1px;white-space:nowrap;flex-shrink:0}
.bc{background:rgba(58,140,92,.12);color:var(--green)}
.bpend{background:rgba(19,212,212,.15);color:#0a9090}
.bna{background:var(--gray-1);color:var(--gray-3)}
.breq{border:1px solid var(--gray-2);color:var(--gray-3);background:transparent}

/* ── SITE CHIPS ───────────────────────── */
.site-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--gray-1)}
.chip{display:flex;align-items:center;gap:4px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px 2px 5px;border:1px solid;border-radius:1px;white-space:nowrap}
.cdot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.chip-ok{border-color:rgba(58,140,92,.3);background:rgba(58,140,92,.07);color:var(--green)}.chip-ok .cdot{background:var(--green)}
.chip-warn{border-color:rgba(19,212,212,.4);background:rgba(19,212,212,.09);color:#0a9090}.chip-warn .cdot{background:#13D4D4}
.chip-miss{border-color:rgba(217,64,48,.3);background:rgba(217,64,48,.06);color:var(--red)}.chip-miss .cdot{background:var(--red)}
.chip-flag{border-color:rgba(42,92,170,.3);background:rgba(42,92,170,.07);color:var(--blue)}.chip-flag .cdot{background:var(--blue)}
.chip-na{border-color:var(--gray-1);background:transparent;color:var(--gray-3)}.chip-na .cdot{background:var(--gray-2)}

/* ── MINI TIMELINE ────────────────────── */
.tl-mrow{display:grid;grid-template-columns:120px 1fr;gap:8px;margin-bottom:4px}
.tl-mlbls{display:flex;justify-content:space-between}
.tl-m{font-size:9px;color:var(--gray-3);letter-spacing:.06em;text-transform:uppercase}
.tl-row{display:grid;grid-template-columns:120px 1fr;gap:8px;margin-bottom:8px;align-items:center}
.tl-lbl{font-size:10px;color:var(--gray-3);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-track{height:20px;background:var(--gray-1);position:relative;overflow:hidden}
.tl-bar{position:absolute;top:0;height:100%;display:flex;align-items:center;padding:0 7px;font-size:9px;letter-spacing:.05em;color:var(--white);white-space:nowrap}

/* ── CALENDAR ─────────────────────────── */
.mini-cal{margin-bottom:22px}
.cal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.cal-month{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em}
.cal-nav{display:flex}
.cal-btn{width:21px;height:21px;border:1px solid var(--gray-1);background:none;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;color:var(--gray-3);transition:background .1s}
.cal-btn:hover{background:var(--black);color:var(--white)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cdl{font-size:9px;color:var(--gray-3);text-align:center;letter-spacing:.06em;text-transform:uppercase;padding:3px 0}
.cd{font-size:10px;text-align:center;padding:4px 2px;cursor:pointer;border-radius:1px;transition:background .1s;position:relative}
.cd:hover{background:var(--gray-1)}
.cd.today{background:var(--black);color:var(--white);font-weight:500}
.cd.has-ev::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--yellow)}
.cd.other{color:var(--gray-2)}

/* ── TASKS ────────────────────────────── */
.task-list{display:flex;flex-direction:column}
.task-item{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--gray-1);animation:fadeUp .4s ease both}
.task-chk{width:14px;height:14px;border:1.5px solid var(--gray-2);border-radius:2px;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;cursor:pointer}
.task-chk:hover{border-color:var(--black)}
.task-chk.checked{background:var(--black);border-color:var(--black)}
.task-chk.checked::after{content:'✓';font-size:9px;color:var(--white)}
.task-txt{font-size:11px;letter-spacing:.02em;line-height:1.5;flex:1}
.task-txt.done{text-decoration:line-through;color:var(--gray-3)}
.task-due{font-size:9px;letter-spacing:.06em;color:var(--gray-3);white-space:nowrap}
.task-due.urgent{color:var(--red)}

/* ── TEAM MINI ────────────────────────── */
.team-list-mini{display:flex;flex-direction:column}
.t-mb{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--gray-1);animation:fadeUp .4s ease both}
.t-av{width:29px;height:29px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:var(--black);flex-shrink:0}
.t-nm{font-size:11px;letter-spacing:.02em;font-weight:500}
.t-rl{font-size:10px;color:var(--gray-3);letter-spacing:.04em}
.t-dots{margin-left:auto;display:flex;gap:3px}
.t-dot{width:7px;height:7px;border-radius:50%}

/* ── PROJECTS TABLE ───────────────────── */
.proj-table{width:100%;border-collapse:collapse}
.proj-table th{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-3);padding:10px 14px;text-align:left;border-bottom:2px solid var(--black);background:var(--white);white-space:nowrap}
.proj-table td{padding:13px 14px;border-bottom:1px solid var(--gray-1);font-size:11px;letter-spacing:.02em;vertical-align:middle}
.proj-table tr:hover td{background:rgba(0,0,0,.015)}
.proj-table tr{cursor:pointer}
.ptcolor{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle}
.pt-pills{display:flex;gap:2px}
.pt-pill{font-size:8px;padding:2px 4px;letter-spacing:.06em;border:1px solid var(--gray-2);color:var(--gray-3)}
.pt-pill.done{background:var(--black);border-color:var(--black);color:var(--white)}
.pt-pill.curr{color:var(--white);font-weight:700;border-width:1.5px}
.pt-prog{display:flex;align-items:center;gap:7px}
.pt-bar{width:55px;height:3px;background:var(--gray-1)}
.pt-fill{height:100%;transition:width 1s ease}
.pt-pct{font-size:10px;color:var(--gray-3)}

/* ── GANTT ────────────────────────────── */
.gantt-wrap{padding:24px 32px;min-width:700px;overflow-x:auto}
.gantt-hdr{display:grid;grid-template-columns:175px 1fr;border-bottom:2px solid var(--black)}
.gantt-pcol{padding:8px 0;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-3)}
.gantt-months{display:flex}
.gantt-month{flex:1;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-3);padding:8px 0 8px 8px;border-left:1px solid var(--gray-1)}
.gantt-row{display:grid;grid-template-columns:175px 1fr;align-items:center;border-bottom:1px solid var(--gray-1);min-height:60px;animation:fadeUp .35s ease both}
.gantt-row:hover{background:rgba(0,0,0,.015)}
.gantt-info{padding:10px 14px 10px 0}
.gantt-pname{font-size:11px;font-weight:500;letter-spacing:.02em}
.gantt-pphase{font-size:9px;color:var(--gray-3);letter-spacing:.06em;margin-top:2px}
.gantt-bars{position:relative;height:60px}
.gantt-bar{position:absolute;top:13px;height:24px;display:flex;align-items:center;padding:0 8px;font-size:9px;letter-spacing:.05em;color:var(--white);white-space:nowrap;overflow:hidden}
.gantt-today{position:absolute;top:20px;bottom:0;width:0;border-left:2px dashed var(--black);opacity:.7;z-index:5}
.gantt-row:nth-child(1){animation-delay:.05s}.gantt-row:nth-child(2){animation-delay:.1s}.gantt-row:nth-child(3){animation-delay:.15s}.gantt-row:nth-child(4){animation-delay:.2s}.gantt-row:nth-child(5){animation-delay:.25s}

/* ── TEAM PAGE ────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:24px 32px}
.team-card{border:1px solid var(--gray-1);margin:-1px -1px 0 0;padding:22px;animation:fadeUp .35s ease both;cursor:pointer;transition:background .1s}
.team-card:hover{background:rgba(0,0,0,.015)}
.tc-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--black);margin-bottom:12px}
.tc-nm{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:2px}
.tc-rl{font-size:10px;color:var(--gray-3);letter-spacing:.06em;margin-bottom:14px}
.tc-div{height:1px;background:var(--gray-1);margin-bottom:12px}
.tc-stats{display:flex;gap:16px;margin-bottom:12px}
.tc-sn{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;line-height:1}
.tc-sl{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-3);margin-top:2px}
.tc-projs{display:flex;flex-wrap:wrap;gap:4px}
.tc-pdot{width:8px;height:8px;border-radius:50%}
.tc-email{font-size:10px;color:var(--gray-3);letter-spacing:.03em;margin-top:9px}

/* ── REPORTS ──────────────────────────── */
.reports-grid{display:grid;grid-template-columns:1fr 1fr;padding:24px 32px}
.report-card{border:1px solid var(--gray-1);margin:-1px -1px 0 0;padding:22px;animation:fadeUp .35s ease both}
.rc-title{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.rc-sub{font-size:10px;color:var(--gray-3);letter-spacing:.04em;margin-bottom:18px;line-height:1.6}
.bar-chart{display:flex;flex-direction:column;gap:7px}
.bc-row{display:grid;grid-template-columns:105px 1fr 34px;gap:7px;align-items:center}
.bc-lbl{font-size:10px;color:var(--gray-3);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-track{height:9px;background:var(--gray-1)}
.bc-fill{height:100%;transition:width 1s ease}
.bc-val{font-size:10px;color:var(--gray-3);text-align:right}
.phase-dist{display:flex;height:18px;width:100%;margin-bottom:9px;border:1px solid var(--gray-1);overflow:hidden}
.pd-seg{display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.06em;color:var(--white);overflow:hidden;white-space:nowrap}
.status-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ss-item{padding:12px;background:var(--gray-1)}
.ss-num{font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:20px;font-weight:900}
.ss-lbl{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-3);margin-top:2px}
.cs-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--gray-1)}
.cs-lbl{font-size:10px;letter-spacing:.04em}
.cs-dots{display:flex;gap:4px}
.cs-dot{width:10px;height:10px;border-radius:50%}
.cs-dot.empty{background:var(--gray-1)}
.rep-legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.rl-item{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--gray-3);letter-spacing:.04em}
.rl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.report-card:nth-child(1){animation-delay:.05s}.report-card:nth-child(2){animation-delay:.1s}.report-card:nth-child(3){animation-delay:.15s}.report-card:nth-child(4){animation-delay:.2s}

/* ── ANIMATIONS ───────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE — DATUM6
   Breakpoints: 768px (tablet) · 480px (phone)
══════════════════════════════════════════ */

/* ── TABLET — 768px ───────────────────── */
@media (max-width: 768px) {

  /* Shell — collapse sidebar */
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: 48px auto 1fr;
  }

  /* Topbar */
  .topbar { padding: 0 16px; }
  .topbar-date { display: none; }
  .plan-badge-top { display: none; }
  .logo { border-right: none; margin-right: 0; padding-right: 12px; }
  .topbar-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
  }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .topbar-nav a {
    font-size: 9px;
    padding: 0 11px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .06em;
  }

  /* Sidebar — hidden by default, toggle via hamburger */
  .sidebar {
    display: none;
    position: fixed;
    top: 48px;
    left: 0;
    width: 280px;
    height: calc(100vh - 48px);
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
  }
  .sidebar.open { display: flex; }

  /* Hamburger button */
  .ham-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin-right: 14px;
    flex-shrink: 0;
  }
  .ham-btn span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--white);
    transition: transform .2s;
  }

  /* Page header */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
  }
  .hdr-btns { flex-wrap: wrap; gap: 4px; }
  .hdr-btns .btn { font-size: 10px; padding: 8px 10px; }

  /* Timeline header — let buttons wrap cleanly, shrink the view-picker */
  .tl-hdr-btns { row-gap: 6px; }
  .tl-hdr-btns .tl-arrow-btn { width: 24px; height: 24px; }
  .tl-hdr-btns .tl-arrow-btn svg { width: 24px; height: 24px; }
  .tl-view-picker .btn { padding: 6px 8px !important; font-size: 9px !important; }

  /* Stats */
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { padding: 14px 20px; }
  .sn { font-size: 22px; }

  /* Content grid — stack columns */
  .content-grid { grid-template-columns: 1fr; }
  .col-left { border-right: none; padding: 18px 20px; border-bottom: 1px solid var(--gray-1); }
  .col-right { padding: 18px 20px; }

  /* Projects table — scroll horizontally */
  .proj-list-wrap { padding: 0 16px 24px !important; }
  .proj-table { font-size: 10px; }
  .proj-table th, .proj-table td { padding: 10px 10px; }
  /* Hide secondary columns on tablet/mobile */
  .proj-table .hide-mobile { display: none; }
  .pt-bar { width: 36px; }

  /* Gantt */
  .gantt-wrap { padding: 16px 20px; }
  .gantt-hdr { grid-template-columns: 110px 1fr; }
  .gantt-row { grid-template-columns: 110px 1fr; }
  .gantt-info { padding: 8px 10px 8px 0; }
  .gantt-pname { font-size: 10px; }

  /* Team grid */
  .team-grid { padding: 16px 20px; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }

  /* Reports grid */
  .reports-grid { grid-template-columns: 1fr; padding: 16px 20px; }

  /* Modal */
  .modal, .add-modal { max-width: 100%; max-height: 96vh; }
  .modal-body, .add-modal-body { padding: 18px; }

}

/* ── PHONE — 480px ────────────────────── */
@media (max-width: 480px) {

  html { font-size: 12px; }

  /* Topbar */
  .topbar { padding: 0 12px; }
  .logo { font-size: 12px; }
  .topbar-nav a { font-size: 8px; padding: 0 9px; }

  /* Page header */
  .page-header { padding: 14px 16px 12px; }
  .page-title { font-size: 16px; }
  .hdr-btns .btn { font-size: 9px; padding: 7px 9px; }

  /* Timeline header at phone — tighter still */
  .tl-view-picker .btn { padding: 5px 7px !important; font-size: 8px !important; }
  .tl-hdr-btns .tl-arrow-btn { width: 22px; height: 22px; }
  .tl-hdr-btns .tl-arrow-btn svg { width: 22px; height: 22px; }

  /* Stats — 2 columns on phone */
  .stat-row { grid-template-columns: repeat(2,1fr); }
  .stat-cell { padding: 12px 14px; }
  .sn { font-size: 20px; }
  .sl { font-size: 9px; }

  /* Content areas */
  .col-left, .col-right { padding: 14px 16px; }

  /* Phase tracker — tighter */
  .phase-pill { font-size: 8px; padding: 1px 3px; }
  .phase-conn { min-width: 2px; }

  /* Consultant rows */
  .proj-lower { grid-template-columns: 1fr; }
  .cg+.cg { border-left: none; padding-left: 0; border-top: 1px solid var(--gray-1); margin-top: 7px; padding-top: 7px; }

  /* Projects table — at phone widths, hide more columns + tighten */
  .proj-list-wrap { padding: 0 8px 16px !important; }
  .proj-table th, .proj-table td { padding: 8px 6px; font-size: 10px; }
  .proj-table .hide-phone { display: none; }
  .proj-table .act-btn { font-size: 8px; padding: 3px 6px; margin-left: 2px; }

  /* Gantt — simplified */
  .gantt-hdr { grid-template-columns: 80px 1fr; }
  .gantt-row { grid-template-columns: 80px 1fr; min-height: 44px; }
  .gantt-pname { font-size: 9px; }
  .gantt-pphase { display: none; }

  /* Team cards — full width */
  .team-grid { grid-template-columns: 1fr; padding: 12px 16px; }
  .team-card { padding: 16px; }

  /* Reports */
  .reports-grid { padding: 12px 16px; }
  .report-card { padding: 16px; }
  .bc-row { grid-template-columns: 80px 1fr 28px; }
  .bc-lbl { font-size: 9px; }

  /* Modals — full screen on mobile */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal, .add-modal { max-height: 95vh; border-radius: 0; }
  .modal-steps, .modal-step { font-size: 8px; padding: 8px 0; }
  .modal-body, .add-modal-body { padding: 16px; }
  .modal-footer, .add-modal-footer { padding: 12px 16px; }
  .modal-btn { font-size: 10px; padding: 9px 14px; }

  /* Form rows — stack on mobile */
  .mf-row, .mf-row2 { grid-template-columns: 1fr; }

  /* Phase selector — scroll */
  .phase-selector, .phase-selector2 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .phase-btn, .phase-btn2 { min-width: 52px; flex-shrink: 0; }

  /* Sign in page */
  .auth-left { display: none; }
  .auth-right { padding: 28px 20px; }

}

/* ── HAMBURGER — visible only when topbar nav is hidden (≤1024px) ───── */
.ham-btn {
  display: none;
}
.ham-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--white);
  transition: all .2s;
}
.ham-btn:hover span { background: var(--gray-2); }

@media (max-width: 1024px) {
  .ham-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    padding: 0 8px;
    margin-right: 8px;
    background: transparent;
    border: none;
    align-self: center;
  }
}

/* ── SIDEBAR COLLAPSED — works at any width ───── */
.shell.collapsed { grid-template-columns: 1fr; }
.shell.collapsed .sidebar { display: none; }
.shell.collapsed .main { grid-column: 1 / -1; }
.shell.collapsed .topbar { grid-column: 1 / -1; }

/* Sidebar toggle button is now owned entirely by the v2 sidebar in
   shared-nav.js (.sidebar.v2 .sb-collapse-btn). The earlier override here
   absolutely-positioned it top-right and fought the v2 flex layout, so it
   has been removed. */

/* Sidebar expand tab — appears at left edge when collapsed (desktop only) */
.sb-expand-btn{
  display:none;position:fixed;
  left:0;top:50%;transform:translateY(-50%);
  width:24px;height:60px;
  align-items:center;justify-content:center;
  background:var(--black);color:var(--white);
  border:none;border-radius:0 4px 4px 0;
  font-family:Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1;font-weight:300;
  cursor:pointer;z-index:998;transition:width .15s
}
.sb-expand-btn:hover{width:32px}
.shell.collapsed ~ .sb-expand-btn{display:flex}
@media (max-width: 1024px){ .sb-expand-btn{display:none !important} }

/* ── SIDEBAR PAGE LINKS (mobile/iPad only) ─────
   Surfaced inside the sidebar drawer when the topbar-nav is hidden.
   Hidden at desktop where topbar-nav handles navigation. */
.sb-pages { display: none !important; padding: 0; margin: 0; }
.sb-pages a,
.sb-page-link {
  display: block;
  padding: 12px 20px !important;
  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--gray-2) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--gray-4) !important;
  transition: color .15s, background .15s;
  background: transparent;
}
.sb-pages a:hover,
.sb-page-link:hover { color: var(--white) !important; background: var(--gray-4) !important; }
.sb-pages a.active,
.sb-page-link.active { color: var(--white) !important; background: var(--gray-4) !important; }

@media (max-width: 1024px) {
  .sb-pages { display: block !important; padding-bottom: 8px; border-bottom: 1px solid var(--gray-4); }
}

/* ── iPad / TABLET LANDSCAPE — 1024px and below ───── */
@media (max-width: 1024px) {
  /* Topbar nav links hidden — surfaced inside the sidebar drawer instead */
  .topbar-nav { display: none !important; }

  /* Dashboard chart rows stack on iPad portrait/landscape */
  body[data-page="dashboard"] .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  /* Generic chart-row (used on dashboard + project pages): always stacks below 1024 */
  .chart-row {
    grid-template-columns: 1fr !important;
  }
  /* Legacy inline-styled chart row on dashboard (status doughnut + 12-week activity) */
  body[data-page="dashboard"] main.main > div[style*="grid-template-columns:1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Main content grid (Projects + Calendar) stacks */
  body[data-page="dashboard"] .content-grid {
    grid-template-columns: 1fr;
  }
  /* Reports page: wider cards on tablet */
  body[data-page="reports"] .reports-grid {
    grid-template-columns: 1fr;
  }
  /* POT chart filter row — wraps better on narrower widths */
  [data-pot] .pot-header {
    flex-direction: column;
    align-items: stretch;
  }
  [data-pot] .pot-header > div:last-child {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* Project page detail grid: stack on iPad */
  .pd-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── PHONE — 600px and below: chart-specific tightening ───── */
@media (max-width: 600px) {
  /* Chart cards: less padding so canvas gets more room */
  [data-pot],
  body[data-page="dashboard"] main.main > div[style*="grid-template-columns:1fr 1.6fr"] > div,
  .report-card,
  #projAnalyticsCell .chart-row > div {
    padding: 12px !important;
  }

  /* Chart canvases: shrink height ~30% on phones for better screen fit */
  [data-pot] div[style*="height:280px"] {
    height: 220px !important;
  }
  body[data-page="dashboard"] div[style*="height:220px"] {
    height: 180px !important;
  }
  #projAnalyticsCell div[style*="height:200px"],
  #projAnalyticsCell div[style*="height:220px"] {
    height: 180px !important;
  }

  /* POT filter controls: full-width on phones, vertical stack of date pickers */
  [data-pot] .pot-header > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  [data-pot] .pot-preset {
    grid-column: 1 / -1;
  }
  [data-pot] .pot-bucket {
    grid-column: 1 / -1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  [data-pot] .pot-bucket .pot-bucket-btn {
    flex: 1;
    min-width: 0;
    padding: 6px 6px;
    font-size: 9px;
  }
}

/* ── SIDEBAR OVERLAY — only on mobile (≤768) when sidebar drawer is open ──────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 280px;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  pointer-events: auto;
}
.sidebar-overlay.open { display: block; }
@media (min-width: 769px) {
  /* Defensive: never show overlay at iPad/desktop, even if classList.open got stuck */
  .sidebar-overlay,
  .sidebar-overlay.open { display: none !important; }
}


/* ═══ Trial Countdown Banner ═══════════════════════════════════════ */
.trial-banner {
  width: 100%;
  background: var(--gray-1);
  color: var(--black);
  border-bottom: 1px solid var(--gray-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 24px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  position: relative;
  z-index: 600;
  animation: tbSlide .25s ease-out;
}
@keyframes tbSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.trial-banner-text { line-height: 1.4; }
.trial-banner-text strong {
  font-family: 'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
}
.trial-banner-link {
  color: var(--black);
  text-decoration: underline;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.trial-banner-link:hover { background: var(--black); color: var(--white); padding: 2px 6px; text-decoration: none; }
.trial-banner-hide {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s;
}
.trial-banner-hide:hover { opacity: 1; }

/* Urgency levels */
.trial-banner.lvl-soft     { background: var(--gray-1); color: var(--black); }
.trial-banner.lvl-info     { background: var(--yellow); color: var(--black); }
.trial-banner.lvl-warning  { background: #FFD93A; color: var(--black); border-color: #d4b500; }
.trial-banner.lvl-danger   { background: var(--red); color: var(--white); border-color: var(--red); }
.trial-banner.lvl-critical { background: var(--red); color: var(--white); border-color: var(--red); padding: 14px 24px; font-size: 12px; }
.trial-banner.lvl-final    { background: var(--red); color: var(--white); border-color: var(--red); padding: 14px 24px; font-size: 13px; }

.trial-banner.lvl-info     .trial-banner-link { color: var(--black); }
.trial-banner.lvl-info     .trial-banner-link:hover { background: var(--black); color: var(--yellow); }
.trial-banner.lvl-danger   .trial-banner-link,
.trial-banner.lvl-critical .trial-banner-link,
.trial-banner.lvl-final    .trial-banner-link { color: var(--white); }
.trial-banner.lvl-danger   .trial-banner-link:hover,
.trial-banner.lvl-critical .trial-banner-link:hover,
.trial-banner.lvl-final    .trial-banner-link:hover { background: var(--white); color: var(--red); }

.trial-banner.no-hide .trial-banner-hide { display: none; }

@media (max-width: 600px) {
  .trial-banner {
    flex-direction: column;
    gap: 6px;
    padding: 8px 16px;
    font-size: 10px;
  }
  .trial-banner-link { font-size: 9px; }
}

/* ============================================================
   DARK MODE — soft dark theme with warm dark-grey backgrounds.
   Toggled via [data-theme="dark"] on the <html> element.
   Set in localStorage('atelith-theme'); see shared-nav.js.
   ============================================================ */

[data-theme="dark"] {
  /* Surfaces and borders flip: --white becomes the dark surface */
  --white:  #1A1A18;   /* page bg + card bg (anywhere using var(--white) as background) */
  --gray-1: #25241F;   /* slightly lifted from surface — for borders, hover bgs */
  --gray-2: #3A3936;   /* heavier borders */
  --gray-3: #F5F4F0;   /* secondary text — full warm-white for legibility */
  --gray-4: #6A6964;   /* dividers in dark bars (topbar/sidebar still dark) */
  --module: rgba(255,255,255,.05);  /* soft module fill on dark surfaces */
  /* --black stays dark — primary buttons, "done" pills, sidebar/topbar bgs all
     look right with a dark surface. Only text-on-light contexts need flipping. */
}

/* Body & main: text was 'color:var(--black)' on a light bg. Flip text to off-white. */
[data-theme="dark"] body,
[data-theme="dark"] .main { color: #E8E7E2; }

/* Anywhere project pages set inline 'color:var(--black)' on body text we can't
   reach without per-page edits. To compensate, raise the effective ink color
   for the most common inline-styled text contexts. */
[data-theme="dark"] .page-title,
[data-theme="dark"] .page-sub,
[data-theme="dark"] .sec-title,
[data-theme="dark"] .section-title { color: #E8E7E2 !important; }

/* Inputs / selects / textareas — keep their bg = var(--white) (now dark) but
   ensure their text color is light, since many set color:var(--black) inline. */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color: #E8E7E2 !important;
  background: var(--white);
  border-color: var(--gray-2);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6A6964; }

/* Tables/rows: many proj-table rows use white bg with inline color:var(--black).
   Force readable text. */
[data-theme="dark"] .proj-table th,
[data-theme="dark"] .proj-table td { color: #E8E7E2; }
[data-theme="dark"] .proj-table tr:hover td { background: var(--gray-1); }
[data-theme="dark"] .proj-table tr { border-bottom-color: var(--gray-2); }

/* Cards / panels that explicitly set background:var(--white) need their text
   re-tinted since the original color was var(--black). */
[data-theme="dark"] [style*="background:var(--white)"],
[data-theme="dark"] [style*="background: var(--white)"] { color: #E8E7E2; }

/* Modals: white modal surfaces become dark, content text flips */
[data-theme="dark"] .modal,
[data-theme="dark"] .add-modal { color: #E8E7E2; }
[data-theme="dark"] .modal-title,
[data-theme="dark"] .mf-label,
[data-theme="dark"] .mf-label2 { color: #9A9990; }

/* Sidebar & topbar were already dark — they continue using var(--black) as bg.
   The text-on-dark color stays light, which still works. No changes needed. */

/* …except --white now means "dark surface" in dark mode, so anything that uses
   var(--white) as a *text color on a dark bg* turns invisible. Pin those to
   a real off-white explicitly. */
[data-theme="dark"] .topbar,
[data-theme="dark"] .logo,
[data-theme="dark"] .topbar-nav a.active,
[data-theme="dark"] .topbar-nav a:hover,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .sb-item,
[data-theme="dark"] .udd,
[data-theme="dark"] .udd.u-name { color: #F5F4F0; }

/* Project rows in the sidebar — name was implicit from .sidebar's white color */
[data-theme="dark"] .sb-item { color: #F5F4F0; }

/* Edit / Delete buttons on the projects table — their border uses var(--gray-2)
   which is now darker than the surface. Lift the border so they're visible. */
[data-theme="dark"] .act-btn { border-color: var(--gray-4); color: #F5F4F0; }
[data-theme="dark"] .act-btn:hover { border-color: #F5F4F0; }
/* Match the higher-specificity .act-btn.edit:hover / .act-btn.del:hover rules
   from the page CSS — those pin color:var(--white) which is dark in dark mode.
   Pin to a real white. */
[data-theme="dark"] .act-btn.edit:hover {
  background: var(--gray-1);
  color: #F5F4F0;
  border-color: #F5F4F0;
}
[data-theme="dark"] .act-btn.del:hover {
  background: var(--red);
  color: #F5F4F0;
  border-color: var(--red);
}

/* Header buttons (Filter, + New Project, View Schedule, Edit Project) —
   in dark mode, keep them dark-on-light visual but switch text to true white
   so it's never washed out. */
[data-theme="dark"] .btn { border: none; color: #F5F4F0; background: var(--module); }
[data-theme="dark"] .btn:hover { border-color: #F5F4F0; background: var(--gray-1); color: #F5F4F0; }
[data-theme="dark"] .btn.primary {
  background: #0A0A0A;
  color: #F5F4F0;
  border: 1px solid #F5F4F0;
}
[data-theme="dark"] .btn.primary:hover { background: var(--gray-1); color: #F5F4F0; }

/* Phase pills (project header phase tracker) — completed pills use
   background:var(--black);color:var(--white). --white in dark mode is the
   dark surface, so the "done" pill text becomes invisible. Pin to white. */
[data-theme="dark"] .phase-pill.done,
[data-theme="dark"] .phase-pill.curr,
[data-theme="dark"] .pt-pill.done,
[data-theme="dark"] .pt-pill.curr {
  color: #F5F4F0 !important;
}

/* Schedule page — many elements hard-coded color:var(--black) for text on
   a light surface. Variables don't help when --black stays dark in dark mode.
   These selectors target every spot the schedule view dims out. */
[data-theme="dark"] .sched-syscol-cell,
[data-theme="dark"] .sched-syscol-hdr,
[data-theme="dark"] .sched-title,
[data-theme="dark"] .sched-sub,
[data-theme="dark"] .sched-month-label,
[data-theme="dark"] .sched-section-title,
[data-theme="dark"] .sched-hdr,
[data-theme="dark"] .sched-legend,
[data-theme="dark"] .sched-empty,
[data-theme="dark"] .sched-empty-title,
[data-theme="dark"] .sched-empty-sub { color: #F5F4F0 !important; }

/* TODAY pill — pink text on var(--white) background. --white in dark mode
   is the dark surface, so the pill becomes pink-on-dark which is fine, but
   the white background is no longer light — let's keep it dark for contrast. */
[data-theme="dark"] .sched-today-line::after { background: #0A0A0A; }

/* Sidebar phase chips (PD/SD/CD next to project names) — currently dark text
   on grey-4 chip which is hard to read. Lift to off-white. */
[data-theme="dark"] .sb-count { color: #F5F4F0; }
[data-theme="dark"] .sb-item.active .sb-count { color: #0A0A0A; }  /* active state keeps yellow bg + dark text */

/* View picker buttons (Daily/Weekly/Monthly/Yearly on timeline & schedule) —
   in dark mode keep the selected state visually consistent: dark bg, white text,
   accent border to indicate "selected". */
[data-theme="dark"] .sched-view-picker .btn.active,
[data-theme="dark"] .sched-view-picker .sched-view-btn.active,
[data-theme="dark"] .tl-view-picker .btn.active,
[data-theme="dark"] .tl-view-picker .tl-view-btn.active,
[data-theme="dark"] .sched-view-btn.active,
[data-theme="dark"] .tl-view-btn.active {
  background: #0A0A0A !important;
  color: #F5F4F0 !important;
  box-shadow: inset 0 -2px 0 #F5F4F0 !important;
}

/* IDLE state of those same buttons — color:var(--black) is invisible on dark
   surface. Pin to white. The page-level rule uses combined selectors like
   ".sched-view-picker .btn" (specificity 0,2,0), so we match or exceed it. */
[data-theme="dark"] .sched-view-picker .btn,
[data-theme="dark"] .sched-view-picker .sched-view-btn,
[data-theme="dark"] .tl-view-picker .btn,
[data-theme="dark"] .tl-view-picker .tl-view-btn,
[data-theme="dark"] .sched-view-btn,
[data-theme="dark"] .tl-view-btn,
[data-theme="dark"] .pot-bucket .pot-bucket-btn {
  color: #F5F4F0 !important;
}

/* pot-bucket-btn active state — used on dashboard & reports for granularity */
[data-theme="dark"] .pot-bucket .pot-bucket-btn.active {
  background: #0A0A0A !important;
  color: #F5F4F0 !important;
  box-shadow: inset 0 -2px 0 #F5F4F0 !important;
}

/* Timeline OPC dollar markers — small "$" chips above each project bar.
   The JS sets background and color directly inline using a mix of hardcoded
   greys (#E8E8E8, #bbb) and theme vars. Target the marker children directly
   and force visible text. */
[data-theme="dark"] .opc-marker > div:last-child {
  background: #2A2A28 !important;
  color: #F5F4F0 !important;
}
[data-theme="dark"] .opc-marker > div:first-child {
  background: #3A3936 !important;
}

/* Timeline gantt phase segments are light grey with dark text. The "active"
   phase pill (SD/PD/etc highlighted in each row) shows dark text on a slightly
   different grey — needs lifting in dark mode. */
[data-theme="dark"] .phase-seg,
[data-theme="dark"] .phase-label { color: #F5F4F0; }

/* (Phase-pill rule moved earlier; covered there with !important.) */

/* Page header title and meta line — pin the bold project name and the small
   meta info to white. These often use inline font styling that bypasses .page-title. */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 { color: #F5F4F0; }

/* ──────────────────────────────────────────────────────────────────────
   FALLBACK: any element inside .main that inherits the default body color
   (which is var(--black) — still dark in dark mode) needs to read as light.
   We already set .main color above, but many child elements explicitly set
   color or sit inside structures that re-declare it. The selectors below
   cover the remaining offenders found in the dashboard / project pages.
   ────────────────────────────────────────────────────────────────────── */

/* Project cards on the dashboard */
[data-theme="dark"] .p-name,
[data-theme="dark"] .p-meta,
[data-theme="dark"] .c-nm,
[data-theme="dark"] .cg-lbl { color: #F5F4F0; }

/* Stat cells (Active Projects / Open Tasks / Avg. Completion / On Hold) —
   .sn is the big number, .sl the uppercase label (already white via gray-3),
   .sd is the small subtext below. .sd has no explicit color and inherits the
   dark body color. */
[data-theme="dark"] .sn,
[data-theme="dark"] .sd { color: #F5F4F0; }

/* Doughnut legend items — built dynamically next to the donut chart. */
[data-theme="dark"] .donut-legend-item { color: #F5F4F0; }
[data-theme="dark"] .donut-legend-label { color: #F5F4F0; }
[data-theme="dark"] .donut-legend-value { color: #F5F4F0; }

/* Phase pill chips on dashboard project cards — inactive (.pt-pill without
   .done) was dim grey on dim grey. Lift text contrast. */
[data-theme="dark"] .pt-pill {
  color: #F5F4F0;
  border-color: var(--gray-4);
}

/* Timeline mini chart at the bottom of dashboard — project name labels */
[data-theme="dark"] .timeline-row-label,
[data-theme="dark"] .tl-row-label,
[data-theme="dark"] .gantt-row-label { color: #F5F4F0; }

/* Cost-estimator buttons in the sidebar (inline-styled in shared-nav.js).
   The selected button uses bg=var(--gray-4), color=var(--white).
   In dark mode --white is the dark surface — invisible. Override by id. */
[data-theme="dark"] #ce-low,
[data-theme="dark"] #ce-mid,
[data-theme="dark"] #ce-high { color: #F5F4F0 !important; }
/* The "active" button is identified by its background being var(--gray-4) —
   we keep that and just pin its text to a contrast color. */

/* Cost-estimator numeric inputs (Sqft, Min, Max) — inline-styled,
   inherit dark color. Force light. */
[data-theme="dark"] input[type="number"][style*="background:var(--gray-1)"],
[data-theme="dark"] input[type="number"][style*="background: var(--gray-1)"] {
  color: #F5F4F0 !important;
}

/* Generic catch-all for anything in the sidebar — sidebar is always dark
   in both themes; ensure all its descendant text is readable. */
[data-theme="dark"] .sidebar * { color: inherit; }
[data-theme="dark"] .sidebar { color: #F5F4F0; }

/* Generic catch-all for anything in the main content area that has
   color:var(--black) inline. Variables resolve at use time, so swapping
   the variable would work — but --black is intentionally pinned dark.
   We target inline styles explicitly. */
[data-theme="dark"] [style*="color:var(--black)"],
[data-theme="dark"] [style*="color: var(--black)"] { color: #F5F4F0 !important; }

/* Chart canvas containers — Chart.js draws into <canvas>, which won't auto-adapt.
   The body color flip + variable swaps will tint axis text where Chart.js reads
   computed styles, but explicit chart palette colors (yellow/pink/teal/etc) stay
   intact since they're project palette tokens, not theme tokens. */

/* Scrollbars — soften for dark */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--gray-1); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--gray-2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--gray-3); }

/* User dropdown — already dark in both themes, but tighten contrast */
[data-theme="dark"] .user-dropdown { background: #0A0A0A; }

/* ── Dark-mode toggle row inside the user dropdown ─────────── */
.udd-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--gray-2);
  border-bottom: 1px solid var(--gray-4);
  cursor: pointer;
  user-select: none;
  transition: background .1s, color .1s;
}
.udd-toggle:hover { background: var(--gray-4); color: var(--white); }
.udd-toggle .udd-switch {
  position: relative;
  width: 32px; height: 18px;
  background: var(--gray-4);
  border-radius: 9px;
  flex-shrink: 0;
  transition: background .15s;
}
.udd-toggle .udd-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--white);
  border-radius: 50%;
  transition: transform .15s, background .15s;
}
[data-theme="dark"] .udd-toggle .udd-switch { background: #13D4D4; }
[data-theme="dark"] .udd-toggle .udd-switch::after { transform: translateX(14px); }

/* Print: always print in light mode regardless of current theme,
   so reports/punch-lists/etc don't waste toner on a dark background. */
@media print {
  html[data-theme="dark"] {
    --white:  #FFFFFF;
    --gray-1: #E8E7E2;
    --gray-2: #C8C7C0;
    --gray-3: #8A8980;
    --gray-4: #3A3A36;
  }
  html[data-theme="dark"] body,
  html[data-theme="dark"] .main,
  html[data-theme="dark"] .page-title,
  html[data-theme="dark"] .page-sub,
  html[data-theme="dark"] input,
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] .proj-table th,
  html[data-theme="dark"] .proj-table td,
  html[data-theme="dark"] .modal,
  html[data-theme="dark"] .mf-label { color: #0A0A0A !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUNDED BUTTONS — 8px corners
   ════════════════════════════════════════════════════════════════════════════
   Applies an 8px border-radius to every button-like element across the app.
   Placed at the end of datum6.css so it overrides every prior button rule.

   Three categories handled:
     1. Standalone button classes (.btn and 30+ *-btn variants)
     2. Raw <button> and <input type="submit"> / <input type="button"> elements
     3. Button GROUP containers (segmented pickers like .sched-view-picker)
        — round the container, inner buttons stay sharp inside the clipped shape

   Explicitly NOT rounded:
     - Layout wrappers ending in -btns (.hdr-btns, .hero-btns, etc.) — those
       are flex containers, not visible elements
     - Avatars, dots, badges, and chips — already have their intended radius
     - The "+ INNER" buttons inside .sched-view-picker / .tl-view-picker —
       they stay sharp; the picker container's overflow:hidden clips them
   ──────────────────────────────────────────────────────────────────────────── */

/* 1. Base + every named button class.
   Uses :where() to keep specificity at (0,0,0) so existing !important rules
   can still override individual cases if needed. */
:where(
  .btn,
  .act-btn, .add-mil-btn2, .back-btn,
  .btn-full, .btn-outline, .btn-primary, .btn-schedule,
  .cal-btn, .calc-btn, .cancel-btn, .close-btn, .cm-btn,
  .del-btn, .detail-close-btn, .doc-viewer-btn,
  .ghost-btn, .logo-bar-btn, .md-btn, .modal-btn,
  .notify-btn, .phase-btn, .phase-btn2, .pot-bucket-btn,
  .preview-btn, .price-btn, .primary-btn,
  .refresh-btn, .reset-btn, .save-btn,
  .sched-add-btn, .sched-view-btn, .sec-action-btn,
  .tl-arrow-btn, .tl-view-btn, .tog-btn, .vt-btn
){
  border-radius: 8px;
}

/* 2. Native button + submit/reset inputs — catches anything that wasn't
   classed with one of the above. Skips buttons inside picker containers
   (segmented controls) since the wrapper provides the rounding. */
button:not(.sched-view-btn):not(.tl-view-btn):not(.sched-view-picker .btn):not(.tl-view-picker .btn),
input[type="submit"],
input[type="button"],
input[type="reset"]{
  border-radius: 8px;
}

/* 3. Segmented button groups — round the OUTER container.
   These already use overflow:hidden so the inner buttons get clipped to
   the rounded shape automatically; we don't need to touch them. */
.sched-view-picker,
.tl-view-picker{
  border-radius: 8px;
}

/* Sched/TL picker inner buttons — force sharp corners so the container's
   rounding cleanly clips them. Some inline page CSS overrides .btn to 0
   already; this !important guarantees it across pages. */
.sched-view-picker .btn,
.sched-view-picker .sched-view-btn,
.tl-view-picker .btn,
.tl-view-picker .tl-view-btn{
  border-radius: 0 !important;
}

/* ============================================================
   DARK MODE — Subscription / Manage Subscription page.
   These classes live in subscription.html's inline <style> and were
   never added to the dark-mode patch list, so text hard-coded as
   color:var(--black) (which stays dark in dark mode) renders dark-on-dark.
   Pin every affected text spot to off-white. Class names are unique to
   the subscription page, so no other page is affected.
   ============================================================ */

/* Panel header bar (CURRENT PLAN / PLAN COMPARISON) — bg is var(--black)
   (dark), text was var(--white) which flips to a dark surface. Pin white. */
[data-theme="dark"] .sub-panel-h,
[data-theme="dark"] .sub-panel-h h2 { color: #F5F4F0 !important; }

/* Current-plan status block (right column): labels use --gray-3 (already
   light), but values are color:var(--black) → dark-on-dark. Lift values. */
[data-theme="dark"] .current-right .val { color: #F5F4F0 !important; }

/* Plan comparison — left-column feature names are color:var(--black) on a
   var(--white) (now-dark) cell. Lift to off-white. */
[data-theme="dark"] .compare .compare-feature-name { color: #F5F4F0 !important; }

/* Comparison cells: "no/—" cells use --gray-2 which is near-black in dark
   mode. Lift to a muted-but-legible grey. ("yes" stays green, fine.) */
[data-theme="dark"] .compare .compare-cell.no { color: #6A6964 !important; }

/* Monthly/Annual billing toggle — the ACTIVE button is color:var(--white)
   on a var(--black) bar, so its label vanishes in dark mode. Pin white.
   (Inactive buttons use --gray-3, already light.) */
[data-theme="dark"] .compare-billing-toggle button.active { color: #F5F4F0 !important; }

/* Billing-history links were color:var(--black); keep underline, lift text. */
[data-theme="dark"] .invoice-tbl a { color: #F5F4F0 !important; }

/* ============================================================
   DARK MODE — Account page + New/Edit Project modal.
   Same root cause as the subscription block above: elements use
   background:var(--black) (dark fill, stays dark) with color:var(--white)
   (flips to a dark surface) → dark-on-dark text. Pin text to off-white.
   Class names are page/modal-specific, so no other page is affected.
   ============================================================ */

/* Account — Save Profile / Save Firm / Change Password / Delete buttons.
   (.danger keeps its red bg; white text reads cleanly on red too.) */
[data-theme="dark"] .save-btn { color: #F5F4F0 !important; }

/* Account — subscription card plan name ("Free trial") was color:var(--black). */
[data-theme="dark"] .sub-plan-name { color: #F5F4F0 !important; }

/* Project modals — selected phase pill (PD…CA), dark fill with vanished text. */
[data-theme="dark"] .phase-btn.selected,
[data-theme="dark"] .phase-btn2.selected { color: #F5F4F0 !important; }

/* Project modals — primary action button (Next → / Create Project →). */
[data-theme="dark"] .modal-btn.primary {
  color: #F5F4F0 !important;
  border-color: #0A0A0A !important;
}

/* Project modals — secondary buttons (Back / Cancel) were color:var(--black)
   on a transparent dark surface with a var(--black) border; both disappear.
   Lift text to off-white and the outline to a visible grey. */
[data-theme="dark"] .modal-btn {
  color: #F5F4F0 !important;
  border-color: var(--gray-4) !important;
}

/* ============================================================
   DARK MODE — Dashboard.
   ============================================================ */

/* Page-header bottom divider: in light mode it's an intentional bold 2px
   black rule; in dark mode --black (#0A0A0A) sits at the header/stats seam
   and reads as a hard line. Blend it into the dark surface so it disappears.
   (Applies to every page's header in dark mode — uniform, cleaner.) */
[data-theme="dark"] .page-header { border-bottom-color: var(--white); }

/* Calendar "today" cell: background:var(--black) (dark fill) with
   color:var(--white) (flips to a dark surface) → the date number vanishes.
   Regular days inherit the light body color and are fine. Pin today to white.
   (The empty-state "+ New Project" button uses .modal-btn.primary, already
   covered by the Account/modal block above.) */
[data-theme="dark"] .cd.today { color: #F5F4F0 !important; }

/* ============================================================
   DARK MODE — Fee & Hours Calculator (fee-calculator.html).
   Button uses background:var(--black)+color:var(--white); all three tables
   set th/td/.role-nm to color:var(--black) → dark-on-dark. The rate/%
   inputs are already handled by the global input rule. Lift the rest.
   (Print media rules are separate and unaffected.)
   ============================================================ */

/* Calculate Hours button — dark fill, vanished label. */
[data-theme="dark"] .calc-btn { color: #F5F4F0 !important; }

/* Staff table — column headers (Role / Rate/hr / Utilization %) and the
   role-name column. */
[data-theme="dark"] .staff-tbl th,
[data-theme="dark"] .staff-tbl td,
[data-theme="dark"] .role-nm { color: #F5F4F0 !important; }

/* Results + phase-matrix tables (rendered after Calculate) — same pattern.
   .role-sub stays muted (--gray-3, already light). */
[data-theme="dark"] .res-tbl th,
[data-theme="dark"] .res-tbl td,
[data-theme="dark"] .matrix-tbl th,
[data-theme="dark"] .matrix-tbl td { color: #F5F4F0 !important; }

/* ============================================================
   DARK MODE — New/Edit Project modal: step tabs + consultant badges.
   ============================================================ */

/* Active step tab ("1 · Info"): text and the ::after underline indicator are
   both color/background:var(--black) → invisible in dark mode. Pin to white so
   the active step reads and its underline shows as a white indicator line. */
[data-theme="dark"] .modal-step.active { color: #F5F4F0 !important; }
[data-theme="dark"] .modal-step.active::after { background: #F5F4F0 !important; }

/* Consultant category badges (BASIC / ADDITIONAL) use color:var(--blue) /
   var(--green) — dark, near-unreadable on the faint tinted chip in dark mode.
   Pin to white; the chip's background tint still distinguishes the category. */
[data-theme="dark"] .cb-basic,
[data-theme="dark"] .cb2-basic,
[data-theme="dark"] .cb-add,
[data-theme="dark"] .cb2-add { color: #F5F4F0 !important; }