:root{
  color-scheme: light;
  /* Asana-inspired light theme: clean white surfaces, warm neutral grays,
     a single confident violet accent instead of a generic SaaS blue, soft
     shadows and slightly larger radii for a calmer, airier feel. This is
     now the app's one true default look — it no longer flips to a dark
     palette just because the OS is in dark mode (see note below), so what
     you see here is what everyone sees. */
  --page:#fafafa; --surface:#ffffff; --surface-2:#f6f5f4; --surface-3:#edecea;
  --text:#1e1f21; --text-2:#55575c; --text-muted:#8d8f94;
  --border:rgba(19,20,23,.08); --border-strong:rgba(19,20,23,.16);
  --grid:#eceae7; --baseline:#d8d6d1;
  --accent:#6c5ce7; --accent-ink:#ffffff; --accent-wash:#efecfd;
  --good:#12b76a; --warning:#f79009; --critical:#e5484d; --neutral:#8d8f94;
  --good-wash:#e7f9f0; --warning-wash:#fef3e2; --critical-wash:#fde8e8; --neutral-wash:#f0efed;
  --cat-1:#6c5ce7; --cat-2:#eb6834; --cat-3:#1baf7a; --cat-4:#eda100;
  --cat-5:#e87ba4; --cat-6:#189e6e; --cat-7:#4a3aa7; --cat-8:#e34948;
  --shadow: 0 1px 2px rgba(19,20,23,.05), 0 4px 16px rgba(19,20,23,.05);
  --shadow-lg: 0 10px 34px rgba(19,20,23,.14);
  --radius: 12px;
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* A dark palette is still defined for anyone who explicitly opts in via
   data-theme="dark" (e.g. a future Settings toggle), but it no longer
   switches on automatically from the OS's prefers-color-scheme — the new
   light theme above is meant to be the app's actual, consistent identity
   rather than something that quietly changes underneath people. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0d0d0d; --surface:#1a1a19; --surface-2:#211f1d; --surface-3:#282624;
  --text:#ffffff; --text-2:#c3c2b7; --text-muted:#8f8d86;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --grid:#2c2c2a; --baseline:#383835;
  --accent:#8b7bf0; --accent-ink:#ffffff; --accent-wash:#26214a;
  --good:#12b76a; --warning:#f79009; --critical:#e66767; --neutral:#8b8a86;
  --good-wash:#123018; --warning-wash:#332208; --critical-wash:#341413; --neutral-wash:#242320;
  --cat-1:#8b7bf0; --cat-2:#d95926; --cat-3:#199e70; --cat-4:#c98500;
  --cat-5:#d55181; --cat-6:#3fae3f; --cat-7:#9085e9; --cat-8:#e66767;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--page); color:var(--text);
  font-family:var(--font-body); font-size:14px; line-height:1.45;
  padding-inline: max(16px, env(safe-area-inset-left, 0px));
  padding-block: 0;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; text-wrap:balance;}
table{border-collapse:collapse;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit; font-size:13px;}
::selection{background:var(--accent); color:var(--accent-ink);}
a{color:var(--accent);}
.tnum{font-variant-numeric:tabular-nums;}

#app{max-width:none; width:100%; margin:0 auto; padding-bottom:64px; padding-inline:20px;}
@media (min-width:2200px){ #app{max-width:2400px;} }

/* header */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:var(--page); padding-top:14px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.topbar-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  width:34px; height:34px; border-radius:9px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:800; font-size:15px; flex:none;
}
.brand-logo{height:32px; width:auto; flex:none; object-fit:contain;}
.brand-text h1{font-size:16px; font-weight:800; letter-spacing:-.01em;}
.brand-text .sub{font-size:11.5px; color:var(--text-muted);}
.savepill{
  display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-muted);
  padding:5px 10px; border:1px solid var(--border); border-radius:999px; white-space:nowrap; flex:none;
}
.savepill .dot{width:6px; height:6px; border-radius:999px; background:var(--good);}
.savepill.saving .dot{background:var(--warning);}
.savepill.ro .dot{background:var(--neutral);}

/* shell layout */
.shell{display:flex; gap:20px; align-items:flex-start; padding-top:16px;}
.sidebar{width:280px; flex:none; display:flex; flex-direction:column; gap:1px; position:sticky; top:78px;
  max-height:calc(100vh - 90px); overflow-y:auto; overflow-x:hidden; padding-right:6px;}
.sidebar.collapsed{align-items:center;}
.sidebar.collapsed .side-label{display:none;}
.sidebar.collapsed .lbl, .sidebar.collapsed .cnt{display:none;}
.sidebar.collapsed .side-item{justify-content:center; padding:8px 0; width:40px;}
.sidebar.collapsed .side-item .dot{display:none;}
.side-label{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:800; padding:14px 10px 4px;}
.side-item{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--text-2); cursor:pointer; white-space:nowrap; border:none; background:transparent; width:100%; text-align:left;}
.side-item:hover{background:var(--surface-2);}
.side-item.active{background:var(--accent-wash); color:var(--accent);}
.side-item .ico{width:16px; text-align:center; flex:none; font-size:13px;}
.side-item .dot{width:8px; height:8px; border-radius:3px; flex:none;}
.side-item .cnt{margin-left:auto; font-size:10.5px; color:var(--text-muted); font-variant-numeric:tabular-nums;}
.side-newproj{margin:6px 10px 0; padding:7px 8px; border-radius:8px; border:1px dashed var(--border-strong); background:transparent; color:var(--text-muted); font-size:12px; font-weight:700; cursor:pointer; text-align:left;}
.side-newproj:hover{background:var(--surface-2); color:var(--text);}
.main{flex:1; min-width:0; display:flex; flex-direction:column; gap:18px; padding-bottom:40px;}
@media (max-width:820px){
  .shell{flex-direction:column; gap:10px;}
  .sidebar{flex-direction:row; overflow-x:auto; overflow-y:visible; width:100% !important; max-height:none; position:static; padding-bottom:4px; gap:6px;}
  .sidebar-resize-handle{display:none;}
  .side-label{display:none;}
  .side-item{flex:none; width:auto;}
  .sidebar.collapsed .side-item{width:auto;}
  .side-newproj{margin:0; flex:none;}
  .main{width:100%; min-width:0; padding-bottom:76px;} /* keep content clear of the fixed bottom nav */
  .bottom-nav{display:flex;}
}

/* Mobile bottom navigation — Home / My Work / Quick Add / Tasks / Alerts,
   for thumb-reach access to the handful of actions used most on a phone.
   Hidden entirely above the 820px breakpoint (desktop uses the sidebar). */
