:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --border: #e2e5ea;
  --text: #1c2430;
  --muted: #667085;
  --accent: #145a6e;
  --accent-soft: #e3f0f3;
  --good: #1f7a4d;
  --good-soft: #e5f4ec;
  --warn: #9a6200;
  --warn-soft: #fdf3dc;
  --bad: #b42318;
  --bad-soft: #fdecea;
  --bar: #2f7f95;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06);
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161c;
    --surface: #1a2028;
    --surface-2: #202833;
    --border: #2d3743;
    --text: #e6e9ee;
    --muted: #98a2b3;
    --accent: #6fc3d8;
    --accent-soft: #1d3540;
    --good: #5fd39a;
    --good-soft: #17322a;
    --warn: #f2b84b;
    --warn-soft: #3a2e14;
    --bad: #ff8a80;
    --bad-soft: #3d1f1d;
    --bar: #5fb3c9;
    --shadow: none;
    color-scheme: dark;
  }
}

/* dark theme chosen in Settings (the block above follows the computer's setting) */
:root[data-theme="dark"] {
    --bg: #12161c;
    --surface: #1a2028;
    --surface-2: #202833;
    --border: #2d3743;
    --text: #e6e9ee;
    --muted: #98a2b3;
    --accent: #6fc3d8;
    --accent-soft: #1d3540;
    --good: #5fd39a;
    --good-soft: #17322a;
    --warn: #f2b84b;
    --warn-soft: #3a2e14;
    --bad: #ff8a80;
    --bad-soft: #3d1f1d;
    --bar: #5fb3c9;
    --shadow: none;
    color-scheme: dark;
  }

