:root{
    --navy:#1F3864; --navy2:#2E4E8C; --lightblue:#D9E1F2; --midblue:#8EA9DB;
    --yellow:#FFF2CC; --red:#C00000; --grey:#6b7280; --border:#d9d9d9; --bg:#f4f6fa;
  }
  *{box-sizing:border-box;}
  body{font-family:Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:#1a1a2e;}
  header{background:var(--navy);color:#fff;padding:14px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  header h1{font-size:17px;margin:0;font-weight:700;}
  header .sub{font-size:11.5px;opacity:.85;margin-top:2px;}
  .toprow{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-left:auto;}
  .toprow label{font-size:10.5px;opacity:.9;display:block;margin-bottom:2px;}
  .toprow input[type=text],.toprow input[type=date]{padding:6px 8px;border-radius:4px;border:none;font-size:12.5px;}
  button{cursor:pointer;font-family:inherit;}
  .btn{background:var(--navy2);color:#fff;border:none;padding:7px 12px;border-radius:5px;font-size:12.5px;font-weight:600;}
  .btn:hover{background:#3a5aa0;}
  .btn.primary{background:#2f9e44;}
  .btn.primary:hover{background:#37b350;}
  .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;}
  .btn.small{padding:4px 8px;font-size:12px;border-radius:4px;}
  .btn.danger{background:#c00000;}
  .modepill{font-size:10.5px;background:rgba(255,255,255,.15);padding:3px 9px;border-radius:10px;color:#fff;font-weight:600;}
  .tabs{display:flex;gap:2px;background:#e2e6ee;padding:0 24px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
  .tab{padding:11px 16px;font-size:12.5px;font-weight:600;color:#555;cursor:pointer;border-bottom:3px solid transparent;}
  .tab.active{color:var(--navy);border-bottom-color:var(--navy);background:#fff;}
  main{padding:20px 24px 60px;max-width:1400px;margin:0 auto;}
  main.wide{max-width:none;}
  .card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:18px;margin-bottom:18px;}
  .card h2{font-size:15px;margin:0 0 4px;color:var(--navy);}
  .card p.hint{font-size:12px;color:var(--grey);margin:0 0 14px;line-height:1.5;}
  table.editor{width:100%;border-collapse:collapse;font-size:12.5px;}
  table.editor th{text-align:left;background:var(--navy);color:#fff;padding:7px 8px;font-size:11px;font-weight:600;position:sticky;top:0;z-index:2;}
  table.editor td{padding:4px 6px;border-bottom:1px solid #eef0f4;vertical-align:middle;}
  table.editor tr:hover td{background:#f8f9fc;}
  table.editor tr.dragging{opacity:.35;}
  table.editor tr.draghandle-row td:first-child{cursor:grab;}
  table.editor input[type=text],table.editor input[type=number],table.editor select{
    width:100%;padding:4px 5px;border:1px solid var(--border);border-radius:4px;font-size:12px;font-family:inherit;
  }
  table.editor input[type=checkbox]{transform:scale(1.1);}
  .rowbtns{display:flex;gap:3px;white-space:nowrap;}
  .rowbtns button{background:#eef0f4;border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:11.5px;color:#333;}
  .rowbtns button:hover{background:#dde1ea;}
  .rowbtns button.del{color:#c00000;}
  .draghandle{cursor:grab;color:#aaa;font-size:14px;user-select:none;padding:0 4px;}
  .addrow-bar{margin-top:10px;}
  .tmpl-select-row{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
  .tmpl-select-row select{padding:7px 10px;border-radius:4px;border:1px solid var(--border);font-size:13px;min-width:220px;}
  .badge{display:inline-block;background:var(--lightblue);color:var(--navy);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .status{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#1a1a2e;color:#fff;padding:10px 20px;
    border-radius:6px;font-size:13px;box-shadow:0 4px 16px rgba(0,0,0,.25);display:none;z-index:50;max-width:600px;text-align:center;}
  .status.show{display:block;}
  .status.err{background:#7a1c1c;}
  .field-inline{display:flex;flex-direction:column;gap:4px;}
  .field-inline label{font-size:11.5px;font-weight:600;color:#444;}
  .overlap-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
  .overlap-grid select{width:100%;padding:8px;border-radius:5px;border:1px solid var(--border);font-size:13px;}
  .note-first{font-size:11px;color:var(--grey);font-style:italic;}
  footer{text-align:center;color:var(--grey);font-size:11.5px;padding:20px;}
  .oneoff-panel{background:#f8f9fc;border:1px dashed var(--border);border-radius:6px;padding:10px;margin:6px 0 10px;}
  .oneoff-row{display:flex;gap:6px;align-items:center;margin-bottom:5px;font-size:12px;}
  .oneoff-row input[type=text]{flex:1;padding:4px 6px;border:1px solid var(--border);border-radius:4px;}
  .oneoff-row input[type=number]{width:60px;padding:4px 6px;border:1px solid var(--border);border-radius:4px;}
  .toggle-oneoff{background:none;border:none;color:var(--navy2);font-size:11.5px;text-decoration:underline;cursor:pointer;padding:0;}
  .fp-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
  .fp-wrap{max-height:70vh;overflow:auto;border:1px solid var(--border);border-radius:6px;}
  .fp-wrap table.editor td, .fp-wrap table.editor th{white-space:nowrap;}
  .fp-wrap td.name-col{white-space:normal;min-width:220px;}
  tr.kind-section td{background:#1F3864;color:#fff;font-weight:700;}
  tr.kind-level td{background:#D9E1F2;font-weight:700;}
  tr.kind-zone td{background:#8EA9DB;color:#fff;font-weight:700;}
  /* These need to out-specificity the generic "table.editor tr:hover td" rule above, or hovering
     a section/level/zone header row washes it out to the plain hover grey (text becomes unreadable
     white-on-white). Keeping the row's own colour on hover, just slightly darkened, fixes it. */
  table.editor tr.kind-section:hover td{background:#28457d;color:#fff;}
  table.editor tr.kind-level:hover td{background:#cbd7ec;}
  table.editor tr.kind-zone:hover td{background:#7b98c9;color:#fff;}
  tr.kind-task.cycle td.datecell{color:#c00000;font-weight:700;}
  .empty-state{text-align:center;padding:40px 20px;color:var(--grey);}
  .empty-state .btn{margin:6px;}
  .gtimeline-hdr{position:relative;height:26px;}
  .gtick{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.25);padding-left:3px;font-size:10px;color:#cdd6e8;white-space:nowrap;}
  .gtrack{position:relative;height:22px;}
  .gbar{position:absolute;top:2px;height:16px;border-radius:2px;min-width:3px;}
  .gbar.kind-section{background:#C00000;}
  .gbar.kind-level{background:#1F3864;}
  .gbar.kind-zone{background:#4472C4;}
  .gbar.kind-task{background:#8EA9DB;}
  tr.kind-task[data-act="fpselect"]{cursor:pointer;}
  table.editor tr.dep-selected td{background:#fff3cd !important;box-shadow:inset 3px 0 0 #b8860b;}
  table.editor tr.dep-predecessor td{background:#ffe1d6 !important;box-shadow:inset 3px 0 0 #c0392b;}
  table.editor tr.dep-successor td{background:#d9f2e3 !important;box-shadow:inset 3px 0 0 #1f8a4c;}

/* ---- Improvements (undo/redo, filter, critical path, paste list) ---- */
.btn:disabled{opacity:.4;cursor:default;}
.gbar.kind-task.gbar-critical{background:#C00000;}
.fp-filter-row{display:flex;gap:8px;align-items:center;flex:1;min-width:300px;}
.fp-filter-row .badge{white-space:nowrap;}
.fp-paste-panel{position:absolute;right:0;top:100%;z-index:20;width:380px;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.15);padding:12px;margin-top:6px;}
.fp-paste-panel textarea{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:4px;font-family:inherit;font-size:12.5px;padding:6px;}
.fp-toolbar summary.btn{cursor:pointer;}
details#fpPasteWrap[open] summary{background:#dde1ea;}

/* ---- FS/SS link clarity ---- */
.link-fs{background:#D9E1F2 !important;border-color:#1F3864 !important;color:#1F3864 !important;font-weight:700;}
.link-ss{background:#D9F2E3 !important;border-color:#1f8a4c !important;color:#1f6b3d !important;font-weight:700;}
.legend-dot{display:inline-block;padding:0 6px;border-radius:4px;font-size:10.5px;font-weight:700;margin-left:8px;}
select.link-fs,.legend-dot.link-fs{background:#D9E1F2;color:#1F3864;}
select.link-ss,.legend-dot.link-ss{background:#D9F2E3;color:#1f6b3d;}
/* ---- Predecessor picker / broken links ---- */
input.pred-broken{background:#ffe1d6 !important;border-color:#c0392b !important;box-shadow:0 0 0 1px #c0392b;}
/* ---- Column visibility ---- */
th.col-hidden,td.col-hidden{display:none;}

/* ---- Summary & Scenarios ---- */
.summary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:14px;}
.summary-stats>div{background:#f8f9fc;border:1px solid var(--border);border-radius:6px;padding:8px 10px;}
.summary-stats span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--grey);margin-bottom:2px;}
.summary-stats b{font-size:12.5px;color:#1a1a2e;word-break:break-word;}
.scenario-compare{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.scenario-compare select{padding:6px 8px;border:1px solid var(--border);border-radius:4px;font-size:12.5px;}
@media print {
  header,.tabs,footer,.status,.no-print,.scenario-card,.fp-toolbar{display:none !important;}
  body{background:#fff;}
  main{max-width:none;padding:0;}
  .card{border:1px solid #ccc;box-shadow:none;page-break-inside:avoid;margin-bottom:12px;}
  table.editor th{background:#1F3864 !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  tr.kind-section td,tr.kind-level td,tr.kind-zone td,tr.kind-task td{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  /* Full programme: the table is normally inside a scroll box - let it flow across pages
     instead, landscape, with rows kept intact and the Gantt bars in colour. */
  @page{size:landscape;margin:10mm;}
  .fp-wrap{max-height:none;overflow:visible;border:none;}
  .fp-wrap table.editor{width:max-content;font-size:9px;}
  .fp-wrap tr{page-break-inside:avoid;}
  .fp-wrap thead th{position:static !important;page-break-after:avoid;}
  .fp-wrap .gbar{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}