:root {
  color-scheme: light;
  --surface: #fcfcfb;
  --page: #f9f9f7;
  --raised: #ffffff;
  --ink: #0b0b0b;
  --ink2: #52514e;
  --muted: #6f6d68;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --band: #f0efec;
  --wash: rgba(11, 11, 11, 0.05);
  --accent: #1c5cab;
  --accent-ink: #ffffff;
  --critical: #b92f2f;
  --warning-bg: #fff4d9;
  --warning-ink: #5c4300;
  --critical-bg: #fdecec;
  --good: #006300;
  --hw: #2a78d6;
  --fw: #eb6834;
  --veh: #1baf7a;
  --docs: #898781;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface: #1a1a19;
    --page: #0d0d0d;
    --raised: #232322;
    --ink: #f0efec;
    --ink2: #c3c2b7;
    --muted: #a3a29b;
    --grid: #333331;
    --axis: #55554f;
    --band: #3a3a35;
    --wash: rgba(255, 255, 255, 0.07);
    --accent: #86b6ef;
    --accent-ink: #0b0b0b;
    --critical: #f08585;
    --warning-bg: #3a2f10;
    --warning-ink: #fbdc8c;
    --critical-bg: #3b1d1d;
    --good: #4cc44c;
    --hw: #3987e5;
    --fw: #d95926;
    --veh: #199e70;
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #1a1a19;
  --page: #0d0d0d;
  --raised: #232322;
  --ink: #f0efec;
  --ink2: #c3c2b7;
  --muted: #a3a29b;
  --grid: #333331;
  --axis: #55554f;
  --band: #3a3a35;
  --wash: rgba(255, 255, 255, 0.07);
  --accent: #86b6ef;
  --accent-ink: #0b0b0b;
  --critical: #f08585;
  --warning-bg: #3a2f10;
  --warning-ink: #fbdc8c;
  --critical-bg: #3b1d1d;
  --good: #4cc44c;
  --hw: #3987e5;
  --fw: #d95926;
  --veh: #199e70;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: clip; }
body { background: var(--page); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.boot { padding: 24px; color: var(--ink2); }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.grow { flex: 1 1 auto; min-width: 0; }

#app { height: 100%; display: flex; flex-direction: column; min-height: 0; overflow: clip; }

.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px 8px; flex-wrap: wrap; }
.topbar h1 { font-size: 17px; margin: 0; font-weight: 700; }
.sync { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.sync.bad { color: var(--critical); font-weight: 600; }

.kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.kpi { background: var(--surface); border: 1px solid var(--grid); border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--ink2); display: flex; gap: 6px; align-items: baseline; }
.kpi b { color: var(--ink); font-size: 14px; font-weight: 650; }
.kpi.attn { border-color: var(--critical); background: var(--critical-bg); }
button.kpi { cursor: pointer; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 16px 8px; }
.tabs { display: inline-flex; border: 1px solid var(--axis); border-radius: 8px; overflow: hidden; }
.tabs button { background: transparent; border: 0; padding: 5px 12px; cursor: pointer; }
.tabs button + button { border-inline-start: 1px solid var(--axis); }
.tabs button[aria-pressed="true"], .tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.btn { background: var(--surface); border: 1px solid var(--axis); border-radius: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--wash); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.danger { color: var(--critical); border-color: var(--critical); }
.btn.on { outline: 2px solid var(--accent); outline-offset: -2px; }
.field-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink2); }
select, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="password"], textarea {
  background: var(--surface); border: 1px solid var(--axis); border-radius: 6px; padding: 4px 8px; max-width: 100%;
}
input[type="date"], input[type="number"] { direction: ltr; }
input[type="search"] { width: 120px; }
.check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; }

