:root{--bg:#0f151c;--panel:#18212b;--panel2:#111923;--line:#2b3948;--ink:#f0eee8;--muted:#91a0b3;--orange:#ed8c25;--teal:#50c2af;--red:#eb6461;--blue:#547cb7;--yellow:#dfbd54}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Segoe UI,Inter,Arial,sans-serif}button,input,select,textarea{font:inherit}.shell{max-width:1500px;margin:auto;padding:20px}.top{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:15px}.eyebrow{color:var(--orange);font-size:11px;letter-spacing:.15em;text-transform:uppercase}.top h1{margin:3px 0 0;font-size:28px}.sub{color:var(--muted);font-size:12px}.nav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.nav button,.filebtn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px 11px;cursor:pointer}.nav button.active{border-color:var(--orange);color:var(--orange)}.filebtn input{display:none}.layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px}.sidebar,.card{background:var(--panel);border:1px solid var(--line);border-radius:8px}.sidebar{padding:12px;height:fit-content;position:sticky;top:12px}.projectItem{padding:10px;border:1px solid transparent;border-radius:6px;cursor:pointer;margin-bottom:7px;background:#121b25}.projectItem.active{border-color:var(--orange)}.projectItem .name{font-weight:700;font-size:13px}.projectItem .meta{font-size:11px;color:var(--muted);margin-top:4px}.content{min-width:0}.panel{display:none}.panel.active{display:block}.card{padding:15px;margin-bottom:14px}.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.metric .label,.label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.metric .value{font-size:23px;font-weight:800;margin-top:6px}.credit{color:var(--teal)}.bad{color:var(--red)}.good{color:var(--teal)}.warn{color:var(--yellow)}.muted{color:var(--muted)}.barwrap{height:9px;background:#223040;border-radius:99px;overflow:hidden}.bar{height:100%;background:linear-gradient(90deg,var(--orange),var(--teal))}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.actions button,.small{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:7px 9px;cursor:pointer}.small{font-size:11px;padding:5px 7px}.danger{border-color:#70403f!important;color:#ffb5b2!important}table{width:100%;border-collapse:collapse}th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:7px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}td{padding:7px;border-bottom:1px solid #202c38;font-size:12px;vertical-align:middle}input,select,textarea{width:100%;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:7px}textarea{min-height:80px}.scroll{overflow:auto;max-height:70vh}.link{color:#96dfff;text-decoration:none}.pill{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:3px 7px;font-size:10px}.fresh{color:var(--teal)}.aging{color:var(--yellow)}.stale{color:var(--red)}.missing{color:var(--muted)}.waterfall{display:flex;gap:10px;overflow:auto;padding-bottom:6px}.wf{min-width:220px;background:#111923;border:1px solid var(--line);border-radius:7px;padding:11px;position:relative;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}.wf:hover,.wf:focus{border-color:var(--orange);background:#16212c;transform:translateY(-2px);outline:none}.wf.active{border-color:var(--orange);box-shadow:0 0 0 1px rgba(237,140,37,.25)}.wf:not(:last-child):after{content:'→';position:absolute;right:-18px;top:45%;color:var(--orange);font-size:20px}.timeline{display:grid;gap:8px}.mile{display:grid;grid-template-columns:24px minmax(220px,1.5fr) 115px 115px 120px minmax(140px,1fr);gap:10px;align-items:center;padding:9px;border-bottom:1px solid #202c38}.dot{width:14px;height:14px;border-radius:50%;background:#53657b}.dot.complete{background:var(--teal)}.dot.progress{background:var(--orange)}.customerWrap{max-width:1000px;margin:auto}.customerHero{background:linear-gradient(135deg,#1b2733,#111821);border:1px solid #35475a;border-radius:10px;padding:20px}.customerMilestone{display:grid;grid-template-columns:30px 1fr 150px;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.settingsGrid{display:grid;grid-template-columns:230px 1fr;gap:10px;align-items:center}.sharedbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 2px}.sharedbar input{width:170px}.sharedStatus{font-size:11px;color:var(--muted)}.sharedStatus.good{color:var(--teal)}.sharedStatus.warn{color:var(--yellow)}.sharedStatus.bad{color:var(--red)}.changeItem{padding:12px 0;border-bottom:1px solid #202c38}.changeItem:last-child{border-bottom:0}.changeVersion{color:var(--orange);font-weight:800}.changeDate{color:var(--muted);font-size:11px;margin-left:8px}.financeTable td,.financeTable th{white-space:nowrap}.hidden{display:none!important}.groupHead td{background:#101923;color:var(--orange);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;padding:9px 7px;border-bottom:1px solid var(--line)}@media(max-width:1050px){.grid5,.grid4{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.mile{grid-template-columns:24px 1fr 110px}.mile>*:nth-child(n+4){grid-column:2/4}}@media(max-width:760px){.layout{grid-template-columns:1fr}.sidebar{position:static}.grid5,.grid4{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}.customerMilestone{grid-template-columns:24px 1fr}.customerMilestone>*:last-child{grid-column:2}.settingsGrid{grid-template-columns:1fr}}

/* ---------- v1.8.2 wide data-entry tables ---------- */
#actual .scroll,
#planned .scroll{
  overflow-x:auto;
  overflow-y:auto;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:6px;
  scrollbar-gutter:stable both-edges;
}

