/* ═══════════════════════════════════════════════════════════════
   theme.css — CBMVN MTP Project Monitor
   Built ON TOP of design/tokens.css + design/base.css (LINE Regional).
   Patterns reproduced from design/presets: sidebar-nav, login-page,
   stats-cards, dashboard-overview, data-table, filter-bar, confirm-dialog.
   Rule: use var(--…) tokens only — never hardcode themeable values.
   CSP: no inline style attributes anywhere; dynamic widths/positions are
   applied by app.js from data-w / data-left.
   ═══════════════════════════════════════════════════════════════ */
html, body { margin: 0; min-height: 100%; }
body.ui { background: var(--surface-page); color: var(--text-body); font-size: var(--text-sm); line-height: var(--lh-snug); -webkit-font-smoothing: antialiased; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--brand-100); }
h1, h2, h3 { margin: 0; }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-xs); }
.tiny { font-size: var(--text-2xs); }
.center { text-align: center; }
.text-bad { color: var(--bad-fg); }
.link { color: var(--text-link); font-weight: var(--fw-semibold); }
.w-110 { width: 110px; }

/* ── App shell: left nav + main ─────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { flex: 1; padding: var(--space-3) var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Sidebar (preset: sidebar-nav) — collapses to an icon rail ── */
.nav { width: 236px; flex: 0 0 auto; position: sticky; top: 0; height: 100vh; background: var(--surface-card); border-right: 1px solid var(--line); display: flex; flex-direction: column; transition: width var(--dur-slow) var(--ease-standard); overflow: hidden; }
.nav-top { display: flex; align-items: center; gap: 10px; padding: 14px 14px; }
.nav-logo { width: 34px; height: 34px; flex: none; background: var(--primary); color: var(--text-on-brand); font-weight: var(--fw-heavy); font-size: 14px; letter-spacing: .04em; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.nav-logo:hover { text-decoration: none; background: var(--primary-hover); }
.nav-brand { font-weight: var(--fw-bold); font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-burger { width: 34px; height: 34px; flex: none; margin-left: auto; border: none; background: transparent; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-body); }
.nav-burger:hover { background: var(--surface-subtle); color: var(--primary-ink); }
.nav-burger-i, .nav-burger-i::before, .nav-burger-i::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.nav-burger-i::before { position: absolute; top: -6px; }
.nav-burger-i::after { position: absolute; top: 6px; }
.nav-list { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; }
.nav-group { font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle); padding: 12px 10px 5px; white-space: nowrap; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; text-decoration: none; white-space: nowrap; border: none; background: transparent; width: 100%; text-align: left; }
.nav-item:hover { background: var(--surface-subtle); color: var(--text-body); text-decoration: none; }
.nav-item:hover .nav-ic { color: var(--text-body); }
.nav-item.on { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary-ink); }
.nav-ic { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.nav-ic svg { width: 19px; height: 19px; }
.nav-item.on .nav-ic { color: var(--primary-ink); }
.nav-lab { overflow: hidden; text-overflow: ellipsis; }
/* Profile + sign-out pinned to the bottom */
.nav-foot { border-top: 1px solid var(--line); padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.nav-profile { display: flex; align-items: center; gap: 10px; padding: 4px 4px; }
.nav-av { background: var(--accent); color: var(--text-on-brand); font-size: 12px; flex: none; }
.nav-user { flex: 1; min-width: 0; }
.nav-un { font-size: 13px; font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-ur { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-logout-form { margin: 0; }
.nav-logout:hover { color: var(--bad-fg); background: var(--bad-bg); }
.nav-logout:hover .nav-ic { color: var(--bad-fg); }
/* collapsed rail */
html.nav-collapsed .nav { width: 66px; }
html.nav-collapsed .nav-brand, html.nav-collapsed .nav-lab, html.nav-collapsed .nav-user, html.nav-collapsed .nav-group { display: none; }
html.nav-collapsed .nav-top { flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; }
html.nav-collapsed .nav-burger { margin-left: 0; }
html.nav-collapsed .nav-item { justify-content: center; padding: 9px 0; }
html.nav-collapsed .nav-list { padding: 8px; }
html.nav-collapsed .nav-profile { justify-content: center; }
@media (max-width: 900px) {
  .nav { width: 66px; }
  .nav-brand, .nav-lab, .nav-user, .nav-group { display: none; }
  .nav-top { flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; }
  .nav-burger { display: none; }
  .nav-item { justify-content: center; padding: 9px 0; }
  .nav-profile { justify-content: center; }
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 var(--space-4); background: var(--surface-card); border-bottom: 1px solid var(--line); }
.topbar-title { font-weight: var(--fw-bold); font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--radius-pill); flex: 0 1 260px; min-width: 120px; margin-left: auto; }
.topbar-search:focus-within { border-color: var(--primary); background: var(--surface-card); }
.topbar-sic { display: inline-flex; color: var(--text-subtle); }
.topbar-sic svg { width: 15px; height: 15px; }
.topbar-sinp { border: none; outline: none; background: transparent; font: inherit; font-size: 13px; width: 100%; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.topbar-actions form { margin: 0; }
.lang-switch { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); margin-left: 4px; }
.lang-switch a { color: var(--text-muted); padding: 2px 4px; }
.lang-switch a.on { color: var(--primary-ink); }
.lang-switch .sep { padding: 0 2px; }
.btn svg { width: 15px; height: 15px; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost:hover { background: var(--surface-subtle); }
.btn-danger:hover { filter: brightness(.92); }
.btn-icon svg { width: 14px; height: 14px; }
.btn-icon-round { width: 30px; height: 30px; padding: 0; border-radius: 50%; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Page head (preset: breadcrumb-header / dashboard-overview) ── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 4px 2px 0; }
.kicker { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); }
.page-title { margin: 2px 0 0; font-size: var(--text-xl); font-weight: var(--fw-bold); }

/* ── Flash ─────────────────────────────────────────────────── */
.flash { padding: 10px 14px; border-radius: var(--radius); font-size: var(--text-sm); border: 1px solid; }
.flash.success { background: var(--ok-bg); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok-fg) 40%, transparent); }
.flash.error { background: var(--bad-bg); color: var(--bad-fg); border-color: color-mix(in srgb, var(--bad-fg) 40%, transparent); }
.flash.info { background: var(--info-bg); color: var(--info-fg); border-color: color-mix(in srgb, var(--info-fg) 40%, transparent); }

/* ── KPI cards (preset: stats-cards) ─────────────────────────── */
.kpi-row { display: grid; gap: 8px; }
.kpi-6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi { padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.kpi-label { font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.kpi-val { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kpi-num { font-size: 22px; font-weight: var(--fw-heavy); letter-spacing: -.01em; }
.kpi-unit { font-size: 11px; color: var(--text-subtle); }
.kpi-text { font-size: 14px; font-weight: var(--fw-bold); margin-top: 2px; }
.tone-doing { color: var(--brand-600); }
.tone-done { color: var(--brand-800); }
.tone-todo { color: var(--text-muted); }
.progress { height: 6px; border-radius: 3px; background: var(--gray-100); overflow: hidden; margin-top: 4px; }
.progress i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 3px; }

/* ── Panels (preset: dashboard-overview) ─────────────────────── */
.grid-auto-320 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.grid-auto-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.panel { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.panel-h h3 { font-size: 13px; font-weight: var(--fw-bold); }
.panel-h-inner { border-top: 1px solid var(--line); padding-top: 10px; }
.panel-note { font-size: 11px; border-top: 1px solid var(--line); padding-top: 8px; }
.panel-total { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--line); padding-top: 8px; }
.stack-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--gray-100); }
.stack-seg { width: 0; }
.legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.legend { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend-l { flex: 1; color: var(--gray-800); }
.legend-pct { width: 34px; text-align: right; }
.dot { width: 10px; height: 10px; border-radius: 5px; flex: none; }
/* status colours (stack bar, dots) */
.st-bg-doing { background: var(--brand-600); }
.st-bg-done { background: var(--brand-800); }
.st-bg-on_hold { background: #F5B301; }
.st-bg-todo { background: var(--gray-400); }
/* horizontal bars */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: 12px; }
.bar-row-wide { grid-template-columns: minmax(60px, 120px) minmax(0, 1fr) 90px; }
.bar-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gray-800); font-weight: var(--fw-medium); }
.bar-t { height: 16px; background: var(--gray-100); border-radius: 8px; overflow: hidden; }
.bar-t i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 8px; transition: width var(--dur-slow) var(--ease-out); }
.bar-t i.bar-dark { background: var(--brand-800); }
.bar-v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-bi { background: var(--brand-600); } .cat-bp { background: var(--brand-800); } .cat-infra { background: var(--info-600); } .cat-other { background: var(--gray-500); }
.rank-0 { background: var(--brand-600); } .rank-1 { background: var(--brand-800); } .rank-2 { background: var(--brand-500); } .rank-3 { background: #8FE5B3; }
.rank-4 { background: var(--info-600); } .rank-5 { background: var(--gray-500); } .rank-6 { background: var(--gray-400); } .rank-7 { background: var(--gray-300); }
/* due lists */
.due-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.due-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 8px; border-radius: 8px; background: var(--surface-subtle); color: var(--text-body); }
.due-item:hover { background: var(--brand-050); text-decoration: none; }
.due-item.due-late { background: var(--bad-bg); }
.due-item.due-late:hover { background: color-mix(in srgb, var(--bad-fg) 18%, var(--surface-card)); }
.due-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-semibold); }
.due-d { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* activity */
.acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.act { display: flex; gap: 10px; align-items: flex-start; padding: 6px 2px; }
.act .avatar { width: 28px; height: 28px; font-size: 11px; }
.act-x { font-size: 12.5px; line-height: 1.4; }
.act-t { font-size: 11px; margin-top: 1px; }

/* ── Status pills / inline select ────────────────────────────── */
.pill-cat { background: var(--gray-100); color: var(--gray-800); }
.st-pill-todo { background: var(--gray-100); color: var(--gray-800); }
.st-pill-doing { background: var(--brand-600); color: var(--text-on-brand); }
.st-pill-done { background: var(--brand-800); color: var(--text-on-brand); }
.st-pill-on_hold { background: #FDE68A; color: #7C4A03; }
.status-select { height: 26px; border: none; border-radius: 13px; padding: 0 22px 0 10px; font-weight: var(--fw-bold); font-size: 11.5px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 7px center; background-size: 10px; }
.status-select.st-todo { background-color: var(--gray-100); color: var(--gray-800); }
.status-select.st-doing { background-color: var(--brand-600); color: var(--text-on-brand); }
.status-select.st-done { background-color: var(--brand-800); color: var(--text-on-brand); }
.status-select.st-on_hold { background-color: #FDE68A; color: #7C4A03; }
.status-select:disabled { cursor: default; opacity: .9; }
.plan-late { color: var(--bad-fg) !important; font-weight: var(--fw-semibold); }
.plan-tbd { color: var(--text-subtle); }

/* ── Filter bar (preset: filter-bar) ─────────────────────────── */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; }
.filter-l { font-size: 12px; color: var(--text-muted); font-weight: var(--fw-semibold); }
.filter-sel { width: auto; }
.filter-spacer { flex: 1; }
.filter-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 220px; flex: 0 1 320px; }
.filter-sic { display: inline-flex; color: var(--text-subtle); } .filter-sic svg { width: 15px; height: 15px; }
.filter-sinp { border: none; outline: none; background: transparent; font: inherit; font-size: 13px; width: 100%; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: color-mix(in srgb, var(--primary) 8%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line)); color: var(--primary-ink); border-radius: var(--radius-sm); font-size: 12px; font-weight: var(--fw-semibold); }
.chip svg { width: 12px; height: 12px; }
.input-sm { height: var(--control-h-sm); font-size: 12.5px; padding: 0 10px; }
.input.textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.45; }
.input:disabled, .textarea:disabled { background: var(--surface-inset); color: var(--text-muted); }