.bottom-nav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -2px 12px rgba(11,11,11,.08);
  padding:6px max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom));
  justify-content:space-around; align-items:flex-end;
}
.bn-item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; color:var(--text-muted); font-size:9.5px; font-weight:700;
  padding:4px 6px; min-width:52px; min-height:44px; border-radius:8px; cursor:pointer; position:relative;
}
.bn-item.active{color:var(--accent);}
.bn-ico{font-size:18px; position:relative;}
.bn-item.bn-fab{margin-top:-16px;}
.bn-item.bn-fab .bn-ico{
  width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow:0 4px 12px rgba(11,11,11,.22);
}

.view-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.view-head h2{font-size:19px; font-weight:800;}
.view-head .hint{font-size:12px; color:var(--text-muted);}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.card-pad{padding:16px;}
.card-title{font-family:var(--font-display); font-weight:800; font-size:13.5px; margin-bottom:2px;}
.card-desc{font-size:11.5px; color:var(--text-muted); margin-bottom:12px;}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  font-size:12.5px; font-weight:600; cursor:pointer; line-height:1.2;
}
.btn:not(.btn-primary):hover{background:var(--surface-2);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{filter:brightness(1.05);}
.btn-danger{color:var(--critical); border-color:var(--critical);}
.btn-sm{padding:4px 9px; font-size:11.5px; border-radius:7px;}
.btn-ghost{border-color:transparent; background:transparent;}
.btn-ghost:hover{background:var(--surface-2);}
.icon-btn{
  width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:7px; border:1px solid transparent; background:transparent; color:var(--text-muted); cursor:pointer; flex:none;
}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}

/* form controls */
.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em;}
.ipt, select.ipt, textarea.ipt{
  padding:7px 9px; border-radius:7px; border:1px solid var(--border-strong); background:var(--surface);
  color:var(--text); font-size:12.5px; width:100%;
}
.ipt:focus, select:focus{outline:2px solid var(--accent); outline-offset:1px;}
textarea.ipt{resize:vertical; min-height:56px;}
.filterbar{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end;}
.bulk-toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--accent-wash); border:1px solid var(--accent); border-radius:var(--radius); padding:8px 12px; margin-bottom:8px; font-size:12.5px;}
.ipt-sm{width:auto !important; padding:5px 8px !important; font-size:12px !important;}
.filterbar .field{min-width:140px;}
.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px;}

