:root{
  --bg:#f3f6fa; --paper:#fff; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --brand:#2563eb; --brand-2:#1d4ed8; --warn:#f59e0b; --bad:#dc2626; --ok:#059669;
  --sel:#fff6e5; --sel-border:#f59e0b; --row-even:#f8fafc; --chip:#eef2ff;
}
html,body{height:100%}
body{margin:0;background:var(--bg);font:13px/1.45 "Segoe UI",Arial,sans-serif;color:var(--ink)}
#app{max-width:1800px;margin:24px auto;padding:20px 24px;background:var(--paper);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.08)}
h2{margin:0 0 8px 0;font-size:16px}
label{font-weight:600;color:#2d3a4a}
input[type=text],input[type=date],input[type=number],select{
  height:26px;border:1px solid #b0b8c1;border-radius:4px;background:#f8fafc;padding:3px 6px;font:12px "Segoe UI",Arial
}
button{height:28px;border:none;border-radius:6px;background:var(--brand);color:#fff;padding:0 12px;cursor:pointer}
button:hover{background:var(--brand-2)}
.btn-gray{background:#e5e7eb;color:#111827}
.btn-gray:hover{background:#d1d5db}
.btn, .btn-gray{display:inline-flex;align-items:center;gap:6px}
.toolbar a.btn-gray{display:inline-flex;align-items:center;gap:6px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;margin-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.toolbar .spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#f3f4f6;border-radius:8px;padding:4px 8px;white-space:nowrap}

.table-scroll{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:auto}
table{border-collapse:separate;border-spacing:0;min-width:1400px;width:max-content;table-layout:fixed}
thead th{position:sticky;top:0;background:linear-gradient(#f7f9fe,#eaf1fb);z-index:5;font-weight:700}
th,td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 6px;white-space:nowrap;vertical-align:middle;overflow:hidden}
tbody tr:nth-child(even){background:var(--row-even)}
tbody tr.selected{background:var(--sel);box-shadow:inset 0 0 0 2px var(--sel-border)}

/* NEW: visual for "cut" rows (Ctrl+X not yet pasted) */
tbody tr.cutting{opacity:.45; filter:saturate(.7);}

td input, td select{
  border:none;background:transparent;height:22px;min-width:0;padding:0 2px;box-sizing:border-box;display:block
}
td input:focus,td select:focus{outline:1px solid var(--brand);background:#eaf4ff}

/* Manual vs auto date indicator (bold text only) */
.dateCol .date-wrap{position:relative; display:inline-block; width:100%}
.dateCol .date-wrap input[type=date]{width:100%; padding-right:2px}
.dateCol .date-wrap.manual input[type=date]{font-weight:400}
.dateCol .date-wrap.auto   input[type=date]{font-weight:400}

/* Prevent accidental text selection in grid cells (but allow in inputs) */
#gridBody{user-select:none}
#gridBody input,#gridBody select,#gridBody textarea{user-select:text}

.serialCol{width:68px;text-align:center;position:sticky;left:0;background:inherit;z-index:3}
.warnCol{width:32px;text-align:center}
.taskCol{min-width:260px}
.taskCol .wrap{display:flex;align-items:center;gap:4px}
.taskCol .wrap input{flex:1;min-width:60px;width:auto}
.statusCol{width:120px}
.percCol{width:70px;text-align:center}
.dateCol{width:130px}
.durationCol{width:90px}
.dependsCol{width:60px}
.abar{position:absolute;top:3px;height:12px;border-radius:6px;background:#f59e0b; z-index:3}

.serialGrip{display:flex;align-items:center;justify-content:center;gap:6px;cursor:grab;user-select:none}
.serialGrip:active{cursor:grabbing}

.indent-0 .taskName{font-weight:700}
.indent-gt0 .taskName{font-weight:700}
.indent-leaf .taskName{font-weight:400}
.pad{display:inline-block}

/* inline gantt column */
.timelineHead{position:sticky;top:0;background:#f3f4f6;border-left:1px solid var(--line);z-index:4;overflow:hidden}
.timelineCol{min-width:600px}
.ruler{position:relative;height:38px}
.ruler .mon{position:absolute;top:2px;font-size:12px;font-weight:700;color:#1f2937}
.ruler .day{position:absolute;top:20px;font-size:11px;color:#374151;transform:translateX(-50%)}
.ruler::after{content:"";position:absolute;top:0;bottom:0;width:var(--today-w,0px);background:rgba(255, 182, 193, .35);left:var(--today-x, -9999px);pointer-events:none}
.timeline{position:relative;height:18px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:6px}
.timeline::after{content:"";position:absolute;top:0;bottom:0;width:var(--today-w,0px);background:rgba(255, 182, 193, .35);left:var(--today-x, -9999px);pointer-events:none}
.tick{position:absolute;top:0;bottom:0;width:1px;background:#e5e7eb;z-index:1}
/* Increase contrast for non-working day shading and ensure it sits behind grid/bars */
.shade{position:absolute;top:0;bottom:0;background:rgba(17,24,39,.06) !important;z-index:0}
.bar{position:absolute;top:3px;height:12px;border-radius:6px;background:#b6d6ff;z-index:2}
.prog{position:absolute;top:3px;height:12px;border-radius:6px;background:#2563eb;opacity:.45;z-index:3}
.bar.parent{background:#e5e7eb;border:2px solid #2563eb;box-sizing:border-box}
.abar.parent{background:#e5e7eb;border:2px solid #f59e0b;box-sizing:border-box}

/* context menus */
.context{position:fixed;display:none;z-index:1000;background:#fff;border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.2);border-radius:8px;min-width:180px;overflow:hidden}
.context button{display:block;background:#fff;color:#111827;width:100%;text-align:left;border-radius:0;padding:8px 10px;border-bottom:1px solid #f1f5f9}
.context button:hover{background:#f3f4f6}
.hidden-col{display:none}

th.resizable{position:sticky}
.resize-handle{position:absolute;right:-3px;top:0;width:6px;height:100%;cursor:col-resize}

/* modals */
#teamModal,#paramsModal,#ganttModal,#allocModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:2000;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:12px;max-width:95vw;max-height:92vh;width:1200px;display:flex;flex-direction:column;box-shadow:0 12px 38px rgba(0,0,0,.25)}
.modal .head{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}
.modal .body{padding:10px 12px;overflow:auto}
.chip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #dbeafe;border-radius:999px;padding:4px 8px;white-space:nowrap}

/* Settings: Per-person Daily Hours table should size to content */
.modal .body .simple-table{ min-width:auto; width:auto; table-layout:auto; }
.modal .body .simple-table thead th{ position:static; background:#f8fafc; }
.modal .body .simple-table th:nth-child(1),
.modal .body .simple-table td:nth-child(1){ width:auto; max-width:260px; }
.modal .body .simple-table th:nth-child(2),
.modal .body .simple-table td:nth-child(2){ width:90px; text-align:center; }
.modal .body .simple-table th:nth-child(3),
.modal .body .simple-table td:nth-child(3){ width:110px; }

/* Mini brand link in Project bar */
.brand-mini{display:inline-flex;align-items:center;gap:6px;margin-right:10px;color:#1f2937;text-decoration:none;font-weight:800}
.brand-mini img{display:inline-block;width:50px;height:50px;border-radius:8px}
.brand-mini span{font-size:20px;line-height:1.1}
.brand-mini:hover{opacity:.9}

/* drag hint */
.drag-hint{
  position:fixed; z-index:2000; display:none;
  background:#111827; color:#fff; padding:3px 6px; border-radius:6px;
  font:11px "Segoe UI",Arial; pointer-events:none; opacity:.9;
}

/* fatal */
#fatal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:3000;align-items:center;justify-content:center}
#fatal .box{background:#fff;border-radius:12px;padding:16px 18px;max-width:520px}

/* minimalist pages (gantt.html/alloc.html) */
.page-wrap{max-width:1800px;margin:20px auto;background:#fff;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.08);padding:14px}
.page-head{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
.page-tools{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
#fullCanvas{overflow:auto;border:1px solid var(--line);border-radius:10px}
/* Context menus (shared across pages) */
.context{position:fixed;display:none;z-index:1000;background:#fff;border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.2);border-radius:8px;min-width:200px;overflow:hidden}
.context .ctx-title{padding:8px 10px;border-bottom:1px solid #f1f5f9;font-weight:700}
.context button{display:block;background:#fff;color:#111827;width:100%;text-align:left;border-radius:0;padding:8px 10px;border-bottom:1px solid #f1f5f9}
.context button:hover{background:#f3f4f6}
.context .danger{color:#b91c1c}
.context .ctx-foot{font-size:12px;color:#6b7280}
/* Settings modal tabs */
.settings-tabset{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.settings-tab-input{position:absolute;opacity:0;pointer-events:none}
.settings-tab-label{flex:0 0 auto;padding:6px 16px;border-radius:999px;border:1px solid var(--line);background:#f3f4f6;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s ease}
.settings-tab-label:hover{color:var(--ink)}
.settings-tab-input:checked + .settings-tab-label{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 6px rgba(37,99,235,.25)}
.settings-panel{display:none;flex:1 0 100%;padding:14px;border:1px solid var(--line);border-radius:10px;background:#f9fafb}
#settingsTabCalendar:checked ~ #settingsPanelCalendar,
#settingsTabHours:checked ~ #settingsPanelHours,
#settingsTabRoles:checked ~ #settingsPanelRoles,
#settingsTabConfig:checked ~ #settingsPanelConfig,
#settingsTabStorage:checked ~ #settingsPanelStorage{display:block}
.settings-panel > .section-title:first-child{margin-top:0}
.settings-panel label.row{display:block;margin:6px 0;font-weight:600}
.settings-panel label.row input{margin-right:8px}
.settings-panel div.row{display:flex;align-items:center;gap:10px;margin:10px 0}
.settings-panel div.row label{margin:0;font-weight:600}

/* Combined above for all tabs */