/* ── Tables (preset: data-table / data-table-compact) ─────────── */
.table-card { padding: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; }
.table-compact { min-width: 820px; font-size: 12.5px; }
.table-compact th { padding: 8px 10px; background: var(--gray-050); }
.table-compact td { padding: 6px 10px; vertical-align: middle; }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.sel td { background: var(--brand-050); }
.table tr.row-link { cursor: pointer; }
.table tbody tr.row-link:hover td { background: #F0FBF4; }
.cell-title { font-weight: var(--fw-semibold); color: var(--text-body); }
.table td.empty { text-align: center; color: var(--text-subtle); padding: 28px; }
.inline-form { margin: 0; display: inline-flex; align-items: center; }
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-n { font-weight: var(--fw-semibold); }
/* pager (preset data-table foot) */
.pager { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 12px; flex-wrap: wrap; }
.pager-spacer { flex: 1; }
.pager-range { color: var(--text-muted); }
.rpp { display: flex; align-items: center; gap: 8px; margin: 0; }
.rpp-l { font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-muted); }
.rpp .input-sm { width: auto; height: 28px; }
.pager-pg { display: flex; align-items: center; gap: 4px; }
.pager-btn { min-width: 28px; height: 28px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface-card); border-radius: var(--radius-pill); font-weight: var(--fw-semibold); font-size: 12px; color: var(--gray-800); }
.pager-btn:hover { border-color: var(--primary); text-decoration: none; }
.pager-btn.on { background: var(--primary); border-color: var(--primary); color: var(--text-on-brand); }
.pager-btn.disabled { opacity: .4; pointer-events: none; }
.pager-gap { padding: 0 4px; color: var(--text-subtle); }