/* chips */
.chip{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap;}
.chip::before{content:''; width:6px; height:6px; border-radius:999px; background:currentColor;}
.chip-ontrack{background:var(--good-wash); color:var(--good);}
.chip-atrisk{background:var(--warning-wash); color:#9a6c00;}
:root[data-theme="dark"] .chip-atrisk, :root[data-itheme="dark-executive"] .chip-atrisk{color:var(--warning);}
.chip-offtrack, .chip-overdue{background:var(--critical-wash); color:var(--critical);}
.chip-closed, .chip-achieved, .chip-complete{background:var(--good-wash); color:var(--good);}
.chip-cancelled{background:var(--neutral-wash); color:var(--text-muted); text-decoration:line-through;}
.chip-onhold{background:var(--neutral-wash); color:var(--text-2);}
.chip-pending{background:var(--surface-3); color:var(--text-2);}
.chip-inprogress{background:var(--accent-wash); color:var(--accent);}
.tag{display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:600; background:var(--surface-3); color:var(--text-2);}
.tag .sw{width:7px; height:7px; border-radius:2px; flex:none;}
.pri{font-size:10.5px; font-weight:800; letter-spacing:.02em; padding:2px 7px; border-radius:5px;}
.pri-high{background:var(--critical-wash); color:var(--critical);}
.pri-medium{background:var(--warning-wash); color:#9a6c00;}
.pri-low{background:var(--good-wash); color:var(--good);}
select.chipselect{border:none; border-radius:999px; padding:3px 22px 3px 9px; font-size:11px; font-weight:700; cursor:pointer; -webkit-appearance:none; appearance:none; background-repeat:no-repeat; background-position:right 6px center; background-size:10px;}

/* kpi */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:10px;}
.kpi-tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:13px 14px; box-shadow:var(--shadow);}
.kpi-tile .v{font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:-.02em;}
.kpi-tile .l{font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-top:2px;}
.kpi-tile.accent .v{color:var(--accent);}
.kpi-tile.crit .v{color:var(--critical);}
.kpi-tile.warn .v{color:#9a6c00;}
.kpi-tile.good .v{color:var(--good);}

/* tables */
.tablewrap{overflow:auto; border-radius:var(--radius); border:1px solid var(--border); max-height:70vh;}
/* table-layout:fixed is what makes column resize REAL: without it the
   browser's automatic table layout algorithm ignores an individual <th>'s
   width and redistributes space by content, so a dragged column would
   spring right back. Columns that were never given an explicit width
   (no thR() call) get a fair share via auto-width fallback below. */
table.grid{width:100%; border-collapse:collapse; background:var(--surface); font-size:12.5px; min-width:640px;}
/* Only tables that opt in (the ones with real drag-resizable columns, via
   thR()) get table-layout:fixed — that's what makes a dragged column's
   width actually stick instead of the browser's automatic table layout
   silently overriding it. Other .grid tables keep their normal
   content-based auto layout unchanged. */
table.grid.resizable{table-layout:fixed;}
table.grid th{
  position:sticky; top:0; z-index:2; position:relative;
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted);
  font-weight:700; padding:9px 10px; border-bottom:1px solid var(--border-strong); background:var(--surface-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
table.grid td{padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.grid tbody tr:hover{background:var(--surface-2);}
table.grid td.num, table.grid th.num{text-align:right; font-variant-numeric:tabular-nums;}
/* real drag-to-resize column borders */
table.grid th{position:sticky; top:0;}
table.grid th{ position: -webkit-sticky; }
table.grid th > .th-resize{position:absolute; top:0; right:0; width:8px; height:100%; cursor:col-resize; z-index:3;}
table.grid th > .th-resize:hover, body.col-resizing table.grid th > .th-resize{background:var(--accent-wash);}
body.col-resizing{cursor:col-resize; user-select:none;}
body.col-resizing *{user-select:none;}
/* completion % color banding — spec: 0-24 red, 25-49 orange, 50-74 amber, 75-99 blue/teal, 100 green */
.pctband{display:inline-flex; align-items:center; justify-content:center; min-width:38px; padding:2px 6px; border-radius:5px; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;}
.pctband-crit{background:var(--critical-wash); color:var(--critical);}
.pctband-low{background:#fde6d2; color:#b8560f;}
.pctband-mid{background:var(--warning-wash); color:#9a6c00;}
.pctband-high{background:#dbeefc; color:#0b6fb0;}
.pctband-done{background:var(--good-wash); color:var(--good);}
.cell-ipt{border:1px solid transparent; background:transparent; border-radius:5px; padding:4px 6px; width:100%; color:var(--text); font-size:12.5px;}
.cell-ipt:hover{border-color:var(--border-strong);}
.cell-ipt:focus{border-color:var(--accent); background:var(--surface); outline:none;}
select.cell-ipt{cursor:pointer; min-width:110px;}
input.cell-ipt{min-width:80px;}
.rowid{color:var(--text-muted); font-weight:700; font-variant-numeric:tabular-nums;}
.th-sort{cursor:pointer; user-select:none;}
.th-sort:hover{color:var(--text);}
.tasklink{font-weight:700; cursor:pointer; text-decoration:none; color:var(--text); background:none; border:none; padding:0; font-size:12.5px; text-align:left;}
.tasklink:hover{color:var(--accent); text-decoration:underline;}

/* sections (List view) */
.section-group{margin-bottom:16px;}
.section-head{display:flex; align-items:center; gap:8px; padding:6px 2px; cursor:pointer; user-select:none;}
.section-head .chev{font-size:10px; color:var(--text-muted); transition:transform .15s; display:inline-block;}
.section-head.collapsed .chev{transform:rotate(-90deg);}
.section-head .sname{font-weight:800; font-size:13px;}
.section-head .scount{font-size:11px; color:var(--text-muted); font-weight:600;}
.section-head .sdel{margin-left:auto;}
.addtaskrow{padding:7px 10px; font-size:12px; color:var(--text-muted); cursor:pointer; border-top:1px dashed var(--border);}
.addtaskrow:hover{color:var(--accent); background:var(--surface-2);}

/* board */
.board{display:grid; grid-template-columns:repeat(4,minmax(230px,1fr)); gap:12px; overflow-x:auto;}
@media (max-width:900px){.board{grid-template-columns:repeat(4,80vw);}}
.board-col{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:10px; min-height:160px;}
.board-col-head{display:flex; align-items:center; justify-content:space-between; padding:2px 4px 10px;}
.board-col-head .name{font-weight:800; font-size:12.5px;}
.board-col-head .count{font-size:11px; color:var(--text-muted); background:var(--surface-3); padding:1px 7px; border-radius:999px;}
.board-col.dragover{outline:2px dashed var(--accent); outline-offset:-4px;}
.kcard{
  background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:10px 11px; margin-bottom:8px;
  box-shadow:var(--shadow); cursor:grab;
}
.kcard:active{cursor:grabbing;}
.kcard .num{font-size:10.5px; color:var(--text-muted); font-weight:700;}
.kcard .title{font-size:12.5px; font-weight:700; margin:2px 0 7px; text-wrap:pretty;}
.kcard .meta{display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap;}
.kcard .who{font-size:11px; color:var(--text-2);}

/* timeline (gantt) */
.gantt-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
.gantt-inner{min-width:max-content;}
.gantt-head{display:flex; border-bottom:1px solid var(--border-strong); position:sticky; top:0; background:var(--surface); z-index:2;}
.gantt-namecol{position:sticky; left:0; z-index:3; background:var(--surface); border-right:1px solid var(--border-strong); width:230px; flex:none;}
.gantt-head .gantt-namecol{display:flex; align-items:flex-end; padding:6px 10px 8px; font-size:10.5px; color:var(--text-muted); font-weight:700; text-transform:uppercase;}
.gday{flex:none; width:26px; text-align:center; font-size:9.5px; color:var(--text-muted); padding:6px 0 4px; border-right:1px solid var(--grid);}
.gday .dow{display:block; font-weight:700;}
.gday.off{background:var(--surface-2);}
.gday.today{background:var(--accent-wash); color:var(--accent); font-weight:800;}
.grow{display:flex; align-items:center; border-bottom:1px solid var(--border); position:relative; height:40px; overflow:hidden;}
.grow:hover{background:var(--surface-2);}
.grow .gantt-namecol{height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 10px; font-size:11.5px; font-weight:600; overflow:hidden; cursor:pointer; border:none; background:var(--surface); text-align:left;}
.grow .gantt-namecol .ttl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
.grow .gantt-namecol .sub{font-size:10px; color:var(--text-muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gtrack{position:relative; height:100%; flex:none;}
.gbar{
  position:absolute; top:9px; height:22px; border-radius:5px; display:flex; align-items:center;
  padding:0 8px; font-size:10.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.15); border:none; cursor:pointer;
}
.gtoday-line{position:absolute; top:0; bottom:0; width:2px; background:var(--critical); z-index:1;}

/* dashboard charts */
.dash-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.dash-grid > *{min-width:0;}
@media (max-width:820px){.dash-grid{grid-template-columns:1fr;}}
.legend{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; font-size:11px; color:var(--text-2);}
.legend .it{display:flex; align-items:center; gap:5px;}
.legend .sw{width:9px; height:9px; border-radius:2px;}
.barrow{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
.barrow .lbl{width:118px; flex:none; font-size:11.5px; color:var(--text-2); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.barrow .track{flex:1; height:14px; background:var(--surface-3); border-radius:4px; overflow:hidden; display:flex;}
.barrow .seg{height:100%;}
.barrow .amt{width:30px; flex:none; font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums;}
.heat td, .heat th{text-align:center; padding:8px 10px; font-size:12px;}
.heat th{color:var(--text-muted); font-weight:700; font-size:10.5px; text-transform:uppercase;}
.heat td.rowlbl{text-align:left; font-weight:700; color:var(--text-2);}

/* home / project cards */
.proj-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;}
.proj-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:var(--shadow); cursor:pointer; display:flex; flex-direction:column; gap:9px; text-align:left;}
.proj-card:hover{border-color:var(--border-strong); box-shadow:var(--shadow-lg);}
.proj-top{display:flex; align-items:center; gap:9px;}
.proj-icon{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; color:#fff;}
.proj-card .name{font-weight:800; font-size:13.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.proj-card .desc{font-size:11.5px; color:var(--text-muted); min-height:2.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.proj-progress{height:6px; background:var(--surface-3); border-radius:999px; overflow:hidden;}
.proj-progress>i{display:block; height:100%;}
.proj-meta{display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--text-muted); gap:6px;}
.avatars{display:flex; align-items:center;}
.avatar{width:20px; height:20px; border-radius:999px; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:var(--text-2); margin-left:-6px; border:2px solid var(--surface); flex:none;}
.avatar:first-child{margin-left:0;}

/* project workspace header */
.proj-header{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.proj-header .titlewrap{display:flex; align-items:center; gap:12px;}
.proj-header .proj-icon{width:42px; height:42px; font-size:19px; border-radius:11px;}
.proj-header h2{font-size:20px;}
.proj-header .subline{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
.proj-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.star-btn{background:none; border:none; cursor:pointer; font-size:17px; color:var(--border-strong); line-height:1; padding:2px; flex:none;}
.star-btn:hover{color:#e0a827;}
.star-btn.on{color:#f0a91e;}
.side-star{background:none; border:none; cursor:pointer; font-size:12px; color:var(--border-strong); line-height:1; padding:0 2px; flex:none;}
.side-star.on{color:#f0a91e;}

/* status panel (Overview tab) */
.status-btn-row{display:flex; gap:7px; flex-wrap:wrap;}
.status-pick-btn{padding:7px 13px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface); font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; color:var(--text-2);}
.status-pick-btn .sdot{width:8px; height:8px; border-radius:50%; flex:none;}
.status-pick-btn.on-ontrack.active{background:var(--good-wash); border-color:var(--good); color:var(--good);}
.status-pick-btn.on-atrisk.active{background:var(--warning-wash); border-color:var(--warning); color:#9a6c00;}
.status-pick-btn.on-offtrack.active{background:var(--critical-wash); border-color:var(--critical); color:var(--critical);}
.status-more{border:none; background:transparent; color:var(--text-muted); font-size:11.5px; cursor:pointer; text-decoration:underline; padding:6px 4px;}
.activity-feed{display:flex; flex-direction:column; gap:13px;}
.activity-row{display:flex; gap:9px; font-size:12px;}
.activity-row .adot{width:7px; height:7px; border-radius:50%; background:var(--border-strong); margin-top:6px; flex:none;}
.activity-row.ev-created .adot, .activity-row.ev-status .adot{background:var(--accent);}
.activity-row .atext{line-height:1.45;}
.activity-row .atext b{font-weight:700;}
.activity-row .adate{color:var(--text-muted); font-size:10.5px; margin-top:1px;}

/* home greeting + task feed */
.home-greet{margin-bottom:4px;}
.home-greet .hint{margin-bottom:2px;}
.home-greet h1{font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:-.01em;}

/* home hero / wallpaper */
.home-hero{position:relative; border-radius:16px; margin-bottom:4px; overflow:hidden; background-size:cover; background-position:center;}
.home-hero-pad{position:relative; z-index:1; padding:26px 100px 30px 24px;}
.home-hero.has-bg::before{content:''; position:absolute; inset:0; background:rgba(0,0,0,.22);}
.home-hero.has-bg .hint{color:rgba(255,255,255,.9);}
.home-hero.has-bg h1{color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.3);}
.home-hero.plain .home-hero-pad{padding:2px 100px 6px 0;}
.hero-customize-btn{position:absolute; top:14px; right:14px; z-index:2; background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:6px 12px; font-size:11px; font-weight:700; cursor:pointer; color:var(--text-2); box-shadow:var(--shadow);}
.home-hero.has-bg .hero-customize-btn{background:rgba(255,255,255,.92); border-color:transparent; color:#1a1a18;}
.hero-customize-btn:hover{filter:brightness(0.97);}
.bg-picker{margin-bottom:14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:var(--shadow); max-width:420px;}
.bg-picker .card-title{margin-bottom:8px;}
.bg-swatch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;}
.bg-swatch{height:48px; border-radius:8px; border:2px solid transparent; cursor:pointer; position:relative; background-size:cover; background-position:center;}
.bg-swatch.active{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-wash);}
.bg-swatch .lbl{position:absolute; bottom:3px; left:6px; font-size:9px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);}
.bg-picker-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.bg-uploading{font-size:11.5px; color:var(--text-muted); font-weight:600;}
@media (max-width:640px){
  .hero-customize-btn{position:static; display:inline-flex; margin:14px 0 0 14px;}
  .home-hero-pad{padding:2px 20px 22px;}
  .home-hero.plain .home-hero-pad{padding:2px 0 4px 0;}
}
.tf-tabs{display:flex; gap:6px; margin-bottom:8px;}
.tf-row{display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--border); font-size:12.5px; cursor:pointer;}
.tf-row:last-child{border-bottom:none;}
.tf-row:hover{background:var(--surface-2);}
.tf-row .tf-title{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600;}
.tf-row .tf-proj{font-size:10.5px; color:var(--text-muted); flex:none;}
.tf-row .tf-due{font-size:11px; color:var(--text-muted); flex:none; width:64px; text-align:right;}

/* task detail title */
.task-title-ipt{width:100%; border:none; background:transparent; font-size:18px; font-weight:800; font-family:var(--font-display); padding:5px 2px; color:var(--text); border-radius:6px;}
.task-title-ipt:hover{background:var(--surface-2);}
.task-title-ipt:focus{outline:2px solid var(--accent); background:var(--surface); outline-offset:0;}
.sort-toggle{border:none; background:transparent; color:var(--text-muted); font-size:11px; cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:3px;}
.sort-toggle:hover{color:var(--text);}

/* goals */
.goal-card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:13px 15px; display:flex; flex-direction:column; gap:9px;}
.goal-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.goal-top .title{font-weight:800; font-size:13.5px;}
.goal-desc{font-size:11.5px; color:var(--text-muted);}
.goal-progress-row{display:flex; align-items:center; gap:10px;}
.progress{height:6px; background:var(--surface-3); border-radius:999px; overflow:hidden; flex:1;}
.progress > i{display:block; height:100%; background:var(--accent);}
.goal-foot{display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--text-muted); flex-wrap:wrap; gap:6px;}

/* slide-over task panel */
.panel-backdrop{position:fixed; inset:0; background:rgba(10,10,10,.42); z-index:60; opacity:0; pointer-events:none; transition:opacity .18s;}
.panel-backdrop.show{opacity:1; pointer-events:auto;}
.panel{position:fixed; top:0; right:0; bottom:0; width:min(540px, 100vw); background:var(--surface); box-shadow:var(--shadow-lg); z-index:61;
  transform:translateX(100%); transition:transform .22s ease; overflow-y:auto;
  padding: calc(14px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:16px;}
.panel.show{transform:translateX(0);}
.panel-close{position:sticky; top:0; align-self:flex-end; margin-bottom:-8px;}
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;}
@media (max-width:520px){.detail-grid{grid-template-columns:1fr;}}
.dl{display:flex; flex-direction:column; gap:2px; padding:7px 0; border-bottom:1px solid var(--border);}
.dl .k{font-size:10.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; font-weight:700;}
.dl .v{font-size:13px;}
.dl .v input, .dl .v select{width:100%;}
.subtask-row, .comment-row{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); font-size:12.5px;}
.subtask-row .t{flex:1;}
.progress-sm{height:6px; background:var(--surface-3); border-radius:999px; overflow:hidden; flex:none; width:56px;}
.progress-sm > i{display:block; height:100%; background:var(--accent);}
.empty{color:var(--text-muted); font-size:12.5px; padding:14px 4px; text-align:center;}
.addform{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin-top:10px; align-items:end;}

/* settings */
.settings-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;}
.weekday-toggle{display:flex; gap:4px;}
.wd-btn{width:34px; height:30px; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-2); font-size:11px; font-weight:700; cursor:pointer;}
.wd-btn.off{background:var(--critical-wash); color:var(--critical); border-color:transparent;}
.listmgr{display:flex; flex-direction:column; gap:6px;}
.listmgr .row{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:5px 8px; background:var(--surface-2); border-radius:6px; font-size:12px;}
.listmgr form{display:flex; gap:6px; margin-top:4px;}
.chiprow{display:flex; flex-wrap:wrap; gap:6px;}
.pickchip{padding:4px 10px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); font-size:11.5px; font-weight:600; cursor:pointer; color:var(--text-2);}
.pickchip.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

.toast{
  position:fixed; bottom:calc(18px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--page); padding:9px 16px; border-radius:999px; font-size:12.5px; font-weight:600;
  box-shadow:var(--shadow); z-index:70; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px);}

@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important;}}

/* ===== iNet Advanced Management Layer ===== */
/* Note: these previously hardcoded #fff/#e5e7eb/#2563eb via var(--x, fallback)
   syntax against a --card/--border/--accent trio that was never actually
   defined for --card, so they always rendered fixed colors regardless of
   theme. Pointed at the real theme variables so this layer matches the
   rest of the app's palette instead of silently ignoring it. */
.exec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0}
.exec-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px;box-shadow:var(--shadow)}
.exec-kpi .n{font-size:24px;font-weight:850;letter-spacing:-.5px}.exec-kpi .l{font-size:11px;color:var(--text-muted);margin-top:4px}.exec-kpi .s{font-size:10px;margin-top:8px;color:var(--text-muted)}
.adv-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;margin:12px 0}.adv-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px}
.adv-title{font-size:14px;font-weight:800;margin-bottom:4px}.adv-sub{font-size:11px;color:var(--text-muted);margin-bottom:12px}
.adv-table{width:100%;border-collapse:collapse;font-size:11.5px}.adv-table th{font-size:10px;text-transform:uppercase;color:var(--text-muted);text-align:left;border-bottom:1px solid var(--border);padding:7px}.adv-table td{padding:8px 7px;border-bottom:1px solid var(--border);vertical-align:middle}
.adv-bar{height:8px;background:var(--surface-3);border-radius:8px;overflow:hidden}.adv-bar i{display:block;height:100%;border-radius:8px}
.adv-pill{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:700;border:1px solid var(--border)}
.adv-risk-high{background:var(--critical-wash);color:var(--critical)}.adv-risk-med{background:var(--warning-wash);color:#9a6c00}.adv-risk-low{background:var(--good-wash);color:var(--good)}
.adv-list{display:flex;flex-direction:column;gap:8px}.adv-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px;border:1px solid var(--border);border-radius:10px}
.adv-row strong{font-size:11.5px}.adv-row small{display:block;color:var(--text-muted);font-size:10px;margin-top:3px}
.week-grid{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:8px;overflow:auto}.week-day{min-height:170px;border:1px solid var(--border);border-radius:11px;padding:8px;background:var(--surface)}.week-day.today{outline:2px solid var(--accent)}
.week-day h4{font-size:10px;margin:0 0 7px;color:var(--text-muted);text-transform:uppercase}.week-task{padding:7px;border-radius:8px;background:var(--surface-2);margin:5px 0;font-size:10.5px;cursor:pointer}.week-task b{display:block;font-size:10.5px}.week-task span{color:var(--text-muted)}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}.filter-row .ipt{max-width:190px}
.score-line{display:flex;align-items:center;gap:8px;margin:8px 0}.score-line .label{width:110px;font-size:10.5px}.score-line .adv-bar{flex:1}
@media(max-width:1000px){.exec-grid{grid-template-columns:repeat(2,1fr)}.adv-grid{grid-template-columns:1fr}.week-grid{grid-template-columns:repeat(7,145px)}}
@media(max-width:650px){.exec-grid{grid-template-columns:1fr 1fr}}