#actual table,
#planned table{
  width:max-content;
  min-width:1850px;
  table-layout:fixed;
}

#actual th,
#actual td,
#planned th,
#planned td{
  white-space:nowrap;
}

#actual input,
#actual select,
#planned input,
#planned select{
  min-height:38px;
  padding:8px 10px;
}

#actual th:nth-child(1), #actual td:nth-child(1),
#planned th:nth-child(1), #planned td:nth-child(1){width:280px; min-width:280px}

#actual th:nth-child(2), #actual td:nth-child(2),
#planned th:nth-child(2), #planned td:nth-child(2){width:145px; min-width:145px}

#actual th:nth-child(3), #actual td:nth-child(3),
#planned th:nth-child(3), #planned td:nth-child(3){width:180px; min-width:180px}

#actual th:nth-child(4), #actual td:nth-child(4),
#actual th:nth-child(5), #actual td:nth-child(5),
#actual th:nth-child(6), #actual td:nth-child(6),
#actual th:nth-child(7), #actual td:nth-child(7),
#planned th:nth-child(4), #planned td:nth-child(4),
#planned th:nth-child(5), #planned td:nth-child(5),
#planned th:nth-child(6), #planned td:nth-child(6),
#planned th:nth-child(7), #planned td:nth-child(7){
  width:125px; min-width:125px;
}

#actual th:nth-child(8), #actual td:nth-child(8),
#planned th:nth-child(8), #planned td:nth-child(8){
  width:135px; min-width:135px;
}

#actual th:nth-child(9), #actual td:nth-child(9){width:145px; min-width:145px}
#actual th:nth-child(10), #actual td:nth-child(10){width:145px; min-width:145px}
#actual th:nth-child(11), #actual td:nth-child(11){width:300px; min-width:300px}
#actual th:nth-child(12), #actual td:nth-child(12){width:220px; min-width:220px}
#actual th:nth-child(13), #actual td:nth-child(13){width:90px; min-width:90px}

#planned th:nth-child(9), #planned td:nth-child(9){width:300px; min-width:300px}
#planned th:nth-child(10), #planned td:nth-child(10){width:145px; min-width:145px}
#planned th:nth-child(11), #planned td:nth-child(11){width:120px; min-width:120px}
#planned th:nth-child(12), #planned td:nth-child(12){width:220px; min-width:220px}
#planned th:nth-child(13), #planned td:nth-child(13){width:95px; min-width:95px}
#planned th:nth-child(14), #planned td:nth-child(14){width:160px; min-width:160px}

/* Keep item and category visible while scrolling sideways */
#actual th:nth-child(1), #actual td:nth-child(1),
#planned th:nth-child(1), #planned td:nth-child(1){
  position:sticky;
  left:0;
  z-index:4;
  background:var(--panel);
}

#actual th:nth-child(2), #actual td:nth-child(2),
#planned th:nth-child(2), #planned td:nth-child(2){
  position:sticky;
  left:280px;
  z-index:3;
  background:var(--panel);
  box-shadow:2px 0 0 var(--line);
}

#actual .groupHead td,
#planned .groupHead td{
  position:sticky;
  left:0;
  z-index:30;
  background:#101923;
}

/* Keep header row aligned with frozen columns */
#actual thead th:nth-child(1),
#planned thead th:nth-child(1){
  position:sticky!important;
  left:0!important;
  z-index:40!important;
}

#actual thead th:nth-child(2),
#planned thead th:nth-child(2){
  position:sticky!important;
  left:280px!important;
  z-index:39!important;
  box-shadow:3px 0 0 var(--line),8px 0 12px rgba(0,0,0,.18);
}

#actual td input[type="number"],
#planned td input[type="number"]{
  text-align:right;
  font-family:'JetBrains Mono',monospace;
}

@media(max-width:760px){
  #actual table,
  #planned table{
    min-width:1750px;
  }
}