/* ── Projects list layout ────────────────────────────────────── */
.proj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; align-items: start; }
.proj-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 1100px) { .proj-grid { grid-template-columns: 1fr; } .side-panel { position: static; } }
/* timeline + workload panels */
.tl-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: 10px; color: var(--text-subtle); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.tl-months div { text-align: center; overflow: hidden; }
.tl-rows { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; padding-right: 4px; }
.tl-row, .wl-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; color: var(--text-body); }
.wl-row { grid-template-columns: 150px minmax(0, 1fr) 70px; }
.tl-row:hover, .wl-row:hover { color: var(--primary-ink); text-decoration: none; }
.tl-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-track { position: relative; height: 18px; background: var(--gray-100); border-radius: 9px; overflow: hidden; }
.tl-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 9px; opacity: .9; }
.tl-bar.tl-ok { background: var(--brand-600); }
.tl-bar.tl-late { background: #FCA5A5; }
.tl-bar.tl-none { background: var(--gray-200); }
.tl-label { position: absolute; top: 0; bottom: 0; left: 8px; display: flex; align-items: center; font-size: 10px; font-weight: var(--fw-semibold); white-space: nowrap; }
.tl-label.tl-ok { color: var(--text-on-brand); }
.tl-label.tl-late { color: #7F1D1D; }
.tl-label.tl-none { color: var(--text-subtle); }
.bar-t i.wl-doing { background: var(--brand-600); } .bar-t i.wl-done { background: var(--brand-800); } .bar-t i.wl-todo, .bar-t i.wl-on_hold { background: var(--gray-400); }
/* side panel (preset: detail-drawer) */
.side-panel { position: sticky; top: 64px; display: flex; flex-direction: column; min-height: 300px; padding: 0; }
.sp-h { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; }
.sp-hb { flex: 1; min-width: 0; }
.sp-title { font-weight: var(--fw-bold); font-size: var(--text-md); line-height: 1.25; margin-top: 2px; }
.sp-grid { padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; font-size: 12px; border-bottom: 1px solid var(--line); }
.sp-l { font-size: 10.5px; color: var(--text-subtle); margin-bottom: 2px; }
.sp-v { font-weight: var(--fw-semibold); }
.sp-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; line-height: 1.45; }
.sp-solution { background: var(--brand-050); border-radius: var(--radius-sm); padding: 10px 12px; }
.sp-l-brand { color: var(--primary-ink); font-weight: var(--fw-bold); }
.sp-open { width: 100%; height: auto; min-height: 36px; padding: 8px 12px; border-radius: 18px; white-space: normal; line-height: 1.3; text-align: center; }
.sp-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; min-height: 300px; }