.banner { margin: 0 16px 8px; padding: 8px 12px; border-radius: 8px; background: var(--warning-bg); color: var(--warning-ink); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.banner .btn { color: var(--ink); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 16px 6px; font-size: 12px; color: var(--ink2); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 14px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.swatch.hw { background: var(--hw); } .swatch.fw { background: var(--fw); } .swatch.veh { background: var(--veh); } .swatch.docs { background: var(--docs); }
.swatch.ext { background: repeating-linear-gradient(45deg, var(--docs), var(--docs) 2px, var(--surface) 2px, var(--surface) 4px); }
.swatch.late { background: transparent; border: 2px solid var(--critical); }
.swatch.band { background: var(--band); border: 1px solid var(--axis); }
.swatch.dia { width: 10px; height: 10px; border-radius: 0; transform: rotate(45deg); background: var(--ink); }
.swatch.dia.open { background: transparent; border: 2px solid var(--ink); }

.main { flex: 1 1 auto; min-height: 0; display: flex; }
.scroller { flex: 1 1 auto; min-width: 0; overflow: auto; background: var(--surface); border-top: 1px solid var(--axis); position: relative; }
.gantt { display: grid; grid-template-columns: max-content max-content; grid-template-rows: 46px 1fr; width: max-content; min-height: 100%; }
.gantt.ltr { direction: ltr; }
.th { position: sticky; top: 0; inset-inline-start: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--axis); border-inline-end: 1px solid var(--axis); display: flex; align-items: flex-end; height: 46px; padding-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--ink2); }
.head-svg { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--axis); display: block; }
.tbody { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--surface); border-inline-end: 1px solid var(--axis); }
.body-svg { display: block; align-self: start; touch-action: pan-x pan-y; user-select: none; }
.body-svg .bar { cursor: grab; }
.body-svg .handle { cursor: ew-resize; }
.body-svg.dragging, .body-svg.dragging * { cursor: grabbing !important; }