/* ---------- v1.8.4 project + budget health ---------- */
.progressBlock{margin-bottom:18px}
.progressBlock:last-child{margin-bottom:0}
.progressHead{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin-bottom:7px}
.progressHead .progressTitle{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.progressHead .progressValue{font-size:25px;font-weight:800}
.budgetbar{height:12px;background:#223040;border-radius:99px;overflow:hidden;position:relative}
.budgetbar .fill{height:100%;transition:width .25s ease}
.budgetbar .fill.healthy{background:var(--teal)}
.budgetbar .fill.warning{background:var(--yellow)}
.budgetbar .fill.danger{background:var(--red)}
.budgetbar.is-over{box-shadow:0 0 0 1px rgba(235,100,97,.55),0 0 18px rgba(235,100,97,.18)}
.healthCallout{margin-top:10px;padding:11px 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel2)}
.healthCallout .healthTitle{font-size:15px;font-weight:800}
.healthCallout .healthDetail{margin-top:4px;font-size:12px;color:var(--muted)}
.healthCallout.good{border-color:#2f6c60}
.healthCallout.good .healthTitle{color:var(--teal)}
.healthCallout.warn{border-color:#6b5d2b}
.healthCallout.warn .healthTitle{color:var(--yellow)}
.healthCallout.bad{border-color:#70403f}
.healthCallout.bad .healthTitle{color:var(--red)}


/* ---------- v1.9 business branding ---------- */
.brandIdentity{display:flex;align-items:center;gap:12px}
.appBusinessLogo{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:#fff}
.businessLogoPreview{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:#fff}
.brandPreviewCard{padding:18px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(135deg,var(--panel2),var(--panel));text-align:center}
.brandPreviewCard h2{margin:10px 0 3px}
.brandPreviewCard .tag{color:var(--accent,var(--orange));font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.logoActions{display:flex;gap:8px;flex-wrap:wrap}
.colorRow{display:flex;gap:10px;align-items:center}
.colorRow input[type="color"]{width:68px;height:40px;padding:3px}

/* Stronger horizontal freeze for dense tables */
#actual table,#planned table{
  border-collapse:separate;
  border-spacing:0;
}
#actual th:nth-child(1),#actual td:nth-child(1),
#planned th:nth-child(1),#planned td:nth-child(1){
  position:sticky!important;
  left:0!important;
  z-index:12;
  background:var(--panel)!important;
}
#actual th:nth-child(2),#actual td:nth-child(2),
#planned th:nth-child(2),#planned td:nth-child(2){
  position:sticky!important;
  left:280px!important;

  position:sticky!important;
  left:280px!important;
  z-index:11;
  background:var(--panel)!important;
  box-shadow:3px 0 0 var(--line),8px 0 12px rgba(0,0,0,.18);
}
#actual thead th:nth-child(1),#actual thead th:nth-child(2),
#planned thead th:nth-child(1),#planned thead th:nth-child(2){
  z-index:20;
}
#actual tbody tr:hover td,
#planned tbody tr:hover td{background:#1b2632}
#actual tbody tr:hover td:nth-child(1),
#actual tbody tr:hover td:nth-child(2),
#planned tbody tr:hover td:nth-child(1),
#planned tbody tr:hover td:nth-child(2){background:#1b2632!important}


/* ---------- v1.9.1 clickable progress navigation ---------- */
.progressNav{
  cursor:pointer;
  border:1px solid transparent;
  border-radius:8px;
  padding:10px;
  margin-left:-10px;
  margin-right:-10px;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.progressNav:hover,
.progressNav:focus{
  border-color:var(--orange);
  background:rgba(237,140,37,.06);
  transform:translateY(-1px);
  outline:none;
}
.progressNav .progressHint{
  margin-top:7px;
  color:var(--orange);
  font-size:10px;
  letter-spacing:.04em;
}


/* ---------- v1.9.2 icon navigation ---------- */
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.iconNav{align-items:center}
.iconNav .iconBtn{
  position:relative;
  width:42px;
  height:42px;
  min-width:42px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border-radius:8px;
}
.iconNav .iconBtn svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.iconNav .iconBtn::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  top:calc(100% + 7px);
  transform:translateX(-50%) translateY(-3px);
  background:#050709;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:5px;
  padding:5px 7px;
  font-size:10px;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  z-index:100;
  transition:opacity .12s ease,transform .12s ease,visibility .12s;
  pointer-events:none;
}
.iconNav .iconBtn:hover::after,
.iconNav .iconBtn:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.iconNav .filebtn{cursor:pointer}
@media(max-width:760px){
  .iconNav{gap:6px}
  .iconNav .iconBtn{width:40px;height:40px;min-width:40px}
}