#inet-persistence-status{position:fixed;right:14px;bottom:14px;z-index:99999;padding:7px 10px;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:#fff;font:600 11px system-ui,sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.08)}
#inet-persistence-status .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#777;margin-right:5px}

/* =======================================================================
   EXTENDED UI — real-time platform additions
   ======================================================================= */

/* ---- connection / sync status ---- */
.conn-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:11px; font-weight:700; cursor:pointer; border:1px solid var(--border); background:var(--surface);}
.conn-pill .dot{width:7px; height:7px; border-radius:999px; background:var(--neutral); flex:none;}
.conn-pill.live .dot{background:var(--good); box-shadow:0 0 0 3px var(--good-wash);}
.conn-pill.connecting .dot{background:var(--warning); animation:pulse 1.2s infinite;}
.conn-pill.offline .dot{background:var(--neutral);}
.conn-pill.sync_error .dot{background:var(--critical);}
.conn-pill.local .dot{background:var(--accent);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.conn-detail{position:absolute; top:44px; right:14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:14px; width:260px; z-index:200; font-size:12px;}
.conn-detail .row{display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--border);}
.conn-detail .row:last-child{border-bottom:none;}
.local-mode-banner{background:var(--warning-wash); color:#8a5a00; font-size:11.5px; font-weight:700; padding:7px 14px; text-align:center;}

/* ---- saving indicator (inline quick-edit) ---- */
.savingtag{font-size:10px; font-weight:700; color:var(--text-muted); margin-left:6px;}
.savingtag.ok{color:var(--good);}
.savingtag.err{color:var(--critical); cursor:pointer; text-decoration:underline;}
.cell-ipt.err{outline:2px solid var(--critical);}

/* ---- topbar additions: search + notifications + user menu ---- */
.topbar-row{display:flex; align-items:center; gap:12px;}
.globalsearch{flex:1; max-width:420px; position:relative;}
.globalsearch input{width:100%; padding:8px 12px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); font-size:12.5px;}
.searchresults{position:absolute; top:38px; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); max-height:360px; overflow:auto; z-index:210;}
.searchresults .sr-group{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:800; padding:8px 12px 2px;}
.searchresults .sr-row{padding:7px 12px; cursor:pointer; font-size:12.5px; display:flex; justify-content:space-between; gap:8px;}
.searchresults .sr-row:hover{background:var(--surface-2);}
.notif-btn{position:relative; background:none; border:1px solid var(--border); border-radius:9px; width:34px; height:34px; cursor:pointer; font-size:15px;}
.notif-badge{position:absolute; top:-4px; right:-4px; background:var(--critical); color:#fff; font-size:9.5px; font-weight:800; border-radius:999px; padding:1px 5px; min-width:16px; text-align:center;}
.notif-panel{position:absolute; top:44px; right:60px; width:340px; max-height:420px; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); z-index:210;}
.notif-row{padding:10px 14px; border-bottom:1px solid var(--border); font-size:12px; cursor:pointer;}
.notif-row:hover{background:var(--surface-2);}
.notif-row .t{font-weight:700;}
.notif-row .s{color:var(--text-muted); font-size:11px; margin-top:2px;}
.usermenu-btn{display:flex; align-items:center; gap:7px; background:none; border:1px solid var(--border); border-radius:999px; padding:4px 10px 4px 4px; cursor:pointer;}
.avatar{width:24px; height:24px; border-radius:999px; background:var(--accent-wash); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800;}
.rolebadge{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted);}
.usermenu-panel{position:absolute; top:44px; right:14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:10px; width:200px; z-index:210;}
.usermenu-panel button{width:100%; text-align:left; padding:8px 10px; border-radius:8px; border:none; background:none; cursor:pointer; font-size:12.5px;}
.usermenu-panel button:hover{background:var(--surface-2);}