.row { height: 28px; display: flex; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--grid) 60%, transparent); width: 100%; background: none; border-inline: 0; border-top: 0; padding: 0; text-align: start; cursor: pointer; }
.row:hover, .row.hl { background: var(--wash); }
.row.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.row.phase { font-weight: 700; }
.c-name { flex: none; width: var(--name-w); display: flex; align-items: center; gap: 5px; padding-inline: 8px 6px; overflow: hidden; }
.gantt.heading .c-status, .gantt.heading .c-owner, .gantt.heading .c-dates, .gantt.heading .c-slack { display: none; }
.gantt.together { grid-template-columns: max-content; }
.gantt.together .th, .gantt.together .tbody { display: none; }
.c-status { flex: none; width: 72px; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.row.task .c-name { padding-inline-start: 22px; }
.c-name .label { overflow: hidden; line-height: 14px; max-height: 29px; }
.c-owner { flex: 0 0 48px; font-size: 12px; color: var(--ink2); overflow: hidden; white-space: nowrap; }
.c-dates { flex: 0 0 96px; font-size: 12px; color: var(--ink2); text-align: end; padding-inline-end: 6px; }
.c-slack { flex: 0 0 52px; font-size: 12px; color: var(--ink2); text-align: end; padding-inline-end: 8px; }
.c-slack.bad { color: var(--critical); font-weight: 700; }
.chev { flex: none; width: 14px; display: inline-block; text-align: center; color: var(--ink2); }
.st.done { color: var(--good); } .st.blocked { color: var(--critical); }
.tag { font-size: 10.5px; border-radius: 4px; padding: 0 4px; line-height: 15px; flex: none; font-weight: 600; }
.tag.q { background: var(--warning-bg); color: var(--warning-ink); }
.tag.issue { background: var(--wash); color: var(--ink2); }

.tooltip { position: fixed; z-index: 30; background: var(--raised); color: var(--ink); border: 1px solid var(--axis); border-radius: 8px; padding: 8px 10px; box-shadow: var(--shadow); font-size: 12.5px; max-width: 320px; pointer-events: none; line-height: 1.45; }
.tooltip b { display: block; margin-bottom: 2px; }
.tooltip .warn { color: var(--critical); font-weight: 600; }

.drawer { flex: 0 0 380px; max-width: 100%; background: var(--raised); border-inline-start: 1px solid var(--axis); overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--axis); }
.drawer h2 { font-size: 15px; margin: 0; }
.drawer h3 { font-size: 13px; margin: 8px 0 2px; color: var(--ink2); }
.drawer-head { display: flex; align-items: center; gap: 8px; }
.icon-btn { background: none; border: 1px solid var(--axis); cursor: pointer; font-size: 12px; padding: 3px 8px; border-radius: 6px; line-height: 1.2; white-space: nowrap; flex: none; }
.icon-btn:disabled { opacity: 0.6; cursor: default; }
.icon-btn:hover { background: var(--wash); }
.f { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink2); min-width: 0; }
.f input, .f select, .f textarea { color: var(--ink); width: 100%; font-size: 14px; }
.f input[type="checkbox"] { width: auto; flex: none; }
.f .check { color: var(--ink); }
.f .dep-row input[type="number"] { width: 56px; }
.f textarea { min-height: 72px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.why { background: var(--wash); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.why b { color: var(--ink); }
.why .warn { color: var(--critical); font-weight: 600; }
.dep-row { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.dep-row .label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-row input { width: 56px; }
.style-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.style-opt { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--axis); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 12.5px; color: var(--ink); }
.style-opt:hover { background: var(--wash); }
.style-opt[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -1px; font-weight: 700; }
.color-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.label.strong { font-weight: 800; }
.label.marked { background: var(--warning-bg); color: var(--warning-ink); border-radius: 3px; padding-inline: 3px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.hint { font-size: 12px; color: var(--muted); line-height: 1.45; }

.page { flex: 1 1 auto; min-width: 0; overflow: auto; background: var(--surface); border-top: 1px solid var(--axis); padding: 16px; }
.page-inner { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; gap: 18px; }
.page h2 { font-size: 15px; margin: 0 0 6px; }
.list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--grid); border-radius: 8px; overflow: hidden; }
.list li + li { border-top: 1px solid var(--grid); }
.list button { width: 100%; display: flex; gap: 8px; padding: 8px 10px; background: none; border: 0; cursor: pointer; text-align: start; align-items: baseline; line-height: 1.4; }
.list button:hover { background: var(--wash); }
.list .when { flex: none; font-size: 12px; color: var(--ink2); }
.list .empty { padding: 10px; color: var(--muted); font-size: 13px; }
.lvl { flex: none; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0 5px; line-height: 17px; }
.lvl.critical { background: var(--critical-bg); color: var(--critical); }
.lvl.serious { background: var(--critical-bg); color: var(--critical); }
.lvl.warning { background: var(--warning-bg); color: var(--warning-ink); }
.weekly { width: 100%; min-height: 150px; font-size: 13px; line-height: 1.5; }

.menu-wrap { position: relative; display: inline-block; }
.menu { position: absolute; z-index: 20; top: calc(100% + 4px); inset-inline-end: 0; background: var(--raised); border: 1px solid var(--axis); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; min-width: 230px; display: flex; flex-direction: column; }
.menu button { background: none; border: 0; padding: 7px 10px; text-align: start; border-radius: 6px; cursor: pointer; }
.menu button:hover { background: var(--wash); }

.gate { flex: 1 1 auto; overflow: auto; display: flex; justify-content: center; padding: 32px 16px; }
.gate-card { max-width: 520px; width: 100%; background: var(--surface); border: 1px solid var(--grid); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 12px; align-self: flex-start; line-height: 1.55; }
.gate-card h1 { font-size: 20px; margin: 0; }
.gate-card ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.gate-card input { width: 100%; direction: ltr; padding: 8px; }
.err { background: var(--critical-bg); color: var(--critical); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; }

#toasts { position: fixed; bottom: 16px; inset-inline-start: 16px; z-index: 40; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--surface); border-radius: 8px; padding: 9px 12px; box-shadow: var(--shadow); font-size: 13px; line-height: 1.45; }

#print-root { display: none; }

@media (max-width: 900px) {
  .c-status, .c-owner, .c-dates, .c-slack { display: none; }
  .row.task .c-name { padding-inline-start: 10px; }
  .main { position: relative; }
  .drawer { position: absolute; inset: 0; flex-basis: auto; z-index: 10; border-inline-start: 0; }
  .topbar, .toolbar { padding-inline: 16px; }
  .kpis { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .kpi { flex: none; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; }
  .toolbar > * { flex: none; }
  .toolbar > .grow { display: none; }
  .menu { position: fixed; inset-inline: 16px; top: auto; }
}

@media (forced-colors: active) {
  .swatch { forced-color-adjust: none; }
}

@media print {
  @page { size: A3 landscape; margin: 8mm; }
  html, body { height: auto; overflow: visible; background: #fff; }
  #app, #toasts { display: none !important; }
  #print-root { display: block; }
  #print-root svg { width: 100%; height: auto; }
}