/* ── Project detail ─────────────────────────────────────────── */
.detail-head { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; padding: 10px 14px; margin: 0; }
.detail-hb { flex: 1; min-width: 220px; }
.detail-title { font-weight: var(--fw-heavy); font-size: var(--text-xl); line-height: 1.2; }
.mini-field { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--text-subtle); }
.mini-field .input-sm { height: 30px; font-weight: var(--fw-semibold); color: var(--text-body); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 10px; align-items: start; }
@media (max-width: 1000px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bg-panel { position: sticky; top: 64px; margin: 0; font-size: 12px; }
.bg-panel .field > label { color: var(--text-muted); }
/* milestone timeline */
.ms-timeline { position: relative; padding: 22px 0 8px; }
.ms-quarters { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); font-size: 10px; color: var(--text-subtle); position: absolute; top: 0; left: 0; right: 0; }
.ms-quarters div { border-left: 1px solid var(--line); padding-left: 4px; }
.ms-track { position: relative; height: 6px; background: var(--gray-100); border-radius: 3px; margin-top: 8px; }
.ms-today { position: absolute; top: -10px; bottom: -10px; left: 0; width: 2px; background: var(--primary); }
.ms-dot { position: absolute; top: -5px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 7px; box-sizing: border-box; border: 2px solid var(--gray-500); background: var(--surface-card); }
.ms-dot.ms-done, .ms-check.ms-done { background: var(--primary); border-color: var(--primary); color: var(--text-on-brand); }
.ms-dot.ms-late, .ms-check.ms-late { border-color: var(--bad-fg); }
.ms-dot.ms-late { background: var(--bad-fg); }
.ms-list { display: flex; flex-direction: column; gap: 4px; }
.ms-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--gray-100); margin: 0; }
.ms-add { grid-template-columns: 24px minmax(0, 1fr) 140px 30px; border-bottom: none; padding-top: 6px; }
.ms-check { width: 20px; height: 20px; border-radius: 10px; border: 2px solid var(--gray-500); background: var(--surface-card); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.ms-check svg { width: 12px; height: 12px; }
.ms-check:disabled { cursor: default; }
.ms-edit { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; align-items: center; margin: 0; min-width: 0; }
.ms-name { height: 28px; border: 1px solid transparent; border-radius: 6px; padding: 0 6px; font-weight: var(--fw-semibold); font-size: 12.5px; color: var(--text-body); background: transparent; min-width: 0; }
.ms-name:hover, .ms-name:focus { border-color: var(--line); outline: none; background: var(--surface-card); }
.ms-name.done { color: var(--text-subtle); text-decoration: line-through; }
.ms-date { height: 28px; width: 100%; }
.x-btn:hover { background: var(--bad-bg); color: var(--bad-fg); }
/* scope */
.scope-list { display: flex; flex-direction: column; gap: 2px; }
.scope-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 5px 8px; border-radius: 8px; }
.scope-row:hover { background: var(--surface-subtle); }
.scope-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--primary); background: var(--surface-card); cursor: pointer; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.scope-check.done { background: var(--primary); color: var(--text-on-brand); }
.scope-check svg { width: 12px; height: 12px; }
.scope-text { flex: 1; }
.scope-text.done { text-decoration: line-through; color: var(--text-subtle); }
.scope-add { display: flex; gap: 8px; margin: 0; }
.scope-add .input-sm { flex: 1; }