/* ---- sidebar groups (nested nav, collapsible) ---- */
.side-group{margin-top:2px;}
.side-group-head{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:800;
  padding:10px 10px 6px; margin-top:4px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; border-radius:7px; user-select:none;
}
.side-group-head:hover{color:var(--text-2); background:var(--surface-2);}
.side-group-head .chev{font-size:9px; transition:transform .15s ease; display:inline-block; color:var(--text-muted); flex:none;}
.side-group-head.collapsed .chev{transform:rotate(-90deg);}
.side-group-body{display:flex; flex-direction:column; gap:1px;}
.side-sub{padding-left:8px;}
@media (max-width:820px){
  /* the mobile sidebar is a horizontal strip — collapsing groups there would
     just hide items with no room to show a body, so always show every item */
  .side-group-head{display:none;}
  .side-group-body{display:flex !important; flex-direction:row;}
}

/* ---- tabs (used in forms and record forms) ---- */
.tabbar{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:12px; flex-wrap:wrap;}
.tabbtn{padding:8px 12px; border:none; background:none; font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tabbtn.active{color:var(--accent); border-color:var(--accent);}
.tabpanel{display:none;}
.tabpanel.active{display:block;}

/* ---- modal dialogs (full record forms, confirmations, conflict) ---- */
.modal-backdrop{position:fixed; inset:0; background:rgba(10,10,10,.46); z-index:300; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:40px 16px;}
.modal{background:var(--surface); border-radius:14px; box-shadow:var(--shadow-lg); width:min(760px, 100%); padding:22px; }
.modal.narrow{width:min(440px,100%);}
.modal h3{margin:0 0 4px; font-size:16px; font-weight:800;}
.modal .modal-desc{color:var(--text-muted); font-size:12px; margin-bottom:14px;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px; flex-wrap:wrap;}
.modal-close{position:absolute; margin-left:auto;}

/* ---- risk / priority badges ---- */
.risk-low{background:var(--good-wash); color:var(--good);}
.risk-medium{background:var(--warning-wash); color:#8a5a00;}
.risk-high{background:#ffe6d9; color:#b5490f;}
.risk-critical{background:var(--critical-wash); color:var(--critical);}
.riskbadge{display:inline-flex; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800;}

/* ---- login screen ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--page); padding:20px;}
.login-card{width:min(380px,100%); background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg); padding:32px 28px;}
.login-card h1{font-size:18px; margin:0 0 2px;}
.login-card .sub{color:var(--text-muted); font-size:12.5px; margin-bottom:22px;}
.login-card .field{margin-bottom:12px;}
.login-card .btn{width:100%; justify-content:center;}
.login-modelist{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.login-mode-btn{border:1px solid var(--border); border-radius:10px; padding:10px 12px; text-align:left; background:var(--surface-2); cursor:pointer; font-size:12.5px;}

/* ---- calendar view ---- */
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--grid); border:1px solid var(--grid); border-radius:10px; overflow:hidden;}
.cal-dow{background:var(--surface-2); padding:6px; font-size:10px; text-transform:uppercase; text-align:center; font-weight:800; color:var(--text-muted);}
.cal-cell{background:var(--surface); min-height:96px; padding:6px; font-size:11px;}
.cal-cell.other-month{background:var(--page); color:var(--text-muted);}
.cal-cell.today{outline:2px solid var(--accent); outline-offset:-2px;}
.cal-daynum{font-weight:800; font-size:11px; margin-bottom:4px;}
.cal-task{background:var(--accent-wash); color:var(--accent); border-radius:5px; padding:2px 5px; font-size:10px; font-weight:700; margin-bottom:2px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cal-task.overdue{background:var(--critical-wash); color:var(--critical);}
.cal-task.closed{background:var(--good-wash); color:var(--good); text-decoration:line-through;}

/* ---- audit log / activity ---- */
.audit-row{display:grid; grid-template-columns:120px 110px 1fr; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border); font-size:12px; align-items:start;}
.audit-row .who{font-weight:700;}
.audit-diff{font-size:11.5px;}
.audit-diff .old{color:var(--critical); text-decoration:line-through; margin-right:4px;}
.audit-diff .new{color:var(--good); font-weight:700;}
.activity-feed-lg{max-height:520px; overflow:auto;}

/* ---- backup center ---- */
.backup-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:12.5px;}
.backup-row:last-child{border-bottom:none;}

