/* ProjectFlow Scheduler – P6-style desktop UI */
:root {
  --bg: #e9edf2; --panel: #f6f8fb; --line: #c9d1dc; --line2: #dde3eb; --text: #1d2733; --muted: #6b7685;
  --accent: #1f5fbf; --accent2: #3a7bd5; --sel: #cfe0fa; --focus: #b6d0f7; --crit: #e03b2f; --ok: #2f9e44;
  --toolbar: linear-gradient(#f9fbfd, #e3e9f1);
  --surface: #fff; --head: #eef1f6; --hover: #eef4fd; --on: #dbe7f8; --on-border: #9fbbe4; --viewbar: #f1f4f8; --status: #dfe5ed;
  --details: #f4f6fa; --tabs: #e8edf3; --tab: #dde4ed; --modal: #f7f9fc; --modalhead: linear-gradient(#e8eef6, #d9e2ee);
  --nav: linear-gradient(90deg, #dfe6ef, #e9eef4); --btn: linear-gradient(#fff, #edf1f6); --btn-border: #b4bfcd; --primary: linear-gradient(#3f80dc, #2563c4);
  --primary-border: #1f53a6; --input-border: #b9c3d0; --rowline: #eef0f4; --line-strong: #9aa9bd; --text2: #34445a; --band-text: #1d2733; --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 12px/1.35 var(--font); color: var(--text); background: var(--bg); display: flex; flex-direction: column; overflow: hidden; user-select: none; }
input, select, textarea, button { font: inherit; color: inherit; }
input, textarea, .notes { user-select: text; }
.boot { margin: auto; color: var(--muted); }
body.col-resize, body.col-resize * { cursor: col-resize !important; }
body.row-resize, body.row-resize * { cursor: row-resize !important; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 8px; background: var(--toolbar); border-bottom: 1px solid var(--line); min-height: 38px; }
.tb-group { display: flex; align-items: center; gap: 2px; padding-right: 10px; border-right: 1px solid var(--line2); }
.tb-group:last-child { border-right: 0; }
.brand { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-right: 8px; color: var(--text2); }
.logo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--primary); color: #fff; font-size: 10px; letter-spacing: .5px; }
.tb { border: 1px solid transparent; background: transparent; padding: 4px 7px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.tb:hover:not(:disabled) { background: var(--surface); border-color: var(--line); }
.tb.on { background: var(--on); border-color: var(--on-border); }
.tb:disabled { opacity: .4; cursor: default; }
.tbsel { height: 24px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); margin-left: 6px; }
.tbsearch { height: 24px; width: 170px; border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; margin-left: 4px; }

/* ---------- layout ---------- */
.main { flex: 1; display: flex; min-height: 0; }
.nav { width: 78px; background: var(--nav); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 6px 4px; gap: 2px; }
.navbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; font-size: 11px; color: var(--text2); }
.navbtn:hover { background: var(--surface); border-color: var(--line); }
.navbtn.on { background: var(--surface); border-color: var(--on-border); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.navbtn.dis { opacity: .35; cursor: default; }
.view { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--panel); }
.view-inner { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--viewbar); flex-wrap: wrap; }
.view-toolbar .sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.view-scroll { flex: 1; overflow: auto; min-height: 0; }
.view-scroll.pad { padding: 12px; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.strong { font-weight: 600; font-size: 13px; }
.status { display: flex; gap: 16px; align-items: center; padding: 3px 10px; border-top: 1px solid var(--line); background: var(--status); font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; }
.status .err { color: var(--crit); cursor: pointer; }
.status .saved { color: var(--text2); }
.status a { color: #9a5b00; }

/* ---------- buttons / inputs ---------- */
.btn { border: 1px solid var(--btn-border); background: var(--btn); padding: 4px 10px; border-radius: 3px; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--accent2); background: var(--surface); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--primary); color: #fff; border-color: var(--primary-border); }
.btn.primary:hover:not(:disabled) { background: var(--accent2); }
.btn.danger { color: #b3261e; }
.btn.danger.primary { background: #c62828; color: #fff; }
.btn.sm { padding: 1px 7px; font-size: 11px; }
input[type=text], input[type=number], input[type=date], input[type=search], input:not([type]), select, textarea { border: 1px solid var(--input-border); border-radius: 3px; padding: 3px 5px; background: var(--surface); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--accent2); }
input:disabled, select:disabled { background: var(--panel); color: var(--muted); }
.full { width: 100%; }

/* ---------- activities view ---------- */
.act-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.act-upper { flex: 1; display: flex; min-height: 0; }
.grid-pane { display: flex; flex-direction: column; min-width: 120px; border-right: 1px solid var(--line); background: var(--surface); }
.grid-head { height: 40px; overflow: hidden; background: var(--head); border-bottom: 1px solid var(--line); flex: none; }
.grid-head-inner { display: flex; height: 100%; }
.hcell { position: relative; flex: none; padding: 2px 6px; border-right: 1px solid var(--line2); display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 11px; color: var(--text2); cursor: pointer; overflow: hidden; line-height: 1.15; }
.hcell span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hcell.right { justify-content: flex-end; text-align: right; }
.hcell:hover { background: var(--hover); }
.hcell .sort { font-style: normal; font-size: 9px; color: var(--accent); }
.hcell .rz { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
.grid-body { flex: 1; overflow: scroll; position: relative; outline: none; }
.spacer { position: relative; }
.grid-rows { position: absolute; left: 0; top: 0; }
.row { position: absolute; left: 0; display: flex; white-space: nowrap; border-bottom: 1px solid var(--rowline); }
.row .cell { flex: none; padding: 0 5px; line-height: 21px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--rowline); }
.row .cell.right { text-align: right; }
.row .cell.neg { color: var(--crit); font-weight: 600; }
.row.band { font-weight: 600; border-bottom-color: rgba(0,0,0,.08); }
.row.band .cell { border-right-color: transparent; }
.row.band .tog { display: inline-block; width: 14px; cursor: pointer; color: var(--text2); }
.row.band .cnt { font-weight: 400; color: var(--text2); }
.row.crit .cell:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.row.sel { background: var(--sel); }
.row.focus { background: var(--focus); }
.row:not(.band):hover { background: var(--hover); }
.row.sel:hover { background: var(--sel); }
.aicon { display: inline-block; width: 13px; height: 8px; margin-right: 5px; vertical-align: 0; border: 1px solid var(--g-rem-e, #1f4f99); background: var(--g-rem, #3a7bd5); border-radius: 1px; }
.aicon.crit { background: var(--g-crit, #e03b2f); border-color: var(--g-crit-e, #9b1d14); }
.aicon.done { background: var(--g-act, #2f9e44); border-color: var(--g-act-e, #1d6b2c); }
.aicon.prog { background: linear-gradient(90deg, var(--g-act, #2f9e44) 50%, var(--g-rem, #3a7bd5) 50%); }
.aicon.prog.crit { background: linear-gradient(90deg, var(--g-act, #2f9e44) 50%, var(--g-crit, #e03b2f) 50%); }
.aicon.loe { background: var(--g-loe, #8a6fcf); border-color: var(--g-loe-e, #5b44a0); }
.aicon.ms { width: 9px; height: 9px; transform: rotate(45deg); background: var(--g-ms, #1d2733); border-color: var(--g-ms, #1d2733); margin: 0 7px 0 3px; }
.aicon.ms.crit { background: var(--g-crit, #e03b2f); border-color: var(--g-crit, #e03b2f); }
.aicon.ms.done { background: var(--g-act, #2f9e44); border-color: var(--g-act, #2f9e44); }
.cell-editor { position: absolute; z-index: 5; border: 2px solid var(--accent) !important; border-radius: 0 !important; padding: 0 4px !important; background: var(--surface); }
.vsplit { width: 5px; cursor: col-resize; background: var(--status); border-right: 1px solid var(--line); flex: none; }
.vsplit:hover, .hsplit:hover { background: var(--on-border); }
.hsplit { height: 5px; cursor: row-resize; background: var(--status); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex: none; }
.gantt-pane { flex: 1; position: relative; min-width: 100px; display: flex; flex-direction: column; background: var(--surface); overflow: hidden; }
.gantt-head { display: block; height: 40px; border-bottom: 1px solid var(--line); flex: none; }
.gantt-body { flex: 1; overflow: scroll; position: relative; }
.gantt-canvas { position: absolute; left: 0; pointer-events: none; }

/* ---------- details ---------- */
.details { background: var(--details); display: flex; flex-direction: column; min-height: 0; flex: none; }
.tabs { display: flex; align-items: flex-end; gap: 2px; padding: 4px 8px 0; border-bottom: 1px solid var(--line); background: var(--tabs); }
.tab { border: 1px solid var(--line); border-bottom: 0; background: var(--tab); padding: 4px 12px; border-radius: 4px 4px 0 0; cursor: pointer; }
.tab.on { background: var(--details); font-weight: 600; position: relative; top: 1px; }
.tabs-title { margin-left: auto; padding: 0 6px 5px; color: var(--text2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.tab-body { flex: 1; overflow: auto; padding: 10px 12px; }
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 8px 16px; }
.dgrid.three { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.dcol { display: flex; flex-direction: column; gap: 6px; }
.dcol h4 { margin: 0 0 2px; font-size: 11px; text-transform: uppercase; color: var(--text2); letter-spacing: .4px; }
.dfield { display: flex; flex-direction: column; gap: 2px; }
.dfield.wide { grid-column: span 2; }
.dfield > span { font-size: 11px; color: var(--text2); }
.dfield.check { flex-direction: row; align-items: center; gap: 6px; }
.dtable { border-collapse: collapse; width: 100%; background: var(--surface); }
.dtable th { text-align: left; background: var(--head); font-weight: 600; padding: 3px 6px; border: 1px solid var(--line2); font-size: 11px; }
.dtable td { padding: 2px 6px; border: 1px solid var(--line2); }
.dtable td.r { text-align: right; }
.dtable tr.crit td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.dtable input { width: 90px; }
.dtable a { color: var(--accent); }
.dtable .pass { color: var(--ok); font-weight: 700; }
.dtable .fail { color: var(--crit); font-weight: 700; }
.mini { border-collapse: collapse; }
.mini th, .mini td { padding: 2px 8px; text-align: left; border-bottom: 1px solid var(--line2); }
.dtoolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.relwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.notes { width: 100%; height: 100%; min-height: 120px; resize: none; }
.empty { color: var(--muted); padding: 18px; text-align: center; }
.empty.big { margin: 80px auto; font-size: 14px; }

/* ---------- tables in other views ---------- */
.tbl { border-collapse: collapse; width: 100%; background: var(--surface); }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--head); text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line2); font-size: 11px; }
.tbl td { padding: 3px 8px; border-bottom: 1px solid var(--rowline); border-right: 1px solid var(--rowline); white-space: nowrap; }
.tbl td.r { text-align: right; }
.tbl td.neg { color: var(--crit); font-weight: 600; }
.tbl tr.sel td { background: var(--sel) !important; }
.tbl tr.open td:first-child { font-weight: 700; }
.tbl tr.total td { font-weight: 700; background: var(--panel); }
.tbl tr.epsrow td { background: var(--on); }
.tbl tr.projrow:hover td, .tbl tr.wbsrow:hover td { background: var(--hover); cursor: default; }
.tbl tr.band0 td { background: #a9bfdf; }
.tbl.edit input { padding: 1px 4px; }
.ico { display: inline-block; width: 14px; height: 11px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.ico.eps { background: #e9c46a; border: 1px solid #b08a2e; }
.ico.proj { background: #3a7bd5; border: 1px solid #1f4f99; }
.split-v { flex: 1; display: grid; grid-template-rows: minmax(120px, 1fr) minmax(220px, 40%); min-height: 0; }
.hist { border-top: 1px solid var(--line); padding: 8px 10px; background: var(--surface); overflow: hidden; }
.hist-title { font-weight: 600; margin-bottom: 6px; color: var(--text2); }

/* calendars */
.cal-wrap { flex: 1; display: flex; min-height: 0; }
.cal-list { width: 260px; border-right: 1px solid var(--line); overflow: auto; background: var(--surface); }
.cal-item { padding: 8px 10px; border-bottom: 1px solid var(--line2); cursor: pointer; }
.cal-item.sel { background: var(--sel); }
.cal-item .tag { margin-left: 6px; font-size: 10px; background: var(--accent); color: #fff; padding: 0 5px; border-radius: 8px; }
.cal-edit { flex: 1; overflow: auto; padding: 12px 16px; }
.cal-edit h4 { margin: 14px 0 6px; font-size: 12px; color: var(--text2); }
.week { display: flex; gap: 6px; }
.wd { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.wd.on { background: var(--on); border-color: var(--on-border); }
.months .mnav { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mrow { display: flex; gap: 18px; flex-wrap: wrap; }
.month { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 6px; }
.month .mt { text-align: center; font-weight: 600; margin-bottom: 4px; }
.mgrid { display: grid; grid-template-columns: repeat(7, 26px); gap: 2px; text-align: center; }
.mgrid b { font-size: 10px; color: var(--muted); }
.mgrid .d { cursor: pointer; border-radius: 3px; padding: 2px 0; }
.mgrid .d.w { background: var(--hover); }
.mgrid .d.nw { background: #dcdfe4; color: #6d7480; }
.mgrid .d.hol { background: #f6c6c1; color: #8c1d14; font-weight: 600; }
.mgrid .d:hover { outline: 1px solid #3a7bd5; }
.hol-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.chip { background: #f6c6c1; color: #6e1a12; padding: 1px 6px; border-radius: 10px; font-size: 11px; }
.chip b { cursor: pointer; margin-left: 4px; }

/* tracking */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; box-shadow: inset 4px 0 0 var(--on-border); }
.kpi.good { box-shadow: inset 4px 0 0 var(--ok); }
.kpi.bad { box-shadow: inset 4px 0 0 var(--crit); }
.kpi.warn { box-shadow: inset 4px 0 0 #e6a700; }
.kpi .kl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.kpi .kv { font-size: 20px; font-weight: 600; margin: 2px 0; font-variant-numeric: tabular-nums; }
.kpi .ks { font-size: 11px; color: var(--text2); }
.chart-box { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(20, 30, 45, .35); display: grid; place-items: center; z-index: 100; }
.modal { background: var(--modal); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.3); max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--modalhead); border-bottom: 1px solid var(--line); font-weight: 600; border-radius: 6px 6px 0 0; cursor: move; }
.modal-head .x { border: 0; background: none; font-size: 18px; cursor: pointer; line-height: 1; color: var(--text2); }
.modal-body { padding: 14px; overflow: auto; }
.modal-body .pre { white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; user-select: text; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field > span { font-size: 11px; color: var(--text2); }
.field.wide { grid-column: span 2; }
.field.check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 6px; grid-column: span 2; }
.form-section { grid-column: span 2; color: var(--text2); font-size: 11px; border-top: 1px solid var(--line2); padding-top: 6px; }
.picklist { height: 300px; overflow: auto; border: 1px solid var(--line); background: var(--surface); margin: 8px 0; }
.pick { padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.pick:hover { background: var(--hover); }
.pick.on { background: var(--sel); }
.row-flex { display: flex; gap: 16px; align-items: center; }
.cols-dlg { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.collist { width: 100%; height: 320px; }
.cols-mid { display: flex; flex-direction: column; gap: 6px; }

/* ---------- context menu / toast ---------- */
.ctx { position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 6px 18px rgba(0,0,0,.2); padding: 3px 0; min-width: 220px; border-radius: 4px; }
.ctx .item { display: flex; justify-content: space-between; gap: 20px; padding: 5px 14px; cursor: pointer; }
.ctx .item:hover { background: var(--hover); }
.ctx .item.dis { color: var(--muted); cursor: default; background: none; }
.ctx kbd { font: inherit; color: var(--muted); }
.ctx .sep { height: 1px; background: var(--line2); margin: 3px 0; }
#toasts { position: fixed; right: 16px; bottom: 34px; display: flex; flex-direction: column; gap: 6px; z-index: 300; }
.toast { background: #24364f; color: #fff; padding: 8px 14px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.25); max-width: 460px; transition: opacity .3s, transform .3s; }
.toast.error { background: #b3261e; }
.toast.warn { background: #9a6700; }
.toast.out { opacity: 0; transform: translateY(6px); }

/* ---------- printing ---------- */
#printArea { display: none; }
@media print {
  body { display: block; overflow: visible; background: #fff; }
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing #printArea { display: block; }
  .ppage { box-shadow: none !important; margin: 0 !important; }
}
body.printing #printArea { display: block; }
.ppage { box-sizing: border-box; background: #fff; color: #111; overflow: hidden; display: flex; flex-direction: column; page-break-after: always; break-after: page; font-family: var(--font); }
.ppage:last-child { page-break-after: auto; break-after: auto; }
.phdr { display: grid; flex: none; margin-bottom: 1.5mm; }
.phdr.bordered { border: 1px solid #333; }
.phdr.bordered .pcell + .pcell { border-left: 1px solid #333; }
.pcell { display: flex; align-items: center; padding: 1mm 2mm; overflow: hidden; min-width: 0; }
.ptitle { width: 100%; line-height: 1.25; }
.ptitle div { white-space: pre-wrap; }
.pinfo { font-size: 8pt; line-height: 1.35; }
.ptext { white-space: pre-wrap; width: 100%; }
.plogo-ph { border: 1px dashed #aab; color: #99a; font-size: 7pt; display: grid; place-items: center; }
.pbody2 { flex: none; overflow: hidden; }
.pftr { display: grid; flex: none; margin-top: 1.5mm; }
.pftr.bordered { border: 1px solid #333; }
.pftr.bordered .pfcell + .pfcell { border-left: 1px solid #333; }
.pfcell { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.pftitle { font-weight: 700; padding: 0.6mm 1.5mm; border-bottom: 1px solid #333; background: #eef1f5; }
.pftr:not(.bordered) .pftitle { border-bottom-color: #999; }
.pftext { white-space: pre-wrap; padding: 0.8mm 1.5mm; flex: 1; }
.pline { flex: none; display: flex; justify-content: space-between; align-items: flex-end; font-size: 7pt; color: #555; }
.pbody { display: flex; align-items: flex-start; border: 1px solid #9aa9bd; }
.ptable { border-collapse: collapse; table-layout: fixed; }
.ptable th { background: #eaeef4; font-size: 0.95em; border: 1px solid #c9d1dc; padding: 1px 3px; text-align: left; overflow: hidden; line-height: 1.1; }
.ptable td { border-bottom: 1px solid #e6e9ee; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptable td.r { text-align: right; }
.ptable tr.pband td { font-weight: 700; }
.ptable tr.pcrit td:first-child { box-shadow: inset 2px 0 0 #e03b2f; }
.pgantt { border-left: 1px solid #9aa9bd; }
.pgantt canvas { display: block; }
.plegend { display: flex; gap: 18px; margin-top: 1mm; font-size: 7.5pt; align-items: center; }
.plegend i { display: inline-block; width: 18px; height: 7px; margin-right: 4px; vertical-align: 0; }
/* page setup dialog */
.psetup { display: grid; grid-template-columns: 560px 1fr; gap: 14px; }
.psetup-panel { max-height: 560px; overflow: auto; padding: 10px 2px; }
.tabs.flat { background: none; padding: 0; }
.psetup-right { min-width: 0; }
.psetup-preview { background: #8d98a8; padding: 10px; border-radius: 4px; min-height: 300px; display: flex; justify-content: center; align-items: flex-start; }
.pv-holder { overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.logo-box { display: flex; gap: 10px; border: 1px solid var(--line2); border-radius: 4px; padding: 8px; background: var(--surface); }
.logo-thumb { width: 120px; height: 70px; display: grid; place-items: center; background: repeating-conic-gradient(#f1f3f6 0 25%, #fff 0 50%) 0 0 / 12px 12px; border: 1px solid var(--line2); }
.logo-thumb img { max-width: 116px; max-height: 66px; }
.logo-ctl { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.logo-ctl .row-flex .field { width: 120px; }
.small { font-size: 11px; }
.dtable.wide, .wide .dtable { margin-top: 4px; }
.form-grid > .wide { grid-column: span 2; }
.form-grid > .muted.small { line-height: 1.4; }
.codes-dlg { display: grid; grid-template-columns: 220px 1fr; gap: 12px; min-height: 340px; }
.codes-types { border-right: 1px solid var(--line2); padding-right: 10px; max-height: 460px; overflow: auto; }
.codes-values { max-height: 460px; overflow: auto; }
.codes-values input[type=color] { width: 40px; height: 22px; padding: 0; border: 1px solid var(--line); }
.dgrid.four { grid-template-columns: minmax(170px,1fr) minmax(170px,1fr) minmax(200px,1fr) minmax(230px,1.2fr); }
.dcol .row-flex { gap: 8px; }
/* reports */
.rhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 10pt; border-bottom: 1.5px solid #24364f; padding-bottom: 1mm; margin-bottom: 2mm; }
.rhead b { font-size: 12pt; }
.rkpis { display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 1.5mm; margin-bottom: 2mm; }
.rkpi { border: 1px solid #c4ccd8; border-left: 3px solid #9fbbe4; padding: 0.8mm 2mm; }
.rkpi.good { border-left-color: #2f9e44; } .rkpi.bad { border-left-color: #e03b2f; }
.rkpi .kl { font-size: 6.5pt; color: #5b6675; text-transform: uppercase; }
.rkpi .kv { font-size: 11pt; font-weight: 700; }
.rkpi .ks { font-size: 6.5pt; color: #4e5d70; }
.rsec { margin-bottom: 2mm; }
.rtitle { font-weight: 700; font-size: 9pt; color: #1f3a63; border-bottom: 1px solid #9fb2cc; margin-bottom: 1mm; padding-bottom: 0.5mm; }
.rtable { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 7.5pt; }
.rtable th { background: #e3e9f2; border: 1px solid #b8c3d2; padding: 0.5mm 1.5mm; text-align: left; font-size: 7pt; }
.rtable th.r, .rtable td.r { text-align: right; }
.rtable td { border: 1px solid #dfe4eb; padding: 0 1.5mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtable tr.rcrit td:first-child { box-shadow: inset 2px 0 0 #e03b2f; }
.rnone { color: #6b7685; font-size: 8pt; padding: 1mm 0; }
.rnotes { white-space: pre-wrap; font-size: 8.5pt; border: 1px solid #c4ccd8; padding: 2mm; }
.rkpi { min-height: 12.5mm; overflow: hidden; }
.chart-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 12px; }
.load-tbl { background: var(--surface); border: 1px solid var(--line); border-top: 0; overflow: auto; }
.load-tbl .tbl th { white-space: nowrap; }
.load-tbl .tbl tr.over td { background: #fde8e6; }
.load-act th.grp { text-align: center; }
.load-act th.grp.labor { background: var(--on); } .load-act th.grp.equip { background: #fbe3cf; } .load-act th.grp.material { background: #dcefd9; }
.load-act td.tot, .load-act th.tot { background: var(--panel); font-weight: 600; }
.tbl.phased td, .tbl.phased th { padding: 3px 6px; font-variant-numeric: tabular-nums; }
.rtable tr.rtot td { font-weight: 700; background: #f0f3f7; }
.tbl.daily td { vertical-align: middle; }
.tbl.daily tr.crit td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.crew { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.crew-i { display: inline-flex; align-items: center; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; font-size: 11px; }
.crew-i input { width: 48px; padding: 1px 3px; }
.tag.done { margin-left: 6px; font-size: 10px; background: var(--ok); color: #fff; padding: 0 5px; border-radius: 8px; }
.daily-tot { margin: 8px 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.daily-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.daily-notes textarea { width: 100%; }
.net-wrap { flex: 1; position: relative; min-height: 0; }
.net-body { position: absolute; inset: 0; overflow: auto; }
.net-canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 10px; }
.mini { border: 1px solid var(--line2); border-radius: 4px; padding: 4px 6px; }
.mini-t { font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.pbar { position: relative; height: 12px; background: var(--head); border-radius: 3px; overflow: hidden; }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; }
.pbar i.plan { background: #f2d67a; } .pbar i.act { background: #2f9e44; height: 6px; top: 3px; }

/* ---- server (multi-user) ---- */
.srv-panel { margin: 8px 8px 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.srv-panel .srv-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.srv-panel .srv-head .grow { flex: 1; }
.srv-panel table.srv { width: 100%; background: var(--surface); }
.srv-panel table.srv tr:hover td { background: var(--hover); }
.cloud { color: var(--accent); font-weight: 600; }
.status .srv-st { cursor: pointer; padding: 0 6px; border-radius: 3px; }
.status .srv-st.on { background: #d9f2df; color: #1d6b2f; }
.status .srv-st.off { background: #fde2e1; color: #9b1c1c; }

/* ---- themes ---- */
.row.band, .row.band .cnt, .row.band .tog, .tbl tr.wbsrow td, .tbl tr.band0 td { color: var(--band-text); }
body.dark input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.85); }
body.dark ::-webkit-scrollbar { width: 11px; height: 11px; background: var(--panel); }
body.dark ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid var(--panel); }
.theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.theme-card { border: 2px solid var(--line); border-radius: 6px; padding: 4px; cursor: pointer; background: var(--surface); text-align: center; font-size: 11px; }
.theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--on-border); }
.theme-card .sw { height: 34px; border-radius: 3px; display: grid; grid-template-columns: 1fr 2fr; overflow: hidden; margin-bottom: 3px; border: 1px solid rgba(0,0,0,.12); }
.theme-card .sw i { display: block; }
.color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.color-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.color-row input[type=color] { width: 42px; height: 24px; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; }
.color-row span { flex: 1; }
.color-row button { padding: 0 6px; }
.gantt-preview { border: 1px solid var(--line); border-radius: 4px; margin: 8px 0; display: block; }
.tone-row { display: flex; gap: 6px; margin: 4px 0 10px; }

/* ---- documents & photos ---- */
.att-panel { padding: 6px 2px; border: 2px dashed transparent; border-radius: 6px; }
.att-panel.drop { border-color: var(--accent); background: var(--hover); }
.att-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.att-grid.compact { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.att-empty { padding: 10px; }
.att-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.att-card input { width: 100%; font-size: 11px; }
.att-thumb { position: relative; height: 120px; border-radius: 4px; background: var(--head); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.att-ico { font-size: 44px; }
.att-cloud { position: absolute; right: 4px; top: 2px; font-size: 16px; }
.att-name { font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-link { color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-btns { display: flex; gap: 4px; }
.att-group { margin: 14px 4px 4px; font-size: 13px; }
.docs-body { padding: 8px 12px; }
.lightbox { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 8px; justify-content: center; }
.lb-cap { text-align: center; color: var(--text2); }
.photo-page { display: grid; gap: 3mm; margin-top: 2mm; }
.photo-cell { border: 1px solid #c4ccd8; display: flex; flex-direction: column; overflow: hidden; }
.photo-img { flex: 1; background: #f3f5f8 center / contain no-repeat; min-height: 0; }
.photo-cap { font-size: 7.5pt; padding: 1mm 1.5mm; border-top: 1px solid #c4ccd8; background: #fff; color: #111; }
.daily-photos { margin-top: 12px; }

/* ---------- Dashboard (Power BI / IBCS style) ---------- */
:root { --dz-ac: #2f3d52; --dz-pl: #7d8796; --dz-pl-area: #e0a800; --dz-good: #1f9d55; --dz-bad: #e0393e; --dz-warn: #e6a700; --dz-c1: #4c8fe0; --dz-c2: #2a63b8;
  --dz-done: #2f9e60; --dz-prog: #3b82c4; --dz-ns: #c7cfda; --dz-card: var(--surface); --dz-bg: var(--panel); --dz-zebra: rgba(120, 140, 170, .07); }
.dz-body { padding: 14px 16px 30px; background: var(--dz-bg); }
.dash { display: flex; flex-direction: column; gap: 14px; color: var(--text); max-width: 1700px; margin: 0 auto; }
.dz-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 10px; color: #fff; background: var(--primary); box-shadow: 0 2px 8px rgba(20, 40, 80, .15); }
.dz-proj { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.dz-sub { opacity: .88; margin-top: 2px; }
.dz-badge { padding: 6px 12px; border-radius: 20px; font-weight: 600; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); white-space: nowrap; }
.dz-badge.bad { background: rgba(224, 57, 62, .85); } .dz-badge.warn { background: rgba(230, 167, 0, .85); } .dz-badge.good { background: rgba(31, 157, 85, .85); }
.dz-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.dz-kpi { background: var(--dz-card); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(20, 40, 80, .06); }
.dz-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--dz-c1); }
.dz-kpi.good::before { background: var(--dz-good); } .dz-kpi.bad::before { background: var(--dz-bad); } .dz-kpi.warn::before { background: var(--dz-warn); }
.dz-kl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; gap: 6px; }
.dz-ki { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--hover); color: var(--accent); font-size: 12px; text-transform: none; }
.dz-kv { font-size: 24px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.dz-kpi.good .dz-kv { color: var(--dz-good); } .dz-kpi.bad .dz-kv { color: var(--dz-bad); }
.dz-ks { font-size: 11px; color: var(--text2); }
.dz-card { background: var(--dz-card); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px 10px; box-shadow: 0 1px 3px rgba(20, 40, 80, .06); min-width: 0; }
.dz-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--text2); }
.dz-grid2 { display: grid; gap: 14px; } .dz-g13 { grid-template-columns: minmax(260px, 1fr) 3fr; } .dz-g11 { grid-template-columns: 1.15fr 1fr; }
.dz-grid3 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr 1.4fr; }
.dz-one .dz-g13, .dz-one .dz-g11, .dz-one .dz-grid3 { grid-template-columns: 1fr; }
.dz-butt { stroke-linecap: butt; }
.dz-print .dz-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dz-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dz-t { fill: var(--text); font-size: 12px; font-family: var(--font); } .dz-s { font-size: 11px; } .dz-b { font-weight: 700; }
.dz-h { fill: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; font-family: var(--font); }
.dz-muted { fill: var(--muted); } .dz-big { fill: var(--text); font-size: 26px; font-weight: 700; font-family: var(--font); } .dz-huge { fill: var(--text); font-size: 34px; font-weight: 800; font-family: var(--font); }
.dz-axis-line { stroke: var(--line-strong); fill: var(--line-strong); stroke-width: 1; } .dz-grid { stroke: var(--line2); stroke-width: 1; } .dz-grid-v { stroke-dasharray: 2 4; }
.dz-zebra { fill: var(--dz-zebra); } .dz-total-line { stroke: var(--text); stroke-width: 1.2; }
.dz-ac { fill: var(--dz-ac); } .dz-pl { fill: var(--dz-card); stroke: var(--dz-pl); stroke-width: 1.4; } .dz-fc { stroke: var(--dz-ac); stroke-width: 1; } .dz-fc-bg { fill: var(--dz-card); } .dz-fc-line { stroke: var(--dz-ac); stroke-width: 2.2; }
.dz-pos { fill: var(--dz-good); } .dz-neg { fill: var(--dz-bad); } .dz-pos-s { stroke: var(--dz-good); } .dz-neg-s { stroke: var(--dz-bad); } .dz-pin { stroke-width: 2.5; }
.dz-now { fill: var(--hover); }
.dz-row:hover .dz-zebra, .dz-row:hover > rect.dz-now { fill: var(--on); }
.dz-line-pl { fill: none; stroke: var(--dz-pl-area); stroke-width: 2.5; } .dz-line-ac { fill: none; stroke: var(--dz-actual, #1f9d55); stroke-width: 3.2; stroke-linejoin: round; } .dz-line-fc { fill: none; stroke: var(--dz-forecast, var(--dz-c1)); stroke-width: 2.2; stroke-dasharray: 7 5; }
.dz-dd { stroke: var(--dz-dd, var(--accent)); stroke-width: 1.4; stroke-dasharray: 4 3; } .dz-pl-dot { fill: var(--dz-pl-area); stroke: var(--dz-card); stroke-width: 2; } .dz-ac-dot { fill: var(--dz-actual, #1f9d55); stroke: var(--dz-card); stroke-width: 2; }
.dz-good-t { fill: var(--dz-actual, #1f9d55); } .dz-pl-t { fill: var(--dz-pl-area); filter: brightness(.8); }
.dz-slice { stroke: var(--dz-card); stroke-width: 2; transition: opacity .15s; } .dz-slice:hover { opacity: .8; } .dz-empty-ring { fill: none; stroke: var(--line2); }
.dz-gauge-bg { stroke: var(--line2); stroke-linecap: round; } .dz-gauge { stroke-linecap: round; } .dz-gauge-good { stroke: var(--dz-good); } .dz-gauge-bad { stroke: var(--dz-warn); } .dz-gauge-plan { stroke: var(--dz-ac); stroke-width: 3.5; stroke-linecap: round; }
.dz-mp-past { fill: var(--dz-pl); opacity: .55; }
.dz-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dz-gauge-wrap .dz-svg { max-width: 320px; }
.dz-mini { display: grid; gap: 4px; width: 100%; max-width: 260px; } .dz-mini > div { display: flex; align-items: center; gap: 8px; } .dz-mini b { margin-left: auto; }
.dz-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .c-done { background: var(--dz-done); } .c-prog { background: var(--dz-prog); } .c-ns { background: var(--dz-ns); }
.dz-ok { padding: 30px 10px; text-align: center; color: var(--dz-good); font-weight: 600; font-size: 14px; }
.dz-legend { font-weight: 400; }
.dz-prog-list { display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow: auto; padding-right: 4px; }
.dz-prog-item { border-bottom: 1px solid var(--line2); padding-bottom: 9px; }
.dz-pi-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dz-pi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-pi-pct { font-weight: 800; font-size: 14px; } .dz-pi-pct.good, .dz-pi-pct.done { color: var(--dz-good); } .dz-pi-pct.warn { color: #b98600; } .dz-pi-pct.bad { color: var(--dz-bad); }
.dz-pbar { position: relative; height: 9px; border-radius: 6px; background: var(--line2); margin: 5px 0 3px; overflow: visible; }
.dz-pfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--dz-c1), var(--dz-c2)); }
.dz-pfill.done, .dz-pfill.good { background: linear-gradient(90deg, #45c07a, var(--dz-good)); } .dz-pfill.warn { background: linear-gradient(90deg, #f3c444, var(--dz-warn)); } .dz-pfill.bad { background: linear-gradient(90deg, #f07a7d, var(--dz-bad)); }
.dz-pplan { position: absolute; top: -3px; bottom: -3px; width: 2.5px; margin-left: -1px; background: var(--dz-ac); border-radius: 2px; }
.dz-pi-photos { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.dz-ph { width: 74px; height: 56px; border-radius: 6px; background: var(--line2) center / cover no-repeat; cursor: pointer; position: relative; flex: none; display: grid; place-items: center; color: var(--muted); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: transform .15s; }
.dz-ph:hover { transform: scale(1.04); }
.dz-ph.big { width: auto; height: 150px; border-radius: 8px; }
.dz-ph-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); border-radius: 0 0 8px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dz-nophoto { grid-column: 1 / -1; text-align: center; padding: 40px 10px; color: var(--muted); display: grid; gap: 8px; justify-items: center; } .dz-nophoto > div:first-child { font-size: 34px; }
.dz-more { color: var(--muted); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-left: 6px; } .seg .tb { border-radius: 0; }
/* entry animation */
.dz-animate .dz-grow { transform-box: fill-box; transform-origin: left center; animation: dzgx .7s cubic-bezier(.2, .7, .2, 1); }
.dz-animate .dz-grow-r { transform-origin: right center; }
.dz-animate .dz-grow-v { transform-box: fill-box; transform-origin: center bottom; animation: dzgy .7s cubic-bezier(.2, .7, .2, 1); }
.dz-animate .dz-draw { stroke-dasharray: 3000; stroke-dashoffset: 0; animation: dzdraw 1.2s ease-out; }
.dz-animate .dz-gauge { stroke-dasharray: 400; animation: dzgauge 1s ease-out; }
.dz-animate .dz-card, .dz-animate .dz-kpi { animation: dzfade .45s ease-out; }
@keyframes dzgx { from { transform: scaleX(0); } } @keyframes dzgy { from { transform: scaleY(0); } }
@keyframes dzdraw { from { stroke-dashoffset: 3000; } } @keyframes dzgauge { from { stroke-dashoffset: 400; } } @keyframes dzfade { from { opacity: 0; transform: translateY(6px); } }
/* print: always light */
.dz-measure { position: absolute; left: -10000px; top: 0; }
.dz-print, .ppage .dash { --surface: #fff; --dz-card: #fff; --dz-bg: #fff; --text: #1d2733; --text2: #34445a; --muted: #6b7685; --line2: #dde3eb; --line-strong: #9aa9bd; --hover: #eef4fd; --on: #dbe7f8; --accent: #1f5fbf; --dz-ac: #2f3d52; font-size: 11px; gap: 10px; max-width: none; }
.dz-print .dz-card, .dz-print .dz-kpi { box-shadow: none; break-inside: avoid; }
.dz-print .dz-prog-list { max-height: none; overflow: visible; }
.dz-print .dz-title { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ppage .dash * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dz-dd-t { fill: var(--dz-dd, var(--accent)); }
body.dark .dash { --dz-ac: #d3dceb; --dz-pl: #8a97aa; --dz-zebra: rgba(255, 255, 255, .035); --dz-ns: #4a5566; --dz-c1: #5aa0f0; --dz-c2: #2f72d0; }
body.dark .dz-pl-t { fill: #f0c040; }
body.dark .dash.dz-print, body.dark .ppage .dash, body .dash.dz-print { --surface: #fff; --dz-card: #fff; --dz-bg: #fff; --text: #1d2733; --text2: #34445a; --muted: #6b7685; --line2: #dde3eb; --line-strong: #9aa9bd; --hover: #eef4fd; --on: #dbe7f8; --accent: #1f5fbf; --dz-ac: #2f3d52; --dz-pl: #7d8796; --dz-ns: #c7cfda; --dz-zebra: rgba(120, 140, 170, .07); }
.uizoom { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; }
.uizoom select { height: 20px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); font-size: 11px; padding: 0 2px; }
.uizoom .zbtn { width: 20px; height: 20px; line-height: 16px; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--btn); cursor: pointer; font-weight: 700; }

/* ---------- animated dashboard presentation ---------- */
.dp-overlay { position: fixed; inset: 0; z-index: 95; background: #070d18; display: flex; flex-direction: column; color: #e6edf7; }
.dp-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px; }
.dp-canvas { max-width: 100%; max-height: 100%; aspect-ratio: 16 / 9; width: auto; height: 100%; border-radius: 10px; box-shadow: 0 8px 40px rgba(0, 0, 0, .55); }
.dp-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #0e1828; border-top: 1px solid #1f2d44; flex-wrap: wrap; }
.dp-btn { background: #1b2a42; color: #e6edf7; border: 1px solid #2c3f5e; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 13px; }
.dp-btn:hover { background: #24395a; } .dp-btn.big { font-size: 16px; padding: 4px 14px; background: #2a6fd6; border-color: #3d82e8; }
.dp-btn.rec { background: #5a1d26; border-color: #8a2a36; } .recording .dp-btn.rec { background: #d6283c; animation: dpblink 1s infinite; }
@keyframes dpblink { 50% { opacity: .65; } }
.dp-reclbl { color: #ff5a64; font-weight: 700; min-width: 90px; }
.dp-seek { flex: 1; min-width: 160px; accent-color: #4c9dff; }
.dp-time { font-variant-numeric: tabular-nums; color: #93a4bd; min-width: 92px; }
.dp-lbl { color: #93a4bd; display: inline-flex; align-items: center; gap: 4px; }
.dp-speeds { display: inline-flex; border: 1px solid #2c3f5e; border-radius: 6px; overflow: hidden; }
.dp-sp { background: #13203a; color: #c7d3e6; border: 0; padding: 5px 10px; cursor: pointer; border-right: 1px solid #2c3f5e; } .dp-sp:last-child { border-right: 0; }
.dp-sp.on { background: #2a6fd6; color: #fff; font-weight: 700; }
.dp-pages { display: flex; gap: 6px; padding: 0 14px 10px; background: #0e1828; flex-wrap: wrap; max-height: 70px; overflow-y: auto; }
.dp-pg { background: transparent; color: #93a4bd; border: 1px solid #23334d; border-radius: 14px; padding: 3px 12px; cursor: pointer; }
.dp-pg.on { background: #1d3150; color: #fff; border-color: #4c9dff; }
.dp-music .dp-mrow { display: flex; align-items: center; gap: 6px; padding: 5px 0; }
.dp-music .dp-mbtns { display: flex; gap: 8px; margin: 10px 0; }

/* drag & drop with the mouse */
.drag-ghost { position: fixed; z-index: 500; pointer-events: none; background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.25); white-space: nowrap; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.row.drop-target { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--on) !important; }
tr.drop-into > td { background: var(--on) !important; box-shadow: inset 0 0 0 2px var(--accent); }
tr.drop-before > td { box-shadow: inset 0 3px 0 var(--accent); }
tr.wbsrow[draggable="true"] { cursor: grab; }

/* in-place cell editing */
.cell-edit { width: 100%; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 2px; padding: 2px 4px; font: inherit; background: var(--surface); color: var(--text); outline: none; }

/* generic table mouse behaviour */
tr.g-rowsel > td { background-image: linear-gradient(var(--hover), var(--hover)); }
td.g-cellsel { outline: 2px solid var(--accent); outline-offset: -2px; }
th.g-rz { cursor: col-resize; }
table.tbl th, table.dtable th { position: relative; }
th.g-asc::after { content: ' ▲'; font-size: 9px; color: var(--accent); }
th.g-desc::after { content: ' ▼'; font-size: 9px; color: var(--accent); }

/* assign several resources at once */
.asg-list { max-height: 380px; overflow: auto; border: 1px solid var(--line2); border-radius: 4px; }
.asg-tbl { width: 100%; }
.asg-tbl th { position: sticky; top: 0; background: var(--head); z-index: 1; }
.asg-row { cursor: pointer; }
.asg-row:hover td { background: var(--hover); }
.asg-row.on td { background: var(--on); }
.asg-dlg .tag { margin-left: 6px; font-size: 10px; padding: 0 5px; border-radius: 8px; background: var(--hover); color: var(--accent); }

/* chart colours dialog */
.cc-dlg { max-height: 62vh; overflow: auto; }
.cc-group { border: 1px solid var(--line2); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.cc-title { grid-column: 1 / -1; font-weight: 700; color: var(--text2); margin-bottom: 2px; }
.cc-item { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cc-item input[type=color] { width: 34px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; }
.cc-item.set span { font-weight: 600; }
.cc-reset { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; }

/* ---------- Manual Resource Loading (type in table) ---------- */
.ml-wrap { background: var(--surface); border: 1px solid var(--line); overflow: auto; max-height: 70vh; }
.ml-tbl { border-collapse: separate; border-spacing: 0; }
.ml-tbl th { white-space: nowrap; position: sticky; top: 0; z-index: 3; }
.ml-tbl th.ml-per { min-width: 64px; font-size: 11px; }
.ml-tbl td { white-space: nowrap; }
.ml-tbl .ml-sticky { position: sticky; background: var(--surface); z-index: 2; }
.ml-tbl th.ml-sticky { z-index: 4; background: var(--head, #eef2f7); }
.ml-tbl .ml-c0 { left: 0; min-width: 90px; }
.ml-tbl .ml-c1 { left: 90px; min-width: 200px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; border-right: 2px solid var(--line); }
.ml-tbl td.ml-cell { padding: 0 !important; }
.ml-tbl input.ml-in { width: 100%; min-width: 56px; box-sizing: border-box; border: 0; background: transparent; text-align: right; padding: 4px 6px; font: inherit; color: inherit; border-radius: 0; }
.ml-tbl input.ml-in.has { background: rgba(59, 130, 196, .12); font-weight: 600; }
.ml-tbl input.ml-in:focus { outline: 2px solid var(--accent, #3b82c4); outline-offset: -2px; background: #fff8d6; color: #1d2733; }
.ml-tbl td.ml-max input.ml-in { color: #c0392b; }
.ml-tbl td.ml-stat { color: var(--muted, #5b6675); }
.ml-tbl tr.ml-group td { background: #dbe5f1; font-weight: 700; color: #1d2733; }
.ml-tbl tr.ml-total td { font-weight: 700; background: #f2f5f9; color: #1d2733; }
.ml-tbl tr.ml-grand td { background: #e6edf6; }
body.dark .ml-tbl tr.ml-group td { background: #2a3a52; color: #e8eef6; }
body.dark .ml-tbl tr.ml-total td { background: #222c3a; color: #e8eef6; }
body.dark .ml-tbl input.ml-in:focus { background: #3a3520; color: #fff; }

/* ---------- Dashboard pad controls (chart type, weekly/monthly, settings) ---------- */
.dz-ctls { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; font-weight: 400; }
.dz-card-h .tbsel.dz-ctl { font-size: 11.5px; padding: 2px 4px; height: 24px; max-width: 210px; }
.dz-gear { min-width: 26px; padding: 1px 6px !important; font-size: 13px; line-height: 1.2; }
.dz-print .dz-ctls, .dz-print .dz-gear, .dz-print .dz-ctl { display: none !important; }

/* ---------- Font settings dialog ---------- */
.fnt-dlg { display: flex; flex-direction: column; gap: 12px; }
.fnt-sec { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.fnt-sec.focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(58, 123, 213, .15); }
.fnt-title { font-weight: 700; margin-bottom: 8px; }
.fnt-grid { display: grid; grid-template-columns: 1.4fr .6fr 1.6fr; gap: 8px 14px; align-items: end; }
.fnt-grid > label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--text2); }
.fnt-grid > label:nth-child(4) { grid-column: 1 / -1; }
.fnt-col { display: inline-flex; align-items: center; gap: 6px; }
.fnt-col input[type=color] { width: 40px; height: 24px; padding: 0; border: 1px solid var(--line); }
.fnt-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: var(--text); }
.fnt-sample { margin-top: 8px; padding: 6px 8px; border: 1px dashed var(--line); border-radius: 6px; background: var(--surface); white-space: nowrap; overflow: hidden; }
.res-empty { margin: 8px 12px; padding: 8px 12px; background: #fff7e0; border: 1px solid #f0d58a; border-radius: 6px; color: #5a4a10; }
body.dark .res-empty { background: #3a3320; border-color: #6b5a26; color: #f0e3b5; }
/* P6-style WBS colour strips at the left of the Activities table */
.row .wbs-gut { flex: none; display: flex; height: 100%; align-self: stretch; }
.row .wbs-gut i { flex: none; width: 12px; height: 100%; display: block; box-shadow: inset -1px 0 0 rgba(0,0,0,.12); }
.row.sel .wbs-gut i, .row.focus .wbs-gut i { filter: none; }

/* ---------- calendar pop-up for Start / Finish in the Activities table ---------- */
.dpk { position: fixed; z-index: 120; width: 300px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong, #9aa9bd); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 10px; outline: none; font-size: 12px; }
.dpk-head { display: flex; gap: 6px; margin-bottom: 6px; }
.dpk-f, .dpk-dur { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.dpk-dur { cursor: default; background: transparent; }
.dpk-f small, .dpk-dur small { color: var(--muted); font-size: 10.5px; }
.dpk-f.on { border-color: var(--accent, #3b82c4); box-shadow: 0 0 0 2px rgba(59,130,196,.25); }
.dpk-hint { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.dpk-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0; }
.dpk-btn { border: 0; background: transparent; color: var(--text); font-size: 16px; width: 28px; height: 26px; border-radius: 6px; cursor: pointer; }
.dpk-btn:hover { background: var(--hover); }
.dpk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dpk-wd { text-align: center; font-size: 10.5px; color: var(--muted); padding: 3px 0; }
.dpk-d { height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; font: inherit; position: relative; }
.dpk-d:hover { background: var(--hover); }
.dpk-d.out { opacity: .38; }
.dpk-d.nw { color: #c0392b; background: rgba(192,57,43,.06); }
.dpk-d.in { background: rgba(59,130,196,.16); border-radius: 0; }
.dpk-d.sel { background: var(--accent, #3b82c4); color: #fff; font-weight: 700; }
.dpk-d.today::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.dpk-d.dd { box-shadow: inset 0 0 0 1.5px #1f5fbf; }
.dpk-foot { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.dpk-foot .grow { flex: 1; }

/* baris tabel Aktivitas yang tingginya menyesuaikan teks (otomatis) */
.act-view .grid-rows .row.wrap .cell { white-space: normal !important; line-height: 1.3 !important; display: flex; align-items: center; overflow: hidden; word-break: break-word; }
.act-view .grid-rows .row.wrap .cell.right { justify-content: flex-end; text-align: right; }
.act-view .grid-rows .row.wrap .cell .aicon { flex: none; }
.act-view .grid-rows .row.wrap .wbs-gut { align-self: stretch; }

/* resizable dialogs (drag the bottom-right corner) */
.modal.resizable { resize: both; overflow: hidden; min-width: 420px; min-height: 260px; max-width: 98vw; max-height: 96vh; }
.modal.resizable .modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modal.resizable .modal-body > .asg-dlg { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modal.resizable .asg-list { flex: 1; min-height: 120px; max-height: none; }
.modal.resizable::after { content: ''; position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; pointer-events: none;
  background: linear-gradient(135deg, transparent 50%, var(--line-strong) 50%, var(--line-strong) 60%, transparent 60%, transparent 72%, var(--line-strong) 72%, var(--line-strong) 82%, transparent 82%); }
.modal.resizable { position: relative; }

/* switchable chart pad (Cost, Tracking) */
.cpad-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cpad-head .hist-title { margin: 0; }
.cpad-body { min-height: 120px; }

/* quantity cells with a calculation (Pasang Biaya / Expense tab) */
.qty-fx { text-align: right; } .qty-fx.has-fx { background-image: linear-gradient(135deg, var(--accent, #2a6fd6) 0 6px, transparent 6px); } .qty-fx.bad { outline: 2px solid #e0393e; }

/* ===== Biaya Aktual / Arus Kas: Excel-like grid, date slicer, recap ===== */
.ac-body { padding: 12px 14px 24px; display: flex; flex-direction: column; gap: 12px; }
.ac-kpis { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.ac-note { padding: 2px 4px; }
.ac-setl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-left: 10px; }
.ac-set { height: 24px; width: 170px; border: 1px solid var(--input-border); border-radius: 3px; padding: 0 6px; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--text); }
.ac-set.sm { width: 60px; }
.ac-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.ac-tabs .tb { border-radius: 6px 6px 0 0; padding: 6px 14px; }
.ac-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-tools .muted.small { max-width: 900px; line-height: 1.35; }
.ac-tablewrap { overflow: auto; max-height: 520px; border: 1px solid var(--line2); border-radius: 8px; }
.ac-recap td.num, .ac-recap th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ac-recap td.pos { color: #1b7f45; } .ac-recap td.neg { color: var(--crit); }
.ac-recap tr.now td { background: #fff7db; }
.ac-recap tr.tot td { font-weight: 700; background: var(--panel); position: sticky; bottom: 0; border-top: 2px solid var(--line-strong); }
body.dark .ac-recap tr.now td { background: #3a3420; }
.cf-t th.grp { text-align: right; } .cf-t th.grp.in { background: #e3f4ea; } .cf-t th.grp.out { background: #fbe6e5; } .cf-t th.grp.bal { background: #e4ecfa; }
body.dark .cf-t th.grp.in, body.dark .cf-t th.grp.out, body.dark .cf-t th.grp.bal { background: var(--head); }
.ac-bars, .ac-wbs { display: flex; flex-direction: column; gap: 7px; }
.ac-bar, .ac-wrow { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.ac-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-bt, .ac-wt { height: 14px; background: var(--dz-zebra, #eef1f6); border-radius: 3px; position: relative; overflow: hidden; }
.ac-bt i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dz-c1, #4c8fe0); border-radius: 3px; }
.ac-wt i { position: absolute; left: 0; border-radius: 2px; }
.ac-wt i.b { top: 0; bottom: 0; background: #c9d6ea; }
.ac-wt i.a { top: 3px; bottom: 3px; background: var(--dz-ac, #2f3d52); }
.ac-wt i.a.over { background: var(--dz-bad, #e0393e); }
.ac-bv { font-variant-numeric: tabular-nums; color: var(--text2); white-space: nowrap; }
.ac-absbox { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.ac-abs-l { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.ac-abs-t { height: 12px; border-radius: 6px; background: var(--dz-zebra, #eef1f6); overflow: hidden; }
.ac-abs-t i { display: block; height: 100%; border-radius: 6px; }
.ac-cpi { font-size: 13px; padding: 6px 8px; border-radius: 6px; background: var(--panel); }
.ac-cpi.good b { color: #1b7f45; } .ac-cpi.bad b { color: var(--crit); }
.dz-sec-title { font-weight: 700; font-size: 14px; color: var(--text2); padding: 6px 2px 0; border-top: 2px solid var(--line2); margin-top: 4px; }
.cf-svg { display: block; }
.cf-svg .cf-grid { stroke: var(--line2); stroke-width: 1; }
.cf-svg .cf-zero { stroke: var(--line-strong); stroke-width: 1.4; }
.cf-svg .cf-now { stroke: #e0a800; stroke-width: 1.5; stroke-dasharray: 4 3; }
.cf-svg .cf-ax { font-size: 10.5px; fill: var(--muted); }
.cf-svg .cf-val { font-size: 12px; font-weight: 700; }
.cf-svg g:hover rect { opacity: .82; }

/* Excel-like grid */
.xlg { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); outline: none; min-height: 220px; }
.xlg:focus-within { border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(58, 123, 213, .15); }
.xlg-bar { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px solid var(--line2); background: var(--panel); border-radius: 6px 6px 0 0; }
.xlg-name { width: 92px; height: 24px; border: 1px solid var(--input-border); border-radius: 3px; text-align: center; font-weight: 600; background: var(--surface); color: var(--text); }
.xlg-fxl { font-style: italic; font-weight: 700; color: var(--muted); font-family: Georgia, serif; padding: 0 2px; }
.xlg-fx { flex: 1; height: 24px; border: 1px solid var(--input-border); border-radius: 3px; padding: 0 8px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; background: var(--surface); color: var(--text); }
.xlg-scroll { overflow: auto; max-height: 560px; position: relative; }
.xlg-t { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12.5px; user-select: none; }
.xlg-t th { background: var(--head); color: var(--muted); font-weight: 500; font-size: 11px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: 2px 4px; position: sticky; z-index: 2; }
.xlg-letters th { top: 0; text-align: center; height: 22px; box-sizing: border-box; padding: 0 4px; cursor: s-resize; }
.xlg-head th { top: 22px; }
.xlg-head th.xlg-h { color: var(--text); font-weight: 700; font-size: 12px; text-align: left; padding: 5px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xlg-head th.xlg-h.num { text-align: right; }
.xlg-t th.xlg-rn { left: 0; z-index: 3; text-align: center; cursor: e-resize; }
.xlg-t th.xlg-corner { left: 0; z-index: 4; cursor: pointer; }
.xlg-t thead th.xlg-rn, .xlg-t thead th.xlg-corner { z-index: 5; }
.xlg-t th.hl { background: #d5e3f7; color: var(--accent); font-weight: 700; }
body.dark .xlg-t th.hl { background: #2a3d5c; }
.xlg-t td.xlg-c { border-right: 1px solid var(--rowline); border-bottom: 1px solid var(--rowline); padding: 0 6px; height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; cursor: cell; }
.xlg-t td.num { text-align: right; font-variant-numeric: tabular-nums; }
.xlg-t td.fx { color: #1d4f9a; }
body.dark .xlg-t td.fx { color: #8fb7f5; }
.xlg-t td.auto { color: var(--muted); font-style: italic; }
.xlg-t td.err { color: var(--crit); font-weight: 700; }
.xlg-t td.sel { background: rgba(58, 123, 213, .12); }
.xlg-t td.cur { outline: 2px solid var(--accent2); outline-offset: -2px; background: var(--surface); }
.xlg-t td.xr { background: rgba(46, 160, 90, .16); box-shadow: inset 0 0 0 1px rgba(46, 160, 90, .7); }
.xlg-t td.fillp { background: rgba(58, 123, 213, .07); box-shadow: inset 0 0 0 1px rgba(58, 123, 213, .5); }
.xlg-t td.cutm { background-image: repeating-linear-gradient(90deg, var(--accent2) 0 4px, transparent 4px 8px); background-size: 100% 1px; background-repeat: no-repeat; }
.xlg-t td.editing { padding: 0; overflow: visible; outline: 2px solid var(--accent2); outline-offset: -2px; z-index: 1; }
.xlg-ed { width: 100%; height: 100%; min-width: 100%; border: none; outline: none; padding: 0 5px; font: inherit; background: var(--surface); color: var(--text); box-sizing: border-box; }
.xlg-fill { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; background: var(--accent2); border: 1px solid #fff; cursor: crosshair; z-index: 2; }
.xlg-new td.xlg-c { background: repeating-linear-gradient(0deg, transparent 0 23px, var(--rowline) 23px 24px); }
.xlg-t tfoot td { position: sticky; bottom: 0; background: var(--panel); font-weight: 700; border-top: 2px solid var(--line-strong); height: 26px; padding: 0 6px; z-index: 2; }
.xlg-t tfoot th { bottom: 0; }

/* date slicer */
.dsl { background: var(--surface); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 12px 6px; user-select: none; }
.dsl-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 6px; }
.dsl-top .btn.sm { padding: 2px 8px; }
.dsl-track { position: relative; height: 46px; margin: 0 8px 18px; background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; touch-action: none; cursor: grab; }
.dsl.dragging .dsl-track { cursor: grabbing; }
.dsl-spark { position: absolute; inset: 3px 0; pointer-events: none; }
.dsl-spark svg { width: 100%; height: 100%; display: block; }
.dsl-spark rect.pos { fill: #2f9e60; opacity: .55; } .dsl-spark rect.neg { fill: #e0393e; opacity: .45; }
.dsl-band { position: absolute; top: -1px; bottom: -1px; background: rgba(58, 123, 213, .16); border: 2px solid var(--accent2); border-radius: 6px; cursor: grab; }
.dsl-h { position: absolute; top: 50%; width: 14px; height: 34px; margin: -17px 0 0 -7px; background: var(--surface); border: 2px solid var(--accent2); border-radius: 5px; cursor: ew-resize; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); z-index: 2; }
.dsl-h::after { content: ''; position: absolute; left: 3px; right: 3px; top: 11px; bottom: 11px; border-left: 2px solid var(--accent2); border-right: 2px solid var(--accent2); }
.dsl-h:focus { outline: 3px solid rgba(58, 123, 213, .35); }
.dsl-dd { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed #e0a800; pointer-events: none; }
.dsl-ticks { position: absolute; left: 0; right: 0; bottom: -18px; height: 16px; pointer-events: none; }
.dsl-tick { position: absolute; top: 0; font-size: 10.5px; color: var(--muted); transform: translateX(2px); white-space: nowrap; border-left: 1px solid var(--line-strong); padding-left: 3px; height: 14px; }
.dsl-tick.minor { border-left-color: var(--line2); }

/* calendar of date cells */
.xlg-cal { position: fixed; z-index: 3000; width: 292px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 35, 60, .22); padding: 8px; user-select: none; color: var(--text); }
.xlg-cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.xlg-cal-sel { height: 26px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--surface); color: var(--text); font-size: 12.5px; flex: 1; min-width: 0; }
.xlg-cal-nav { width: 28px; height: 26px; border: 1px solid var(--line2); border-radius: 5px; background: var(--panel); color: var(--text); font-size: 17px; line-height: 1; cursor: pointer; }
.xlg-cal-nav:hover { background: var(--hover); }
.xlg-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.xlg-cal-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted); padding: 3px 0; }
.xlg-cal-dow.we { color: #c0392b; }
.xlg-cal-d { height: 30px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); font-size: 12.5px; cursor: pointer; font-variant-numeric: tabular-nums; }
.xlg-cal-d.we { color: #c0392b; }
.xlg-cal-d:hover { background: var(--hover); border-color: var(--on-border); }
.xlg-cal-d.today { border-color: var(--accent2); font-weight: 700; }
.xlg-cal-d.dd { box-shadow: inset 0 -3px 0 #e0a800; }
.xlg-cal-d.on { background: var(--accent2); color: #fff; font-weight: 700; }
.xlg-cal-foot { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line2); }
.xlg-cal-foot .btn.sm { padding: 2px 8px; }
.xlg-t td.date { padding-right: 18px; }
.xlg-t td.date.cur::after { content: '📅'; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); font-size: 11px; opacity: .7; pointer-events: none; }

/* documents of a cost row */
.xlg-t td.btncell { padding: 0 3px; cursor: default; }
.xlg-btn { width: 100%; height: 20px; border: 1px dashed var(--line-strong); border-radius: 4px; background: none; color: var(--muted); font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.xlg-btn:hover { border-style: solid; border-color: var(--accent2); color: var(--accent); background: var(--hover); }
.xlg-btn.on { border-style: solid; border-color: #9fc6a8; background: #e9f6ec; color: #1b6b35; font-weight: 600; }
body.dark .xlg-btn.on { background: #1f3a29; color: #9fe0b2; border-color: #2f6b45; }
.acd { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.acd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; }
.acd-amt { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acd-tools { display: flex; align-items: center; gap: 10px; }
.acd-drop { border: 2px dashed var(--line2); border-radius: 10px; padding: 8px; min-height: 150px; max-height: 50vh; overflow: auto; }
.acd-drop.over { border-color: var(--accent2); background: rgba(58, 123, 213, .07); }
.acd-empty { text-align: center; padding: 22px 10px; color: var(--text2); }
.acd-big { font-size: 34px; opacity: .5; }
.acd-list { display: flex; flex-direction: column; gap: 6px; }
.acd-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); }
.acd-thumb { width: 52px; height: 52px; border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; overflow: hidden; padding: 0; }
.acd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acd-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.acd-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acd-ok { color: #1b7f45; font-weight: 600; } .acd-wait { color: #b07800; font-weight: 600; }
.acd-acts { display: flex; gap: 4px; }
.acd-status { padding: 2px 2px 0; }

/* sticky notes on every page */
.pn-layer { position: fixed; z-index: 60; pointer-events: none; overflow: hidden; }
.pn { position: absolute; pointer-events: auto; background: var(--pn, #fff3a8); color: #2b2a22; border-radius: 6px; box-shadow: 0 6px 18px rgba(30, 30, 10, .22), 0 1px 2px rgba(0, 0, 0, .15); display: flex; flex-direction: column; min-width: 160px; border: 1px solid rgba(0, 0, 0, .12); }
.pn-head { display: flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 6px; cursor: grab; border-bottom: 1px solid rgba(0, 0, 0, .08); background: rgba(0, 0, 0, .04); border-radius: 6px 6px 0 0; touch-action: none; user-select: none; }
body.pn-dragging, body.pn-dragging .pn-head { cursor: grabbing !important; user-select: none; }
.pn-grip { color: rgba(0, 0, 0, .35); font-size: 13px; }
.pn-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 2px; }
.pn-b { border: none; background: none; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 12px; color: #4a4636; }
.pn-b:hover { background: rgba(0, 0, 0, .09); }
.pn-text { border: none; background: transparent; resize: none; padding: 7px 9px; font: 13px/1.45 var(--font); color: #2b2a22; outline: none; min-height: 40px; }
.pn-meta { font-size: 10px; color: rgba(0, 0, 0, .45); padding: 0 9px 5px; }
.pn-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .25) 58%, transparent 58%, transparent 70%, rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, .25) 78%, transparent 78%); border-radius: 0 0 6px 0; }
.pn.folded .pn-text, .pn.folded .pn-meta, .pn.folded .pn-resize { display: none; }
.pn.folded .pn-head { border-bottom: none; border-radius: 6px; }
.pn:focus-within { box-shadow: 0 8px 24px rgba(30, 30, 10, .3), 0 0 0 2px rgba(58, 123, 213, .5); }
.pn-st { cursor: pointer; padding: 1px 8px; border-radius: 10px; border: 1px solid transparent; }
.pn-st:hover { border-color: var(--line-strong); background: var(--surface); }
.pn-st.has { background: #fff3a8; color: #4a4020; border-color: #e3cf5a; font-weight: 600; }
@media print { .pn-layer { display: none; } }

/* progress history bar (Activities) */
.ph-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px 4px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ph-left { display: flex; flex-direction: column; line-height: 1.2; min-width: 120px; }
.ph-empty { display: flex; align-items: center; gap: 10px; width: 100%; }
.ph-track { position: relative; flex: 1 1 380px; min-width: 240px; height: 40px; margin: 0 36px; cursor: pointer; touch-action: none; outline: none; border-radius: 6px; }
.ph-track:focus-visible { box-shadow: 0 0 0 2px rgba(58, 123, 213, .4); }
.ph-line { position: absolute; left: 0; right: 0; top: 24px; height: 4px; border-radius: 2px; background: var(--line2); }
.ph-dot { position: absolute; top: 20px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent2); }
.ph-dot.ed { border-color: #b07800; }
.ph-dot.on { background: var(--accent2); }
.ph-dd { position: absolute; top: 14px; height: 24px; border-left: 2px dashed #e0a800; }
.ph-knob { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; }
.ph-knob span { display: inline-block; background: var(--accent2); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; white-space: nowrap; }
.ph-sum { min-width: 200px; line-height: 1.3; }
.ph-sum b { font-size: 15px; }
.ph-acts { display: flex; gap: 4px; }
.ph-hint { width: 100%; padding-left: 2px; }
.ph-bar.dash { flex: none; flex-direction: row; align-items: center; height: auto; min-height: 0; border: 1px solid var(--line2); border-radius: 10px; margin: 8px 14px 0; background: var(--surface); }
.ph-bar.dash.asof { border-color: #e0a800; background: #fffbea; }
body.dark .ph-bar.dash.asof { background: #3a3420; }
.ph-dot.now { border-color: #e0a800; width: 14px; height: 14px; margin-left: -7px; top: 19px; }
.ph-dot.now.on { background: #e0a800; }
.ph-host { flex: none; }
.ph-bar.asof:not(.dash) { background: #fffbea; border-bottom-color: #e0a800; }
body.dark .ph-bar.asof:not(.dash) { background: #3a3420; }
.ph-tick { position: absolute; top: 31px; transform: translateX(-50%); font-size: 9.5px; color: var(--muted); white-space: nowrap; pointer-events: none; }
.ph-track { height: 46px; }
.ph-warn { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 10px; background: #fff4e0; border-bottom: 1px solid #e8b04a; color: #6b4a00; font-size: 12.5px; }
.ph-warn.dash { margin: 6px 14px 0; border: 1px solid #e8b04a; border-radius: 8px; }
body.dark .ph-warn { background: #3a2f1a; color: #f0d9a6; }

/* ---- desktop login gate (approved laptop) ---- */
.devgate { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(1200px 600px at 30% 20%, #2b4f7a 0%, #16263b 60%, #0e1826 100%); overflow: auto; }
.dg-card { width: 420px; max-width: 100%; background: #fff; color: #1f2a37; border-radius: 14px; padding: 26px 28px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 10px; }
.dg-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.dg-logo i { font-style: normal; font-weight: 800; color: #fff; background: #1f5fa8; border-radius: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.dg-logo b { display: block; font-size: 19px; }
.dg-logo span { color: #5b6878; font-size: 13px; }
.dg-msg { display: none; font-size: 12.5px; border-radius: 8px; padding: 8px 10px; background: #eef3f9; color: #22415f; }
.dg-msg.show { display: block; }
.dg-msg.warn { background: #fff4e0; color: #6b4a00; }
.dg-msg.err { background: #fdecec; color: #8a1f1f; }
.dg-lb { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #4a5767; font-weight: 600; }
.dg-in { box-sizing: border-box; height: 36px; font: inherit; font-size: 14px; font-weight: 400; padding: 8px 10px; border: 1px solid #c9d3df; border-radius: 8px; color: #1f2a37; background: #fff; }
.dg-in:focus { outline: 2px solid #8bb4e6; border-color: #1f5fa8; }
.dg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.dg-go { min-width: 110px; }
.dg-note { font-size: 11.5px; color: #6b7785; margin: 4px 0 0; }
.dg-dev { font-size: 11.5px; color: #6b7785; border-top: 1px solid #e6ebf1; padding-top: 8px; margin-top: 2px; }
.dg-pend p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.dg-sa { border: 1px solid #e0e6ee; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.dg-sa summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: #1f5fa8; }
.dg-sa[open] { gap: 8px; }
.dg-sa[open] summary { margin-bottom: 6px; }
.dev-alert { background: #fff4e0; border: 1px solid #e8b04a; color: #6b4a00; border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; font-weight: 600; }
.dev-dlg td .muted { font-size: 11px; }

/* ---- searchable drop-down in sheet cells (e.g. Cost ID) ---- */
.xlg-c.combo { position: relative; padding-right: 18px !important; }
.xlg-dd { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 15px; height: 17px; line-height: 17px; text-align: center; font-size: 11px; color: var(--muted); border-radius: 3px; cursor: pointer; }
.xlg-dd:hover { background: var(--hover); color: var(--text); }
.xlg-c.combo.editing .xlg-dd { display: none; }
.xlg-combo { position: fixed; z-index: 3000; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 10px 30px rgba(20, 35, 60, .22); color: var(--text); font-size: 12.5px; overflow: hidden; }
.xlg-combo-head { padding: 6px 10px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line2); background: var(--panel); }
.xlg-combo-list { max-height: 280px; overflow-y: auto; padding: 3px 0; }
.xlg-combo-it { display: grid; grid-template-columns: 96px 1fr; column-gap: 10px; row-gap: 1px; align-items: baseline; padding: 5px 10px; cursor: pointer; }
.xlg-combo-it b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xlg-combo-it .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xlg-combo-it .sub { grid-column: 2; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xlg-combo-it:hover { background: var(--hover); }
.xlg-combo-it.hi { background: #dbe8f8; }
body.dark .xlg-combo-it.hi { background: #2b4364; }
.xlg-combo-it.cur b { color: #1f5fa8; }
.xlg-combo-empty { padding: 10px; color: var(--muted); }

/* ---- intermittent activity dialog ---- */
.imt-dlg { display: flex; flex-direction: column; gap: 8px; }
.imt-on { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.imt-off { padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }
.imt-bar { gap: 8px; align-items: center; flex-wrap: wrap; }
.imt-scroll { max-height: 340px; overflow: auto; border: 1px solid var(--line2); border-radius: 6px; }
.imt-tbl { width: 100%; margin: 0; }
.imt-tbl th { position: sticky; top: 0; z-index: 1; }
.imt-tbl td.imt-d { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.imt-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; padding: 6px 2px; }
.imt-prev { position: relative; height: 16px; margin: 2px 0 4px; background: var(--panel); border-radius: 4px; }
.imt-seg { position: absolute; top: 2px; bottom: 2px; background: #3b78d8; border: 1px solid #1f4f99; border-radius: 2px; box-sizing: border-box; }
.imt-gap { position: absolute; top: 50%; height: 0; border-top: 2px dashed #7f93ad; }

/* ---- search drop-down (daily report: manpower / equipment) ---- */
.spk { position: fixed; z-index: 3000; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 10px 30px rgba(20, 35, 60, .22); color: var(--text); font-size: 12.5px; overflow: hidden; display: flex; flex-direction: column; }
.spk-q { margin: 8px; padding: 6px 9px; border: 1px solid var(--input-border); border-radius: 6px; font: inherit; background: var(--surface); color: var(--text); }
.spk-list { max-height: 300px; overflow-y: auto; padding-bottom: 4px; }
.spk-it { display: grid; grid-template-columns: 82px 1fr auto; gap: 8px; align-items: baseline; padding: 5px 10px; cursor: pointer; }
.spk-it b { white-space: nowrap; }
.spk-it .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spk-it .sub { color: var(--muted); font-size: 11px; white-space: nowrap; }
.spk-it:hover, .spk-it.hi { background: #dbe8f8; }
body.dark .spk-it:hover, body.dark .spk-it.hi { background: #2b4364; }
.spk-it.off { opacity: .5; cursor: default; }
.spk-empty { padding: 10px; color: var(--muted); }

/* ---- manual physical % history ---- */
.mh-dlg { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.mh-bar { gap: 8px; align-items: center; flex-wrap: wrap; }
.mh-q { width: 220px; padding: 5px 8px; border: 1px solid var(--input-border); border-radius: 6px; font: inherit; }
.mh-scroll { flex: 1; min-height: 200px; max-height: 62vh; overflow: auto; border: 1px solid var(--line2); border-radius: 6px; }
.mh-tbl { margin: 0; border-collapse: separate; border-spacing: 0; }
.mh-tbl th { position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.mh-tbl th.mh-dt { text-align: center; min-width: 92px; }
.mh-tbl th.mh-dt.dd { background: #fff4e0; }
.mh-tbl th .btn.xs { padding: 0 5px; font-size: 10px; line-height: 15px; margin-top: 2px; }
.mh-tbl td.mh-nm { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-tbl td.mh-c { padding: 1px 3px; }
.mh-tbl td.mh-c input { width: 78px; text-align: right; }
.mh-tbl td.mh-c.own input { background: #eef6ee; font-weight: 600; }
body.dark .mh-tbl td.mh-c.own input { background: #1f3a26; }
.mh-tbl tr.total td { position: sticky; bottom: 0; background: var(--panel); font-weight: 700; }
.mh-tbl td.mh-c.fx input { color: #1f5fa8; font-style: italic; }
.mh-tbl td.mh-c input.bad { border-color: #c33; background: #fdecec; }

/* ---- grid: header filters, group header, badges (Unit Rate) ---- */
.xlg-groups th { top: 22px; height: 28px; box-sizing: border-box; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text); letter-spacing: .2px; }
.xlg-groups th.empty { background: var(--head); }
.xlg.has-groups .xlg-head th { top: 50px; }
.xlg-head th.xlg-h { position: sticky; }
.xlg-hl { display: block; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; }
.xlg-sub { display: block; font-size: 10px; font-weight: 500; color: var(--muted); font-style: italic; padding-right: 16px; }
.xlg-hf { position: absolute; right: 3px; bottom: 4px; width: 17px; height: 17px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 10px; line-height: 15px; cursor: pointer; }
.xlg-hf:hover { color: var(--text); border-color: var(--accent2); }
.xlg-hf.on { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.xlg-head th.filtered { box-shadow: inset 0 -2px 0 var(--accent2); }
.xlg-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px; background: #e6f0fb; color: #1f5fa8; font-size: 10.5px; font-weight: 600; font-style: normal; vertical-align: 1px; }
body.dark .xlg-badge { background: #22364f; color: #9cc3ef; }
.xlg-fpop { position: fixed; z-index: 3000; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 35, 60, .22); padding: 8px; display: flex; flex-direction: column; gap: 6px; color: var(--text); font-size: 12.5px; }
.xlg-ftitle { font-weight: 700; padding: 0 2px; }
.xlg-fsort { display: flex; gap: 4px; }
.xlg-fsort .btn { flex: 1; }
.xlg-fq { padding: 5px 8px; border: 1px solid var(--input-border); border-radius: 6px; font: inherit; background: var(--surface); color: var(--text); }
.xlg-flist { max-height: 260px; overflow: auto; border: 1px solid var(--line2); border-radius: 6px; padding: 3px 0; }
.xlg-fit { display: flex; align-items: center; gap: 6px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.xlg-fit:hover { background: var(--hover); }
.xlg-fit span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.xlg-fit small { color: var(--muted); }
.xlg-fit.all { border-bottom: 1px solid var(--line2); margin-bottom: 2px; }
.xlg-fbtn { display: flex; gap: 6px; }

/* "pretty" grid: a clean table look instead of a spreadsheet look (formulas still work the same) */
.xlg-pretty { border-radius: 10px; border-color: var(--line); box-shadow: 0 1px 3px rgba(20, 35, 60, .06); }
.xlg-pretty .xlg-bar { background: transparent; border-bottom-color: var(--line2); }
.xlg-pretty .xlg-letters th { background: var(--surface); color: #a4adb8; font-size: 9.5px; font-weight: 500; border-right-color: transparent; }
.xlg-pretty .xlg-t th.xlg-rn { background: var(--surface); color: #a4adb8; font-size: 10.5px; border-right-color: var(--line2); }
.xlg-pretty .xlg-head th.xlg-h { background: #f3f6fa; color: #24364b; font-size: 11.5px; white-space: normal; line-height: 1.25; vertical-align: bottom; border-right-color: #e3e8ef; height: 46px; }
.xlg-pretty .xlg-t td.xlg-c { border-right-color: transparent; border-bottom-color: #edf0f4; height: 28px; }
.xlg-pretty .xlg-t tbody tr:nth-child(even) td.xlg-c { background: #fafbfd; }
.xlg-pretty .xlg-t tbody tr:hover td.xlg-c { background: #f1f6fd; }
.xlg-pretty .xlg-t td.auto { color: #2f4a66; font-style: normal; }
.xlg-pretty .xlg-t tfoot td { background: #f3f6fa; border-top: 2px solid #b8c4d3; height: 32px; font-size: 13px; }
body.dark .xlg-pretty .xlg-head th.xlg-h { background: #1f2a37; color: #d7e2ee; border-right-color: #2b3746; }
body.dark .xlg-pretty .xlg-t tbody tr:nth-child(even) td.xlg-c { background: #18212c; }
body.dark .xlg-pretty .xlg-t tbody tr:hover td.xlg-c { background: #1d2a3a; }
body.dark .xlg-pretty .xlg-t td.auto { color: #c3d3e6; }
body.dark .xlg-pretty .xlg-t tfoot td { background: #1f2a37; }

/* ---- Unit Rate sheet ---- */
.ur-bar { align-items: center; gap: 10px; }
.ur-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ur-ti2 { display: flex; gap: 8px; }
.ur-ti { border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); font: inherit; font-size: 12px; padding: 1px 5px; min-width: 120px; }
.ur-ti.big { font-size: 15px; font-weight: 700; width: 520px; max-width: 46vw; }
.ur-ti2 .ur-ti { width: 300px; max-width: 26vw; color: var(--muted); }
.ur-ti:hover, .ur-ti:focus { border-color: var(--input-border); background: var(--surface); outline: none; }
.ur-nl { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; background: #eaf5e4; border: 1px solid #b9dcae; border-radius: 8px; padding: 3px 4px 3px 10px; color: #285e1c; }
.ur-n { width: 70px; height: 26px; border: 1px solid #b9dcae; border-radius: 5px; text-align: right; padding: 0 6px; font: inherit; font-weight: 700; color: #285e1c; background: #fff; }
.ur-body { display: flex; flex-direction: column; gap: 10px; }
.ur-kpis { margin-bottom: 0; }
.ur-tools { flex-wrap: wrap; }
.ur-empty { margin: 30px auto; padding: 30px 40px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 14px; }
.ur-empty-t { font-size: 15px; font-weight: 600; }
.xlg-pretty .xlg-groups th.ur-q, .xlg-pretty .xlg-head th.ur-q { background: #e4eefb; color: #1e4b80; }
.xlg-pretty .xlg-groups th.ur-c, .xlg-pretty .xlg-head th.ur-c { background: #fff5dc; color: #7a5a00; }
.xlg-pretty .xlg-groups th.ur-r, .xlg-pretty .xlg-head th.ur-r { background: #e5f4df; color: #285e1c; }
.xlg-pretty .xlg-groups th.ur-t, .xlg-pretty .xlg-head th.ur-t { background: #fdebdc; color: #8a3d0b; }
.xlg-pretty .xlg-groups th.ur-l, .xlg-pretty .xlg-head th.ur-l { background: #eef0f3; color: #4a5767; }
body.dark .xlg-pretty .xlg-groups th.ur-q, body.dark .xlg-pretty .xlg-head th.ur-q { background: #1d3049; color: #b8d3f3; }
body.dark .xlg-pretty .xlg-groups th.ur-c, body.dark .xlg-pretty .xlg-head th.ur-c { background: #3a311a; color: #f0d79b; }
body.dark .xlg-pretty .xlg-groups th.ur-r, body.dark .xlg-pretty .xlg-head th.ur-r { background: #1f3622; color: #b9e2ad; }
body.dark .xlg-pretty .xlg-groups th.ur-t, body.dark .xlg-pretty .xlg-head th.ur-t { background: #3c2a1c; color: #f2c6a3; }
body.dark .xlg-pretty .xlg-groups th.ur-l, body.dark .xlg-pretty .xlg-head th.ur-l { background: #252d38; color: #b9c4d0; }
.xlg-pretty .xlg-t tr.ur-sec td.xlg-c { background: #eef3f9 !important; color: #1b3550; font-weight: 700; letter-spacing: .3px; border-top: 1px solid #d5dfeb; }
body.dark .xlg-pretty .xlg-t tr.ur-sec td.xlg-c { background: #1f2c3c !important; color: #d4e3f4; border-top-color: #2e3d50; }
.xlg-pretty .xlg-t tr.ur-linked td.xlg-c[data-c="3"] { box-shadow: inset 3px 0 0 #3b78d8; }

/* ---- draw the planned S-curve ---- */
.pc-dlg { display: flex; flex-direction: column; gap: 8px; }
.pc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.pc-row label { display: inline-flex; align-items: center; gap: 4px; }
.pc-row input[type=date], .pc-row select { height: 26px; }
.pc-k input { width: 90px; }
.pc-hint { padding: 2px 0; }
.pc-wrap { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.pc-cv { display: block; cursor: crosshair; touch-action: none; }
.pc-tip { position: absolute; display: none; pointer-events: none; background: #1d2733; color: #fff; font-size: 11.5px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.pc-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; }
.pc-tbl { overflow-x: auto; border: 1px solid var(--line2); border-radius: 8px; }
.pc-t { margin: 0; font-size: 11.5px; }
.pc-t th { white-space: nowrap; text-align: center; min-width: 62px; }
.pc-t th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 170px; background: var(--panel); }
.pc-t td { padding: 1px 2px; }
.pc-t td input { width: 58px; text-align: right; font-size: 11.5px; padding: 2px 3px; }
.pc-opts { padding-top: 4px; border-top: 1px solid var(--line2); }
.pc-note { flex-basis: 100%; color: #8a5a00; background: #fff4e0; border: 1px solid #e8c47a; border-radius: 6px; padding: 5px 9px; }