/* ── Modal (preset: confirm-dialog / user-form-modal) ─────────── */
dialog.modal { border: none; border-radius: var(--radius-lg); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: 90vh; box-shadow: var(--elev-3); background: var(--surface-card); color: var(--text-body); }
dialog.modal-sm { width: min(460px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(17, 17, 17, .45); }
.modal-form { margin: 0; display: flex; flex-direction: column; max-height: 90vh; }
.modal-h { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-weight: var(--fw-bold); font-size: var(--text-md); }
.modal-b { padding: 16px 20px; overflow: auto; }
.modal-f { padding: 12px 20px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.seg-field { border: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-field legend { font-size: 12px; color: var(--text-muted); font-weight: var(--fw-medium); padding: 0; margin-bottom: 5px; }
.seg-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.seg-opt:has(input:checked) { border-color: var(--primary); background: var(--brand-050); }
.seg-opt input { accent-color: var(--primary); }
.seg-opt span { display: flex; flex-direction: column; font-size: 12px; }
.seg-opt small { color: var(--text-muted); font-size: 11px; }
.confirm-text { font-size: 14px; line-height: 1.5; padding: 20px 20px 4px; }

/* ── Login (preset: login-page) ─────────────────────────────── */
body.login { background: var(--bgSubtle); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.login-card { width: 100%; max-width: 420px; overflow: hidden; }
.login-brand { background: var(--primary); padding: 22px 28px; display: flex; align-items: center; gap: 12px; }
.login-mark { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-card); color: var(--primary); font-weight: var(--fw-heavy); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.login-brand-name { font-size: 22px; font-weight: var(--fw-heavy); letter-spacing: .14em; color: var(--text-on-brand); }
.login-body { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.login-kicker { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.login-title { font-size: 22px; font-weight: var(--fw-bold); }
.login-lead { font-size: 13px; margin: -6px 0 2px; line-height: 1.5; }
.login-ms { width: 100%; height: 48px; gap: 10px; font-size: 15px; }
.login-ms:hover { text-decoration: none; }
.ms-logo { display: grid; grid-template-columns: repeat(2, 8px); grid-template-rows: repeat(2, 8px); gap: 2px; }
.ms-logo i { display: block; width: 8px; height: 8px; }
.ms-logo i:nth-child(1) { background: #F25022; } .ms-logo i:nth-child(2) { background: #7FBA00; } .ms-logo i:nth-child(3) { background: #00A4EF; } .ms-logo i:nth-child(4) { background: #FFB900; }
.login-local { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.login-sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; min-height: 44px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--accent); }
.login-sum::-webkit-details-marker { display: none; }
.login-sum:hover { background: var(--bgSubtle); }
.login-chev { color: var(--muted); font-size: 11px; transition: transform .15s; }
.login-local[open] .login-sum { border-bottom: 1px solid var(--border); }
.login-local[open] .login-chev { transform: rotate(180deg); }
.login-local-b { padding: 16px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.login-block { width: 100%; height: 44px; }
.login-foot { padding: 16px 28px; border-top: 1px solid var(--border); font-size: 12px; text-align: center; }
.login-foot a.on { color: var(--primary-ink); font-weight: var(--fw-bold); }

/* ── Error pages (preset: error-page) ────────────────────────── */
.err-page { max-width: 480px; margin: 12vh auto; text-align: center; padding: 32px 24px; }
.err-code { font-size: 64px; font-weight: var(--fw-heavy); color: var(--primary); line-height: 1; }
.err-page h2 { margin: 8px 0; font-size: var(--text-xl); }

/* ── Busy overlay (double-submit guard) ─────────────────────── */
.busy-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center; z-index: var(--z-toast); font-weight: var(--fw-semibold); }
.busy-overlay[hidden] { display: none; }
.busy-spin { width: 28px; height: 28px; border: 3px solid var(--gray-300); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin-right: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
.autosave-saving { color: var(--warn-fg) !important; }

/* ── Tabs (preset: tabs-panel) — Master Data lists ─────────────── */
.md-card { padding: 0; overflow: hidden; }
.tab-bar { display: flex; gap: 6px; padding: 0 18px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 13px 6px; margin-right: 14px; font-size: 14px; font-weight: var(--fw-semibold); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--text-body); text-decoration: none; }
.tab.active { color: var(--primary-ink); border-bottom-color: var(--primary); }
.tab-badge { background: var(--gray-200); color: var(--gray-800); font-size: 11px; font-weight: var(--fw-bold); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.tab.active .tab-badge { background: var(--primary); color: var(--text-on-brand); }
.md-intro { padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--surface-inset); }
.w-60 { width: 60px; }
.row-actions { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.table tr.row-off td { color: var(--text-subtle); }
.callout-warn { background: var(--warn-bg); color: var(--warn-fg); border-radius: var(--radius-sm); padding: 8px 10px; }
.modal-note { padding: 0 20px 10px; }

/* ── Activity log (preset: audit-log) ─────────────────────────── */
.kpi-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.date-f { display: inline-flex; align-items: center; gap: 6px; }
.date-f .input-sm { width: auto; }
.chip svg { width: 11px; height: 11px; }
a.chip:hover { text-decoration: none; background: var(--brand-100); }
.al-table { min-width: 900px; }
.al-table th, .al-table td { padding: 9px 14px; }
.al-t { font-variant-numeric: tabular-nums; white-space: nowrap; }
.al-a { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-semibold); white-space: nowrap; }
.al-a .avatar { width: 28px; height: 28px; font-size: 11px; }
.avatar-sys { background: var(--gray-500); }
.al-actor { color: var(--text-body); }
.al-act { font-family: var(--font-mono); font-size: 12px; background: var(--bgSubtle); border: 1px solid var(--border); padding: 2px 8px; border-radius: var(--radius); color: var(--accent); font-weight: var(--fw-semibold); white-space: nowrap; }
.al-act:hover { text-decoration: none; border-color: var(--primary); }
.al-act.tone-ok { background: var(--ok-bg); border-color: transparent; color: var(--ok-fg); }
.al-act.tone-bad { background: var(--bad-bg); border-color: transparent; color: var(--bad-fg); }
.al-act.tone-warn { background: var(--warn-bg); border-color: transparent; color: var(--warn-fg); }
.al-act.tone-info { background: var(--info-bg); border-color: transparent; color: var(--info-fg); }
.al-d { font-size: 12px; max-width: 360px; word-break: break-word; }
.al-ip { font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }
.strike { text-decoration: line-through; }

/* ── Budget & links ───────────────────────────────────────────── */
.side-col { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 64px; min-width: 0; }
.side-col .panel { margin: 0; font-size: 12px; }
.side-col .field > label { color: var(--text-muted); }
.input-group { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 6px; }
.url-row { display: flex; gap: 6px; align-items: center; }
.url-row .input { flex: 1; min-width: 0; }
.url-row .btn { flex: none; }
.sp-grid .span-2 { grid-column: 1 / -1; }
.sp-links { display: flex; gap: 6px; flex-wrap: wrap; }
.btn .pill { padding: 1px 6px; font-size: 10px; }

/* ── Projects page note (timeline/workload moved) ─────────────── */
.moved-note { padding: 10px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.moved-note svg { width: 15px; height: 15px; }

/* ── Segmented control (window / group / sort) ────────────────── */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg-b { padding: 6px 10px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--muted); border-right: 1px solid var(--border); background: var(--bg); white-space: nowrap; }
.seg-b:last-child { border-right: none; }
.seg-b:hover { background: var(--bgSubtle); text-decoration: none; }
.seg-b.on { background: var(--primary); color: var(--text-on-brand); }

/* ── Timeline page (preset: gantt-chart) ──────────────────────── */
.gt-card { padding: 0; overflow: hidden; }
.gt-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.gt-nav, .gt-opts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gt-range { font-weight: var(--fw-bold); font-size: var(--text-md); margin-left: 6px; }
.gt { min-width: 1000px; }
.gt-head, .gt-row { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.gt-head { position: sticky; top: 0; background: var(--surface-card); border-bottom: 1px solid var(--line); z-index: 2; }
.gt-name-h { padding: 8px 14px; font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.gt-scale { position: relative; height: 38px; }
.gt-month { position: absolute; top: 0; bottom: 0; padding: 6px 0 0 5px; border-left: 1px solid var(--gray-200); font-size: 11px; color: var(--muted); display: flex; flex-direction: column; line-height: 1.2; }
.gt-month.q { border-left-color: var(--gray-400); }
.gt-month b { font-size: 10px; color: var(--text-body); }
.gt-group { display: flex; gap: 8px; align-items: baseline; padding: 8px 14px 4px; background: var(--surface-inset); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; }
.gt-row { border-bottom: 1px solid var(--gray-100); min-height: 44px; }
.gt-row:hover { background: #F0FBF4; }
.gt-name { padding: 6px 14px; min-width: 0; color: var(--text-body); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.gt-name:hover { text-decoration: none; }
.gt-name:hover .gt-n { color: var(--primary-ink); }
.gt-n { font-weight: var(--fw-semibold); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-sub { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.gt-sub .pill { padding: 0 7px; font-size: 10px; }
.gt-track { position: relative; min-height: 44px; }
.gt-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gray-100); }
.gt-grid.q { background: var(--gray-200); }
.gt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primary); z-index: 1; }
.gt-bar { position: absolute; top: 13px; height: 18px; border-radius: 5px; overflow: hidden; z-index: 1; opacity: .55; }
.gt-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(0, 0, 0, .28); }
.gb-doing { background: var(--brand-600); opacity: .85; }
.gb-todo { background: var(--gray-400); }
.gb-done { background: var(--brand-800); opacity: .85; }
.gb-on_hold { background: #F5B301; }
.gt-bar.gb-late { box-shadow: inset 0 0 0 2px var(--bad-fg); opacity: .9; }
.gt-bar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gt-bar.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gt-mk { position: absolute; top: 16px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--gray-500); background: var(--surface-card); z-index: 2; box-sizing: border-box; }
.gt-mk.mk-done { background: var(--primary); border-color: var(--surface-card); box-shadow: 0 0 0 1px var(--primary); }
.gt-mk.mk-late { background: var(--bad-fg); border-color: var(--surface-card); box-shadow: 0 0 0 1px var(--bad-fg); }
.gt-out { position: absolute; top: 14px; left: 8px; font-size: 11px; }
.gt-empty { padding: 32px; text-align: center; color: var(--text-subtle); }
.gt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; border-top: 1px solid var(--line); align-items: center; }
.gt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-bar { display: inline-block; width: 22px; height: 10px; border-radius: 3px; }
.gt-mk.lg-mk { position: static; margin: 0; }
.lg-today { display: inline-block; width: 2px; height: 14px; background: var(--primary); }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Workload page ────────────────────────────────────────────── */
.wl-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
@media (max-width: 1200px) { .wl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .wl-grid { grid-template-columns: 1fr; } }
.wb-bg-released { background: var(--brand-800); }
.wb-bg-in_progress { background: var(--brand-500); }
.wb-bg-planned { background: var(--gray-400); }
.wb-tone-released { color: var(--brand-800); }
.wb-tone-in_progress { color: var(--brand-600); }
.wb-tone-planned { color: var(--text-muted); }
.fc-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--gray-100); }
.fc-seg { width: 0; }
.legend-3 { grid-template-columns: repeat(3, 1fr); }
.fc-rows { display: flex; flex-direction: column; gap: 7px; }
.fc-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 110px; gap: 8px; align-items: center; font-size: 12px; }
.fc-l { white-space: nowrap; font-weight: var(--fw-semibold); display: inline-flex; gap: 4px; align-items: center; }
.fc-l .pill { padding: 0 6px; font-size: 9.5px; }
.fc-v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-track { position: relative; }
.bar-t i.fc-base { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px 0 0 8px; }
.bar-t i.fc-step { position: absolute; top: 0; bottom: 0; border-radius: 0 8px 8px 0; }
.fc-now .fc-l { color: var(--primary-ink); }
.wl-head { padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.wl-table { min-width: 960px; }
.wl-bar-h { width: 32%; }
.wl-cell { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.wl-cell b { text-align: right; font-variant-numeric: tabular-nums; }
.wl-table tfoot td { border-top: 2px solid var(--line); border-bottom: none; background: var(--surface-inset); }

/* ── Explicit save (project detail) ───────────────────────────── */
.save-bar { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.save-bar-end { margin-left: 0; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }
.unsaved-note { font-size: 12px; font-weight: var(--fw-semibold); color: var(--warn-fg); background: var(--warn-bg); padding: 3px 9px; border-radius: var(--radius-pill); }
[data-save-btn]:disabled { opacity: .45; cursor: default; }

/* ── Login: unconfigured Microsoft 365 ────────────────────────── */
.login-ms.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.login-hint { margin-top: -8px; text-align: center; }

/* ── Project deactivate / edit ────────────────────────────────── */
.btn-warn-ghost { color: var(--warn-fg); }
.btn-warn-ghost:hover { background: var(--warn-bg); border-color: var(--warn-fg); }
.flash.warn-banner { background: var(--warn-bg); color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn-fg) 40%, transparent); }
.detail-head.is-inactive .detail-title { color: var(--text-muted); }
.save-bar { flex-wrap: wrap; justify-content: flex-end; }

/* ── Roles & permissions ──────────────────────────────────────── */
.role-n { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perm-meter { display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: var(--gray-100); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.perm-meter i { display: block; height: 100%; width: 0; background: var(--primary); }
.perm-table { min-width: 640px; }
.perm-table th.perm-col, .perm-table td.perm-col { text-align: center; width: 130px; }
.perm-table tr.perm-group td { background: var(--surface-inset); font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 7px 12px; }
.perm-table tbody tr:hover td { background: #F0FBF4; }
.perm-table tr.perm-group:hover td { background: var(--surface-inset); }
.perm-cb { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.perm-cb:disabled { cursor: not-allowed; opacity: .45; }
.perm-mark { color: var(--gray-400); font-weight: var(--fw-bold); }
.perm-mark.on { color: var(--primary-ink); }
.role-select { width: auto; min-width: 130px; }
.role-fixed { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); }
.role-fixed svg { width: 13px; height: 13px; }
.cat-mp { background: var(--info-600); } .cat-df { background: #8B5CF6; }

/* ── Timeline: due-date marker for projects without milestones ── */
.gt-due { position: absolute; top: 15px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); border-radius: 2px; z-index: 2; box-sizing: border-box; }
.gt-due.due-open { background: var(--surface-card); border: 2px solid var(--brand-600); }
.gt-due.due-late { background: var(--bad-fg); border: 2px solid var(--bad-fg); }
.gt-due.due-done { background: var(--brand-800); border: 2px solid var(--brand-800); }
.gt-due.lg-mk { position: static; margin: 0 2px; transform: rotate(45deg); display: inline-block; }
.gt-due-l { position: absolute; top: 13px; margin-left: 12px; font-size: 11px; white-space: nowrap; z-index: 2; }