/* ---- board extra column colors ---- */
.board-col[data-dropcol="At Risk"] .board-col-head .name{color:#9a6c00;}
.board-col[data-dropcol="Cancelled"] .board-col-head .name{color:var(--text-muted);}
.board-col.dragover{background:var(--accent-wash);}

/* ---- version-conflict dialog ---- */
.conflict-compare{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0;}
.conflict-col{border:1px solid var(--border); border-radius:10px; padding:10px; font-size:12px;}
.conflict-col h4{margin:0 0 8px; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);}
.conflict-field{padding:4px 0; border-bottom:1px dashed var(--border);}
.conflict-field .k{color:var(--text-muted); font-size:10.5px;}

/* ---- department / role gating hints ---- */
.readonly-note{background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:10px; padding:8px 12px; font-size:11.5px; color:var(--text-muted); margin-bottom:10px;}
.locked-field{opacity:.6; pointer-events:none;}

/* ---- import / first-run screen ---- */
.import-wrap{max-width:560px; margin:60px auto; text-align:center;}
.import-summary{text-align:left; background:var(--surface-2); border-radius:10px; padding:16px; margin:18px 0; font-size:13px;}
.import-summary .row{display:flex; justify-content:space-between; padding:3px 0;}

/* ---- print / PDF report styling ---- */
@media print{
  .sidebar, .topbar, .panel, .panel-backdrop, .notif-btn, .usermenu-btn, .globalsearch, .conn-pill, .filterbar button, .no-print{display:none !important;}
  .shell{display:block !important;}
  .main{width:100% !important;}
  body{background:#fff !important;}
}

/* ---- misc form helpers ---- */
.formgrid.tabbed .field.hidden-tab{display:none;}
.field.required label::after{content:' *'; color:var(--critical);}
.field .fieldhint{font-size:10.5px; color:var(--text-muted); margin-top:2px;}
.field .fielderr{font-size:10.5px; color:var(--critical); margin-top:2px;}
.ipt.invalid{outline:2px solid var(--critical);}
.pill-btn-row{display:flex; gap:6px; flex-wrap:wrap;}
.summary-strip{display:flex; gap:16px; flex-wrap:wrap; padding:10px 0; font-size:12px; color:var(--text-muted);}

/* =======================================================================
   ROUND 5 — themes, header (Create menu / app info / team selector),
   sidebar resize + collapse, Home focus cards + quick capture + quote,
   task detail redesign (mark-complete / kebab / advanced disclosure)
   ======================================================================= */

/* ---- 8 named themes — each only overrides accent, surfaces, washes and
   category colors so every existing component (chips, charts, buttons,
   active nav) picks the new palette up automatically through the CSS
   variables it already uses. 'purple' (iNet Purple) is the unstyled
   :root default. ---- */
:root[data-itheme="classic"]{
  --accent:#1e6fd9; --accent-ink:#ffffff; --accent-wash:#e8f1fc;
  --cat-1:#1e6fd9; --cat-7:#144a94;
}
:root[data-itheme="ocean"]{
  --accent:#0b7bd1; --accent-ink:#ffffff; --accent-wash:#e6f2fc;
  --cat-1:#0b7bd1; --cat-7:#0a5a9c;
}
:root[data-itheme="green"]{
  --accent:#0f9d58; --accent-ink:#ffffff; --accent-wash:#e6f6ee;
  --cat-1:#0f9d58; --cat-7:#0b7a43;
}
:root[data-itheme="sand"]{
  --page:#faf6ef; --surface:#fffdf9; --surface-2:#f3ead9; --surface-3:#ece0c9;
  --text:#3a2f22; --text-2:#6b5a44; --text-muted:#9a8a70;
  --border:rgba(58,47,34,.10); --border-strong:rgba(58,47,34,.2);
  --grid:#ece2cf; --baseline:#ddcfae;
  --accent:#b8763e; --accent-ink:#ffffff; --accent-wash:#f3e3d1;
  --cat-1:#b8763e; --cat-2:#7a8f5c; --cat-3:#4f8f8a; --cat-4:#c99a3a;
  --cat-5:#a85d72; --cat-6:#5a8f5f; --cat-7:#8c5a2e; --cat-8:#b0483f;
}
:root[data-itheme="midnight"]{
  color-scheme: dark;
  --page:#0d0d0d; --surface:#1a1a19; --surface-2:#211f1d; --surface-3:#282624;
  --text:#ffffff; --text-2:#c3c2b7; --text-muted:#8f8d86;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --grid:#2c2c2a; --baseline:#383835;
  --accent:#8b7bf0; --accent-ink:#ffffff; --accent-wash:#26214a;
  --good:#12b76a; --warning:#f79009; --critical:#e66767; --neutral:#8b8a86;
  --good-wash:#123018; --warning-wash:#332208; --critical-wash:#341413; --neutral-wash:#242320;
  --cat-1:#8b7bf0; --cat-2:#d95926; --cat-3:#199e70; --cat-4:#c98500;
  --cat-5:#d55181; --cat-6:#3fae3f; --cat-7:#9085e9; --cat-8:#e66767;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.5);
}
:root[data-itheme="slate"]{
  color-scheme: dark;
  --page:#12161c; --surface:#1a1f27; --surface-2:#202631; --surface-3:#272e3a;
  --text:#eef1f5; --text-2:#b7c0cc; --text-muted:#7c8798;
  --border:rgba(230,236,245,.09); --border-strong:rgba(230,236,245,.16);
  --grid:#2a3140; --baseline:#343d4d;
  --accent:#5b8fce; --accent-ink:#ffffff; --accent-wash:#1e2c40;
  --good:#2fb787; --warning:#e0a530; --critical:#e2685f; --neutral:#7c8798;
  --good-wash:#0f2a22; --warning-wash:#332708; --critical-wash:#361f1c; --neutral-wash:#242b35;
  --cat-1:#5b8fce; --cat-2:#c9793f; --cat-3:#2fb787; --cat-4:#e0a530;
  --cat-5:#c06a8c; --cat-6:#4fae6a; --cat-7:#7a9fd6; --cat-8:#e2685f;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.45);
}
:root[data-itheme="contrast"]{
  color-scheme: light;
  --page:#ffffff; --surface:#ffffff; --surface-2:#f0f0f0; --surface-3:#e0e0e0;
  --text:#000000; --text-2:#1a1a1a; --text-muted:#3a3a3a;
  --border:rgba(0,0,0,.35); --border-strong:rgba(0,0,0,.6);
  --grid:#c9c9c9; --baseline:#9a9a9a;
  --accent:#0047ab; --accent-ink:#ffffff; --accent-wash:#dbe8f8;
  --good:#0a7a2e; --warning:#a35c00; --critical:#b3271e; --neutral:#3a3a3a;
  --good-wash:#dff3e3; --warning-wash:#fbead2; --critical-wash:#fbdcd9; --neutral-wash:#e6e6e6;
  --cat-1:#0047ab; --cat-2:#a35c00; --cat-3:#0a7a2e; --cat-4:#8a6d00;
  --cat-5:#a3115b; --cat-6:#0a6b4a; --cat-7:#3a1aad; --cat-8:#b3271e;
  --shadow: 0 0 0 rgba(0,0,0,0); --shadow-lg: 0 2px 10px rgba(0,0,0,.25);
}
:root[data-itheme="contrast"] .side-item.active{outline:2px solid var(--accent);}
:root[data-itheme="contrast"] .btn-primary{outline:1px solid #000;}
.theme-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px;}
.theme-swatch{display:flex; align-items:center; gap:10px; padding:14px; border-radius:var(--radius); border:1.5px solid var(--border-strong); background:var(--surface); cursor:pointer; text-align:left;}
.theme-swatch:hover{background:var(--surface-2);}
.theme-swatch.active{border-color:var(--accent); background:var(--accent-wash);}
.theme-swatch .sw{width:26px; height:26px; border-radius:999px; flex:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);}
.theme-swatch .name{font-weight:700; font-size:13px; flex:1;}
.theme-swatch .check{color:var(--accent); font-weight:800;}