/* chart series colour (reference palette slot 1; dark step for the dark surface) */
:root { --series-1: #2a78d6; --grid-line: #e7e9ee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-1: #3987e5; --grid-line: #2a333e; } }
:root[data-theme="dark"] { --series-1: #3987e5; --grid-line: #2a333e; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
.boot { padding: 48px; color: var(--muted); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 16px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.brand .logo { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; } /* wraps onto a second line on narrow windows */
.nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.nav a.on { background: var(--accent-soft); color: var(--accent); }
.topbar .spacer { flex: 1; }
.who { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }

main { padding: 20px 24px; }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 10px; }
.sub { color: var(--muted); font-size: 13px; }

/* ---------- controls ---------- */
.btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.small { padding: 3px 8px; font-size: 12px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date], select, textarea {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 9px; min-width: 0;
}
textarea { width: 100%; resize: vertical; }
select.inline { padding: 2px 6px; font-size: 12px; border-radius: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; font-size: 13px;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip .n { opacity: .7; margin-left: 4px; }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 16px 0 12px; }
.toolbar .grow { flex: 1; }
label.check { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; cursor: pointer; }

/* ---------- cards & KPIs ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
.kpi { padding: 14px 16px; }
.kpi .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { font-size: 26px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: 14px; color: var(--muted); font-weight: 500; }
.kpi.warn .value { color: var(--warn); }
.kpi.bad .value { color: var(--bad); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
tbody tr:last-child td { border-bottom: none; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--row-hover, var(--surface-2)); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pname { font-weight: 600; }
.pname .code { color: var(--muted); font-weight: 500; margin-right: 6px; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- small pieces ---------- */
.alerts { display: inline-flex; gap: 2px; font-size: 15px; letter-spacing: 1px; }
.alerts span { cursor: help; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.pill.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pill.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* Baserow-coloured select pills (colour set inline from Baserow) */
.bpill { border-radius: 4px; padding: 1px 7px; font-size: 12px; line-height: 18px; }
.pills { display: inline-flex; flex-wrap: wrap; gap: 3px; }
select.pill-select { border-radius: 4px; font-weight: 500; }
select.pill-select option { background: var(--surface); color: var(--text); }
.days { font-variant-numeric: tabular-nums; white-space: nowrap; }
.days.warn { color: var(--warn); font-weight: 600; }
.days.bad { color: var(--bad); font-weight: 600; }

.bar { min-width: 110px; }
.bar .track { height: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; margin-top: 3px; }
.bar .fill { height: 100%; background: var(--bar); }
.bar.over .fill { background: var(--bad); }
.bar.near .fill { background: var(--warn); }
.bar .txt { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.calc { border-bottom: 1px dotted var(--muted); }

/* ---------- project page ---------- */
.back { display: inline-block; margin-bottom: 10px; color: var(--muted); }
.phead { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; }
.phead .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 16px 0; }
.metric { padding: 12px 14px; }
.metric .label { color: var(--muted); font-size: 12px; }
.metric .value { font-size: 18px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.alert-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.alert-list .pill { font-size: 13px; padding: 4px 10px; }
.links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-top: 6px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.tabs button { border: none; background: none; padding: 9px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.tabs .n { font-size: 12px; opacity: .7; margin-left: 4px; }

.form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; padding: 14px; margin-bottom: 14px; }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.form .field-label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.form .field-label > * { color: var(--text); font-size: 14px; }
.form .row-end { display: flex; gap: 8px; justify-content: flex-end; grid-column: 1 / -1; }

.stage-group { margin-bottom: 14px; }
.stage-group h3 { font-size: 13px; margin: 0 0 6px; color: var(--muted); display: flex; gap: 8px; align-items: center; }

.timeline { display: grid; gap: 10px; }
.note { padding: 12px 14px; }
.note .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.note .body { white-space: pre-wrap; }

.todo { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.todo:last-child { border-bottom: none; }
.todo.done .title { text-decoration: line-through; color: var(--muted); }
.todo input { margin-top: 3px; }
.todo .grow { flex: 1; }

.week-head td { background: var(--surface-2); font-weight: 600; font-size: 12px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px; z-index: 50;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); max-width: calc(100% - 32px);
}
.toast.err { background: var(--bad); color: #fff; }
.empty { padding: 24px; text-align: center; color: var(--muted); }
.banner { padding: 10px 14px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); margin-bottom: 14px; font-size: 13px; }

/* ---------- grouped project list ---------- */
a.pname { color: var(--text); }
a.pname:hover { color: var(--accent); text-decoration: none; }
.caret-col { width: 28px; padding-right: 0; }
.caret { display: inline-block; width: 22px; color: var(--muted); font-size: 14px; line-height: 1; text-align: center; transform: scale(1.6); }
tr.group-row td {
  background: var(--surface-2); cursor: pointer; padding: 8px 10px; font-weight: 600;
  border-top: 1px solid var(--border);
}
tr.group-row:hover td { background: var(--accent-soft); }
tr.group-row .pill { margin-right: 6px; }
tr.click.open td { background: var(--surface-2); border-bottom-color: transparent; }
tr.expand-row > td { background: var(--surface-2); padding: 0 10px 14px 38px; }
.nested { padding: 4px 0; }
.card.nested { padding: 4px 12px 10px; }

/* ---------- task tree ---------- */
.tree-tools { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.tree-tools .grow { flex: 1; }
.tree-scroll { overflow-x: auto; border-radius: 8px; }
.cell { min-width: 0; }
.clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colpicker { position: relative; }
.colmenu {
  position: fixed; z-index: 30; width: 300px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.colmenu select { width: 100%; margin-top: 8px; }
.colitem { display: flex; gap: 4px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--border); }
.colitem .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: clip; } /* clip, not hidden: keeps the frozen first column working */
.tree-row {
  display: grid;
  grid-template-columns: 22px minmax(220px, 1fr) 150px 150px 80px 90px 90px;
  gap: 8px; align-items: center;
  padding: 5px 10px; border-bottom: 1px solid var(--border);
  position: relative; background: var(--surface);
}
.tree-row:last-child { border-bottom: none; }
.tree-head { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.tree-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.tree-row:not(.tree-head):hover { background: var(--row-hover, var(--surface-2)); }
.tree-row.closed .tn { color: var(--muted); }
.tree-row.dragging { opacity: .4; }
.handle { cursor: grab; color: var(--muted); letter-spacing: -3px; user-select: none; font-size: 13px; }
.tree-row[draggable="true"] { cursor: default; }
.tname { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.twisty { flex: none; width: 22px; height: 22px; border: none; background: none; padding: 0; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 22px; transform: scale(1.6); }
.tree-row.drop-before::before, .tree-row.drop-after::after {
  content: ""; position: absolute; left: 32px; right: 8px; height: 3px; border-radius: 2px; background: var(--accent); z-index: 2;
}
.tree-row.drop-before::before { top: -2px; }
.tree-row.drop-after::after { bottom: -2px; }
.tree-row.drop-inside { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.tree-root-drop {
  margin: 6px; padding: 10px; border: 2px dashed var(--border); border-radius: 8px;
  color: var(--muted); text-align: center; font-size: 13px;
}
.tree-root-drop.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  main { padding: 16px; }
  .topbar { padding: 10px 16px; gap: 10px; }
  .who { width: 100%; }
  .kpi .value { font-size: 22px; }
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
  table.cards td { border: none; padding: 3px 12px; }
  table.cards td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
  table.cards td.num { text-align: left; }
  table.cards td.caret-col { display: none; }
  tr.expand-row > td { padding: 0 8px 12px; }
  .tree-head { display: none; }
  .tree-row { grid-template-columns: 22px 1fr !important; row-gap: 2px; }
  .tree { min-width: 0 !important; }
  .tree-row > [data-label] { grid-column: 2; font-size: 12px; }
  .tree-row > [data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
  .tree-row > .num { text-align: left; }
}

/* ---------- resizable, wrapping columns ---------- */
table.sized { table-layout: fixed; } /* exactly the chosen column widths: no stretching to the window; scroll sideways when narrower */
table.sized th, table.sized td { overflow-wrap: anywhere; }
table.sized th { white-space: normal; position: relative; }
.hcell { position: relative; min-width: 0; overflow-wrap: anywhere; }
.col-resize {
  position: absolute; top: 0; right: -5px; width: 10px; height: 100%;
  cursor: col-resize; z-index: 3;
}
.col-resize::after { content: ""; position: absolute; left: 4px; top: 20%; height: 60%; width: 2px; border-radius: 1px; background: transparent; }
th:hover .col-resize::after, .hcell:hover .col-resize::after { background: var(--border); }
.col-resize:hover::after { background: var(--accent) !important; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }
.wrap, .clip { white-space: normal; overflow-wrap: anywhere; }
.cell { overflow-wrap: anywhere; }
.bar { min-width: 0; }
.bar .txt { white-space: normal; }
.bpill { white-space: normal; }
a.tn { color: var(--text); }
a.tn:hover { color: var(--accent); text-decoration: underline; }
.tree-row.closed a.tn { color: var(--muted); }

/* ---------- column menu ---------- */
.colmenu { width: 320px; }
.colsearch { width: 100%; margin-bottom: 6px; }
.colsect { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 8px 0 2px; }
.colhidden { max-height: 260px; overflow-y: auto; }
.colitem { cursor: default; }
label.colitem { cursor: pointer; }
.colitem input[type=checkbox] { margin: 0 4px 0 0; }
.colnone { padding: 4px 0; }
.colfoot { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.tag { font-size: 10px; padding: 0 5px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); margin-left: 4px; white-space: nowrap; }
.tag.bad { color: var(--bad); border-color: var(--bad-soft); background: var(--bad-soft); }

/* ---------- task page ---------- */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; overflow-wrap: anywhere; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.sub.pills { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.fieldgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 20px; }
.fieldgrid > div { min-width: 0; overflow-wrap: anywhere; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input { min-width: 240px; }

.checkmark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid var(--border); border-radius: 4px; font-size: 12px; line-height: 1; color: #fff; }
.checkmark.on { background: var(--good); border-color: var(--good); }

/* ---------- task page layout ---------- */
.layout { margin-bottom: 16px; }
.layout-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.layout-bar .grow { flex: 1; }
.layout-sec { padding: 14px 16px; margin-bottom: 12px; }
.lsec-head { display: flex; gap: 6px; align-items: center; }
.lsec-head h2 { margin: 0 0 10px; }
.lsec-title { flex: 1; font-weight: 600; margin-bottom: 10px; }
.lsec-head .btn { margin-bottom: 10px; }
.lgrid { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); row-gap: 12px; column-gap: 0; }
.lgrid > .lfield { margin-right: 16px; }
.lgrid > .small.muted { grid-column: 1 / -1; }
.lfield { min-width: 0; display: grid; gap: 4px; align-content: start; position: relative; }

.llabel { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.lfield input[type=text], .lfield input[type=number], .lfield input[type=date], .lfield select, .lfield textarea { width: 100%; }
.inline-input { display: flex; gap: 6px; align-items: center; }
.ro { padding: 6px 0; }
.multi { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.multi-item { display: inline-flex; align-items: center; gap: 2px; }
.multi-item .x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 2px; }
.multi-item .x:hover { color: var(--bad); }
.multi select { width: auto !important; }

.is-editing .lfield.editing {
  border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2);
  cursor: grab; grid-template-columns: 1fr auto; align-items: center;
}
.is-editing .lfield.editing .llabel { font-size: 13px; color: var(--text); }
.lactions { display: flex; gap: 4px; }
.lfield.dragging { opacity: .4; }
.lfield.drop-before::before {
  content: ""; position: absolute; left: -9px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--accent);
}
.lfield.full.drop-before::before { left: 0; right: 0; top: -8px; bottom: auto; width: auto; height: 3px; }
.lfield.missing { border-color: var(--bad); }
.lend {
  grid-column: 1 / -1; border: 2px dashed var(--border); border-radius: 8px; padding: 8px; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.lend.on { border-color: var(--accent); background: var(--accent-soft); }
.fadder { width: 100%; max-width: 420px; }
.fadder-top { display: flex; gap: 6px; }
.fadder-top input { flex: 1; }
.fadder-list { max-height: 240px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.fadder-item { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--border); background: none; padding: 6px 10px; cursor: pointer; }
.fadder-item:hover { background: var(--accent-soft); }
@media (max-width: 760px) {
  .lgrid > .lfield { grid-column: 1 / -1 !important; margin-right: 0; }
}

/* editable list cells */
.cell-edit { display: block; min-width: 0; }
.cell-edit input[type=text], .cell-edit input[type=number], .cell-edit input[type=date], .cell-edit textarea, .cell-edit select {
  width: 100%; padding: 2px 6px; font-size: 12px; border-radius: 6px;
}
.cell-edit textarea { resize: vertical; min-height: 26px; }
.cell-edit .multi select { width: auto; }
.btn.pencil { color: var(--muted); }
.btn.pencil.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pencil-off { display: inline-block; width: 27px; }
.pencil-mark { color: var(--accent); font-size: 11px; }
.lactions select { max-width: 120px; }

/* ---------- coloured pill dropdowns ---------- */
.pselect { display: inline-block; max-width: 100%; position: relative; }
.pselect-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 3px 8px; cursor: pointer; text-align: left;
}
.pselect-btn:hover, .pselect-btn.open { border-color: var(--accent); }
.pselect-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pselect.inline .pselect-btn { min-height: 24px; padding: 1px 6px; border-radius: 6px; }
.pselect-caret { color: var(--muted); font-size: 10px; margin-left: auto; }
.form .pselect, .lfield .pselect, .cell-edit .pselect { display: block; }
.form .pselect-btn, .lfield .pselect-btn, .cell-edit .pselect-btn { width: 100%; }
.multi .pselect, .cell-edit .multi .pselect { display: inline-block; }
.multi .pselect-btn { width: auto; }
.pselect-menu {
  position: fixed; z-index: 40; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 4px; max-height: 300px;
}
.pselect-search { width: 100%; }
.pselect-focus:not(input) { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pselect-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pselect-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.pselect-item.hi { background: var(--accent-soft); }
.pselect-check { margin-left: auto; color: var(--accent); font-size: 12px; }

/* compact multi-value picker: small "+" then pills; ✕ shows on hover */
.multi { gap: 3px; }
.pselect-trigger {
  min-height: 0 !important; width: 20px !important; height: 20px; padding: 0 !important; justify-content: center;
  border-radius: 50% !important; font-size: 14px; line-height: 1; color: var(--muted); flex: none;
}
.pselect-trigger:hover, .pselect-trigger.open { color: var(--accent); }
.multi-item .x { display: none; }
.multi-item:hover .x, .multi-item:focus-within .x { display: inline; }
@media (hover: none) { .multi-item .x { display: inline; } }

/* ---------- row striping (Settings › Appearance) ---------- */
:root { --stripe: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.stripe-tasks .tree-row.alt:not(.tree-head) { background: var(--stripe); }
.stripe-tasks .tree-row.alt:not(.tree-head):hover { background: var(--row-hover, var(--surface-2)); }
.stripe-tasks .tree-row.alt.drop-inside { background: var(--accent-soft); }
.stripe-projects tr.click.alt:not(.open) td { background: var(--stripe); }
.stripe-projects tr.click.alt:not(.open):hover td { background: var(--row-hover, var(--surface-2)); }

/* ---------- settings page ---------- */
.settings { margin-top: 16px; max-width: 860px; }
.setting { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); align-items: start; }
.setting-label { font-weight: 600; }
.setting-label .small { font-weight: 400; margin-top: 2px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { border: none; background: var(--surface); padding: 6px 14px; cursor: pointer; border-right: 1px solid var(--border); }
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--accent); color: #fff; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--text); }
.swatch.default, .swatch.custom { width: auto; height: 28px; border-radius: 14px; padding: 0 10px; background: var(--surface); color: var(--text); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.swatch.custom input { width: 18px; height: 18px; border: none; padding: 0; background: none; cursor: pointer; }
.stack { display: grid; gap: 8px; }
.range { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
.preview-list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; max-width: 420px; }
.preview-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.stripe-tasks .preview-row.alt { background: var(--stripe); }
.preview-actions { display: flex; gap: 12px; align-items: center; padding: 8px 12px; }
@media (max-width: 760px) { .setting { grid-template-columns: 1fr; gap: 8px; } }

.open-link { flex: none; text-decoration: none; padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.open-link:hover { background: var(--accent-soft); text-decoration: none; }

.with-note { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; } /* note (e.g. "(5d ago)") under the cell value */
.with-note .cell-edit { display: inline-block; }
.cell-note { white-space: nowrap; font-size: 11px; line-height: 1.2; }

/* stage group rows tinted per Settings › Appearance › Project group rows */
tr.group-row.tinted td { background: var(--group-bg); color: var(--group-fg); }
tr.group-row.tinted:hover td { background: var(--group-bg); filter: brightness(.96); }
tr.group-row.tinted .muted, tr.group-row.tinted .caret { color: inherit; opacity: .75; }
.group-preview { width: 100%; max-width: 420px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.group-preview tr.group-row td { cursor: default; }

/* team list: rows open the person page; striping shares the Projects setting */
table.team tr.click { cursor: pointer; }
.stripe-projects table.team tr.click.alt td { background: var(--stripe); }
.stripe-projects table.team tr.click.alt:hover td { background: var(--row-hover, var(--surface-2)); }
.stripe-tasks table.cards tr.alt:not(.click) td { background: var(--stripe); }

/* drag a field's right edge to resize it (Customize layout) */
.lresize { position: absolute; top: 4px; bottom: 4px; right: -6px; width: 10px; cursor: col-resize; z-index: 3; }
.lresize::after { content: ""; position: absolute; left: 3px; top: 25%; height: 50%; width: 4px; border-radius: 2px; background: var(--border); }
.lresize:hover::after, .resizing .lresize::after { background: var(--accent); }
.lwidth-badge {
  position: absolute; right: 10px; top: -10px; z-index: 4; padding: 1px 8px; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none;
}

/* project page: Details/Budget/Links sit below the tabs */
.after-tabs { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ---------- summary cards (customizable) ---------- */
.cards-panel { margin: 16px 0; }
.cards-panel .metrics { margin: 0; }
.metric.wide { grid-column: span 2; }
.cards-bar { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.cards-bar .grow { flex: 1; }
.metric.editing { border-style: dashed; cursor: grab; position: relative; padding-bottom: 40px; }
.metric.dragging { opacity: .4; }
.metric.missing { border-color: var(--bad); }
.card-tools { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; gap: 6px; justify-content: flex-end; }
.card-catalog { margin-top: 10px; }
.catalog-top { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.catalog-top input { flex: 1; min-width: 200px; max-width: 360px; }
.catalog-items { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-group { margin-top: 6px; }
.card-text { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; display: block; max-height: 4.4em; overflow: hidden; }
.card-list { display: grid; gap: 2px; font-size: 13px; font-weight: 400; }
.card-list div { display: flex; justify-content: space-between; gap: 10px; }
.minibars { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 4px; }
.minibars span { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.minibars i { display: block; width: 100%; background: var(--bar); border-radius: 3px 3px 0 0; }
@media (max-width: 760px) { .metric.wide { grid-column: auto; } }

/* previous / next project */
.proj-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.proj-nav .back { margin-bottom: 0; }
.proj-nav .grow { flex: 1; }

.nav-arrows { display: inline-flex; gap: 2px; }
.nav-arrow { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.nav-arrow:hover:not(:disabled) { color: var(--accent); background: var(--surface-2); }
.nav-arrow:disabled { opacity: .3; cursor: default; }

/* Projects tab tiles (customizable) */
.cards-panel .kpis { margin-top: 0; }
.kpi.wide { grid-column: span 2; }
.kpi .value .card-list, .kpi .value .minibars { font-size: 13px; font-weight: 400; }
.kpi .small { margin-top: 2px; }
.kpi.editing { border-style: dashed; cursor: grab; position: relative; padding-bottom: 40px; }
@media (max-width: 760px) { .kpi.wide { grid-column: auto; } }

/* ---------- company dashboard: 12-column card grid ---------- */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.grid12 > .size-normal { grid-column: span 2; }
.grid12 > .size-wide { grid-column: span 4; }
.grid12 > .size-half { grid-column: span 6; }
.grid12 > .size-full { grid-column: 1 / -1; }
@media (max-width: 1150px) { .grid12 > .size-normal { grid-column: span 4; } .grid12 > .size-wide { grid-column: span 6; } .grid12 > .size-half { grid-column: 1 / -1; } }
@media (max-width: 760px) { .grid12 > .size-normal { grid-column: span 6; } .grid12 > .size-wide, .grid12 > .size-half { grid-column: 1 / -1; } }
.kpi.has-chart .value { font-size: 13px; font-weight: 400; margin-top: 8px; }
.kpi .label { display: flex; align-items: center; gap: 8px; }
.table-toggle { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 11px; cursor: pointer; text-transform: none; letter-spacing: 0; padding: 0; }
.table-toggle:hover { color: var(--accent); text-decoration: underline; }
.delta.good { color: var(--good); font-weight: 600; }
.delta.bad { color: var(--bad); font-weight: 600; }
.card-table { max-height: 260px; overflow: auto; }
.card-table table { font-size: 12px; }
.card-table th, .card-table td { padding: 4px 6px; }

/* column chart */
.colchart { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 180px auto; column-gap: 6px; }
.cc-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--muted); text-align: right; padding: 0 0 0 0; transform: translateY(-6px); height: calc(100% + 12px); }
.cc-plot { position: relative; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--grid-line); padding-top: 18px; }
.cc-grid { position: absolute; inset: 18px 0 0 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.cc-grid i { display: block; border-top: 1px solid var(--grid-line); }
.cc-grid i:last-child { border-top: none; }
.cc-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; cursor: default; }
.cc-col i { display: block; width: min(24px, 70%); background: var(--series-1); border-radius: 4px 4px 0 0; min-height: 1px; }
.cc-col:hover i { filter: brightness(1.12); }
.cc-val { font-size: 11px; color: var(--text); white-space: nowrap; margin-bottom: 2px; }
.cc-x { display: flex; gap: 2px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.cc-x span { flex: 1; text-align: center; min-width: 0; overflow: hidden; white-space: nowrap; }

/* horizontal bars */
.hbars { display: grid; gap: 8px; margin-top: 4px; }
.hb-row { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 12px; cursor: default; }
.hb-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 12px; display: flex; align-items: center; }
.hb-track i { display: block; height: 12px; background: var(--series-1); border-radius: 0 4px 4px 0; min-width: 1px; }
.hb-track.meter { background: color-mix(in srgb, var(--series-1) 16%, var(--surface)); border-radius: 0 4px 4px 0; }
.hb-row:hover .hb-track i { filter: brightness(1.12); }
.hb-val { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* shared chart tooltip */
.chart-tip {
  position: fixed; z-index: 60; transform: translate(-50%, calc(-100% - 8px)); pointer-events: none;
  background: var(--text); color: var(--bg); font-size: 12px; padding: 5px 9px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

table.health tbody tr.alt td { background: var(--surface-2); }
.stripe-projects table.health tbody tr.alt td { background: var(--stripe); }

/* ---------- sign-in (Supabase Auth) ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login { width: 100%; max-width: 380px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.login .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--text); }
.login h1 { margin: 0; font-size: 22px; }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.login input { width: 100%; }
.login .btn.primary { justify-content: center; padding: 9px 14px; }
.login-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; }
.linkish:hover { text-decoration: underline; }
.login-msg { font-size: 13px; padding: 9px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--text); }
.login-msg.err { background: var(--warn-soft); color: var(--warn); }

/* ---------- password prompt / data health ---------- */
.set-password-prompt { margin: 14px 24px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.set-password { display: flex; flex-wrap: wrap; gap: 8px; }
.set-password input { min-width: 160px; }
.diff-row td { background: var(--surface-2, transparent); }
.diff-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 4px 12px; }
@media (max-width: 720px) {
  .set-password-prompt { margin: 14px 16px 0; }
}

/* ---------- new project / templates / quick add ---------- */
.new-project .seg-row { display: flex; align-items: center; gap: 12px; }
.new-project-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.new-project-foot .tpl-name { min-width: 240px; }
.template-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; background: var(--accent-soft); }
.phead .actions a.btn { text-decoration: none; }
.tname { position: relative; }
/* small "+" just left of the task name (always there, faint until the row is hovered) — adds a subtask (user, 2026-10-20) */
.row-add { flex: none; margin: 0 2px 0 0; width: 18px; height: 18px; line-height: 15px; padding: 0; align-self: center;
  border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; opacity: .45; }
.tree-row:hover .row-add, .row-add:focus { opacity: 1; color: var(--accent); border-color: var(--border); background: var(--surface); }
.row-add:hover { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.tree-quick-add { display: flex; gap: 8px; align-items: center; padding-top: 6px; padding-bottom: 6px; padding-right: 8px; border-bottom: 1px solid var(--border); }
.tree-quick-add input { flex: 1; min-width: 200px; max-width: 520px; }
.tree-add-btn { margin: 8px 0 4px 30px; }
.nested-empty .tree-add-btn { margin-left: 8px; }
.new-project-foot .grow { flex: 1; }
.new-project-foot label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }

/* ---------- to-dos page ---------- */
.nav-todos { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; margin-right: 12px; white-space: nowrap; }
.nav-todos:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.nav-todos.on { background: var(--accent-soft); color: var(--accent); }
.todo-group { margin-bottom: 14px; overflow: hidden; }
.todo-group-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border); user-select: none; }
.todo-group-head .n { background: var(--surface-2); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--muted); }
.todo-group.bad .todo-group-head { border-left: 4px solid var(--bad); }
.todo-group.bad .todo-group-head .n { background: var(--bad-soft); color: var(--bad); }
.todo-group.warn .todo-group-head { border-left: 4px solid var(--warn); }
.todo-group.warn .todo-group-head .n { background: var(--warn-soft); color: var(--warn); }
.todo-item { align-items: center; }
.todo-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.todo-due { width: 140px; flex: none; }
.todo-due.late { color: var(--bad); }
.todo-due.today { color: var(--warn); }
.todo-empty { padding: 10px 12px; }
@media (max-width: 720px) {
  .nav-todos { margin-right: 0; }
  .todo-item { flex-wrap: wrap; }
  .todo-due { margin-left: 28px; }
}

/* ---------- my work ---------- */
.work-section { margin: 18px 0; }
.work-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.work-head.click { cursor: pointer; user-select: none; }
.work-head h2 { margin: 0; font-size: 16px; }
.work-head .n { background: var(--surface-2); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--muted); }
.work-card { padding: 12px 14px; margin-bottom: 10px; border-left: 4px solid var(--border); }
.work-card.now { border-left-color: var(--accent); }
.work-card.waiting { border-left-color: var(--warn); }
.wc-top { display: flex; gap: 12px; align-items: flex-start; }
.wc-title { font-weight: 600; }
.wc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.wc-blocked { margin-top: 6px; color: var(--warn); }
.wc-instructions { margin-top: 6px; color: var(--muted); white-space: pre-wrap; }
.wc-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 380px; }
.wc-actions .btn.on { background: var(--accent-soft); }
.wc-leftoff { margin-top: 10px; }
.wc-leftoff textarea { width: 100%; }
.wc-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.wc-form .grow { flex: 1; min-width: 200px; }
.wc-form input[type=number] { width: 90px; }
.plan-group { margin-bottom: 10px; overflow: hidden; }
.plan-project { padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.plan-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.plan-row:last-child { border-bottom: none; }
.plan-assign { width: 190px; flex: none; }
.plan-due { width: 140px; flex: none; }
@media (max-width: 720px) {
  .wc-top { flex-direction: column; }
  .wc-actions { justify-content: flex-start; max-width: none; }
  .plan-row { flex-wrap: wrap; }
}

.nav-right { display: flex; gap: 4px; margin-right: 12px; }
.nav-right .nav-todos { margin-right: 0; }

/* my work: Active as the main column, Up next / waiting as slim side panels */
.work-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.work-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; margin-top: 8px; }
.work-main .work-card { padding: 14px 16px; }
.work-empty { padding: 22px; }
.work-side { display: flex; flex-direction: column; gap: 12px; }
.work-panel { overflow: hidden; }
.wp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; user-select: none; }
.work-panel.open .wp-head { border-bottom: 1px solid var(--border); }
.wp-head .n { background: var(--surface-2); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--muted); }
.work-panel.waiting .wp-head .n { background: var(--warn-soft); color: var(--warn); }
.wp-item { border-bottom: 1px solid var(--border); }
.wp-item:last-child { border-bottom: none; }
.wp-line { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.wp-line .tn { font-weight: 500; }
.wp-more { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1; transform: scale(1.6); }
.wp-card { padding: 0 10px 10px; }
.wp-card .work-card { margin: 0; border-left-width: 3px; }
.wp-card .wc-top { flex-direction: column; }
.wp-card .wc-actions { justify-content: flex-start; max-width: none; }
.wp-empty { padding: 10px 12px; }
@media (max-width: 980px) {
  .work-layout { grid-template-columns: 1fr; }
}

/* my work: My to-dos panel */
.work-panel.todos.late .wp-head .n { background: var(--bad-soft); color: var(--bad); }
.work-panel.todos .wp-line input[type=checkbox] { flex: none; }
.wp-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); }
.wp-add { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.wp-add input[type=text] { flex: 1; min-width: 140px; }
.wp-add input[type=date] { width: 140px; }

/* my work: to-dos card */
.work-todos { margin: 4px 0 14px; overflow: hidden; border-left: 4px solid var(--border); }
.work-todos.bad { border-left-color: var(--bad); }
.work-todos.warn { border-left-color: var(--warn); }
.wt-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wt-head:hover { background: var(--row-hover, var(--surface-2)); }
.wt-count { font-size: 26px; font-weight: 700; min-width: 34px; text-align: center; }
.work-todos.bad .wt-count { color: var(--bad); }
.work-todos.warn .wt-count { color: var(--warn); }
.wt-label { display: flex; flex-direction: column; gap: 2px; }
.wt-body { border-top: 1px solid var(--border); }
.wt-line { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.wt-line input[type=checkbox] { flex: none; }
.wt-sub { padding: 8px 16px 4px; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.wt-empty { padding: 10px 16px; }
.work-todos .wp-foot, .work-todos .wp-add { padding: 8px 16px; }
.wt-head .grow { flex: 1; }

/* my work: section headers in the side column; to-dos card sits in the side column */
.side-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 2px 2px -4px; }
.side-head:not(:first-child) { margin-top: 10px; }
.work-side .work-todos { margin: 0; }
.work-side .wt-head { padding: 10px 12px; gap: 10px; }
.work-side .wt-count { font-size: 22px; min-width: 28px; }
.work-side .wt-line { padding: 8px 12px; align-items: flex-start; }
.work-side .wt-sub, .work-side .wt-empty { padding-left: 12px; padding-right: 12px; }
.work-side .work-todos .wp-foot, .work-side .work-todos .wp-add { padding: 8px 12px; }
.wp-line .grow, .wt-line .grow, .wp-foot .grow { flex: 1; min-width: 0; }


/* ---------- task lists: Shift / Ctrl-click selection ---------- */
.tree-row.picked, .tree-row.picked:hover,
.stripe-tasks .tree-row.alt.picked:not(.tree-head), .stripe-tasks .tree-row.alt.picked:not(.tree-head):hover { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.sel-bar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 8px; background: var(--accent-soft); }
.sel-bar strong { white-space: nowrap; font-size: 13px; }
.sel-bar .pselect { flex: none; }
.sel-bar .pselect-btn { width: auto; white-space: nowrap; }
.sel-bar .pselect-trigger {
  width: auto !important; height: auto; min-height: 26px !important; padding: 2px 10px !important; border-radius: 6px !important;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; white-space: nowrap;
}
.sel-bar .pselect-trigger:hover, .sel-bar .pselect-trigger.open { border-color: var(--accent); color: var(--accent); }
.sel-bar .btn.small { min-height: 26px; }
.sel-hint { font-style: italic; }

/* task-link pills (Blocked By …) */
.task-pill { text-decoration: none; color: var(--text); }
.task-pill:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- workload ---------- */
table.workload td { vertical-align: middle; }
.wl-sub { margin-left: 22px; }
.wl-weeks { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; }
.wl-track { position: relative; width: 110px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.wl-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--good); }
.wl-weeks.over .wl-track i { background: var(--bad); }
.wl-weeks.capacity .wl-track i { background: var(--warn); }
.wl-track b { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--muted); opacity: .5; }
.wl-tasks { padding: 6px 4px 10px 26px; }
.wl-tasks table { width: 100%; }
.wl-tasks th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: left; padding: 4px 6px; }
.wl-tasks td { padding: 4px 6px; border-top: 1px solid var(--border); }
.wl-tasks tr.later td { opacity: .7; }
.wl-due { width: 140px; }
.wl-est input { width: 70px; text-align: right; }
.wl-est.missing input { border-color: var(--warn); background: var(--warn-soft); }
.wl-project { max-width: 280px; font-size: 13px; }
.wl-project a { color: inherit; }
.wl-project a:hover strong { color: var(--accent); }
.wl-tasks tr.wl-later-start td { border-top: 2px solid var(--border); }

table.workload tr.wl-group td { padding-top: 9px; padding-bottom: 9px; }
table.workload tr.wl-group .pill { vertical-align: middle; }

/* workload: people indented under their discipline band */
table.workload tr.wl-person > td:first-child { padding-left: 34px; }
table.workload tr.wl-person > td:first-child { box-shadow: inset 3px 0 0 var(--border); }
table.workload tr.wl-none td { padding: 8px 12px 8px 34px; font-style: italic; }
table.workload tr.expand-row > td { padding-left: 34px; }
table.workload tr.wl-group.empty td { opacity: .8; }
.wl-crunch { margin-top: 3px; white-space: nowrap; }
.wl-due.crunch { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }

/* ---------- workload › timeline ---------- */
:root { --tl-weekend: rgba(120, 130, 150, .10); --tl-line: rgba(120, 130, 150, .12); }
.tl-toolbar { flex-wrap: wrap; }
.tl-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.tl-legend i { display: inline-block; width: 18px; height: 10px; border-radius: 3px; margin-left: 6px; }
.tl-legend i.cat-load { background: hsl(210 55% 55%); }
.tl-legend i.cat-scoping { background: hsl(210 55% 55% / .35); }
.tl-legend i.cat-review { border: 2px solid hsl(210 55% 50%); background: transparent; }
.tl-legend i.derived { background: repeating-linear-gradient(45deg, hsl(210 55% 55%), hsl(210 55% 55%) 3px, hsl(210 55% 75%) 3px, hsl(210 55% 75%) 6px); }
.tl-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.tl-wrap.with-tray { grid-template-columns: minmax(0, 1fr) 260px; }
.tl-scroll { overflow-x: auto; padding: 0; }
.tl { position: relative; }
.tl-head, .tl-row, .tl-group { display: flex; }
.tl-name { width: var(--tl-name-w, 220px); flex: none; padding: 8px 10px; position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--border); }
.tl-head { position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--border); }
.tl-corner { min-height: 44px; }
.tl-scale { position: relative; height: 44px; }
.tl-months span, .tl-weeks span { position: absolute; white-space: nowrap; font-size: 12px; color: var(--muted); }
.tl-months span { top: 4px; padding-left: 4px; font-weight: 600; color: var(--text); border-left: 1px solid var(--border); }
.tl-weeks span { top: 24px; padding-left: 4px; border-left: 1px solid var(--border); overflow: hidden; }
.tl-group { border-bottom: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
.tl-group .tl-name { background: inherit; display: flex; align-items: center; gap: 4px; }
.tl-group.tinted, .tl-group.tinted .tl-name { background: var(--group-bg); color: var(--group-fg); }
.tl-row { border-bottom: 1px solid var(--border); }
.tl-row.drop-target .tl-area { box-shadow: inset 0 0 0 2px var(--accent); }
.tl-row .tl-name { padding-left: 24px; }
.tl-area { position: relative; flex: none; }
.tl-bars { position: relative; }
.tl-bar { position: absolute; height: 22px; border-radius: 5px; background: hsl(var(--h) 55% 52%); color: #fff; font-size: 12px; line-height: 22px;
  overflow: hidden; white-space: nowrap; cursor: grab; user-select: none; box-shadow: 0 1px 2px rgba(0,0,0,.15); z-index: 1; }
.tl-bar .tl-label { padding: 0 8px; pointer-events: none; }
.tl-bar.cat-scoping { background: hsl(var(--h) 55% 52% / .35); color: var(--text); }
.tl-bar.cat-review { background: var(--surface); color: var(--text); border: 2px solid hsl(var(--h) 55% 48%); line-height: 18px; }
.tl-bar.derived { background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.28) 4px 8px); }
.tl-bar.late { box-shadow: inset -4px 0 0 var(--bad), 0 1px 2px rgba(0,0,0,.15); }
.tl-bar.ghost { opacity: .75; outline: 2px dashed var(--accent); z-index: 5; cursor: grabbing; }
.tl-handle { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; }
.tl-handle.l { left: 0; } .tl-handle.r { right: 0; }
.tl-bar:hover .tl-handle { background: rgba(255,255,255,.35); }
.tl-today { position: absolute; top: 0; bottom: -18px; width: 2px; background: var(--bad); opacity: .6; z-index: 0; }
.tl-diamond { position: absolute; font-size: 11px; color: var(--text); z-index: 2; pointer-events: auto; line-height: 1; }
.tl-diamond.late { color: var(--bad); }
.tl-legend .tl-diamond { position: static; margin-left: 6px; }
.tl-cap { position: relative; height: 18px; }
.tl-capcell { position: absolute; top: 1px; height: 15px; border-radius: 3px; font-size: 10px; line-height: 15px; text-align: center; color: var(--muted); overflow: hidden; white-space: nowrap; }
.tl-capcell.good { background: var(--good-soft); color: var(--good); }
.tl-capcell.warn { background: var(--warn-soft); color: var(--warn); }
.tl-capcell.bad { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.tl-tray { padding: 10px; position: sticky; top: 70px; max-height: calc(100vh - 90px); display: flex; flex-direction: column; gap: 8px; }
.tl-tray input[type=search] { width: 100%; }
.tl-tray-list { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.tl-tray-person { font-weight: 600; margin-bottom: 4px; }
.tl-chip { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; margin-bottom: 4px; border-radius: 6px; cursor: grab; user-select: none;
  border-left: 4px solid hsl(var(--h) 55% 52%); background: var(--surface-2); }
.tl-chip:hover { background: var(--accent-soft); }
.tl-chip.dragging { opacity: .4; }
.tl-chip-name { font-size: 13px; }
.tl-float { position: fixed; z-index: 50; pointer-events: none; padding: 4px 8px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
body.tl-dragging, body.tl-dragging * { cursor: grabbing !important; user-select: none !important; }
@media (max-width: 980px) { .tl-wrap.with-tray { grid-template-columns: 1fr; } .tl-tray { position: static; max-height: 360px; } }

/* ---------- project › timeline ---------- */
.ptl .tl-name { width: var(--tl-name-w, 300px); display: flex; align-items: center; gap: 4px; padding-top: 4px; padding-bottom: 4px; min-width: 0; }
.ptl .tl-name a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ptl .tl-name .pill { flex: none; font-size: 11px; }
.ptl .tl-corner { font-weight: 600; font-size: 12px; color: var(--muted); }
.ptl-row { height: 34px; }
.ptl-row.parent .tl-name a { font-weight: 600; }
.ptl-row.is-done .tl-name a { color: var(--muted); }
.ptl-row .tl-area { height: 34px; }
.ptl-row .tl-area:not(:has(.tl-bar)) { cursor: crosshair; }
.ptl-bar { background: var(--c); }
.ptl-bar.done { opacity: .5; }
.ptl-span { position: absolute; bottom: 2px; height: 3px; border-radius: 2px; background: var(--text); opacity: .45; }
.ptl-hard { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bad); opacity: .8; }
.tl-diamond.hard { color: var(--bad); }
.ptl .tl-today, .ptl-hard, .ptl-span { pointer-events: none; }

/* ---------- sequence (Blocked By) on the workload timeline ---------- */
.tl-bar.cat-later { background: hsl(var(--h) 55% 52% / .18); color: var(--text); border: 1px dashed hsl(var(--h) 55% 45%); line-height: 20px; }
.tl-legend i.cat-later { background: hsl(210 55% 55% / .18); border: 1px dashed hsl(210 55% 45%); }
.tl-bar.seq-early { outline: 3px solid var(--bad); outline-offset: 1px;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(220, 38, 38, .35) 6px 10px); }
.tl-bar.seq-wait { outline: 3px dashed var(--warn); outline-offset: 1px; }
.tl-warn { color: var(--bad); margin-left: 6px; }
.tl-tray-person { display: flex; align-items: center; gap: 4px; white-space: nowrap; padding: 4px 6px; border-left: 4px solid hsl(var(--h) 55% 52%); background: var(--surface-2); border-radius: 4px; margin-bottom: 4px; }
.tl-tray-person .pill { font-size: 10px; }
.tl-chip-state { color: var(--good); }
.tl-chip.st-1 .tl-chip-state { color: var(--muted); }
.tl-chip.st-2 { opacity: .55; }
.tl-chip.st-2 .tl-chip-state { color: var(--warn); }
.tl-tray-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* out-of-sequence badge on bars + summary box above the timeline */
.tl-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bad); color: #fff; font-weight: 800; font-size: 12px; line-height: 1; vertical-align: middle; }
.tl-bar .tl-badge { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); z-index: 3; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.tl-bar:has(.tl-badge) .tl-label { padding-left: 26px; }
.tl-bar.seq-wait .tl-badge, .tl-alerts.warn .tl-badge { background: var(--warn); }
.tl-badge.big { width: 24px; height: 24px; font-size: 15px; }
.tl-legend .tl-badge { width: 14px; height: 14px; font-size: 10px; margin-left: 6px; }
.tl-alerts { padding: 10px 14px; margin-bottom: 4px; border-left: 5px solid var(--bad); background: var(--bad-soft); }
.tl-alerts.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.tl-alerts-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-alerts-head strong { color: var(--bad); font-size: 15px; }
.tl-alerts.warn .tl-alerts-head strong { color: var(--warn); }
.tl-alerts-list { margin: 8px 0 0; padding-left: 34px; display: flex; flex-direction: column; gap: 3px; }
.tl-alerts-list li.early::marker { color: var(--bad); }
.tl-alerts-list li.wait::marker { color: var(--warn); }
.tl-alerts-list li.more { list-style: none; }
.tl-alerts-list .linkish { font-size: inherit; text-align: left; }
@keyframes tl-flash { 0%, 50%, 100% { transform: scale(1); } 25%, 75% { transform: scale(1.08); box-shadow: 0 0 0 4px var(--accent); } }
.tl-bar.flash { animation: tl-flash 1.2s ease-in-out 2; z-index: 6; }

/* sequence arrows on the workload timeline (drawn under the bars, over the grid) */
.tl-links { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
.tl-link { fill: none; stroke: var(--muted); stroke-width: 1.6; opacity: .85; }
.tl-link.bad { stroke: var(--bad); stroke-width: 2.2; stroke-dasharray: 5 3; opacity: 1; }
.tl-arrow-head { fill: var(--muted); }
.tl-arrow-head.bad { fill: var(--bad); }
.tl-link.dim { opacity: .15; }
.tl-link.hi { stroke: var(--accent); stroke-width: 2.6; opacity: 1; }
.tl-link.bad.hi { stroke: var(--bad); }
.tl-links:has(.tl-link.hi) { z-index: 2; }

/* status next to each person on the workload timeline */
.tl-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.tl-status .pill { font-size: 11px; cursor: help; }
.tl-status .wl-noest { color: var(--warn); }
.tl-status .days { flex-basis: 100%; white-space: normal; }

/* task lists: the drag handle and the first column stay put when the list is scrolled sideways (they take the row's colour,
   and cover the row's left padding and the gap between them so nothing shows through) */
.tree-row > :nth-child(1), .tree-row > :nth-child(2) { position: sticky; z-index: 2; background: inherit; align-self: stretch; display: flex; align-items: center; }
.tree-row > :nth-child(1) { left: 0; margin-left: -10px; padding-left: 10px; }
.tree-row > :nth-child(2) { left: 32px; margin-left: -8px; padding-left: 8px; }
.tree-scroll.scrolled .tree-row > :nth-child(2) { box-shadow: 6px 0 6px -6px rgba(0, 0, 0, .35); }
.tree-row.picked > :nth-child(1) { box-shadow: inset 3px 0 0 var(--accent); }
.tree-row > .tname { align-items: flex-start; padding-top: 0; }
@media (max-width: 760px) { .tree-row > :nth-child(1), .tree-row > :nth-child(2) { position: static; margin-left: 0; padding-left: 0; } }

/* project task timeline: arrows end on span lines too; inside the Projects list it sits in the expanded row */
.ptl .tl-links { z-index: 0; }
.ptl-span { z-index: 1; }
.expand-row .ptl { margin-bottom: 4px; }
.expand-row .tl-alerts { margin-top: 4px; }

/* due date (black) and hard deadline (red) as vertical lines at the end of that day */
.tl-mark { position: absolute; width: 2px; z-index: 2; background: var(--text); border-radius: 1px; }
.tl-mark::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; } /* easier to hover */
.tl-mark.hard { background: var(--bad); width: 3px; }
.tl-legend i.lg-line { width: 3px; height: 13px; border-radius: 1px; background: var(--text); margin-left: 8px; vertical-align: middle; }
.tl-legend i.lg-line.hard { background: var(--bad); }
/* multi-discipline people: short "shown under …" rows in their other groups */
.tl-row.tl-ref .tl-area { height: 34px; }
.tl-row.tl-ref .tl-name { padding-top: 5px; padding-bottom: 5px; }
.tl-row.tl-ref .pname, table.workload tr.wl-ref .pname { color: var(--muted); font-weight: 500; }
table.workload tr.wl-ref td { padding-top: 5px; padding-bottom: 5px; }
@keyframes flash-row { 0%, 100% { box-shadow: none; } 30%, 70% { box-shadow: inset 0 0 0 3px var(--accent); } }
.flash-row, .flash-row > td { animation: flash-row 1s ease-in-out 2; }

/* ---------- Time page ---------- */
.time-filters select { max-width: 220px; }
.time-filters input[type=search] { min-width: 260px; }
.tabs .n.warn { background: var(--warn-soft); color: var(--warn); }
.time-chart { display: flex; align-items: flex-end; gap: 10px; overflow-x: auto; padding-top: 18px; }
.tc-col { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tc-bar { width: 70%; max-width: 56px; min-height: 1px; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; }
.tc-bar i { display: block; min-height: 1px; }
.tc-total { color: var(--muted); }
.tc-label { white-space: nowrap; }
.tc-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.time-table td.heat { background: color-mix(in srgb, var(--accent) var(--heat, 0%), transparent); }
.time-table tfoot td { border-top: 2px solid var(--border); }
.time-cal { padding: 0; overflow: hidden; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 80px; border-bottom: 1px solid var(--border); }
.cal-row:last-child { border-bottom: none; }
.cal-head > div { padding: 6px 8px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); }
.cal-day { min-height: 92px; padding: 4px 6px; border-right: 1px solid var(--border); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-day:hover { background: var(--row-hover, var(--surface-2)); }
.cal-day.weekend { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-day.other { opacity: .45; }
.cal-day.today .cal-date span { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; }
.cal-day.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-date { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.cal-date b { color: var(--text); }
.cal-chip { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; padding: 1px 5px; border-radius: 4px;
  background: hsl(var(--h) 55% 52% / .16); border-left: 3px solid hsl(var(--h) 55% 50%); white-space: nowrap; overflow: hidden; }
.cal-chip span:first-child { overflow: hidden; text-overflow: ellipsis; }
.cal-week { display: flex; align-items: center; justify-content: center; font-size: 13px; background: var(--surface-2); }
.cal-title { min-width: 140px; text-align: center; }
.upwork-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; border-left: 5px solid var(--good); }
.upwork-summary.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.upwork-group { margin-bottom: 12px; padding: 0; overflow: hidden; }
.upwork-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-left: 5px solid hsl(var(--h) 55% 50%); background: var(--surface-2); }
.upwork-table { width: 100%; }
.upwork-table tr.done td { color: var(--muted); }
.upwork-table tr.done td:not(:first-child) { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.upwork-tick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; color: var(--good); font-size: 12px; }
.upwork-tick input { width: 18px; height: 18px; }
.upwork-desc { max-width: 520px; }
button.copy { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 4px; padding: 0 5px; margin-left: 4px; cursor: pointer; font-size: 12px; line-height: 18px; }
button.copy:hover { color: var(--accent); border-color: var(--accent); }
.nowrap { white-space: nowrap; }
.invoice-table table.inner { width: 100%; background: var(--surface-2); }
.cleanup-table input[type=date] { width: 140px; }
.cleanup-table .hours-in { width: 80px; text-align: right; }
.cleanup-table .desc-in { width: 100%; min-width: 240px; }
.cleanup-table .cleanup-task select { max-width: 280px; }
@media (max-width: 760px) { .cal-row { grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-week, .cal-head > div:last-child { display: none; } .cal-chip { display: none; } .cal-day { min-height: 54px; } }

/* invoices: client rows, project line items under them, entries under a project */
.invoice-table tr.inv-client td { border-top: 2px solid var(--border); }
.invoice-table tr.inv-project td:nth-child(2) { padding-left: 22px; }
.invoice-table tr.inv-project { background: var(--surface-2); }
.invoice-table tr.inv-entries > td { padding-top: 0; }

/* calendar drag & drop */
.cal-chip { cursor: grab; }
.cal-chip:hover { outline: 1px solid hsl(var(--h) 55% 50%); }
.cal-chip.dragging { opacity: .4; }
.cal-chip.uw-open { box-shadow: inset 0 -2px 0 var(--warn); }
.cal-day.drop { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
/* Upwork week bar */
.uw-week { min-width: 230px; text-align: center; }
.uw-other { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; }
.upwork-table tr.done td { background: color-mix(in srgb, var(--good-soft) 60%, transparent); }
/* time entry page */
.te-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.te-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.te-form label > input, .te-form label > select, .te-form label > textarea, .te-form label .pselect { font-size: 14px; color: var(--text); }
.te-form .wide { grid-column: span 2; }
.te-form .full { grid-column: 1 / -1; }
.te-form textarea { width: 100%; resize: vertical; }
.te-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.te-h { margin: 18px 0 8px; font-size: 15px; }
.upwork-big { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn); font-weight: 600; cursor: pointer; }
.upwork-big.done { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.upwork-big input { width: 18px; height: 18px; }
@media (max-width: 760px) { .te-form { grid-template-columns: 1fr 1fr; } }

/* My work: schedule tiles + badges */
.work-sched { margin: 0 0 16px; }
.ws-tiles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ws-tile { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-width: 190px; cursor: pointer; border: 1px solid var(--border);
  border-left: 5px solid var(--border); text-align: left; font: inherit; color: var(--text); }
.ws-tile .ws-n { font-size: 24px; font-weight: 700; min-width: 24px; color: var(--muted); }
.ws-tile .ws-label { flex: 1; font-weight: 600; }
.ws-tile.has.bad { border-left-color: var(--bad); } .ws-tile.has.bad .ws-n { color: var(--bad); }
.ws-tile.has.warn { border-left-color: var(--warn); } .ws-tile.has.warn .ws-n { color: var(--warn); }
.ws-tile.has.good { border-left-color: var(--good); } .ws-tile.has.good .ws-n { color: var(--good); }
.ws-tile.has.ahead { border-left-color: #7c3aed; } .ws-tile.has.ahead .ws-n { color: #7c3aed; }
.ws-tile.on { box-shadow: 0 0 0 2px var(--accent); }
.ws-unscheduled { margin-left: 4px; }
.ws-list { margin-top: 10px; padding: 4px 14px; }
.ws-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ws-line:last-child { border-bottom: none; }
.ws-empty { padding: 10px 0; }
.pill.sched { font-size: 11px; white-space: nowrap; }
.pill.sched.ahead { background: color-mix(in srgb, #7c3aed 16%, var(--surface)); color: #7c3aed; }
.wp-sched { margin: 4px 0 0 30px; }

/* ---------- side panel (project / task / time entry opened from a list) ---------- */
.peek { position: fixed; top: var(--peek-top, 0); right: 0; bottom: 0; z-index: 45; max-width: 100vw; background: var(--bg); border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .18); display: flex; flex-direction: column; animation: peek-in .16s ease-out; }
@keyframes peek-in { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.peek-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.peek-kind { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.peek-body { flex: 1; overflow: auto; padding: 16px 20px 40px; }
.peek-body .phead { flex-wrap: wrap; }
.peek-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 2; }
.peek-resize:hover, body.peek-resizing .peek-resize { background: color-mix(in srgb, var(--accent) 35%, transparent); }
body.peek-resizing, body.peek-resizing * { cursor: ew-resize !important; user-select: none !important; }
/* wide screens: the page moves over so both are visible */
/* the side panel lies over the page (user, 2026-10-20: don't squeeze the page to the left) */
@media (max-width: 760px) { .peek { width: 100vw !important; } }

/* ---------- My work: board ---------- */
.work-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; margin-bottom: 14px; }
.work-top .work-sched { margin: 0; }
@media (max-width: 980px) { .work-top { grid-template-columns: 1fr; } }
.board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.bcol { flex: 1 0 250px; max-width: 360px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; min-height: 120px; }
.bcol.drop { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.bcol.folded { flex: 0 0 auto; min-width: 54px; max-width: 54px; }
.bcol.folded .bcol-head { writing-mode: vertical-rl; padding: 12px 8px; }
.bcol.folded .bcol-title { gap: 8px; }
.bcol.folded .caret { transform: none; }
.bcol.hold { opacity: .8; }
.bcol-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); }
.bcol-head.click { cursor: pointer; }
.bcol-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bcol-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.bcol-empty { padding: 14px 6px; text-align: center; }
.bcard { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow); }
.bcard:hover { border-color: var(--accent); }
.bcard.dragging { opacity: .4; }
.bcard.late-end { border-left-color: var(--warn); }
.bcard.late-due { border-left-color: var(--bad); }
.bcard.late-hard { border-left-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.bcard.hold { cursor: default; background: var(--surface-2); }
.bcard.hold:hover { border-color: var(--border); }
.bcard.done .bc-title { color: var(--muted); }
.bc-late { font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 4px; align-self: flex-start; }
.bcard.late-end .bc-late { background: var(--warn-soft); color: var(--warn); }
.bcard.late-due .bc-late { background: var(--bad-soft); color: var(--bad); }
.bcard.late-hard .bc-late { background: var(--bad); color: #fff; }
.bc-title { font-weight: 600; line-height: 1.3; }
.bc-wait { color: var(--warn); }
.bc-dates { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); }
.bc-dates .over { color: var(--bad); font-weight: 600; }
.bc-hard { color: var(--text); }
.bc-leftoff { color: var(--muted); font-style: italic; }
.bc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.btn.tiny { padding: 1px 7px; font-size: 11px; }
.bcard .wc-form { margin-top: 6px; flex-wrap: wrap; }
.bcard .wc-form input[type=text], .bcard .wc-form textarea { min-width: 0; width: 100%; }

/* My work board, vertical (2026-10-15): one full-width row per stage, cards in a grid */
.board { flex-direction: column; align-items: stretch; overflow-x: visible; gap: 10px; }
.bcol, .bcol.folded { flex: none; max-width: none; min-width: 0; min-height: 0; width: 100%; }
.bcol { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.bcol-head { border-bottom: none; border-right: 1px solid var(--border); padding: 12px 14px; }
.bcol.folded { grid-template-columns: 1fr; }
.bcol.folded .bcol-head { writing-mode: horizontal-tb; border-right: none; padding: 10px 14px; }
.bcol-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 10px; align-items: start; }
.bcol-empty { grid-column: 1 / -1; text-align: left; padding: 10px 4px; }
@media (max-width: 760px) { .bcol { grid-template-columns: 1fr; } .bcol-head { border-right: none; border-bottom: 1px solid var(--border); } }
.bc-status { font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 5px; align-self: flex-start; }
.bc-status.late-end { background: var(--warn-soft); color: var(--warn); }
.bc-status.late-due { background: var(--bad-soft); color: var(--bad); }
.bc-status.late-hard { background: var(--bad); color: #fff; }
.bc-status.behind { background: var(--warn-soft); color: var(--warn); }
.bc-status.now { background: var(--good-soft); color: var(--good); }
.bc-status.ahead { background: color-mix(in srgb, #7c3aed 16%, var(--surface)); color: #7c3aed; }
.bc-status.client { background: var(--accent-soft); color: var(--accent); }
.bc-status.planned, .bc-status.muted { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.bcard.behind-card { border-left-color: var(--warn); }
.bc-alerts { display: flex; flex-wrap: wrap; gap: 4px; }
.bc-alert { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* My work board as lists (2026-10-15): stage groups top to bottom, one line per task */
.work-sched { margin-bottom: 14px; }
.work-todos.body-only { margin-top: 10px; padding: 4px 14px; }
.work-todos.body-only .wt-body { padding: 0; border-top: none; }
.bcol, .bcol.folded { display: block; }
.bcol-head, .bcol.folded .bcol-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); padding: 9px 14px; writing-mode: horizontal-tb; }
.bcol.folded .bcol-head { border-bottom: none; }
.bcol-body { display: block; padding: 0; min-height: 0; }
.bcol-empty { padding: 10px 14px; text-align: left; }
.brow-wrap { border-bottom: 1px solid var(--border); background: var(--surface); }
.brow-wrap:last-child { border-bottom: none; border-radius: 0 0 10px 10px; }
.brow-wrap.dragging { opacity: .4; }
.brow { display: grid; grid-template-columns: 14px minmax(220px, 2fr) minmax(0, 1.5fr) 210px 80px 120px; gap: 10px; align-items: center;
  padding: 7px 12px; cursor: pointer; box-shadow: inset 3px 0 0 transparent; }
.brow:hover { background: var(--row-hover, var(--surface-2)); }
.brow.late-end, .brow.behind { box-shadow: inset 3px 0 0 var(--warn); }
.brow.late-due { box-shadow: inset 3px 0 0 var(--bad); }
.brow.late-hard { box-shadow: inset 4px 0 0 var(--bad); background: color-mix(in srgb, var(--bad-soft) 55%, var(--surface)); }
.brow.hold { cursor: default; color: var(--muted); }
.brow.hold:hover { background: none; }
.brow.done .brow-name { color: var(--muted); }
.brow-grip { color: var(--muted); letter-spacing: -3px; font-size: 12px; cursor: grab; user-select: none; }
.brow-main { min-width: 0; }
.brow-name { font-weight: 600; }
.brow-wait { color: var(--warn); }
.brow-leftoff { color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow-flags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.brow-problem { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.brow-problem.late-end, .brow-problem.behind { background: var(--warn-soft); color: var(--warn); }
.brow-problem.late-due { background: var(--bad-soft); color: var(--bad); }
.brow-problem.late-hard { background: var(--bad); color: #fff; }
.brow-dates { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); }
.brow-dates .over { color: var(--bad); font-weight: 600; }
.brow-hours { text-align: right; white-space: nowrap; }
.brow-actions { display: flex; gap: 4px; justify-content: flex-end; }
.brow-form { padding: 0 12px 10px 36px; }
/* when the list is narrow (small window, or the side panel is open) the line wraps: name + buttons, then alerts, then dates */
.board { container-type: inline-size; }
@container (max-width: 1000px) {
  .brow { grid-template-columns: 14px minmax(0, 1fr) auto; row-gap: 4px; }
  .brow-grip { grid-column: 1; grid-row: 1; }
  .brow-main { grid-column: 2; grid-row: 1; }
  .brow-actions { grid-column: 3; grid-row: 1; }
  .brow-flags { grid-column: 2 / -1; grid-row: 2; }
  .brow-dates { grid-column: 2 / -1; grid-row: 3; }
  .brow-flags:empty, .brow-dates:empty { display: none; }
  .brow-hours { display: none; }
}

/* My work: to-dos on the right of the tile row (different from the task tiles), list drops down over the page */
.ws-todos { position: relative; margin-left: auto; }
.ws-todo-tile { display: flex; align-items: center; gap: 10px; padding: 9px 14px; min-width: 230px; cursor: pointer; font: inherit; color: var(--text);
  border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); text-align: left; }
.ws-todo-tile .ws-todo-icon { font-size: 22px; color: var(--muted); }
.ws-todo-tile .ws-todo-text { display: flex; flex-direction: column; flex: 1; }
.ws-todo-tile .ws-todo-text .small { color: var(--muted); }
.ws-todo-tile.warn { border-color: var(--warn); } .ws-todo-tile.warn .ws-todo-icon, .ws-todo-tile.warn .small { color: var(--warn); }
.ws-todo-tile.bad { border-color: var(--bad); } .ws-todo-tile.bad .ws-todo-icon, .ws-todo-tile.bad .small { color: var(--bad); }
.ws-todo-tile.on { box-shadow: 0 0 0 2px var(--accent); }
.ws-todos-pop { position: absolute; right: 0; top: calc(100% + 6px); width: 440px; max-width: calc(100vw - 32px); z-index: 30;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25); border-radius: 10px; }
.ws-todos-pop .work-todos.body-only { margin: 0; max-height: 60vh; overflow: auto; } /* no margin: the pop box has no background, so a gap let the list underneath show through (2026-10-21) */
.ws-todos-pop { background: var(--surface); }
@media (max-width: 760px) { .ws-todos { margin-left: 0; width: 100%; } .ws-todo-tile { width: 100%; } .ws-todos-pop { left: 0; right: auto; width: 100%; } }

/* ---------- running time clock ---------- */
.clock { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 18px; border: 1px solid var(--good);
  background: var(--good-soft); color: var(--good); font-size: 13px; max-width: 420px; }
.clock.paused { border-color: var(--border); background: var(--surface-2); color: var(--muted); }
.clock.odd { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.clock-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.clock-task { color: inherit; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline dotted; }
.clock-warn { font-weight: 700; }
.clock.running .clock-icon { animation: clock-pulse 2s ease-in-out infinite; }
@keyframes clock-pulse { 50% { opacity: .35; } }
.clock-dot { font-size: 12px; animation: clock-pulse 2s ease-in-out infinite; cursor: help; }
.clock-dot.paused { animation: none; opacity: .5; }
.modal-back { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
.modal { width: 460px; max-width: 100%; padding: 18px 20px; box-shadow: 0 16px 48px rgba(0, 0, 0, .3); color: var(--text); }
.clock-dialog h3 { margin: 0 0 6px; }
.cd-task { margin: 8px 0; }
.cd-warn { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); font-size: 13px; }
.cd-parts { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 10px; }
.cd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cd-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.cd-form .full { grid-column: 1 / -1; }
.cd-form input, .cd-form textarea { font-size: 14px; color: var(--text); width: 100%; }
.cd-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
@media (max-width: 760px) { .clock-task { max-width: 90px; } }

/* the top bar (with the clock and its stop box) sits above the side panel, which starts just below it */
.topbar { z-index: 50; }
.cd-form .req { color: var(--bad); font-size: 11px; }
.cd-form textarea.needs { border-color: var(--warn); }

/* ---------- Directory ---------- */
.dir-table td { vertical-align: top; }
.dir-table tr.inactive td, table tr.inactive td { opacity: .55; }
.dir-name { font-weight: 600; }
.dir-links { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; }
.dir-links a { white-space: nowrap; }
.dir-kind { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 4px; vertical-align: middle; }
.dir-kind.client { background: var(--accent-soft); color: var(--accent); }
.dir-kind.vendor { background: color-mix(in srgb, #7c3aed 15%, var(--surface)); color: #7c3aed; }
.star { border: none; background: none; cursor: pointer; font-size: 18px; color: var(--border); padding: 0 4px; line-height: 1; }
.star.on { color: #e3a008; }
span.star { cursor: default; font-size: 14px; padding: 0; }
.star.big { font-size: 24px; vertical-align: middle; }
.dir-contacts { display: flex; flex-direction: column; gap: 8px; }
.dir-contact { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; }
.dir-note { margin-top: 4px; white-space: pre-wrap; }
.dir-notes { display: flex; flex-direction: column; gap: 8px; }
.dir-form { margin-bottom: 12px; }
.dir-form .check span { display: inline; }
.dir-title { display: flex; align-items: center; gap: 4px; }
.dir-title input { font: inherit; }
.dir-company-pick { display: flex; flex-direction: column; gap: 3px; min-width: 260px; }
.dir-company-pick select { max-width: 340px; }
.dir-form label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.dir-form label.check input { width: auto; margin: 0; }

/* ---------- RFQs ---------- */
.rfq-table td { vertical-align: top; }
.rfq-flag { color: var(--warn); font-weight: 600; cursor: help; }
.rfq-details { margin-bottom: 16px; }
.rfq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 16px; }
.rfq-grid > label, .rfq-grid > div { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.rfq-grid .wide { grid-column: span 2; }
.rfq-grid .full { grid-column: 1 / -1; }
.rfq-grid input[type=date], .rfq-grid select { max-width: 100%; }
.rfq-file { display: inline-block; margin-right: 12px; font-size: 13px; }
.rfq-head { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.rfq-head h2 { margin: 0; font-size: 16px; }
.rfq-ask { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; border-color: var(--good, #16a34a); }
.rfq-bids td { vertical-align: top; }
.rfq-bids tr.approved td { background: color-mix(in srgb, #16a34a 10%, var(--surface)); }
.rfq-price .inline-input input { width: 92px; text-align: right; }
.rfq-price.best .inline-input input { font-weight: 700; color: #15803d; border-color: #16a34a; }
.rfq-price.best::after { content: 'lowest'; display: block; font-size: 10px; color: #15803d; text-transform: uppercase; letter-spacing: .04em; }
.rfq-snippet { max-width: 260px; margin-top: 2px; }
.nda-bad { color: var(--bad, #dc2626); font-weight: 600; }
.bid-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 12px 20px; padding: 4px 0; }
.bid-note-form { grid-column: 1; display: flex; gap: 8px; align-items: flex-start; }
.bid-detail .dir-notes { grid-column: 1; }
.bid-extra { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 10px; }
.bid-extra label { display: flex; flex-direction: column; gap: 4px; }
.note-line { border-left: 3px solid var(--border); padding: 2px 0 2px 10px; }
.note-line .body { white-space: pre-wrap; }
.add-vendors { margin-bottom: 12px; }
.vendor-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin-top: 8px; max-height: 420px; overflow: auto; }
.vendor-pick { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.vendor-pick.done { opacity: .55; cursor: default; }
.vendor-pick.inactive { opacity: .6; }
@media (max-width: 760px) { .bid-detail { grid-template-columns: 1fr; } .bid-extra { grid-column: 1; grid-row: auto; } .rfq-grid .wide { grid-column: 1 / -1; } }

.dir-tags { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.small-seg button { padding: 3px 9px; font-size: 12px; }

/* ---------- Data page ---------- */
.data-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.data-tables { display: flex; flex-direction: column; padding: 6px; position: sticky; top: calc(var(--peek-top, 60px) + 8px); max-height: calc(100vh - 120px); overflow: auto; }
.data-tables button { display: flex; align-items: center; gap: 6px; border: none; background: none; text-align: left; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--text); font-size: 13px; }
.data-tables button:hover { background: var(--surface-2); }
.data-tables button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.data-tables .n { font-size: 11px; color: var(--muted); }
.data-toolbar { flex-wrap: wrap; }
.data-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; align-items: flex-start; }
.data-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.data-filter .small.muted { width: 40px; text-align: right; }
.data-cols { position: relative; }
.data-cols-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 280px; max-height: 420px; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.data-wrap { overflow: auto; max-height: calc(100vh - 230px); }
.data-grid { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.data-grid th { position: sticky; top: 0; z-index: 2; cursor: pointer; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.data-grid td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; border-bottom: 1px solid var(--border); max-width: 0; }
.data-grid .data-first { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); font-weight: 600; }
.data-grid th.data-first { z-index: 3; background: var(--surface-2); }
.data-grid td.editable { cursor: text; }
.data-grid td.editable:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.data-grid td.editing { overflow: visible; white-space: normal; max-width: none; box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); position: relative; z-index: 4; }
.data-grid td.editing input:not([type=checkbox]), .data-grid td.editing textarea, .data-grid td.editing select { width: 100%; min-width: 120px; }
.data-open { font-weight: 600; }
.data-pager { justify-content: center; }
@media (max-width: 760px) { .data-layout { grid-template-columns: minmax(0, 1fr); } .data-tables { position: static; max-height: 180px; } }
.data-grid td:not(.editing) .pills { display: inline-flex; flex-wrap: nowrap; overflow: hidden; max-width: 100%; }
.data-grid td:not(.editing) .clip, .data-grid td:not(.editing) .pill { white-space: nowrap; -webkit-line-clamp: unset; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.data-group td { background: var(--surface-2); cursor: pointer; font-weight: 600; max-width: none; }
.data-group.cont td { cursor: default; opacity: .8; }
.data-group-label { position: sticky; left: 8px; display: inline-flex; align-items: center; gap: 8px; }
.data-group-pick select { margin-left: 4px; max-width: 180px; }

/* ---------- Data › Automations ---------- */
.auto-h { font-size: 15px; margin: 18px 0 8px; }
.auto-table td { vertical-align: top; }
.auto-detail pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 12px; overflow: auto; max-height: 320px; white-space: pre; margin: 6px 0 0; }

/* ---------- Knowledge base ---------- */
.kb-docs { display: flex; flex-direction: column; gap: 8px; }
.kb-doc-head { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; cursor: pointer; }
.kb-snip { margin-top: 2px; }
.kb-files { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; max-width: 45%; }
.kb-files a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kb-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; padding: 4px 14px 14px 38px; }
.kb-edit > label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.kb-edit .full { grid-column: 1 / -1; }
.kb-flags { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.unit-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.unit-card { max-width: 640px; }
.unit-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px 60px; gap: 10px; align-items: center; padding: 4px 6px; border-radius: 6px; }
.unit-row.src { background: var(--accent-soft); }
.unit-row input { text-align: right; font-variant-numeric: tabular-nums; width: 100%; }
.unit-name { font-size: 14px; }
.unit-sym { font-size: 13px; color: var(--muted); }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.calc-card h3 { margin: 0 0 4px; font-size: 15px; }
.calc-wide { grid-column: 1 / -1; }
.calc-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 0; }
.calc-inputs label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calc-in { display: flex; gap: 4px; }
.calc-in input, .calc-in select { min-width: 0; width: 100%; }
.calc-in .calc-unit { width: auto; flex: none; }
.calc-out { border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.calc-row b { text-align: right; font-variant-numeric: tabular-nums; }
.calc-note { margin-top: 8px; }
.calc-table td, .calc-table th { font-size: 13px; padding: 4px 10px; }
@media (max-width: 760px) { .unit-row { grid-template-columns: minmax(0, 1fr) 130px 44px; } .calc-grid { grid-template-columns: minmax(0, 1fr); } .kb-files { max-width: 100%; } }
.kb-group { display: flex; flex-direction: column; gap: 6px; }
.kb-group + .kb-group { margin-top: 10px; }
.kb-group-head { display: flex; align-items: center; gap: 8px; padding: 6px 4px; cursor: pointer; font-weight: 600; user-select: none; }

/* ---------- attachments (stored files) ---------- */
.att-list { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; vertical-align: middle; max-width: 100%; }
.att-img { display: inline-block; height: 32px; min-width: 32px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); line-height: 0; }
.att-img img { height: 100%; width: auto; max-width: 160px; object-fit: cover; display: block; }
.att-img.loading { width: 32px; }
.lfield .att-img, .kb-files .att-img, .rfq-grid .att-img { height: 110px; min-width: 110px; }
.lfield .att-img img, .kb-files .att-img img, .rfq-grid .att-img img { max-width: 260px; }
.lfield .att-img.loading, .kb-files .att-img.loading, .rfq-grid .att-img.loading { width: 110px; }
.att-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.att-chip.off { opacity: .55; }
.data-grid td:not(.editing) .att-list { flex-wrap: nowrap; overflow: hidden; }
.data-grid .att-img { height: 24px; min-width: 24px; }

/* ---------- Projects list: columns per stage ---------- */
.colfor { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.colfor select { flex: 1; min-width: 0; }
.colfor-note { margin-bottom: 8px; }
.stage-table + .stage-table { margin-top: 0; border-top: 6px solid var(--bg, transparent); }
.stage-table thead th { position: relative; } /* not sticky, but the column resize handle anchors to its header */
.stage-table tr.stage-cols th { background: var(--surface-2); font-size: 12px; }

/* ---------- uploading / downloading files ---------- */
.att-item { display: inline-flex; align-items: center; gap: 2px; position: relative; }
.att-dl, .att-x { border: none; background: none; cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 3px; color: var(--muted); border-radius: 4px; text-decoration: none; }
.att-dl:hover, .att-x:hover { background: var(--surface-2); color: var(--text); }
.att-item.img .att-dl, .att-item.img .att-x { position: absolute; top: 2px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); opacity: 0; }
.att-item.img .att-dl { right: 22px; }
.att-item.img .att-x { right: 2px; }
.att-item.img:hover .att-dl, .att-item.img:hover .att-x, .att-item.img:focus-within .att-dl, .att-item.img:focus-within .att-x { opacity: 1; }
.att-item.img .att-dl:only-of-type { right: 2px; }
.file-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px dashed var(--border); border-radius: 8px; min-height: 36px; }
.file-field.compact { padding: 3px; gap: 4px; }
.file-field.over { border-color: var(--accent); background: var(--accent-soft); }
.file-add { display: inline-flex; align-items: center; gap: 6px; }
.data-grid td.drop { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }

/* ---------- tabs on project / task pages: arrange tabs, columns in tabs ---------- */
.tabbar { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tabbar > .tabs { flex: 1; min-width: 0; border-bottom: none; margin-bottom: 0; }
.tabs-cfg { position: relative; }
.tabs-gear { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 12px; padding: 6px 8px; border-radius: 6px; white-space: nowrap; }
.tabs-gear:hover { background: var(--surface-2); color: var(--text); }
.tabs-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; width: 340px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.tabs-row { display: flex; align-items: center; gap: 6px; }
.tabs-first { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.tab-tools { margin: 4px 0 6px; }
.tab-table td { vertical-align: top; }
.tab-table .tab-check { width: 28px; }
.tab-table tr.done td { opacity: .55; }
.tab-table tr.done .title { text-decoration: line-through; }
.card-fields { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 13px; }

/* ---------- "are you sure?" box ---------- */
.confirm-back { z-index: 90; align-items: center; padding-top: 16px; animation: confirm-fade .12s ease-out; }
.confirm-box { width: 400px; padding: 20px 22px 16px; border-radius: 12px; animation: confirm-pop .14s ease-out; }
.confirm-head { display: flex; align-items: center; gap: 10px; }
.confirm-head h3 { margin: 0; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.confirm-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--bad-soft); color: var(--bad); }
.confirm-msg { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.confirm-box.danger .confirm-msg { margin-left: 38px; }
.confirm-msg strong { color: var(--text); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
@keyframes confirm-fade { from { opacity: 0; } }
@keyframes confirm-pop { from { opacity: 0; transform: scale(.96) translateY(6px); } }

/* ---------- status note page / clickable note cards ---------- */
.card.note.click { cursor: pointer; }
.card.note.click:hover { border-color: var(--accent); }
.note-open { margin-left: auto; opacity: 0; }
.card.note:hover .note-open, .note-open:focus { opacity: 1; }
.note-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note-text { padding: 12px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.note-text textarea { min-height: 90px; }

/* ---------- live updates dot (top bar) ---------- */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--muted); opacity: .5; vertical-align: middle; cursor: help; }
.live-dot.live { background: var(--good, #16a34a); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--good, #16a34a) 20%, transparent); }
.live-dot.connecting { background: var(--warn); opacity: .8; }

/* ---------- Data › Calculated fields ---------- */
.calc-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.calc-tile { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 170px; }
.calc-tile b { font-size: 22px; }
.calc-tile span { color: var(--muted); font-size: 13px; }
.calc-tile.good { border-left-color: var(--good); } .calc-tile.good b { color: var(--good); }
.calc-tile.warn { border-left-color: var(--warn); } .calc-tile.warn b { color: var(--warn); }
.calc-table { margin-bottom: 10px; padding: 0; overflow: hidden; }
.calc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; background: var(--surface-2); cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.calc-list { width: 100%; border-collapse: collapse; }
.calc-list td { padding: 7px 10px; border-top: 1px solid var(--border); vertical-align: middle; }
.calc-row.click { cursor: pointer; }
.calc-row.click:hover td { background: var(--row-hover, var(--surface-2)); }
.calc-name { font-weight: 500; min-width: 200px; }
.calc-kind { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.calc-state { font-size: 12px; border-radius: 10px; padding: 2px 8px; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.calc-state.ok, .calc-state.live { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.calc-state.expected { background: var(--accent-soft); color: var(--accent); }
.calc-state.diff { background: var(--warn-soft); color: var(--warn); }
.calc-state.bad { background: var(--bad-soft); color: var(--bad); }
.calc-match { min-width: 190px; }
.calc-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-bottom: 3px; max-width: 160px; }
.calc-bar span { display: block; height: 100%; background: var(--good); }
.calc-row.diff .calc-bar span { background: var(--warn); }
.calc-row.expected .calc-bar span { background: var(--accent); }
.calc-more { white-space: nowrap; color: var(--accent); }
.calc-ex > td { background: var(--surface-2); }
.calc-extable { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 4px; }
.calc-extable th { text-align: left; font-weight: 500; color: var(--muted); padding: 4px 8px; }
.calc-extable td { padding: 4px 8px; border-top: 1px solid var(--border); word-break: break-word; max-width: 420px; }
@media (max-width: 760px) { .calc-list td:nth-child(2), .calc-list td:nth-child(5) { display: none; } .calc-name { min-width: 0; } }
.calc-state.sync { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border); }

/* ---------- project page: layout per stage; client fields in pickers ---------- */
.layout-for { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.layout-for select { font-size: 13px; }
.fadder-group { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 8px 2px; }

/* ---------- Projects list: drag a project to another stage; columns menu by table ---------- */
tr.proj-row[draggable="true"] { cursor: grab; }
tr.proj-row.dragging td { opacity: .45; }
tr.group-row.drop-target td { box-shadow: inset 0 0 0 2px var(--accent); }
tr.proj-row.drop-into td { background: var(--accent-soft) !important; }
.drop-hint { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--accent); }
.colgroup-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 4px 2px; }

/* ---------- project page: + Add client ---------- */
.add-client-btn { margin-left: 6px; vertical-align: middle; }
.form.add-client { margin: 10px 0 14px; }
.form .section-label { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; margin-top: 4px; }
.add-client-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.add-client-code .proj-code { width: 110px; }

/* ---------- Projects list: stage bands to the right edge (filler column takes the leftover width) ---------- */
table.sized.fill { width: 100%; }
table.sized .fill-col { padding: 0 !important; border-left: none; }
@media (max-width: 760px) { table.sized td.fill-col, table.sized th.fill-col, table.sized col.fill-col { display: none; } table.sized.fill { min-width: 0 !important; } }

/* ---------- sideways scrollbar pinned to the bottom of the window ---------- */
.float-scroll { position: fixed; bottom: 0; height: 16px; overflow-x: auto; overflow-y: hidden; z-index: 35;
  background: color-mix(in srgb, var(--surface) 85%, transparent); border-top: 1px solid var(--border); }
@media (max-width: 760px) { .float-scroll { display: none !important; } }

/* the side panel lies over the page: give it a shadow so the edge reads clearly */
.peek { box-shadow: -10px 0 30px rgba(0, 0, 0, .18); }

/* ---------- stacked side panels ---------- */
.peek-under { animation: none; }
.peek-under .peek-head { background: var(--surface-2); }
.peek-cover { position: absolute; inset: 0; z-index: 4; cursor: pointer; background: rgba(0, 0, 0, .10); transition: background .12s; }
.peek-cover:hover { background: rgba(0, 0, 0, .04); }
.peek-top { box-shadow: -14px 0 28px rgba(0, 0, 0, .22); }

/* status note forms: optional date (Date Override) */
.note-date { width: 140px; flex: none; align-self: flex-start; }

/* ---------- Time › Calendar: add time on a day ---------- */
.cal-date { display: flex; align-items: center; gap: 4px; }
.cal-date b { margin-left: auto; }
.cal-add { opacity: 0; border: 1px solid var(--border); background: var(--surface); color: var(--accent); border-radius: 50%; width: 18px; height: 18px;
  line-height: 15px; padding: 0; font-size: 13px; cursor: pointer; flex: none; }
.cal-day:hover .cal-add, .cal-add:focus { opacity: 1; }
.cal-add:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (hover: none) { .cal-add { opacity: .6; } }
.cal-add-form { margin: 0 12px 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 8px; }
.cal-add-form .cal-add-project, .cal-add-form .cal-add-task { grid-column: span 2; }

/* ---------- company logo (user, 2026-10-21) — logo-dark.png = the same logo with light lettering for dark mode ---------- */
.brand .logo-img { height: 42px; width: auto; display: block; }
.login .brand .logo-img { height: 64px; }
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-dark { display: block; }
}
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }

/* ---------- several clocks (one running, up to two paused) ---------- */
.clocks { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.clock.paused { padding-left: 8px; font-size: 12px; }
.clock.paused .clock-task { max-width: 130px; }
.cs-choices { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.cs-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; height: auto; white-space: normal; }
.cs-choice span { font-size: 12px; font-weight: 400; opacity: .85; }

/* the clocks get their own line at the bottom of the top bar, under the logo (user, 2026-10-21): running one first, paused ones
   to its right in soft amber = "parked, don't forget me" */
.clocks { flex-basis: 100%; flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: -4px; }
.clock.paused { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); color: var(--warn); }
.clock.paused .clock-time { font-weight: 600; }
.clocks .clock-task { max-width: 140px; } /* full name on hover; keeps the top bar on one line on wide screens */

/* project code in front of the task name on each clock */
.clock-code { font-weight: 700; }
.clocks .clock-task { max-width: 200px; }

/* click a clock's time → ClockPanel drops down under it (correct the time, notes) */
.clock-wrap { position: relative; }
.clock-open { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: inherit; font: inherit; padding: 0;
  cursor: pointer; border-radius: 10px; }
.clock-open:hover .clock-time, .clock.open .clock-time { text-decoration: underline; }
.clock-has-note { font-size: 11px; opacity: .7; }
.clock-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 55; width: 360px; max-width: calc(100vw - 32px); padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 10px; color: var(--text); }
.cp-head { display: flex; flex-direction: column; gap: 2px; }
.cp-time { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-clock { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-adj { margin-top: -6px; text-align: center; }
.clock-panel label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.clock-panel textarea { width: 100%; font-size: 14px; color: var(--text); }
.cp-foot { text-align: right; }
.cp-hint { opacity: .75; }

/* ---------- change history (History tab / section) ---------- */
.hist { padding: 6px 14px 12px; }
.hist-bar { display: flex; align-items: center; gap: 10px; padding: 6px 0 4px; }
.hist-day { margin-top: 8px; }
.hist-date { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 6px 0 4px;
  border-bottom: 1px solid var(--border); }
.hist-item { padding: 8px 0 8px 12px; border-left: 3px solid var(--accent); margin: 6px 0; }
.hist-item.sync { border-left-color: var(--border); }
.hist-item.automatic, .hist-item.admin { border-left-color: var(--warn); }
.hist-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.hist-time { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 62px; }
.hist-who { font-weight: 600; }
.hist-who:not(.person) { font-weight: 500; color: var(--muted); }
.hist-what { color: var(--muted); }
.hist-changes { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.hist-change { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 13px; }
.hist-change .hist-field { color: var(--muted); font-size: 12px; }
.hist-change .hist-old { text-decoration: line-through; opacity: .65; min-width: 0; }
.hist-change .hist-new { min-width: 0; }
.hist-change .hist-arrow { color: var(--muted); }
.hist-change .clip { white-space: normal; word-break: break-word; }
.hist-change:not(:has(.hist-old)) { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); }
.hist-empty { font-style: italic; font-size: 12px; }
.hist-section { margin-top: 18px; }
.hist-section .te-h { cursor: pointer; user-select: none; }
@media (max-width: 760px) {
  .hist-change, .hist-change:not(:has(.hist-old)) { grid-template-columns: 1fr; gap: 2px; }
  .hist-change .hist-arrow { display: none; }
}
.hist-change .hist-old:has(.hist-empty) { text-decoration: none; }

/* ---------- Data › History ---------- */
.dh-bar { flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.dh-bar label.small { display: flex; flex-direction: column; gap: 2px; }
.dh-search { min-width: 220px; }
.dh-count { margin: 4px 0 8px; }
.dh-group { margin-bottom: 10px; }
.dh-head { display: flex; align-items: center; gap: 8px; padding: 8px 0 6px; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; }
.hist-rec { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.hist-table { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }

/* Projects list: + To-do / + Note at the right end of each project row; stays in view when the list scrolls sideways */
table.sized col.act-col { width: 150px; }
table.sized .act-col { position: sticky; right: 0; z-index: 1; text-align: right; white-space: nowrap; padding: 4px 8px; }
/* the cell itself is see-through, so it only hides what's directly under the two buttons (user, 2026-10-27: a full-width box covered
   the last column well beyond the buttons); the buttons are solid and faint (muted text) until the row is hovered */
table.sized td.act-col, table.sized th.act-col { background: transparent !important; } /* beats the striped / hovered row colours */
table.sized td.act-col .btn { background: var(--surface); color: var(--muted); }
table.sized tr:hover td.act-col .btn, table.sized td.act-col .btn.on { color: var(--text); }
table.sized td.act-col .btn:hover { background: var(--surface-2); }
.quick-add-row > td { background: var(--surface-2); }
.quick-add { padding: 4px 8px 8px 36px; position: sticky; left: 0; max-width: min(900px, calc(100vw - 60px)); box-sizing: border-box; } /* stays in view on a wide list */
.quick-add .wc-form { margin-top: 6px; padding-top: 0; border-top: none; }
@media (hover: none) { table.sized td.act-col .btn { color: var(--text); } }
@media (max-width: 760px) { table.sized td.act-col, table.sized th.act-col { position: static; text-align: left; } }

/* hover highlight on rows that had none: Data grid, history entries, to-do lines, the Settings preview */
.data-grid tbody tr:hover td, .hist-item:hover, .wt-line:hover, .preview-row:hover { background: var(--row-hover, var(--surface-2)); }
.stripe-tasks .preview-row.alt:hover { background: var(--row-hover, var(--surface-2)); }
.quick-note .form { margin-top: 6px; }
.wc-form .todo-desc { flex: 1 1 100%; order: 1; } /* description on its own line under the to-do */
.wc-form .todo-desc ~ .btn { order: 2; }

/* drag handle on the right edge of the timeline's name column header */
.tl-corner { position: sticky; }
.tl-name-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 5; }
.tl-name-resize::after { content: ''; position: absolute; top: 20%; bottom: 20%; left: 3px; width: 2px; border-radius: 1px; background: var(--border); }
.tl-name-resize:hover::after, body.col-resizing .tl-name-resize::after { background: var(--accent); }
body.col-resizing { cursor: col-resize; user-select: none; }
.tl-name { overflow: hidden; text-overflow: ellipsis; }

/* Projects page card: hours this week by stage */
table.wk-stage { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: 400; margin-top: 2px; }
table.wk-stage th { font-size: 11px; font-weight: 600; color: var(--muted); text-align: right; padding: 2px 6px; white-space: nowrap; }
table.wk-stage td { text-align: right; padding: 3px 6px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.wk-stage td:first-child, table.wk-stage th:first-child { text-align: left; padding-left: 0; }
table.wk-stage tfoot td { font-weight: 700; border-top: 2px solid var(--border); }

/* time entry page: Non-billable tick */
.nonbill-big { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-weight: 600; }
.nonbill-big.on { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
/* Hours this week by stage: two header groups */
table.wk-stage tr.wk-groups th { text-align: center; color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding-bottom: 0; }
table.wk-stage .grp { border-left: 1px solid var(--border); }
table.wk-stage tr.wk-groups th.grp { border-bottom: 1px solid var(--border); }

/* Hours & capacity this week: summary strip above the table */
.wk-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 2px 0 10px; }
.wk-sum > div { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); font-weight: 400; }
.wk-sum span { font-size: 11px; color: var(--muted); }
.wk-sum b { font-size: 18px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .wk-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wk-table-wrap { overflow-x: auto; max-width: 100%; }
.card.kpi:has(.wk-sum) { min-width: 0; overflow: hidden; }

/* Needs attention card */
.attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px; font-size: 13px; font-weight: 400; margin-top: 2px; }
.attn-title { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.attn-item summary { cursor: pointer; padding: 3px 0; list-style: none; display: flex; align-items: baseline; gap: 6px; }
.attn-item summary::-webkit-details-marker { display: none; }
.attn-item summary::before { content: '▸'; color: var(--muted); font-size: 11px; width: 10px; }
.attn-item[open] summary::before { content: '▾'; }
.attn-item summary b { min-width: 22px; text-align: right; font-size: 15px; }
.attn-list { display: flex; flex-direction: column; gap: 3px; padding: 2px 0 6px 40px; font-size: 12px; }
.attn-list > div { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.attn-list .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.attn-why { margin-left: auto; color: var(--muted); white-space: nowrap; }
.days.good { color: var(--good); }
.attn-item summary { color: var(--text); }

/* ---------- formatted long text (markdown) ---------- */
.md { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 6px; }
.md .md-h { margin: 10px 0 4px; line-height: 1.25; }
.md h3.md-h { font-size: 19px; } .md h4.md-h { font-size: 16px; } .md h5.md-h { font-size: 14px; text-transform: none; }
.md code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }
.md .md-pre { background: var(--surface-2); padding: 8px 10px; border-radius: 6px; overflow-x: auto; margin: 4px 0 8px; }
.md .md-pre code { background: none; padding: 0; }
.md mark { background: color-mix(in srgb, #facc15 45%, transparent); color: inherit; padding: 0 2px; border-radius: 2px; }
.md .md-hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.md .md-quote { margin: 4px 0 8px; padding: 2px 10px; border-left: 3px solid var(--border); color: var(--muted); }
.md .md-list { margin: 2px 0 6px; padding-left: 22px; }
.md .md-list .md-list { margin: 2px 0; }
.md .md-tasks { list-style: none; padding-left: 4px; }
.md .md-tasks .md-tasks, .md .md-tasks .md-list { padding-left: 22px; }
.md .md-task { display: block; }
.md .md-task > .md-cb { vertical-align: -3px; margin-right: 6px; }
.md .md-task-on > .md-li { color: var(--muted); text-decoration: line-through; }
.md-cb { display: inline-block; width: 16px; height: 16px; padding: 0; border: 1.5px solid var(--muted); border-radius: 4px; background: var(--surface);
  position: relative; cursor: pointer; flex: none; }
.md-cb:disabled { cursor: default; }
.md-cb-half { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, var(--surface)); }
.md-cb-half::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; background: var(--warn); border-radius: 1px; }
.md-cb-on { border-color: var(--good); background: var(--good); }
.md-cb-on::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.md-cb:not(:disabled):hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.md-c-red { color: #dc2626; } .md-c-orange { color: #ea580c; } .md-c-green { color: #16a34a; }
.md-c-blue { color: #2563eb; } .md-c-purple { color: #9333ea; } .md-c-grey { color: #6b7280; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .md-c-red { color: #f87171; } :root:not([data-theme="light"]) .md-c-orange { color: #fb923c; }
  :root:not([data-theme="light"]) .md-c-green { color: #4ade80; } :root:not([data-theme="light"]) .md-c-blue { color: #60a5fa; }
  :root:not([data-theme="light"]) .md-c-purple { color: #c084fc; } :root:not([data-theme="light"]) .md-c-grey { color: #9ca3af; } }
:root[data-theme="dark"] .md-c-red { color: #f87171; } :root[data-theme="dark"] .md-c-orange { color: #fb923c; } :root[data-theme="dark"] .md-c-green { color: #4ade80; }
:root[data-theme="dark"] .md-c-blue { color: #60a5fa; } :root[data-theme="dark"] .md-c-purple { color: #c084fc; } :root[data-theme="dark"] .md-c-grey { color: #9ca3af; }
.md-bg-red { background: #dc2626; } .md-bg-orange { background: #ea580c; } .md-bg-green { background: #16a34a; }
.md-bg-blue { background: #2563eb; } .md-bg-purple { background: #9333ea; } .md-bg-grey { background: #6b7280; }

.md-field { min-height: 34px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: text; }
.md-field:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.md-field:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.md-field.compact { max-height: 4.6em; overflow: hidden; padding: 3px 7px; min-height: 0; }
.md-field.compact .md { font-size: 13px; }
.md-editor { display: flex; flex-direction: column; gap: 0; width: 100%; }
.md-editor textarea { width: 100%; border-top-left-radius: 0; border-top-right-radius: 0; font-size: 14px; line-height: 1.45; resize: vertical; }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--surface-2); }
.md-tool { min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text);
  font-size: 12px; font-weight: 600; cursor: pointer; }
.md-tool:hover { background: var(--surface); border-color: var(--border); }
.md-colors { position: relative; display: inline-flex; }
.md-color-menu { position: absolute; top: 28px; left: 0; z-index: 20; display: flex; gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.md-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.note .body .md, .note-line .body .md { font-size: inherit; }

/* smoother editing (2026-10-22): the box sits exactly where the formatted text was (same border, padding, font), grows with the
   text, and the toolbar floats just above it instead of pushing everything down */
.md-field { padding: 6px 9px; line-height: 1.5; }
.md-editor.floating { position: relative; }
.md-editor.floating .md-toolbar { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 30; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); background: var(--surface); }
.md-editor.floating textarea { border-radius: 8px; padding: 6px 9px; line-height: 1.5; font-size: 14px; min-height: 34px;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.md-editor textarea { overflow-y: hidden; resize: none; }
.md-editor.floating .md-color-menu { top: auto; bottom: 30px; }

/* log-time forms: Non-billable tick right of the Hours box, lined up with it */
.form .hours-nb { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.form .hours-nb > label:first-child { flex: 1 1 auto; min-width: 70px; }
.form .hours-nb .nb-check { display: inline-flex; align-items: center; gap: 6px; height: 34px; white-space: nowrap; font-size: 13px; color: var(--text); cursor: pointer; }
.form .hours-nb .nb-check input { margin: 0; }
.te-form .hours-nb { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.te-form .hours-nb > label:first-child { flex: 1 1 auto; min-width: 70px; }
.te-form .hours-nb .nb-check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 34px; white-space: nowrap; font-size: 13px; color: var(--text); cursor: pointer; }

/* Non-billable as its own little field beside Hours: label on top (same as the other labels), tick box level with the inputs */
.form .hours-nb, .te-form .hours-nb { display: flex; align-items: stretch; gap: 12px; min-width: 0; }
.form .hours-nb > label:first-child, .te-form .hours-nb > label:first-child { flex: 1 1 auto; min-width: 90px; }
.hours-nb .nb-col { flex: none; display: flex !important; flex-direction: column; justify-content: space-between; gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer; }
.hours-nb .nb-box { display: flex; align-items: center; justify-content: center; height: 34px; }
.hours-nb .nb-box input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.hours-nb .nb-col { justify-content: flex-start; line-height: normal; }

/* Dashboard card: hours & margin by client (2026-10-24): two touching bars per client, rows as tall as Hours by client's */
.chm { display: grid; gap: 8px; margin-top: 2px; }
.chm-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.chm-tools .small-seg button { padding: 1px 8px; font-size: 11px; }
.chm-key { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.chm-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: -4px; }
.chm-row { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 12px; cursor: default; }
.chm-bars { display: grid; gap: 0; min-width: 0; }
.chm-bars i { display: block; height: 7px; border-radius: 0 3px 3px 0; min-width: 1px; }
.chm-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chm-val b { font-weight: 500; }
.chm-val b.bad { color: var(--bad); }
.chm i.h { background: var(--series-1); }
.chm i.m { background: var(--good); }
.chm i.neg { background: var(--bad); }
.chm-row:hover .chm-bars i { filter: brightness(1.12); }
/* the key and sort switch sit in the card's title line, so the card is as tall as Hours by client */
.card:has(.chm) { position: relative; }
.chm { container-type: inline-size; }
.chm-tools { position: absolute; top: 12px; right: 16px; }
.chm-key .linkish { font-size: 11px; margin-left: 4px; }
@container (max-width: 530px) { .chm-tools { position: static; } }
/* the bar the card isn't sorted by is dulled (user, 2026-10-24) */
.chm.by-hours .chm-bars i:not(.h), .chm.by-profit .chm-bars i.h,
.chm.by-hours .chm-key i:not(.h), .chm.by-profit .chm-key i.h { opacity: .3; }
.chm.by-hours .chm-val .v-m, .chm.by-profit .chm-val .v-h { opacity: .55; }

/* task lists: + To-do / + Note at the right end of every task row (user, 2026-10-25); stays in view when the list scrolls sideways */
.tree-act { display: flex; justify-content: flex-end; gap: 4px; position: sticky; right: 0; z-index: 2; background: inherit;
  align-self: stretch; align-items: center; margin-right: -10px; padding-right: 10px; white-space: nowrap; }
.tree-act .btn { opacity: .5; }
.tree-row:hover .tree-act .btn, .tree-act .btn.on { opacity: 1; }
.tree-head .tree-act { background: inherit; }
.tree-quick-row { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tree-quick-row .quick-add { padding-left: 32px; }
@media (hover: none) { .tree-act .btn { opacity: 1; } }
@media (max-width: 760px) { .tree-act { position: static; grid-column: 2; justify-content: flex-start; margin: 0; padding: 0; } }
/* Projects list: an expanded project's task list stays within the window (it scrolls sideways on its own), so the task rows'
   + To-do / + Note buttons are in view even when the projects table is wider than the window */
.expand-row .nested { position: sticky; left: 0; max-width: calc(100vw - 110px); box-sizing: border-box; }

/* project page: Hero Image across the top, view only (2026-10-26) */
/* pinned to the top-right corner of the header, level with the project name; the header keeps room for it */
.phead.has-hero { position: relative; padding-right: 196px; min-height: 80px; }
.hero-img { position: absolute; top: 0; right: 0; display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); line-height: 0; }
.hero-img img { display: block; height: 76px; width: auto; max-width: 180px; object-fit: contain; }
.hero-img.loading { width: 110px; height: 76px; }
.peek .phead.has-hero { padding-right: 152px; min-height: 64px; }
.peek .hero-img img { height: 60px; max-width: 140px; }
@media (max-width: 760px) { .phead.has-hero { padding-right: 0; } .hero-img { position: static; order: -1; } }

/* explanations on cards / tiles (data-help, 2026-10-26) */
.help-tip { position: fixed; z-index: 95; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: 9px 12px; font-size: 12.5px; line-height: 1.45; white-space: pre-line; }
.card[data-help] > .label::after { content: " ⓘ"; opacity: .45; font-weight: 400; }

/* Bills page (2026-10-26) */
table.bills td { padding: 3px 6px; vertical-align: middle; }
table.bills .cell-in { width: 100%; min-width: 0; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 6px; font: inherit; color: inherit; }
table.bills .cell-in:hover { border-color: var(--border); }
table.bills .cell-in:focus { border-color: var(--accent); background: var(--surface); outline: none; }
table.bills .cell-in.name { min-width: 180px; font-weight: 500; }
table.bills .cell-in.num { text-align: right; max-width: 110px; }
table.bills .cell-in.bad { color: var(--bad); font-weight: 600; }
table.bills .cell-in.status.ok { color: var(--good); }
table.bills tr.paid td { opacity: .7; }
table.bills tr.late td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.bills tr.bill-more > td { background: var(--surface-2); }
.bill-more-in { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr); gap: 12px; padding: 6px 4px; }
.bill-more-in textarea { width: 100%; }
@media (max-width: 760px) { .bill-more-in { grid-template-columns: 1fr; } }
table.bills select.cell-in { min-width: 135px; }
table.bills input[type=date].cell-in { min-width: 130px; }

/* bills: attachment cell (view / download / add / drop) and tab counts */
table.bills td.bill-files { min-width: 150px; }
table.bills td.bill-files .file-field.compact { padding: 2px; border: none; background: none; min-height: 0; }
.seg button .count { opacity: .65; font-size: 11px; }

/* bills list: fixed column widths (dragged), inputs fill their column */
table.bills.sized { table-layout: fixed; }
table.bills.sized th { position: relative; }
table.bills.sized select.cell-in, table.bills.sized input[type=date].cell-in, table.bills.sized .cell-in.name { min-width: 0; }
table.bills.sized .cell-in.num { max-width: none; }

/* Settings › Who can sign in */
.access-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.access-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.access-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }

/* Data › Choices */
.choices { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start; }
.choices-nav { padding: 8px; max-height: 75vh; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.choices-nav input { margin-bottom: 6px; }
.choices-table { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 8px 6px 2px; }
.choices-field { text-align: left; border: none; background: none; padding: 5px 8px; border-radius: 6px; cursor: pointer; color: var(--text); font: inherit; font-size: 13px; }
.choices-field:hover { background: var(--row-hover, var(--surface-2)); }
.choices-field.on { background: var(--accent-soft); color: var(--accent); }
.choices-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.choices-head h3 { margin: 0; }
.choices-table-rows { width: 100%; border-collapse: collapse; font-size: 13px; }
.choices-table-rows th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px; border-bottom: 1px solid var(--border); }
.choices-table-rows td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.choices-table-rows .num { text-align: right; }
.choice-name { min-width: 220px; }
.cpick { position: relative; display: inline-block; }
.cpick-btn { width: 34px; height: 20px; border-radius: 999px; border: 1px solid var(--border); cursor: pointer; }
.cpick-btn:disabled { cursor: default; }
.cpick-menu { position: absolute; z-index: 30; top: 24px; left: 0; padding: 8px; display: grid; grid-template-columns: repeat(5, 22px); gap: 5px; }
.cpick-sw { width: 22px; height: 16px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; }
.cpick-sw.on { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 760px) { .choices { grid-template-columns: 1fr; } }

/* Data › Fields */
.fields-table .field-desc { width: 100%; min-width: 180px; border-color: transparent; background: transparent; }
.fields-table .field-desc:hover, .fields-table .field-desc:focus { border-color: var(--border); background: var(--surface); }
.choices-head .grow { flex: 1; }
.field-add { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.field-add h3 { margin: 0; }
.field-add label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.field-add-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field-add-row label { flex: 1 1 200px; }
.field-add-choices { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.field-add-choice { display: flex; gap: 8px; align-items: center; }

/* project page: archive / unarchive reason */
.archive-reason { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.archive-reason textarea { width: 100%; font: inherit; font-size: 14px; color: var(--text); }

/* status note form: follow-up to-do part (opens with "+ Add follow-up") */
.followup-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); }
.followup-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.followup-box label { display: flex; flex-direction: column; gap: 4px; }
.followup-box input[type=date] { max-width: 200px; }

/* project / task page header: "+ Note" / "+ To-do" form under the header */
.head-quick { margin: 0 0 12px; }
.head-quick .quick-add { margin: 0; padding: 0; position: static; max-width: none; }
.actions .btn.active { background: var(--surface-2); border-color: var(--accent, var(--border)); }
/* the see-through + To-do / + Note cell shows the row itself, so the row carries every colour its cells get too
   (header, expanded project, stripe, hover, drop target) */
table.sized thead tr { background: var(--surface-2); }
table.sized tr.click.open { background: var(--surface-2); }
.stripe-projects table.sized tr.click.alt:not(.open) { background: var(--stripe); }
table.sized tr.click:hover { background: var(--row-hover, var(--surface-2)); }
table.sized tr.proj-row.drop-into { background: var(--accent-soft); }