/* ---- header additions: sidebar toggle / back-forward / app info / team
   selector / "+ Create" flyout ---- */
.topbar-row .icon-btn[disabled]{opacity:.35; cursor:default; pointer-events:none;}
.topbar-row select.ipt-sm{width:auto; max-width:160px;}
.create-menu-wrap{flex:none;}
.create-flyout{
  position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; z-index:210; min-width:180px;
}
.create-flyout button{width:100%; text-align:left; padding:9px 10px; border-radius:8px; border:none; background:none; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--text);}
.create-flyout button:hover{background:var(--surface-2);}
.app-info-panel{
  position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-lg); padding:12px 14px; z-index:210; min-width:230px;
}
.app-info-panel .row{padding:2px 0; font-size:12.5px;}
.app-info-panel .row.hint{color:var(--text-muted); font-size:11.5px;}
.conn-pill.saving .dot{background:var(--warning);}
.conn-pill.local .dot{background:var(--accent);}
.conn-pill.live .dot{background:var(--good);}
.conn-pill.offline .dot{background:var(--critical);}
.local-mode-banner.offline{background:var(--critical-wash); color:var(--critical); font-weight:700;}

/* ---- sidebar resize handle + collapsed icon rail ---- */
.sidebar-resize-handle{position:absolute; top:0; right:-6px; width:10px; height:100%; cursor:col-resize; z-index:5;}
.sidebar-resize-handle:hover, .sidebar-resize-handle:active{background:var(--accent-wash);}
.sidebar{position:relative;}

/* ---- Home: motivational quote, four focus cards, Quick Capture ---- */
.home-quote{margin-top:6px; font-size:12.5px; font-style:italic; color:var(--text-muted); max-width:640px;}
.focus-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px;}
.focus-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 16px; text-align:left; cursor:pointer;
}
.focus-card:hover{border-color:var(--accent); background:var(--accent-wash);}
.focus-card .n{font-size:26px; font-weight:800; font-family:var(--font-display);}
.focus-card .l{font-size:10.5px; font-weight:800; letter-spacing:.05em; color:var(--text-muted); margin-top:4px;}
.focus-card .s{font-size:11px; color:var(--text-muted); margin-top:1px;}
.quick-capture-card{padding:10px 14px;}
.quick-capture-input{width:100%; border:none; background:transparent; font-size:14px; padding:6px 2px; color:var(--text);}
.quick-capture-input:focus{outline:none;}

/* ---- task detail: mark-complete / copy-link / kebab / advanced disclosure ---- */
.taskdetail-headrow{display:flex; align-items:center; gap:6px; margin-bottom:6px;}
.taskdetail-headrow-actions{margin-left:auto; display:flex; gap:6px; align-items:center;}
.mark-complete-btn{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text-2); font-size:12px; font-weight:700; cursor:pointer; margin-bottom:8px;
}
.mark-complete-btn:hover{border-color:var(--accent); color:var(--accent);}
.mark-complete-btn.done{background:var(--good-wash); border-color:var(--good); color:var(--good);}
.task-kebab-menu{
  position:absolute; top:calc(100% + 4px); right:0; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-lg); padding:6px; z-index:210; min-width:180px;
}
.task-kebab-menu button{width:100%; text-align:left; padding:8px 10px; border-radius:7px; border:none; background:none; cursor:pointer; font-size:12px; font-weight:600; color:var(--text);}
.task-kebab-menu button:hover{background:var(--surface-2);}
.task-kebab-menu button.danger{color:var(--critical);}
.advanced-toggle{
  display:block; width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--border);
  color:var(--text-muted); font-size:12px; font-weight:700; padding:10px 0 6px; cursor:pointer;
}
.advanced-toggle:hover{color:var(--accent);}
.summary-strip b{color:var(--text);}

/* =======================================================================
   PRIVATE NOTEPAD
   ======================================================================= */
.notepad-shell{display:grid; grid-template-columns:280px 1fr; gap:14px; align-items:start; height:calc(100vh - 190px); min-height:420px;}
.notepad-list-pane{display:flex; flex-direction:column; gap:8px; height:100%; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:10px; overflow:hidden;}
.notepad-toolbar{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.notepad-toolbar input.ipt{flex:1;}
.notepad-list{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin-top:4px;}
.notepad-item{padding:8px 9px; border-radius:8px; cursor:pointer; border:1px solid transparent;}
.notepad-item:hover{background:var(--surface-2);}
.notepad-item.active{background:var(--accent-wash); border-color:var(--accent);}
.notepad-item .ni-title{font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.notepad-item .ni-preview{font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;}
.notepad-item .ni-meta{font-size:10px; color:var(--text-muted); margin-top:2px;}
.notepad-editor-pane{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:14px; height:100%; overflow-y:auto; display:flex; flex-direction:column;}
.notepad-editor-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.notepad-title-ipt{flex:1; border:none; background:transparent; font-size:18px; font-weight:800; font-family:var(--font-display); color:var(--text); padding:4px 2px;}
.notepad-title-ipt:focus{outline:none; border-bottom:1px solid var(--border-strong);}
.notepad-editor-actions{display:flex; gap:4px; flex:none;}
.notepad-savetag{margin-left:auto;}
.rte-toolbar{border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:8px;}
.notepad-editor{
  flex:1; min-height:240px; outline:none; font-size:13.5px; line-height:1.6; color:var(--text);
  padding:6px 2px; overflow-y:auto;
}
.notepad-editor:empty:before{content:"Start typing…"; color:var(--text-muted);}
.notepad-editor ul{padding-left:22px;} .notepad-editor ol{padding-left:22px;}
.notepad-editor h3{font-size:15px; margin:10px 0 4px;}
.notepad-editor a{color:var(--accent);}

/* =======================================================================
   BACKGROUND IMAGE PERSONALIZATION SYSTEM
   ======================================================================= */
#app-bg-layer{
  position:fixed; inset:0; z-index:-1; background-size:cover; background-position:center;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
body.has-bg #app-bg-layer{opacity:var(--bg-opacity, 0.5);}
body.has-bg #app-bg-layer{filter:blur(var(--bg-blur, 0px));}
body.has-bg{background:transparent;}
body.has-bg #app-bg-layer::after{
  content:''; position:absolute; inset:0; background:var(--page); opacity:var(--bg-overlay, 0.55);
}
/* When a background image is active, key surfaces go translucent so the
   image stays visible behind the content instead of being fully hidden
   by opaque cards — the spec's "adaptive translucent surfaces". */
body.has-bg .topbar, body.has-bg .sidebar, body.has-bg .card, body.has-bg .kpi-tile,
body.has-bg .tablewrap, body.has-bg .focus-card, body.has-bg .goal-card, body.has-bg .modal,
body.has-bg .notepad-list-pane, body.has-bg .notepad-editor-pane{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(6px);
}
.bg-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:10px;}
.bg-swatch{border:1.5px solid var(--border-strong); border-radius:10px; overflow:hidden; cursor:pointer; background:var(--surface); text-align:left;}
.bg-swatch:hover{border-color:var(--accent);}
.bg-swatch.active{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-wash);}
.bg-swatch .thumb{height:64px; background-size:cover; background-position:center;}
.bg-swatch .thumb.none{display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:11px; background:var(--surface-2);}
.bg-swatch .name{padding:6px 8px; font-size:11.5px; font-weight:700;}
.bg-controls{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-top:12px;}
.bg-controls .field label{display:flex; justify-content:space-between;}