:root {
  color-scheme: light;
  --ink: #16201d;
  --muted: #5f6b68;
  --subtle: #7f8a87;
  --line: #dfe5e2;
  --line-soft: #edf1ef;
  --canvas: #f5f7f6;
  --surface: #ffffff;
  --brand: #123d36;
  --brand-hover: #0d302b;
  --brand-soft: #e9f2ef;
  --green: #2f8067;
  --gold: #b98022;
  --gold-soft: #fff4dc;
  --red: #b34141;
  --red-soft: #fcecec;
  --blue: #3d6f8c;
  --blue-soft: #ebf3f8;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(18, 36, 31, 0.04), 0 6px 18px rgba(18, 36, 31, 0.04);
  --shadow-raised: 0 2px 6px rgba(18, 36, 31, 0.06), 0 14px 34px rgba(18, 36, 31, 0.08);
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.navigation-open { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button, input, select, textarea { transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease; }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid #2f8067; outline-offset: 2px; }
::selection { background: rgba(18, 61, 54, .14); }
strong, b, td, th { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .brand strong { font-family: "Manrope", "DM Sans", sans-serif; letter-spacing: 0; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.app-shell { min-height: 100vh; }
.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, .8fr) minmax(480px, 1.2fr); background: #fff; }
.login-brand-panel { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 42px 48px; color: #fff; background: #10362f; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand img { width: 44px; height: 44px; border-radius: var(--radius-lg); }
.login-brand div { display: grid; gap: 2px; }
.login-brand strong { font: 800 18px "Manrope"; }
.login-brand span, .login-brand-panel small { color: #b9cbc6; font-size: 12px; }
.login-message { display: grid; gap: 12px; max-width: 430px; }
.login-message > span { color: #d5aa50; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.login-message h1 { max-width: 390px; font-size: 39px; line-height: 1.18; }
.login-message p { max-width: 380px; color: #c7d6d2; font-size: 14px; line-height: 1.7; }
.login-form-panel { display: grid; place-items: center; padding: 40px; }
.login-form { width: min(390px, 100%); display: grid; gap: 18px; }
.login-form > div:nth-child(2) { display: grid; gap: 6px; margin-bottom: 8px; }
.login-form p:first-child { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.login-form h2 { font-size: 25px; }
.login-form > div span { color: var(--muted); font-size: 13px; }
.login-lock { width: 43px; height: 43px; display: grid; place-items: center; border-radius: var(--radius-lg); color: var(--brand); background: var(--brand-soft); }
.login-lock svg { width: 21px; height: 21px; }
.login-form input { height: 44px; }
.login-submit { width: 100%; height: 44px; margin-top: 2px; }
.form-error { min-height: 17px; color: var(--red); font-size: 12px; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 232px; display: flex; flex-direction: column; background: #10362f; color: #fff; padding: 22px 14px 16px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand img { width: 38px; height: 38px; border-radius: var(--radius-lg); }
.brand div { display: grid; gap: 2px; }
.brand strong { font-size: 16px; font-weight: 800; }
.brand span { color: #b9cbc6; font-size: 12px; }
.main-nav { display: grid; gap: 4px; margin-top: 18px; }
.nav-item { position: relative; width: 100%; height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 11px; border: 0; border-radius: var(--radius-sm); color: #c6d3d0; background: transparent; text-align: left; font-size: 13px; font-weight: 500; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.13); box-shadow: inset 3px 0 #d5aa50; }
.nav-item b { margin-left: auto; min-width: 21px; height: 20px; display: grid; place-items: center; border-radius: 10px; background: #d5aa50; color: #17352f; font-size: 12px; }
.sidebar-footer { display: grid; gap: 18px; margin-top: auto; }
.support-card { display: grid; gap: 6px; padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); background: rgba(255,255,255,.05); }
.support-card span { color: #b9cbc6; font-size: 12px; }
.support-card strong { font-size: 13px; }
.support-card button { justify-self: start; margin-top: 4px; padding: 0; border: 0; color: #e0bb6b; background: transparent; font-size: 13px; }
.actor-switch { display: grid; gap: 6px; color: #b9cbc6; font-size: 12px; }
.actor-switch select { height: 39px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); padding: 0 10px; color: #fff; background: #1a4840; outline: 0; }
.account-controls { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.account-controls button { height: 36px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: var(--radius-sm); padding: 0 9px; color: #c6d3d0; background: transparent; font-size: 12px; text-align: left; }
.account-controls button:hover { color: #fff; background: rgba(255,255,255,.07); }
.account-controls svg { width: 15px; height: 15px; }

.content-shell { margin-left: 232px; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); }
.search-box { width: min(440px, 46vw); height: 39px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: #fafcfb; }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
.search-box kbd { border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; color: var(--subtle); background: #fff; font: 11px "DM Sans"; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: #fff; }
.icon-btn:hover { color: var(--brand); border-color: #bcc9c5; }
.notification-btn { position: relative; }
.notification-btn b { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; border-radius: 9px; color: #fff; background: #b83f3f; font-size: 10px; }
.notification-btn b[hidden] { display: none; }
.notification-panel { position: fixed; z-index: 60; top: 60px; right: 24px; width: min(410px, calc(100vw - 28px)); max-height: calc(100vh - 78px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 20px 55px rgba(12,35,29,.2); }
.notification-panel[hidden] { display: none; }
.notification-heading { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.notification-heading > div { display: grid; gap: 3px; }
.notification-heading h2 { font-size: 14px; }
.notification-heading span { color: var(--muted); font-size: 10.5px; }
.notification-toolbar { min-height: 36px; display: flex; justify-content: flex-end; align-items: center; padding: 0 14px; background: #fafcfb; border-bottom: 1px solid var(--line-soft); }
.notification-list { max-height: calc(100vh - 210px); overflow-y: auto; }
.notification-item { width: 100%; min-height: 76px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.notification-item:hover { background: #f8faf9; }
.notification-item.unread { background: #f4faf7; }
.notification-item.unread::after { content: ""; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--brand); }
.notification-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); }
.notification-icon.urgent { color: #9a3535; background: #f9eaea; }
.notification-icon svg { width: 15px; height: 15px; }
.notification-item > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.notification-item strong { font-size: 12px; }
.notification-item small { overflow: hidden; color: var(--muted); font-size: 10.5px; line-height: 1.4; text-overflow: ellipsis; }
.notification-item time { color: var(--subtle); font-size: 10px; }
.notification-empty { min-height: 210px; display: grid; place-content: center; justify-items: center; gap: 7px; padding: 25px; text-align: center; }
.notification-empty[hidden] { display: none; }
.notification-empty svg { width: 24px; height: 24px; color: var(--brand); }
.notification-empty strong { font-size: 12px; }
.notification-empty span { color: var(--muted); font-size: 10.5px; }
.user-identity { display: flex; align-items: center; gap: 10px; padding-left: 17px; border-left: 1px solid var(--line); }
.user-identity div { display: grid; gap: 2px; }
.user-identity strong { font-size: 13px; }
.user-identity div span { color: var(--muted); font-size: 12px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brand); font-size: 12px; font-weight: 700; }
.mobile-menu { display: none; }

main { width: min(1380px, 100%); margin: 0 auto; padding: 26px 28px 52px; }
.view { display: none; }
.view.active { display: block; animation: view-in .22s ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 8px; background: #c3cdc9; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #a6b2ae; }
.page-heading { min-height: 64px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-heading > div { display: grid; gap: 5px; }
.page-heading p { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.page-heading h1 { font-size: 24px; line-height: 1.25; }
.page-heading > div > span { max-width: 660px; color: var(--muted); font-size: 13px; }
.dashboard-heading h1 { font-size: 25px; }

.primary-btn, .secondary-btn, .whatsapp-btn, .quiet-btn, .text-btn, .back-btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--radius-sm); padding: 0 13px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.primary-btn { border: 1px solid var(--brand); color: #fff; background: var(--brand); box-shadow: 0 1px 2px rgba(13, 40, 34, .18); }
.primary-btn:hover { background: var(--brand-hover); box-shadow: 0 3px 10px rgba(13, 40, 34, .22); }
.secondary-btn { border: 1px solid #cfd8d5; color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(18, 36, 31, .05); }
.secondary-btn:hover { border-color: #aabbb6; background: #f9fbfa; }
.whatsapp-btn { border: 1px solid #207d55; color: #fff; background: #207d55; }
.quiet-btn { min-height: 34px; border: 1px solid var(--line); color: var(--muted); background: #fff; }
.text-btn { min-height: auto; border: 0; padding: 3px; color: var(--brand); background: transparent; font-size: 13px; }
.text-btn svg { width: 14px; }
.back-btn { border: 0; padding: 0; color: var(--muted); background: transparent; }
.back-btn span { font-size: 20px; }

.decision-banner { min-height: 82px; display: flex; align-items: center; gap: 15px; margin-bottom: 18px; padding: 14px 17px; border: 1px solid #ecd9ae; border-left: 4px solid var(--gold); border-radius: var(--radius-lg); background: #fffaf0; }
.decision-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #9b6716; background: #f6e5be; }
.decision-banner > div:nth-child(2) { display: grid; gap: 2px; }
.decision-banner span { color: #9b6716; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; }
.decision-banner strong { font-size: 15px; }
.decision-banner p { color: var(--muted); font-size: 13px; }
.decision-banner .text-btn { margin-left: auto; }
.decision-banner > button { margin-left: auto; }
.decision-banner.clear { border-color: #cfe2db; border-left-color: #39856c; background: #f4faf7; }
.decision-banner.clear .decision-icon { color: #276a55; background: #dfeee8; }
.decision-banner.clear span { color: #276a55; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { min-height: 112px; display: grid; align-content: space-between; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.metric-card:hover { border-color: #ccd6d2; box-shadow: var(--shadow-raised); transform: translateY(-1px); }
.metric-card header { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.metric-card .metric-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--brand); background: var(--brand-soft); }
.metric-card > strong { overflow: hidden; font: 800 24px "Manrope"; text-overflow: ellipsis; white-space: nowrap; }
.metric-card footer { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.metric-card footer b { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #257258; }
.metric-card.commercial .metric-icon { color: #3b6780; background: #eaf2f6; }
.metric-card.risk { border-color: #ead7b0; }
.metric-card.risk .metric-icon { color: #9b6716; background: var(--gold-soft); }
.metric-card.risk footer b { background: #b97716; }
.metric-card.positive footer b { background: #2f8067; }

.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; margin-bottom: 18px; }
.executive-top-grid { grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); }
.executive-bottom-grid { grid-template-columns: minmax(0, 1.2fr) minmax(350px, .8fr); }
.panel-title { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.panel-title > div { min-width: 0; display: grid; gap: 3px; }
.panel-title h2, .section-heading h2, .next-actions h2 { font-size: 15px; }
.panel-title p, .section-heading p, .next-actions p { color: var(--muted); font-size: 12px; }
.attention-list { min-height: 302px; }
.attention-item { min-height: 69px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line-soft); }
.attention-item:last-child { border-bottom: 0; }
.attention-item .type-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); color: #9b6716; background: var(--gold-soft); }
.attention-item.urgent .type-icon { color: #a4433b; background: #f8e9e7; }
.attention-item.normal .type-icon { color: #3c6881; background: var(--blue-soft); }
.attention-item > div { display: grid; gap: 3px; min-width: 0; }
.attention-item strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.attention-item > div span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.empty-line { height: 212px; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }
.empty-line svg { width: 25px; height: 25px; color: #419078; }
.commercial-snapshot { min-height: 302px; display: grid; align-content: start; padding: 7px 18px 0; }
.commercial-snapshot > div { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line-soft); }
.commercial-snapshot > div span { min-width: 0; display: grid; gap: 2px; }
.commercial-snapshot > div strong { font-size: 12px; }
.commercial-snapshot > div small { color: var(--muted); font-size: 10.5px; }
.commercial-snapshot > div b { font: 700 15px "Manrope"; white-space: nowrap; }
.commercial-snapshot footer { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; color: var(--muted); font-size: 10.5px; }
.pipeline-chart { min-height: 318px; display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 16px 18px; }
.pipeline-row { display: grid; grid-template-columns: 105px 1fr 24px; align-items: center; gap: 10px; font-size: 12px; }
.pipeline-track { height: 7px; overflow: hidden; border-radius: 4px; background: #edf1ef; }
.pipeline-track i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.pipeline-row:nth-child(2) i { background: var(--gold); }
.pipeline-row:nth-child(3) i { background: var(--blue); }
.pipeline-row:nth-child(4) i { background: #4f8f72; }
.pipeline-row:nth-child(5) i { background: #88734a; }
.pipeline-row:nth-child(6) i { background: #2f8067; }
.pipeline-row:nth-child(7) i { background: #677874; }
.table-panel { margin-bottom: 18px; overflow: hidden; }
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { height: 44px; padding: 0 16px; color: #5d6965; background: #f8faf9; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
td { height: 62px; padding: 12px 16px; border-top: 1px solid var(--line-soft); color: #2c3532; font-size: 13px; vertical-align: middle; }
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: #fbfcfb; }
td strong { display: block; color: var(--ink); font-size: 13px; }
td small { color: var(--muted); }
.project-control-panel table { min-width: 800px; }
.project-control-panel td { height: 68px; }
.control-summary { color: var(--muted); font-size: 11px; white-space: nowrap; }
.table-link { display: block; max-width: 170px; overflow: hidden; border: 0; padding: 0; color: var(--ink); background: transparent; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.table-link:hover { color: var(--brand); text-decoration: underline; }
.muted-cell { color: var(--muted); }
.control-progress { min-width: 95px; display: grid; grid-template-columns: minmax(60px,1fr) auto; align-items: center; gap: 7px; }
.control-progress > div { height: 6px; overflow: hidden; border-radius: 3px; background: #e5ebe8; }
.control-progress i { display: block; height: 100%; border-radius: inherit; background: #2f8067; }
.control-progress b { font-size: 10.5px; }
.health-badge { display: inline-flex; min-height: 22px; align-items: center; border-radius: 11px; padding: 0 8px; color: #276a55; background: #eaf4f0; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.health-badge.attention { color: #8b5c12; background: var(--gold-soft); }
.health-badge.overdue, .health-badge.blocked { color: #9a4039; background: #f8e9e7; }
.next-action { display: block; margin-top: 4px; white-space: nowrap; }
.project-next-command { display: grid; gap: 3px; border: 0; padding: 0; color: var(--ink); background: transparent; text-align: left; }
.project-next-command strong { font-size: 12px; }
.project-next-command span { display: flex; align-items: center; gap: 3px; color: var(--brand); font-size: 10.5px; }
.project-next-command svg { width: 12px; height: 12px; }
.table-empty { padding: 30px; color: var(--muted); text-align: center; }
.status-badge { display: inline-flex; align-items: center; min-height: 23px; border-radius: 12px; padding: 0 9px; color: #276a55; background: #eaf4f0; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.status-badge.warning { color: #8b5c12; background: var(--gold-soft); }
.status-badge.info { color: #3c6881; background: var(--blue-soft); }
.status-badge.neutral { color: #687471; background: #edf1ef; }
.blocked-reason { display: block; width: fit-content; margin-top: 6px; padding: 4px 7px; border-left: 2px solid #bd7a18; color: #7c5113; background: #fff7e8; font-size: 10.5px; }
.current-work-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f8faf9; }
.current-work-status span { color: var(--muted); font-size: 11px; }
.current-work-status strong { font-size: 12px; }
.work-progress-cell { min-width: 96px; display: grid; grid-template-columns: minmax(60px, 1fr) auto; align-items: center; gap: 6px; }
.work-progress-cell > div { height: 6px; overflow: hidden; border-radius: 3px; background: #e5ebe8; }
.work-progress-cell > div span { display: block; height: 100%; border-radius: inherit; background: #2f8067; }
.work-progress-cell strong { font-size: 11px; }
.work-progress-cell small { grid-column: 1 / -1; font-size: 10px; }
.work-row-actions { min-width: 118px; display: grid; justify-items: start; gap: 5px; }
.progress-field > span { display: flex; justify-content: space-between; gap: 12px; }
.progress-field output { color: var(--brand); font-weight: 800; }
.progress-field input[type="range"] { width: 100%; height: 38px; padding: 0; accent-color: var(--brand); }
.progress-attachment-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.progress-attachment-actions > div:first-child { display: grid; gap: 3px; }
.progress-attachment-actions strong { font-size: 12px; }
.progress-attachment-actions span { color: var(--muted); font-size: 10.5px; }
.progress-attachment-actions > div:last-child { display: flex; gap: 7px; }
.handover-flow { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f8faf9; }
.handover-flow span, .handover-flow strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.handover-flow span { color: var(--brand); font-weight: 800; }
.handover-flow svg { width: 16px; height: 16px; color: var(--muted); }
.more-btn { width: 30px; height: 30px; border: 0; color: var(--muted); background: transparent; }
.live-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.live-label i { width: 7px; height: 7px; border-radius: 50%; background: #3f9a75; box-shadow: 0 0 0 3px #e4f2ec; }
.department-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); }
.department-card { min-height: 166px; display: grid; align-content: space-between; gap: 10px; padding: 16px; border-right: 1px solid var(--line-soft); }
.department-card:last-child { border-right: 0; }
.department-card header { display: flex; align-items: center; justify-content: space-between; }
.department-card header span { font-weight: 600; font-size: 13px; }
.department-card header b { color: var(--muted); font-size: 11px; }
.department-card.high header b, .department-card .has-risk { color: #a0473f; }
.department-primary { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px; }
.department-primary strong { font: 800 23px "Manrope"; }
.department-primary span, .department-primary b { color: var(--muted); font-size: 10.5px; }
.load-track { height: 5px; border-radius: 3px; background: #edf1ef; }
.load-track i { display: block; height: 100%; border-radius: 3px; background: #4d8c77; }
.department-card footer { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.department-warning { color: #8b5c12; font-size: 10.5px; }
.activity-list { min-height: 318px; }
.activity-item { min-height: 63px; display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); }
.activity-item:last-child { border-bottom: 0; }
.activity-item > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: var(--radius-sm); color: #3c6881; background: var(--blue-soft); }
.activity-item > div { min-width: 0; display: grid; gap: 3px; }
.activity-item strong, .activity-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-item strong { font-size: 12px; }
.activity-item small, .activity-item time { color: var(--muted); font-size: 10.5px; }
.empty-line.compact { height: 318px; }

.filter-row { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.segmented { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f7f9f8; }
.segmented button { height: 31px; border: 0; border-radius: 4px; padding: 0 11px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 600; }
.segmented button.active { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.compact-search { width: 210px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.compact-search svg { width: 15px; color: var(--muted); }
.compact-search input { width: 100%; height: 34px; border: 0; outline: 0; }
.empty-state { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 30px; text-align: center; }
.empty-state[hidden] { display: none; }
.empty-state h3 { font-size: 15px; }
.empty-state p { max-width: 320px; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.empty-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 8px; color: var(--brand); background: var(--brand-soft); }
.empty-icon svg { width: 21px; height: 21px; }

.quotation-workspace[hidden] { display: none; }
.quotation-workspace, .form-panel, .quote-scope-list { min-width: 0; max-width: 100%; }
.workspace-header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; margin: -12px 0 20px; border-bottom: 1px solid var(--line); }
.workspace-actions, .button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.save-state { display: flex; align-items: center; gap: 6px; margin-right: 6px; color: var(--muted); font-size: 11px; }
.save-state i { width: 6px; height: 6px; border-radius: 50%; background: #3f9a75; }
.quote-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.quote-title-row > div:first-child { display: grid; gap: 5px; }
.quote-title-row .status-badge { justify-self: start; }
.quote-title-row h1 { font-size: 23px; }
.quote-title-row p { color: var(--muted); font-size: 13px; }
.quote-total { display: grid; justify-items: end; gap: 3px; }
.quote-total span { color: var(--muted); font-size: 11px; }
.quote-total strong { font: 800 23px "Manrope"; }
.workflow-steps { min-height: 62px; display: flex; align-items: center; max-width: 980px; margin-bottom: 18px; }
.workflow-step { display: flex; align-items: center; gap: 7px; border: 0; padding: 0; color: var(--muted); background: transparent; font: inherit; font-size: 11px; white-space: nowrap; }
.workflow-step:disabled { opacity: 1; cursor: default; }
.workflow-steps b { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; }
.workflow-step.active { color: var(--brand); font-weight: 700; }
.workflow-step.active b { border-color: var(--brand); color: #fff; background: var(--brand); }
.workflow-step.completed { color: #397b66; }
.workflow-step.completed b { border-color: #8db6a9; color: #286b56; background: #e9f3ef; }
.workflow-steps > i { flex: 1; height: 1px; margin: 0 10px; background: var(--line); }
.form-panel { margin-bottom: 16px; padding-bottom: 19px; }
.form-panel[hidden] { display: none; }
.section-heading { min-height: 70px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.section-heading > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--brand); background: var(--brand-soft); font-size: 11px; font-weight: 800; }
.section-heading > div { display: grid; gap: 3px; }
.section-heading .secondary-btn { margin-left: auto; }
.section-heading-actions { display: flex !important; align-items: center; gap: 8px; margin-left: auto; }
.section-heading-actions .secondary-btn { margin-left: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; padding: 18px; }
label { display: grid; gap: 6px; color: #46524f; font-size: 11px; font-weight: 700; }
input, select { width: 100%; height: 42px; border: 1px solid #d3dcd8; border-radius: var(--radius-sm); padding: 0 12px; color: var(--ink); background: #fff; outline: 0; }
input:hover, select:hover, textarea:hover { border-color: #b9c7c2; }
input:focus, select:focus, textarea:focus { border-color: #3f7d6d; box-shadow: 0 0 0 3px rgba(26, 92, 76, .12); }
input::placeholder, textarea::placeholder { color: var(--subtle); }
.span-2 { grid-column: span 2; }
.wizard-footer { min-height: 66px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 12px 18px 0; border-top: 1px solid var(--line-soft); }
.wizard-footer > span { color: var(--muted); font-size: 12px; }
.quote-scope-list { display: grid; gap: 14px; padding: 18px; }
.quote-section-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.quote-section-card .hierarchy-heading.section-level { background: #eef5f2; }
.hierarchy-heading { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.hierarchy-heading input { width: min(360px, 38vw); border-color: transparent; background-color: transparent; font-weight: 700; }
.section-level input { font-size: 13px; }
.hierarchy-heading input:hover, .hierarchy-heading input:focus { border-color: #b9c9c4; background: #fff; }
.hierarchy-index { flex: 0 0 auto; color: var(--brand); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hierarchy-heading-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hierarchy-branch { width: 13px; height: 18px; flex: 0 0 auto; border-left: 1px solid #a9bcb6; border-bottom: 1px solid #a9bcb6; }
.hierarchy-action { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ccd8d4; border-radius: var(--radius-sm); padding: 0 9px; color: var(--brand); background: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.hierarchy-action:hover { border-color: #8ba99f; background: var(--brand-soft); }
.hierarchy-action svg { width: 14px; height: 14px; }
.subsection-total-label { display: flex; align-items: center; gap: 5px; margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.subsection-total-label strong { color: var(--ink); font-family: "Fraunces", "Manrope", serif; font-weight: 600; font-size: 13px; }

.quote-subsection-list { display: grid; gap: 10px; padding: 12px; }
.quote-subsection-block { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
.quote-subsection-block .hierarchy-heading.subsection-level { min-height: 46px; padding: 7px 12px 7px 10px; background: #f8faf9; border-bottom: 1px solid var(--line-soft); }

.quote-items { padding: 4px 0; }
.quote-items-header { display: grid; grid-template-columns: 44px minmax(220px, 1fr) 92px 108px 64px 108px 34px; gap: 10px; padding: 8px 14px; color: #65726e; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.quote-item-row { display: grid; grid-template-columns: 44px minmax(220px, 1fr) 92px 108px 64px 108px 34px; align-items: start; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line-soft); }
.quote-item-row:first-of-type { border-top: 0; }
.line-number { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 23px; margin-top: 2px; border-radius: 12px; color: #60706b; background: #eef2f0; font-size: 10.5px; font-weight: 700; }
.item-fields { display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; }
.item-fields input:last-child { color: var(--muted); }
.quote-item-field { display: grid; gap: 3px; }
.quote-item-field span { display: none; }
.number-input { width: 100%; }
.row-total { padding-top: 10px; font-weight: 700; white-space: nowrap; }
.row-total span { display: none; }
.row-total strong { font-family: "Fraunces", "Manrope", serif; font-weight: 600; }
.delete-row { width: 34px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); color: #a05a5a; background: transparent; }
.delete-row:hover { background: var(--red-soft); }
.quote-scope-empty-note { margin: 0; padding: 14px; color: var(--muted); font-size: 11.5px; }
.quote-items-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; }
.quote-items-empty p { margin: 0; max-width: 360px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.quote-items-empty .hierarchy-action { flex: 0 0 auto; }
.quote-scope-empty-state { display: grid; justify-items: center; gap: 9px; padding: 46px 24px; text-align: center; }
.quote-scope-empty-state h3 { font-size: 15px; }
.quote-scope-empty-state p { max-width: 360px; margin: 0; color: var(--muted); font-size: 12px; }
.totals-box { width: 330px; display: grid; gap: 10px; margin: 18px 18px 0 auto; padding: 15px 0 0; border-top: 1px solid var(--line); }
.totals-box div { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.totals-box strong { color: var(--ink); }
.totals-box .grand-total { padding-top: 11px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.totals-box .grand-total strong { font: 800 18px "Manrope"; }
.totals-box .totals-submit { display: block; padding-top: 4px; }
.totals-submit .primary-btn { width: 100%; }
.next-actions { display: grid; grid-template-columns: minmax(200px,1fr) auto; align-items: center; gap: 18px; padding: 18px; }
.next-actions > div:first-child { display: grid; gap: 4px; }
.payment-action { grid-column: 1 / -1; display: none; align-items: center; justify-content: flex-end; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.payment-action.visible { display: flex; }
.payment-action > div { display: grid; gap: 2px; margin-right: auto; }
.payment-action span { color: var(--muted); font-size: 11px; }

.project-board { min-height: 330px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 16px; background: #fafbfa; }
.project-column { min-height: 290px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.project-column header { display: flex; justify-content: space-between; padding: 13px; border-bottom: 1px solid var(--line-soft); font-weight: 700; font-size: 13px; }
.project-column header b { color: var(--muted); }
.project-card { display: grid; gap: 8px; margin: 10px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.project-card span { color: var(--muted); font-size: 11px; }
.team-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.team-card { min-height: 160px; padding: 17px; border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius-lg); background: #fff; }
.team-card header { display: flex; justify-content: space-between; margin-bottom: 17px; }
.team-card header h2 { font-size: 14px; }
.team-card header span { color: var(--muted); font-size: 11px; }
.page-heading-actions { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px !important; }
.people-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.people-summary.four-column-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
.people-summary > div { min-height: 78px; display: grid; align-content: center; gap: 3px; padding: 13px 16px; border-right: 1px solid var(--line-soft); }
.people-summary > div:last-child { border-right: 0; }
.people-summary span { color: var(--muted); font-size: 11px; font-weight: 700; }
.people-summary strong { order: -1; font-family: "Manrope",sans-serif; font-size: 22px; line-height: 1.15; }
.work-scope-tabs { width: fit-content; margin: 0 0 16px; }
.work-scope-tabs button { min-width: 138px; }
.work-scope-tabs button span { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; margin-left: 5px; border-radius: 9px; background: rgba(18, 61, 54, .09); color: var(--brand); font-size: 9px; font-weight: 800; }
.work-scope-tabs button.active span { background: rgba(255, 255, 255, .2); color: #fff; }
.member-work-view .work-context-column { display: none; }
.department-access-panel { margin-bottom: 18px; }
.department-access-panel .panel-title > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.department-access-list { display: grid; }
.department-access-row { min-height: 70px; display: grid; grid-template-columns: minmax(150px,.7fr) minmax(260px,1.8fr) auto; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.department-access-row:last-child { border-bottom: 0; }
.department-access-row > div:first-child { display: grid; gap: 3px; }
.department-access-row > div:first-child strong { font-size: 13px; }
.department-access-row > div:first-child span { color: var(--muted); font-size: 11px; }
.access-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.access-tags span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); color: var(--muted); font-size: 10.5px; font-weight: 700; }
.compact-btn { min-height: 34px; padding: 0 11px; font-size: 11px; }
.department-dialog { width: min(620px,calc(100vw - 28px)); }
.permission-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 7px 0 9px; }
.permission-heading > div { display: grid; gap: 3px; }
.permission-heading strong { font-size: 13px; }
.permission-heading span { color: var(--muted); font-size: 11px; }
.permission-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.permission-option { min-height: 66px; display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 9px !important; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.permission-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.permission-option input { width: 15px; height: 15px; margin-top: 2px; accent-color: var(--brand); }
.permission-option span { display: grid; gap: 3px; }
.permission-option strong { font-size: 12px; }
.permission-option small { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.user-directory-panel .filter-row { min-height: 70px; padding: 12px 18px; }
.user-search { width: min(380px,100%); }
.directory-filter { min-width: 190px; height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 12px; }
.directory-user { display: flex; align-items: center; gap: 10px; }
.directory-user .avatar { width: 34px; height: 34px; flex: 0 0 34px; }
.user-status-action { white-space: nowrap; }
.user-row-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.access-mode { color: var(--muted); font-size: 11px; font-weight: 700; }
.access-mode.custom { color: var(--brand); }
.inherit-access-option { min-height: 64px; display: flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f8faf9; cursor: pointer; }
.inherit-access-option input { width: 17px; height: 17px; accent-color: var(--brand); }
.inherit-access-option span { display: grid; gap: 3px; }
.inherit-access-option strong { font-size: 12px; }
.inherit-access-option small { color: var(--muted); font-size: 10.5px; }
.permissions-inherited { opacity: .58; }
.muted-cell { color: var(--muted); font-size: 11px; }
.danger-btn { background: #9f2f2f; border-color: #9f2f2f; }
.danger-btn:hover { background: #842525; border-color: #842525; }
.confirmation-dialog > div { display: grid; gap: 18px; }
.directory-user > div { display: grid; gap: 2px; }
.directory-user strong { font-size: 12px; }
.directory-user small { color: var(--muted); font-size: 10.5px; }
.user-status { display: inline-flex; min-width: 56px; height: 24px; align-items: center; justify-content: center; border-radius: 12px; background: var(--canvas); color: var(--muted); font-size: 10.5px; font-weight: 800; }
.user-status.active { background: var(--brand-soft); color: var(--brand); }
.compact-empty { min-height: 240px; }
.work-queue-panel { overflow: hidden; }
.work-queue-panel .panel-title > span { color: var(--brand); font-size: 11px; font-weight: 800; }
.work-queue-panel table { min-width: 1080px; }
.work-queue-panel td { vertical-align: top; }
.work-queue-panel td:nth-child(2) { min-width: 245px; }
.work-queue-panel td:last-child { text-align: right; }
.work-priority { display: inline-flex; margin-top: 6px; padding: 3px 6px; border-radius: 3px; background: var(--gold-soft); color: #875b12; font-size: 10px; font-weight: 800; }
.work-priority.urgent { background: var(--red-soft); color: var(--red); }
.payment-record-inline { width: fit-content; display: flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 7px; border-radius: 4px; color: #276a55; background: #eaf4f0; font-size: 10.5px; font-weight: 700; }
.payment-record-inline.pending { color: #8b5c12; background: var(--gold-soft); }
.payment-record-inline svg { width: 12px; height: 12px; }
.work-dialog { width: min(580px,calc(100vw - 28px)); }
.work-file-field { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 2px; }
.work-file-field > div { display: grid; gap: 3px; }
.work-file-field strong { font-size: 12px; }
.work-file-field span { color: var(--muted); font-size: 10.5px; }
.file-picker { min-height: 38px; display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 7px !important; flex: 0 0 auto; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--brand); background: var(--surface); font-size: 11px !important; font-weight: 800 !important; cursor: pointer; }
.file-picker:hover { background: var(--brand-soft); }
.file-picker svg { width: 15px; height: 15px; }
.file-picker input { display: none; }
.selected-work-files { display: grid; gap: 6px; }
.selected-work-files > div { min-height: 46px; display: grid; grid-template-columns: 26px minmax(0,1fr) 34px; align-items: center; gap: 8px; padding: 5px 7px 5px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--canvas); }
.selected-work-files > div > span { color: var(--brand); }
.selected-work-files p { min-width: 0; display: grid; gap: 2px; }
.selected-work-files strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.selected-work-files small { color: var(--muted); font-size: 10.5px; }
.work-attachments { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.work-file-link { max-width: 220px; min-height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--brand); background: var(--surface); text-decoration: none; }
.work-file-link:hover { background: var(--brand-soft); }
.work-file-link svg { width: 13px; height: 13px; flex: 0 0 auto; }
.work-file-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; }
.work-file-link small { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.allocation-project-files { display: grid; gap: 6px; }
.allocation-project-files > strong { font-size: 12px; }
.allocation-project-files > span { color: var(--muted); font-size: 10.5px; }
.allocation-project-files > div { max-height: 150px; overflow-y: auto; display: grid; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.allocation-project-files > div > p { padding: 11px; color: var(--muted); font-size: 11px; }
.allocation-project-files label { min-height: 42px; display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.allocation-project-files label:last-child { border-bottom: 0; }
.allocation-project-files label:has(input:checked) { background: var(--brand-soft); }
.allocation-project-files input { width: 15px; height: 15px; accent-color: var(--brand); }
.allocation-project-files label span { min-width: 0; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 6px; }
.allocation-project-files label svg { width: 14px; height: 14px; color: var(--brand); }
.allocation-project-files label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.allocation-project-files label small { color: var(--muted); font-size: 10px; }
.file-download-btn { min-height: 32px; text-decoration: none; }
.project-document-layout { display: block; }
.document-project-browser-view { overflow: hidden; }
.document-project-browser-view[hidden], .document-project-detail[hidden] { display: none; }
.document-browser-search { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.document-browser-search .compact-search { width: min(440px, 100%); }
.document-project-list { display: grid; }
.document-project-list[hidden] { display: none; }
.document-project-item { width: 100%; min-height: 72px; display: grid; grid-template-columns: 36px minmax(180px, 1.1fr) minmax(180px, .9fr) 70px 30px; align-items: center; gap: 14px; padding: 11px 16px; border: 0; border-bottom: 1px solid var(--line-soft); background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.document-project-item:hover { background: #f7faf9; }
.document-folder-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--brand); background: #fff; border: 1px solid var(--line-soft); }
.document-folder-icon svg { width: 16px; height: 16px; }
.document-project-identity, .document-project-client, .document-project-file-count { min-width: 0; display: grid; gap: 3px; }
.document-project-item strong, .document-project-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-project-item strong { font-size: 12px; }
.document-project-item small { color: var(--muted); font-size: 10.5px; }
.document-project-file-count { justify-items: center; }
.document-project-file-count b { font-size: 13px; }
.document-project-open { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); }
.document-project-open svg { width: 15px; height: 15px; }
.document-project-empty { padding: 24px 14px; color: var(--muted); font-size: 11px; text-align: center; }
.document-project-empty[hidden] { display: none; }
.document-pagination { min-height: 58px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.document-pagination[hidden] { display: none; }
.document-pagination span { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.document-project-detail { display: grid; gap: 10px; }
.document-project-detail > .back-btn { width: fit-content; min-height: 34px; }
.document-project-detail > .back-btn svg { width: 15px; height: 15px; transform: rotate(180deg); }
.project-files-panel { min-width: 0; }
.document-file-list[hidden] { display: none; }
.document-file-row { min-height: 82px; display: grid; grid-template-columns: 36px minmax(180px, 1fr) minmax(150px, .7fr) 112px auto; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.document-file-row:last-child { border-bottom: 0; }
.document-file-row:hover { background: #f9fbfa; }
.document-file-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: var(--brand); background: var(--brand-soft); }
.document-file-icon svg { width: 17px; height: 17px; }
.document-file-name, .document-file-access, .document-file-date { min-width: 0; display: grid; align-content: center; gap: 4px; }
.document-file-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.document-file-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10.5px; }
.document-file-access > span, .document-file-date > span { color: var(--subtle); font-size: 9.5px; font-weight: 800; text-transform: uppercase; }
.document-file-access .status-badge { justify-self: start; white-space: nowrap; }
.document-file-date strong { font-size: 10.5px; white-space: nowrap; }
.member-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.member-row .avatar { width: 29px; height: 29px; }
.member-row div { display: grid; gap: 1px; }
.member-row strong { font-size: 12px; }
.member-row span { color: var(--muted); font-size: 10.5px; }
.upload-zone { min-height: 240px; display: grid; place-content: center; justify-items: center; gap: 9px; border: 1px dashed #bfcac6; margin: 18px; background: #fafcfb; text-align: center; }
.upload-zone h3 { font-size: 14px; }
.upload-zone p { color: var(--muted); font-size: 12px; }
.document-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }
.document-card { display: grid; gap: 5px; min-height: 88px; padding: 17px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.document-card strong { font-size: 13px; }
.document-card span { color: var(--muted); font-size: 11px; }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; max-width: 360px; transform: translateY(20px); padding: 13px 16px; border-radius: var(--radius); border-left: 3px solid #3f9a75; color: #fff; background: #1b3731; font-weight: 500; box-shadow: 0 14px 40px rgba(0,0,0,.24); opacity: 0; pointer-events: none; transition: .22s; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error-toast { background: #8a3434; border-left-color: #d98b8b; }
.password-dialog { width: min(460px, calc(100% - 28px)); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0; color: var(--ink); background: #fff; box-shadow: 0 24px 70px rgba(10,30,25,.24); }
.password-dialog::backdrop { background: rgba(8,24,20,.48); }
.password-dialog form { display: grid; gap: 15px; padding: 20px; }
.password-dialog textarea { width: 100%; resize: vertical; min-height: 76px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; color: var(--ink); background: #fff; font: inherit; }
.password-dialog textarea:focus { outline: 2px solid rgba(13, 94, 77, .16); border-color: var(--green); }
.project-detail[hidden] { display: none; }
.project-detail { display: grid; gap: 14px; }
.project-detail > .back-btn { width: fit-content; min-height: 32px; color: var(--brand); }
.project-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 20px; }
.project-summary h2 { margin: 6px 0 3px; font-size: 22px; }
.project-summary p { margin: 0; color: var(--muted); }
.project-code-label { display: inline-flex; color: #8a5b05; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.project-header-actions { display: flex; gap: 9px; }
.project-overview-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-soft); }
.project-overview-strip > div { min-height: 76px; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-right: 1px solid var(--line-soft); }
.project-overview-strip > div:last-child { border-right: 0; }
.overview-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-sm); color: var(--brand); background: var(--brand-soft); }
.overview-icon svg { width: 17px; height: 17px; }
.project-overview-strip p { display: grid; gap: 2px; margin: 0; }
.project-overview-strip small { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.project-overview-strip strong { font: 800 22px "Manrope"; }
.project-stage-label { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; background: #edf2f0; color: #4e615c; }
.project-stage-label.stage-attention { background: #fff4d8; color: #805a09; }
.project-stage-label.stage-client { background: #e8f2f7; color: #275b73; }
.project-stage-label.stage-ready { background: #e6f4ee; color: #17624d; }
.muted-table-text { color: var(--muted); }
.project-next-action { min-height: 88px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid #d9c37f; border-radius: var(--radius-sm); background: #fffaf0; }
.next-action-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); color: #76530a; background: #f5e6b8; }
.next-action-icon svg { width: 19px; height: 19px; }
.project-next-action > div { display: grid; gap: 3px; }
.project-next-action small { color: #8a5b05; font-size: 10.5px; font-weight: 800; }
.project-next-action strong { font-size: 15px; }
.project-next-action p { margin: 0; color: var(--muted); font-size: 12px; }
.project-detail > .project-next-action.informational { border-color: var(--line); background: #f8faf9; }
.project-detail > .project-next-action.informational .next-action-icon { color: var(--brand); background: var(--brand-soft); }
.project-detail > .project-next-action.informational small { color: var(--brand); }
.project-progress-panel .panel-title > span { color: var(--brand); font-size: 12px; font-weight: 800; }
.project-progress { display: grid; grid-template-columns: repeat(5, 1fr); padding: 18px 20px; }
.project-progress > div { position: relative; display: grid; justify-items: center; gap: 8px; color: #8b9995; text-align: center; }
.project-progress > div:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 20px); width: calc(100% - 40px); height: 2px; background: #dfe6e3; }
.project-progress > div.completed:not(:last-child)::after { background: #2b755f; }
.project-progress span { width: 30px; height: 30px; display: grid; place-items: center; z-index: 1; border: 2px solid #dfe6e3; border-radius: 50%; background: #fff; font-size: 11px; font-weight: 800; }
.project-progress span svg { width: 14px; height: 14px; }
.project-progress strong { font-size: 11px; }
.project-progress .active { color: var(--ink); }
.project-progress .active span { border-color: #d3a83d; background: #fff7df; color: #7c5909; }
.project-progress .completed { color: #246853; }
.project-progress .completed span { border-color: #2b755f; background: #2b755f; color: #fff; }
.project-information { display: grid; grid-template-columns: repeat(4, 1fr); }
.project-info-item { min-height: 98px; display: grid; align-content: center; gap: 4px; padding: 16px; border-right: 1px solid var(--line-soft); }
.project-info-item:last-child { border-right: 0; }
.project-info-item > span { color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.project-info-item strong { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.project-info-item small { color: var(--muted); font-size: 12px; }
.history-dialog { width: min(680px, calc(100% - 28px)); }
.history-content { padding: 20px; }
.work-updates-list { max-height: 66vh; overflow-y: auto; margin-top: 16px; }
.work-update-entry { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding-bottom: 18px; }
.work-update-entry:not(:last-child)::before { content: ""; position: absolute; top: 13px; bottom: 0; left: 5px; width: 1px; background: var(--line); }
.work-update-marker { width: 11px; height: 11px; z-index: 1; margin-top: 5px; border: 3px solid #d8e9e3; border-radius: 50%; background: var(--brand); }
.work-update-entry > div:last-child { min-width: 0; display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: #fafcfb; }
.work-update-entry header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.work-update-entry header > strong { color: var(--brand); font-size: 13px; }
.work-update-entry time { margin-left: auto; color: var(--muted); font-size: 10.5px; }
.work-update-entry p { margin: 0; font-size: 12px; line-height: 1.5; }
.work-update-entry > div > small { color: var(--muted); font-size: 10.5px; }
.work-update-files { display: flex; flex-wrap: wrap; gap: 6px; }
.work-update-files a { max-width: 210px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--brand); background: #fff; text-decoration: none; }
.work-update-files svg { width: 14px; height: 14px; }
.work-update-files span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; }
.version-history-list { display: grid; gap: 10px; margin-top: 16px; max-height: 65vh; overflow: auto; }
.version-entry { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.version-entry summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px; cursor: pointer; }
.version-entry summary div { display: grid; gap: 3px; }
.version-entry summary span { color: var(--muted); font-size: 13px; }
.change-reason { margin: 0; padding: 12px 14px; background: #f5f8f7; border-top: 1px solid var(--line); }
.history-sections { padding: 8px 14px 14px; }
.history-section { padding-top: 10px; }
.history-section > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--muted); border-bottom: 1px solid #edf1ef; }
.approval-warning { display: flex; gap: 12px; padding: 14px; border: 1px solid #e3c987; border-radius: var(--radius-sm); background: #fff9e9; }
.approval-warning > svg { width: 20px; height: 20px; flex: 0 0 auto; color: #8b6412; }
.approval-warning div { display: grid; gap: 4px; }
.approval-warning span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.confirmation-check { display: flex !important; align-items: flex-start; gap: 9px; }
.confirmation-check input { width: 17px !important; height: 17px; margin-top: 1px; }
.pricing-record { display: flex; gap: 11px; margin: 0 18px 18px; padding: 12px 14px; border-left: 3px solid var(--green); background: #f3f8f6; }
.pricing-record[hidden] { display: none; }
.pricing-record > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--green); }
.pricing-record div { display: grid; gap: 3px; }
.pricing-record span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.pricing-audit { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--muted); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.dialog-heading > div { display: grid; gap: 4px; }
.dialog-heading h2 { font-size: 17px; }
.dialog-heading p { color: var(--muted); font-size: 12px; }
.dialog-heading .icon-btn { font-size: 20px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 5px; }
.dialog-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sidebar-backdrop { display: none; }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .department-grid { grid-template-columns: repeat(3,1fr); }
  .department-card { border-bottom: 1px solid var(--line-soft); }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .document-grid { grid-template-columns: repeat(3,1fr); }
  .project-information { grid-template-columns: repeat(2, 1fr); }
  .project-info-item:nth-child(2) { border-right: 0; }
  .project-info-item:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

@media (max-width: 1024px) {
  .sidebar { width: min(280px, 82vw); padding-top: calc(22px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(10,24,21,.42); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .content-shell { margin-left: 0; }
  .mobile-menu { display: grid; }
  .topbar { height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  main { padding: 24px max(22px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }
  .search-box { width: min(480px, 58vw); }
  .nav-item { height: 46px; font-size: 14px; }
  .account-controls button { min-height: 44px; }
}

@media (max-width: 900px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-brand-panel { min-height: 190px; padding: 25px; }
  .login-message { gap: 7px; }
  .login-message h1 { font-size: 25px; }
  .login-message p, .login-brand-panel small { display: none; }
  .login-form-panel { align-items: start; padding: 38px 22px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(10,24,21,.42); opacity: 0; pointer-events: none; transition: .2s; }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .content-shell { margin-left: 0; }
  .content-shell, main, .view, .panel { min-width: 0; max-width: 100%; }
  .topbar { height: calc(60px + env(safe-area-inset-top)); gap: 10px; padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  .mobile-menu { display: grid; }
  .search-box { flex: 1; width: auto; min-width: 0; }
  .search-box kbd, .user-identity div { display: none; }
  .user-identity { padding-left: 0; border-left: 0; }
  .notification-panel { top: calc(54px + env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); max-height: calc(100vh - 64px - env(safe-area-inset-top)); }
  main { padding: 22px max(14px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .page-heading { min-height: auto; align-items: center; margin-bottom: 18px; }
  .page-heading > div { min-width: 0; }
  .dashboard-heading { align-items: flex-start; }
  .page-heading h1, .dashboard-heading h1 { font-size: 21px; }
  .page-heading .primary-btn { flex: 0 0 auto; min-width: 40px; padding: 0 11px; font-size: 11px; }
  .page-heading .primary-btn svg { width: 15px; height: 15px; margin: 0; }
  .decision-banner { align-items: flex-start; }
  .decision-banner .text-btn { display: none; }
  .decision-banner > .primary-btn { min-width: 40px; padding: 0 10px; font-size: 0; }
  .decision-banner > .primary-btn svg { margin: 0; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .metric-card { min-height: 100px; padding: 13px; }
  .metric-card strong { font-size: 22px; }
  .department-grid { grid-template-columns: 1fr 1fr; }
  .panel-title { padding: 13px; }
  .panel-title .quiet-btn { display: none; }
  .attention-item { padding: 10px 13px; }
  .attention-item { grid-template-columns: 34px minmax(0,1fr); }
  .attention-item .text-btn, .attention-item .compact-btn { grid-column: 2; justify-self: start; }
  .control-summary { display: none; }
  .commercial-snapshot, .attention-list { min-height: auto; }
  .activity-item { padding: 10px 13px; }
  th, td { padding-left: 13px; padding-right: 13px; }
  .filter-row { align-items: stretch; flex-direction: column; }
  .segmented { overflow-x: auto; }
  .compact-search { width: 100%; }
  .workspace-header { align-items: flex-start; gap: 12px; padding: 10px 0; }
  .view.workspace-open > .page-heading { display: none; }
  .workspace-header { flex-direction: column; align-items: stretch; }
  .workspace-actions { width: 100%; }
  .save-state, #saveDraftBtn { display: none; }
  .quote-title-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: flex-start; }
  .quote-total { justify-items: start; }
  .workflow-step span { display: none; }
  .workflow-steps > i { margin: 0 5px; }
  .workflow-steps { width: 100%; max-width: 100%; display: grid; grid-template-columns: 25px minmax(10px, 1fr) 25px minmax(10px, 1fr) 25px minmax(10px, 1fr) 25px minmax(10px, 1fr) 25px; overflow: hidden; }
  .workflow-steps > i { width: 100%; margin: 0; }
  .form-grid { grid-template-columns: 1fr; padding: 14px; }
  .span-2 { grid-column: auto; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; padding: 13px; }
  .section-heading .secondary-btn { min-width: 36px; padding: 0 9px; font-size: 0; }
  .section-heading-actions { width: 100%; order: 3; }
  .section-heading-actions .secondary-btn { flex: 1; font-size: 11px; }
  .section-heading-actions .secondary-btn { min-width: 0; }
  .line-items-panel { min-width: 0; overflow: hidden; }
  .quote-scope-list { padding: 12px; gap: 10px; }
  .wizard-footer { align-items: stretch; flex-direction: column; }
  .wizard-footer .primary-btn { width: 100%; }
  .hierarchy-heading { flex-wrap: wrap; gap: 7px; padding: 10px 12px; }
  .hierarchy-heading input { width: 100%; }
  .subsection-total-label { width: 100%; margin-left: 0; justify-content: flex-end; }
  .hierarchy-heading-actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .subsection-level { padding-left: 12px; }
  .quote-subsection-list { padding: 10px; gap: 8px; }
  .quote-items-header { display: none; }
  .quote-items-empty { flex-direction: column; align-items: stretch; }
  .quote-items-empty .hierarchy-action { justify-content: center; }
  .quote-item-row { grid-template-columns: 1fr; gap: 8px; padding: 12px; margin: 0 10px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: #fff; }
  .item-fields { grid-template-columns: 1fr; }
  .quote-item-row:first-of-type { border-top: 1px solid var(--line-soft); }
  .quote-item-field span, .row-total span { display: block; color: var(--subtle); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .row-total { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--line-soft); }
  .delete-row { justify-self: end; }
  .totals-box { width: auto; margin: 15px 13px 0; }
  .next-actions { grid-template-columns: 1fr; }
  .button-row { align-items: stretch; flex-direction: column; }
  .payment-action, .payment-action.visible { align-items: stretch; flex-direction: column; }
  .payment-action > div { margin: 0 0 6px; }
  .project-board, .team-grid { grid-template-columns: 1fr; }
  .page-heading-actions { flex-shrink: 0; }
  .page-heading-actions .secondary-btn { min-width: 40px; padding: 0 10px; font-size: 0; }
  .page-heading-actions .secondary-btn svg { margin: 0; }
  .people-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people-summary.four-column-summary { grid-template-columns: 1fr 1fr; }
  .people-summary > div { min-height: 66px; padding: 11px; border-right: 1px solid var(--line-soft); border-bottom: 0; }
  .people-summary > div:nth-child(3n) { border-right: 0; }
  .people-summary.four-column-summary > div { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .people-summary.four-column-summary > div:nth-child(2n) { border-right: 0; }
  .people-summary.four-column-summary > div:nth-last-child(-n+2) { border-bottom: 0; }
  .people-summary strong { font-size: 19px; }
  .people-summary span { font-size: 10.5px; }
  .department-access-panel .panel-title { align-items: flex-start; flex-direction: column; }
  .department-access-row { grid-template-columns: 1fr auto; gap: 10px; padding: 13px; }
  .department-access-row .access-tags { grid-column: 1 / -1; grid-row: 2; }
  .department-access-row .compact-btn { grid-column: 2; grid-row: 1; }
  .permission-list { grid-template-columns: 1fr; }
  .user-directory-panel .filter-row { padding: 12px; }
  .directory-filter { width: 100%; }
  .work-file-field { align-items: stretch; flex-direction: column; }
  .file-picker { width: 100%; }
  .project-summary { align-items: stretch; flex-direction: column; }
  .project-summary { min-width: 0; }
  .project-header-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .project-header-actions button { width: 100%; min-width: 0; }
  .project-overview-strip { grid-template-columns: 1fr 1fr; }
  .project-overview-strip > div:nth-child(2) { border-right: 0; }
  .project-overview-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .project-next-action { grid-template-columns: auto 1fr; }
  .project-next-action .primary-btn { grid-column: 1 / -1; width: 100%; }
  .project-progress { grid-template-columns: 1fr; gap: 0; padding: 12px 18px; }
  .project-progress > div { min-height: 48px; grid-template-columns: 30px 1fr; align-items: center; justify-items: start; text-align: left; }
  .project-progress > div:not(:last-child)::after { top: 32px; left: 14px; width: 2px; height: 20px; }
  .project-information { grid-template-columns: 1fr; }
  .project-info-item { min-height: 88px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .project-info-item:last-child { border-bottom: 0; }
  .dialog-form-grid { grid-template-columns: 1fr; }
  .progress-attachment-actions { align-items: stretch; flex-direction: column; }
  .progress-attachment-actions > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .project-document-layout { grid-template-columns: 1fr; }
  .document-project-list { max-height: none; }
  .document-project-item { min-height: 86px; grid-template-columns: 34px minmax(0, 1fr) 54px 28px; gap: 7px 11px; }
  .document-folder-icon { grid-row: 1 / span 2; }
  .document-project-identity { grid-column: 2; grid-row: 1; }
  .document-project-client { grid-column: 2; grid-row: 2; }
  .document-project-file-count { grid-column: 3; grid-row: 1 / span 2; }
  .document-project-open { grid-column: 4; grid-row: 1 / span 2; }
  .document-file-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px 12px; padding: 13px; }
  .document-file-access { grid-column: 2; }
  .document-file-date { grid-column: 2; }
  .document-file-row .file-download-btn { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .document-grid { grid-template-columns: repeat(2,1fr); }
  .password-dialog { width: calc(100% - 16px); max-height: calc(100vh - 24px); overflow-y: auto; }
  .password-dialog form { gap: 13px; padding: 16px; }
  .dialog-actions { position: sticky; bottom: 0; margin: 0 -16px -16px; padding: 12px 16px 16px; border-top: 1px solid var(--line-soft); background: #fff; }

  .work-queue-panel .responsive-table,
  .project-register-panel .responsive-table,
  .user-directory-panel .responsive-table { overflow: visible; }
  .work-queue-panel table,
  .project-register-panel table,
  .user-directory-panel table,
  .work-queue-panel tbody,
  .project-register-panel tbody,
  .user-directory-panel tbody { display: block; min-width: 0; width: 100%; }
  .work-queue-panel thead,
  .project-register-panel thead,
  .user-directory-panel thead { display: none; }
  .work-queue-panel tbody tr,
  .project-register-panel tbody tr,
  .user-directory-panel tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 12px 13px; border-top: 1px solid var(--line-soft); background: #fff; }
  .work-queue-panel tbody tr:first-child,
  .project-register-panel tbody tr:first-child,
  .user-directory-panel tbody tr:first-child { border-top: 0; }
  .work-queue-panel td,
  .project-register-panel td,
  .user-directory-panel td { min-width: 0 !important; height: auto; display: grid; align-content: start; gap: 3px; padding: 7px 0; border: 0; text-align: left !important; }
  .work-queue-panel td::before,
  .project-register-panel td::before,
  .user-directory-panel td::before { color: var(--subtle); font-size: 10px; font-weight: 800; text-transform: uppercase; }

  .work-queue-panel td:nth-child(1), .work-queue-panel td:nth-child(2), .work-queue-panel td:nth-child(8) { grid-column: 1 / -1; }
  .work-queue-panel td:nth-child(1)::before { content: "Project"; }
  .work-queue-panel td:nth-child(2)::before { content: "Work stage"; }
  .work-queue-panel td:nth-child(3)::before { content: "Department"; }
  .work-queue-panel td:nth-child(4)::before { content: "Owner"; }
  .work-queue-panel td:nth-child(5)::before { content: "Due date"; }
  .work-queue-panel td:nth-child(6)::before { content: "Progress"; }
  .work-queue-panel td:nth-child(7)::before { content: "Status"; }
  .work-queue-panel td:nth-child(8)::before { content: "Actions"; }
  .work-row-actions { width: 100%; grid-template-columns: 1fr auto; align-items: center; }
  .work-row-actions .primary-btn, .work-row-actions .secondary-btn { width: 100%; }

  .project-register-panel td:nth-child(1), .project-register-panel td:nth-child(6) { grid-column: 1 / -1; }
  .project-register-panel td:nth-child(1)::before { content: "Project"; }
  .project-register-panel td:nth-child(2)::before { content: "Client and site"; }
  .project-register-panel td:nth-child(3)::before { content: "Quotation"; }
  .project-register-panel td:nth-child(4)::before { content: "Value"; }
  .project-register-panel td:nth-child(5)::before { content: "Next stage"; }
  .project-register-panel td:nth-child(6) { justify-items: end; padding-top: 0; }

  .user-directory-panel td:nth-child(1), .user-directory-panel td:nth-child(6) { grid-column: 1 / -1; }
  .user-directory-panel td:nth-child(1)::before { content: "User"; }
  .user-directory-panel td:nth-child(2)::before { content: "Department"; }
  .user-directory-panel td:nth-child(3)::before { content: "Role"; }
  .user-directory-panel td:nth-child(4)::before { content: "Access"; }
  .user-directory-panel td:nth-child(5)::before { content: "Status"; }
  .user-directory-panel td:nth-child(6)::before { content: "Actions"; }
  .user-row-actions { justify-content: flex-start; }
}

@media (max-width: 430px) {
  .topbar-actions { display: flex; gap: 0; }
  .topbar-actions .user-identity { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-card header span { max-width: 85px; }
  .department-grid, .document-grid { grid-template-columns: 1fr; }
  .quote-title-row { display: grid; }
  .quote-total { justify-items: start; }
  .section-heading-actions { display: grid !important; grid-template-columns: 1fr; }
  .document-browser-search { padding: 10px; }
  .document-project-item { padding: 10px; }
  .document-project-client small { display: none; }
  .document-pagination { justify-content: space-between; padding: 10px; }
  .document-file-row { grid-template-columns: 34px minmax(0, 1fr); }
  .document-file-access, .document-file-date, .document-file-row .file-download-btn { grid-column: 2; }
  .document-file-row .file-download-btn { grid-row: auto; width: fit-content; }
}

/* Mobile ergonomics: prevent iOS input zoom and keep touch targets comfortable */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; }
  input, select { height: 44px; }
  .compact-search input { height: 40px; }
  .segmented button { height: 36px; }
  .icon-btn { width: 42px; height: 42px; }
  .nav-item { height: 46px; }
  .account-controls button { height: 42px; }
  .primary-btn, .secondary-btn, .whatsapp-btn { min-height: 42px; }
  .toast { right: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); max-width: none; }
}

@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .primary-btn, .secondary-btn, .whatsapp-btn, .quiet-btn { min-height: 44px; }
  .segmented button { min-height: 38px; }
  .more-btn { width: 44px; height: 44px; }
  input, select { min-height: 44px; }
}

/* ============================================================
   AESTHETIC LAYER - premium visual refresh.
   Overrides the visual skin only; layout rules above still apply.
   ============================================================ */

:root {
  --canvas: #f2f4f0;
  --gold-strong: #a97b1e;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(18, 36, 31, .05), 0 8px 24px rgba(18, 36, 31, .05);
  --shadow-raised: 0 4px 10px rgba(18, 36, 31, .07), 0 18px 44px rgba(18, 36, 31, .11);
}
body { background: radial-gradient(1100px 420px at 85% -8%, rgba(47, 128, 103, .07), transparent 65%), var(--canvas); }

/* --- Display typography: editorial serif for headlines & money --- */
.page-heading h1, .dashboard-heading h1, .quote-title-row h1, .project-summary h2,
.login-message h1, .login-form h2, .empty-state h3, .dialog-heading h2 {
  font-family: "Fraunces", "Manrope", serif; font-weight: 600; letter-spacing: -.01em;
}
.metric-card > strong, .people-summary strong, .project-overview-strip strong,
.quote-total strong, .department-primary strong, .commercial-snapshot > div b,
.totals-box .grand-total strong {
  font-family: "Fraunces", "Manrope", serif; font-weight: 600; font-variant-numeric: lining-nums tabular-nums;
}
.page-heading p { color: var(--gold-strong); font-size: 10.5px; letter-spacing: .18em; }

/* --- Sidebar: deep-forest gradient with a soft gold glow --- */
.sidebar {
  background:
    radial-gradient(420px 260px at 110% 0%, rgba(213, 170, 80, .12), transparent 60%),
    radial-gradient(520px 420px at -30% 115%, rgba(47, 128, 103, .22), transparent 62%),
    linear-gradient(168deg, #0b2b25, #113a33 58%, #0d322b);
  box-shadow: inset -1px 0 rgba(255, 255, 255, .05);
}
.brand strong { letter-spacing: .01em; }
.brand span { letter-spacing: .04em; text-transform: uppercase; font-size: 10px; color: #9fb6b0; }
.nav-item { height: 44px; border-radius: 10px; font-weight: 600; color: #b9c9c4; }
.nav-item:hover { background: rgba(255, 255, 255, .06); }
.nav-item.active {
  color: #fff; background: linear-gradient(90deg, rgba(213, 170, 80, .16), rgba(255, 255, 255, .07) 55%);
  box-shadow: inset 3px 0 #d5aa50, inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.nav-item b { background: linear-gradient(135deg, #e7c26a, #c9963a); color: #12332c; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.account-controls button { font-weight: 600; }

/* --- Topbar: airy, pill search --- */
.topbar { border-bottom: 1px solid rgba(18, 36, 31, .07); background: rgba(250, 251, 249, .88); backdrop-filter: blur(14px) saturate(1.4); }
.search-box { height: 41px; border-radius: 999px; padding: 0 8px 0 15px; background: #fff; box-shadow: 0 1px 2px rgba(18, 36, 31, .05); }
.search-box:focus-within { border-color: #7ba193; box-shadow: 0 0 0 3px rgba(26, 92, 76, .1); }
.search-box kbd { border-radius: 999px; padding: 3px 9px; background: var(--canvas); border-color: transparent; }
.icon-btn { border-radius: 11px; }
.avatar { background: linear-gradient(135deg, #1d5f50, #123d36); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.user-identity strong { font-weight: 700; }

/* --- Cards & panels --- */
.panel, .people-summary { border-color: rgba(18, 36, 31, .09); }
.panel-title h2 { letter-spacing: -.01em; }
.metric-card { border-color: rgba(18, 36, 31, .09); background: linear-gradient(175deg, #fff, #fdfefd 70%, #f9fbf9); }
.metric-card .metric-icon { width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(18, 61, 54, .07); }
.metric-card footer { letter-spacing: .01em; }
.metric-card.risk { background: linear-gradient(175deg, #fff, #fffdf6 60%, #fdf7e7); }

/* --- Decision banner: warm hero strip --- */
.decision-banner {
  border: 1px solid #ecd9ae; border-left: 4px solid #d5aa50; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #fffdf6, #fdf3da 90%);
  box-shadow: 0 10px 30px rgba(160, 118, 34, .08);
}
.decision-icon { background: linear-gradient(135deg, #f8e9c4, #eed393); color: #8a5b05; box-shadow: inset 0 0 0 1px rgba(138, 91, 5, .12); }
.decision-banner.clear { background: linear-gradient(120deg, #f6fbf8, #e9f5ef 90%); box-shadow: 0 10px 30px rgba(31, 92, 74, .07); }
.decision-banner.clear .decision-icon { background: linear-gradient(135deg, #dcefe7, #c4e2d5); color: #1f5c4a; }

/* --- Buttons --- */
.primary-btn {
  border: 1px solid #0e332c; border-radius: 10px;
  background: linear-gradient(180deg, #1a5347, #123d36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(13, 40, 34, .25);
}
.primary-btn:hover { background: linear-gradient(180deg, #1e5f51, #154439); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 16px rgba(13, 40, 34, .28); }
.secondary-btn { border-radius: 10px; }
.secondary-btn:hover { border-color: #9fb2ac; }
.whatsapp-btn { border-radius: 10px; background: linear-gradient(180deg, #279162, #1d7550); border-color: #1a6b49; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 6px rgba(24, 94, 65, .25); }
.quiet-btn { border-radius: 999px; }

/* --- Segmented filters: active becomes a solid brand pill --- */
.segmented { border-radius: 999px; padding: 4px; background: #eef1ee; border-color: rgba(18, 36, 31, .08); }
.segmented button { border-radius: 999px; height: 30px; font-weight: 600; }
.segmented button.active { color: #fff; background: linear-gradient(180deg, #1a5347, #123d36); box-shadow: 0 2px 6px rgba(13, 40, 34, .3); }
.compact-search { border-radius: 999px; padding: 0 6px 0 12px; background: #fff; }
.compact-search:focus-within { border-color: #7ba193; box-shadow: 0 0 0 3px rgba(26, 92, 76, .1); }

/* --- Status & health badges: dot indicators --- */
.status-badge, .health-badge { gap: 6px; border-radius: 999px; padding: 0 10px; min-height: 24px; letter-spacing: .02em; }
.status-badge::before, .health-badge::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; opacity: .65; }

/* --- Tables --- */
th { background: #f6f8f5; }
tbody tr:hover { background: #f5faf7; }
.table-link:hover { text-decoration-color: rgba(18, 61, 54, .4); text-underline-offset: 3px; }

/* --- Progress bars --- */
.control-progress > div, .work-progress-cell > div, .load-track, .pipeline-track { height: 7px; border-radius: 999px; background: #e6ebe7; }
.control-progress i, .work-progress-cell > div span, .load-track i { border-radius: 999px; background: linear-gradient(90deg, #2f8067, #47a380); }
.pipeline-track i { border-radius: 999px; }

/* --- Dashboard list panels --- */
.attention-item .type-icon, .activity-item > span { border-radius: 11px; }
.live-label i { animation: live-pulse 2.4s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 3px #e4f2ec; } 50% { box-shadow: 0 0 0 6px rgba(63, 154, 117, .12); } }
.department-card { transition: background-color .15s ease; }
.department-card:hover { background: #fafcfa; }

/* --- Notification panel & dialogs --- */
.notification-panel { border-radius: 16px; box-shadow: 0 24px 70px rgba(12, 35, 29, .26); }
.password-dialog { border-radius: 16px; box-shadow: 0 30px 90px rgba(10, 30, 25, .3); }
.password-dialog::backdrop { background: rgba(8, 24, 20, .5); backdrop-filter: blur(3px); }
.empty-icon { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #e9f2ef, #d9eae3); box-shadow: inset 0 0 0 1px rgba(18, 61, 54, .06); }
.toast { border-radius: 12px; background: rgba(17, 46, 39, .94); backdrop-filter: blur(8px); }
.toast.error-toast { background: rgba(122, 42, 42, .95); }

/* --- Login: layered gradient brand panel + floating form card --- */
.login-screen { background: var(--canvas); }
.login-brand-panel {
  background:
    radial-gradient(560px 380px at 88% -6%, rgba(213, 170, 80, .16), transparent 60%),
    radial-gradient(720px 560px at -18% 112%, rgba(47, 128, 103, .26), transparent 62%),
    linear-gradient(158deg, #0b2b25, #123d36 55%, #0d322b);
}
.login-message > span { letter-spacing: .2em; }
.login-message h1 { font-weight: 600; letter-spacing: -.015em; }
.login-form-panel { background: radial-gradient(700px 420px at 70% 0%, rgba(47, 128, 103, .05), transparent 60%), var(--canvas); }
.login-form { background: #fff; border: 1px solid rgba(18, 36, 31, .08); border-radius: 20px; padding: 34px 32px 28px; box-shadow: 0 24px 70px rgba(18, 36, 31, .12); }
.login-lock { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #e9f2ef, #d9eae3); box-shadow: inset 0 0 0 1px rgba(18, 61, 54, .07); }
.login-form input { border-radius: 10px; }
.login-submit { border-radius: 11px; height: 46px; font-size: 13.5px; }

/* --- Workflow stepper & project journey --- */
.workflow-step.active b { background: linear-gradient(180deg, #1a5347, #123d36); box-shadow: 0 0 0 4px rgba(26, 92, 76, .12); }
.project-progress .completed span { background: linear-gradient(180deg, #338767, #2b755f); }
.project-next-action { border-radius: var(--radius-lg); background: linear-gradient(120deg, #fffdf6, #fdf3da 90%); }

/* --- Desktop-only density & scale (kept out of mobile) --- */
@media (min-width: 761px) {
  main { padding: 30px 32px 60px; }
  .page-heading { margin-bottom: 24px; }
  .page-heading h1 { font-size: 28px; }
  .dashboard-heading h1 { font-size: 30px; }
  .quote-title-row h1 { font-size: 26px; }
  .metric-grid { gap: 16px; }
  .metric-card { min-height: 122px; padding: 18px; }
  .metric-card > strong { font-size: 27px; }
  .panel-title { padding: 15px 20px; min-height: 68px; }
  .attention-item, .activity-item { padding-left: 20px; padding-right: 20px; }
  .commercial-snapshot { padding: 7px 20px 0; }
  .pipeline-chart { padding: 16px 20px; }
  .department-card { padding: 18px; }
  th, td { padding-left: 20px; padding-right: 20px; }
  .filter-row { padding: 12px 20px; }
  .people-summary > div { padding: 15px 20px; }
  .people-summary strong { font-size: 24px; }
  .project-overview-strip strong { font-size: 24px; }
  .login-message h1 { font-size: 42px; }
}

/* Dashboard list panels: relax fixed heights so panels size to content */
.attention-list { min-height: auto; }
.attention-item { min-height: 64px; }
.empty-line { height: auto; padding: 34px 20px; }
.activity-list { min-height: auto; }
.empty-line.compact { height: auto; }

.pipeline-row.stage-empty { opacity: .45; }
.pipeline-row.stage-empty b { color: var(--muted); }

/* ============================================================
   THEME SYSTEM - four curated palettes selected from the sidebar.
   Component chrome below is re-declared with variables so a single
   data-theme attribute on <html> reskins the whole app.
   ============================================================ */

:root {
  --chrome-a: #0b2b25;
  --chrome-b: #113a33;
  --chrome-c: #0d322b;
  --grad-top: #1a5347;
  --accent: #d5aa50;
  --accent-soft: #e7c26a;
  --accent-strong: #c9963a;
  --accent-ink: #12332c;
}

:root[data-theme="indigo"] {
  --brand: #2f3e7c;
  --brand-hover: #253163;
  --brand-soft: #eaedf8;
  --chrome-a: #131b3a;
  --chrome-b: #1c2650;
  --chrome-c: #161f44;
  --grad-top: #3a4a8e;
  --accent: #d9a648;
  --accent-soft: #e8c273;
  --accent-strong: #c3913c;
  --accent-ink: #1b2340;
}

:root[data-theme="terracotta"] {
  --brand: #9c4530;
  --brand-hover: #82361f;
  --brand-soft: #f9ece7;
  --chrome-a: #411d12;
  --chrome-b: #5c2a1a;
  --chrome-c: #4a2114;
  --grad-top: #b25439;
  --accent: #dda94f;
  --accent-soft: #eac67a;
  --accent-strong: #c6923d;
  --accent-ink: #3d1c10;
}

:root[data-theme="noir"] {
  --brand: #31373d;
  --brand-hover: #24292e;
  --brand-soft: #eef0f2;
  --chrome-a: #101315;
  --chrome-b: #1b2023;
  --chrome-c: #15191b;
  --grad-top: #454d55;
  --accent: #c8a557;
  --accent-soft: #dcbf7d;
  --accent-strong: #b18f43;
  --accent-ink: #1c1e20;
}

/* Chrome re-declared on variables so every theme reskins it */
.sidebar {
  background:
    radial-gradient(420px 260px at 110% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(520px 420px at -30% 115%, color-mix(in srgb, var(--grad-top) 30%, transparent), transparent 62%),
    linear-gradient(168deg, var(--chrome-a), var(--chrome-b) 58%, var(--chrome-c));
}
.login-brand-panel {
  background:
    radial-gradient(560px 380px at 88% -6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(720px 560px at -18% 112%, color-mix(in srgb, var(--grad-top) 34%, transparent), transparent 62%),
    linear-gradient(158deg, var(--chrome-a), var(--chrome-b) 55%, var(--chrome-c));
}
.nav-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255, 255, 255, .07) 55%);
  box-shadow: inset 3px 0 var(--accent), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.nav-item b, .dash-zone-heading b {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-strong));
  color: var(--accent-ink);
}
.primary-btn, .segmented button.active, .workflow-step.active b, .project-progress .completed span {
  background: linear-gradient(180deg, var(--grad-top), var(--brand));
  border-color: var(--brand-hover);
}
.primary-btn:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--grad-top) 88%, #fff), color-mix(in srgb, var(--brand) 92%, #fff));
}
.avatar { background: linear-gradient(135deg, var(--grad-top), var(--brand)); }
.actor-switch select { background: var(--chrome-b); }
.login-message > span, .login-form p:first-child, .page-heading p { color: var(--accent-strong); }
.decision-banner .primary-btn { border-color: var(--brand-hover); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline-color: var(--brand); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.search-box:focus-within, .compact-search:focus-within { border-color: color-mix(in srgb, var(--brand) 55%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.toast { background: color-mix(in srgb, var(--chrome-b) 94%, #fff); border-left-color: var(--accent); }
.toast.error-toast { background: rgba(122, 42, 42, .95); border-left-color: #d98b8b; }

/* Theme picker in the sidebar footer */
.theme-picker { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 9px; color: #b9c9c4; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.theme-picker > div { display: flex; gap: 7px; }
.theme-picker button { width: 22px; height: 22px; padding: 0; border: 2px solid rgba(255, 255, 255, .28); border-radius: 50%; }
.theme-picker button:hover { border-color: rgba(255, 255, 255, .6); }
.theme-picker button.active { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .16); }
.theme-picker [data-theme-choice="emerald"] { background: linear-gradient(135deg, #1a5347 45%, #d5aa50 130%); }
.theme-picker [data-theme-choice="indigo"] { background: linear-gradient(135deg, #3a4a8e 45%, #d9a648 130%); }
.theme-picker [data-theme-choice="terracotta"] { background: linear-gradient(135deg, #b25439 45%, #eac67a 130%); }
.theme-picker [data-theme-choice="noir"] { background: linear-gradient(135deg, #454d55 45%, #c8a557 130%); }

/* ============================================================
   USABILITY LAYER - password toggles, loading skeletons,
   clickable rows.
   ============================================================ */
.password-label { position: relative; }
.password-label input { padding-right: 46px; }
.password-toggle { position: absolute; right: 5px; bottom: 5px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; color: var(--subtle); background: transparent; }
.password-toggle:hover { color: var(--brand); background: var(--brand-soft); }
.password-toggle.revealed { color: var(--brand); }
.password-toggle svg { width: 17px; height: 17px; }

.skeleton-row { height: 46px; margin: 12px 20px; border-radius: 10px; background: linear-gradient(90deg, #eef1ee 25%, #f7f9f6 45%, #eef1ee 65%); background-size: 200% 100%; animation: skeleton-shimmer 1.3s linear infinite; }
.commercial-snapshot .skeleton-row, .pipeline-chart .skeleton-row { height: 64px; margin: 16px; }
.department-grid .skeleton-row { height: 110px; margin: 16px; }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }

tbody tr:has([data-open-project]), tbody tr:has([data-open-existing]), tbody tr:has(.table-link) { cursor: pointer; }

/* Operations workspace: one readable delivery stage per row. */
.operation-list { display: grid; gap: 12px; padding: 12px; background: #f4f7f5; }
.operation-list[hidden] { display: none; }
.operation-project-group { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.operation-project-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 18px; background: var(--brand-soft); cursor: pointer; list-style: none; }
.operation-project-header::-webkit-details-marker { display: none; }
.operation-project-header:hover { background: color-mix(in srgb, var(--brand-soft) 82%, var(--surface)); }
.operation-project-group[open] .operation-project-header { border-bottom: 1px solid var(--line); }
.operation-project-identity { min-width: 0; display: grid; gap: 2px; }
.operation-project-identity > span { color: var(--brand); font-size: 9.5px; font-weight: 800; text-transform: uppercase; }
.operation-project-identity > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.operation-project-identity > small { color: var(--muted); font-size: 10.5px; }
.operation-project-overview { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.operation-project-overview > b { color: var(--brand); font-size: 10.5px; }
.operation-project-overview > em { min-width: 82px; padding: 4px 7px; border-radius: 4px; color: #805a09; background: #fff4d8; font-size: 10px; font-style: normal; font-weight: 800; text-align: center; }
.operation-project-overview > em.clear { color: #17624d; background: #e6f4ee; }
.operation-project-progress { min-width: 126px; display: grid; grid-template-columns: minmax(72px, 1fr) auto; align-items: center; gap: 7px; }
.operation-project-progress > i { height: 7px; overflow: hidden; border-radius: 999px; background: #dce6e1; }
.operation-project-progress > i > b { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.operation-project-progress > strong { color: var(--brand); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.operation-project-toggle { width: 28px; height: 28px; display: grid; place-items: center; color: var(--brand); }
.operation-project-toggle svg { width: 15px; height: 15px; transition: transform .18s ease; }
.operation-project-group[open] .operation-project-toggle svg { transform: rotate(90deg); }
.operation-item { position: relative; display: grid; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.operation-item:last-child { border-bottom: 0; }
.operation-item.needs-action::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--accent-strong); }
.operation-item-header { min-height: 82px; display: grid; grid-template-columns: minmax(280px, 1fr) auto; align-items: center; gap: 22px; padding: 14px 20px; }
.operation-stage, .operation-latest { min-width: 0; display: grid; align-content: center; gap: 3px; }
.operation-stage > span, .operation-meta-grid span, .operation-progress > span, .operation-latest > span { color: var(--subtle); font-size: 9.5px; font-weight: 800; text-transform: uppercase; }
.operation-stage small, .operation-meta-grid small, .operation-latest small { color: var(--muted); font-size: 10.5px; }
.operation-stage strong { font-size: 13px; }
.operation-stage small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-stage .work-priority { justify-self: start; margin-top: 4px; }
.operation-item-header > .status-badge { justify-self: end; white-space: nowrap; }
.operation-item-body { display: grid; grid-template-columns: minmax(360px, 1.45fr) minmax(230px, .75fr); gap: 22px; padding: 14px 20px; border-top: 1px solid var(--line-soft); background: #f9fbfa; }
.operation-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.operation-meta-grid > div { min-width: 0; display: grid; align-content: start; gap: 3px; }
.operation-meta-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.operation-progress { min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.operation-progress > span { grid-column: 1 / -1; }
.operation-progress > div { height: 7px; overflow: hidden; border-radius: 999px; background: #e3eae6; }
.operation-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f8067, #47a380); }
.operation-progress strong { font-size: 11px; font-variant-numeric: tabular-nums; }
.operation-progress-empty { min-width: 0; display: grid; align-content: center; gap: 5px; }
.operation-progress-empty span { color: var(--subtle); font-size: 9.5px; font-weight: 800; text-transform: uppercase; }
.operation-progress-empty strong { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.operation-project-progress.empty { min-width: 112px; justify-content: flex-end; }
.operation-project-progress.empty strong { color: var(--muted); font-size: 9.5px; }
.operation-signals { grid-column: 1 / -1; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px; }
.operation-signals:empty { display: none; }
.operation-signals .payment-record-inline, .operation-signals .blocked-reason { margin-top: 0; }
.operation-files { position: relative; }
.operation-files summary { min-height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--brand); background: var(--surface); font-size: 10.5px; font-weight: 800; cursor: pointer; list-style: none; }
.operation-files summary::-webkit-details-marker { display: none; }
.operation-files summary svg { width: 12px; height: 12px; }
.operation-files > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.operation-files .work-file-link { max-width: 260px; }
.operation-item-footer { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 20px; border-top: 1px solid var(--line-soft); }
.operation-latest strong { max-width: 650px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.operation-latest small { display: block; }
.operation-item .work-row-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }

@media (max-width: 900px) {
  .work-queue-panel .filter-row { align-items: stretch; flex-direction: column; }
  .work-queue-panel .segmented { width: 100%; overflow-x: auto; }
  .work-queue-panel .segmented button { flex: 1 0 auto; }
  .work-queue-panel .compact-search { width: 100%; }
  .operation-list { padding: 10px; }
  .operation-project-header { padding: 12px 15px; }
  .operation-project-overview { gap: 9px; }
  .operation-project-progress { min-width: 104px; }
  .operation-item-header { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 15px 16px; }
  .operation-item-body { grid-template-columns: 1fr; gap: 16px; padding: 14px 16px; }
  .operation-signals { grid-column: 1; }
  .operation-item-footer { align-items: flex-start; flex-direction: column; padding: 13px 16px 15px; }
  .operation-item .work-row-actions { width: 100%; justify-content: flex-start; }
  .operation-item .work-row-actions .primary-btn, .operation-item .work-row-actions .secondary-btn { width: auto; }
}

@media (max-width: 430px) {
  .operation-project-header { align-items: flex-start; }
  .operation-project-overview { display: grid; grid-template-columns: auto auto; justify-items: end; }
  .operation-project-progress { grid-column: 1 / -1; min-width: 118px; }
  .operation-project-overview > b { grid-column: 1; }
  .operation-project-overview > em { display: none; }
  .operation-project-toggle { grid-column: 2; grid-row: 2; }
  .operation-meta-grid { grid-template-columns: 1fr; gap: 11px; }
  .operation-item-header { grid-template-columns: minmax(0, 1fr); }
  .operation-item-header > .status-badge { grid-column: 1; grid-row: 2; justify-self: start; }
  .operation-stage { grid-column: 1; grid-row: 1; }
  .operation-item .work-row-actions { display: grid; grid-template-columns: 1fr auto; }
  .operation-item .work-row-actions .primary-btn, .operation-item .work-row-actions .secondary-btn { width: 100%; }
}

/* MD dashboard: action-first management view. */
.dashboard-heading { margin-bottom: 16px; }
.dashboard-decision-panel { overflow: hidden; margin-bottom: 16px; border-color: #dbc985; }
.dashboard-panel-heading { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.dashboard-panel-heading > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.dashboard-panel-heading h2 { font-size: 14px; }
.dashboard-panel-heading p { margin: 2px 0 0; color: var(--muted); font-size: 10.5px; }
.dashboard-panel-heading > strong { flex: 0 0 auto; padding: 5px 8px; border-radius: 4px; color: #7b5508; background: #fff3cf; font-size: 10.5px; }
.dashboard-panel-heading .text-btn { flex: 0 0 auto; }
.dashboard-heading-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-sm); color: #2f6680; background: var(--blue-soft); }
.dashboard-heading-icon.urgent { color: #8a5a08; background: #fff1c8; }
.dashboard-heading-icon svg { width: 16px; height: 16px; }
.dashboard-decision-body { min-height: 120px; }
.dashboard-decision-panel .attention-item { min-height: 70px; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; padding: 11px 16px; }
.dashboard-decision-panel .attention-item > div { min-width: 0; }
.dashboard-decision-panel .attention-item > div strong, .dashboard-decision-panel .attention-item > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-decision-panel .attention-item .primary-btn { min-width: 128px; justify-content: space-between; }
.attention-priority { min-width: 62px; color: #8b5c12; font-size: 9.5px; font-weight: 800; text-align: center; text-transform: uppercase; }
.attention-item.urgent .attention-priority { color: var(--red); }

.dashboard-operations-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.dashboard-project-watch, .dashboard-department-panel, .dashboard-pipeline-panel, .dashboard-money-panel, .dashboard-activity-panel { overflow: hidden; }
.dashboard-project-list { display: grid; }
.dashboard-project-row { min-height: 76px; display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, .85fr) minmax(100px, .6fr) auto minmax(120px, .72fr); align-items: center; gap: 13px; padding: 10px 15px; border-bottom: 1px solid var(--line-soft); }
.dashboard-project-row:last-child { border-bottom: 0; }
.dashboard-project-row:hover { background: #fafcfb; }
.dashboard-project-name, .dashboard-next-action { min-width: 0; border: 0; padding: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.dashboard-project-name { display: grid; gap: 3px; }
.dashboard-project-name strong, .dashboard-project-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-project-name strong { font-size: 12px; }
.dashboard-project-name small { color: var(--muted); font-size: 10px; }
.dashboard-project-stage { min-width: 0; display: grid; gap: 3px; }
.dashboard-project-stage span { color: var(--subtle); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.dashboard-project-stage strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.dashboard-project-progress { display: grid; grid-template-columns: minmax(58px, 1fr) auto; align-items: center; gap: 7px; }
.dashboard-project-progress > div { height: 7px; overflow: hidden; border-radius: 999px; background: #e3eae6; }
.dashboard-project-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f8067, #47a380); }
.dashboard-project-progress strong { font-size: 10px; font-variant-numeric: tabular-nums; }
.dashboard-next-action { display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 5px; color: var(--brand); font-size: 10.5px; font-weight: 800; }
.dashboard-next-action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-next-action svg { width: 14px; height: 14px; }

.dashboard-department-list { display: grid; }
.dashboard-department-row { min-height: 68px; display: grid; grid-template-columns: minmax(110px, 1fr) minmax(80px, .75fr) auto 16px; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); background: var(--surface); text-align: left; cursor: pointer; }
.dashboard-department-row:last-child { border-bottom: 0; }
.dashboard-department-row:hover { background: #f8faf9; }
.dashboard-department-row > span:first-child { min-width: 0; display: grid; gap: 3px; }
.dashboard-department-row > span:first-child strong, .dashboard-department-row > span:first-child small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-department-row > span:first-child strong { font-size: 11.5px; }
.dashboard-department-row > span:first-child small { color: var(--muted); font-size: 9.5px; }
.department-activity-counts { display: flex; align-items: center; gap: 9px; min-width: 0; }
.department-activity-counts b { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9.5px; white-space: nowrap; }
.department-activity-counts i { width: 7px; height: 7px; border-radius: 50%; background: #aab7b1; }
.department-activity-counts i.moving { background: #2f8067; }
.department-activity-counts i.waiting { background: #d5a126; }
.dashboard-department-row em { color: #34735f; font-size: 9.5px; font-style: normal; font-weight: 800; white-space: nowrap; }
.dashboard-department-row em.risk { color: var(--red); }
.dashboard-department-row > svg { width: 14px; height: 14px; color: var(--muted); }

.dashboard-business-grid { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(280px, .9fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.dashboard-pipeline-panel .pipeline-chart { display: grid; gap: 0; min-height: 0; padding: 0; }
.dashboard-pipeline-panel .pipeline-stage { border-bottom: 1px solid var(--line-soft); }
.dashboard-pipeline-panel .pipeline-stage:last-child { border-bottom: 0; }
.dashboard-pipeline-panel .pipeline-stage.open { background: #fafcfa; }
.dashboard-pipeline-panel .pipeline-row { width: 100%; min-height: 46px; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; padding: 8px 14px; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.dashboard-pipeline-panel .pipeline-row:hover { background: #f8faf9; }
.dashboard-pipeline-panel .pipeline-row span { font-size: 10.5px; }
.dashboard-pipeline-panel .pipeline-row b { min-width: 24px; height: 23px; display: grid; place-items: center; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-size: 10.5px; }
.dashboard-pipeline-panel .pipeline-row > svg { width: 13px; height: 13px; color: var(--muted); transition: transform .15s ease; }
.dashboard-pipeline-panel .pipeline-stage.open .pipeline-row > svg { transform: rotate(90deg); color: var(--brand); }
.dashboard-pipeline-panel .pipeline-row.stage-empty { opacity: .58; }
.pipeline-stage-detail { display: grid; gap: 5px; padding: 0 14px 12px 14px; }
.pipeline-stage-project { width: 100%; min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) 14px; align-items: center; gap: 8px; padding: 7px 11px; border: 0; border-radius: 8px; color: var(--ink); background: var(--surface); text-align: left; cursor: pointer; }
.pipeline-stage-project:hover { background: var(--brand-soft); }
.pipeline-stage-project strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-stage-project small { color: var(--muted); font-size: 9.5px; }
.pipeline-stage-project svg { width: 13px; height: 13px; color: var(--muted); }
.pipeline-stage-empty-note { margin: 0; padding: 8px 11px; color: var(--muted); font-size: 10.5px; }
.dashboard-money-panel .commercial-snapshot { min-height: 0; }
.dashboard-money-panel .commercial-snapshot > div { min-height: 64px; padding: 10px 14px; }
.dashboard-money-panel .commercial-snapshot footer { padding: 10px 14px; flex-wrap: wrap; }
.commercial-snapshot > div b.positive { color: #1f6b54; }
.commercial-snapshot > div b.warning { color: #8a5b05; }
.commercial-snapshot footer span.warning { color: #8a5b05; font-weight: 800; }
.dashboard-activity-list { display: grid; }
.dashboard-activity-row { min-height: 57px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 13px; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); background: var(--surface); text-align: left; cursor: pointer; }
.dashboard-activity-row:last-child { border-bottom: 0; }
.dashboard-activity-row:hover { background: #f8faf9; }
.dashboard-activity-row > span:first-child { width: 29px; height: 29px; display: grid; place-items: center; border-radius: var(--radius-sm); color: #34657b; background: var(--blue-soft); }
.dashboard-activity-row > span:first-child svg { width: 14px; height: 14px; }
.dashboard-activity-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.dashboard-activity-row strong, .dashboard-activity-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-activity-row strong { font-size: 10.5px; }
.dashboard-activity-row small, .dashboard-activity-row time { color: var(--muted); font-size: 9.5px; }

@media (max-width: 1180px) {
  .dashboard-operations-grid { grid-template-columns: 1fr; }
  .dashboard-business-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-activity-panel { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .dashboard-decision-panel .attention-item { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .dashboard-decision-panel .attention-item .attention-priority { display: none; }
  .dashboard-project-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 14px; }
  .dashboard-project-name { grid-column: 1; }
  .dashboard-project-row > .health-badge { grid-column: 2; grid-row: 1; }
  .dashboard-project-stage { grid-column: 1; }
  .dashboard-project-progress { grid-column: 2; }
  .dashboard-next-action { grid-column: 1 / -1; width: fit-content; }
  .dashboard-business-grid { grid-template-columns: 1fr; }
  .dashboard-activity-panel { grid-column: 1; }
}

@media (max-width: 560px) {
  .work-scope-tabs { width: 100%; }
  .work-scope-tabs button { min-width: 0; flex: 1; }
  .dashboard-heading > .secondary-btn { display: none; }
  .dashboard-panel-heading { align-items: flex-start; min-height: 62px; padding: 11px 12px; }
  .dashboard-panel-heading p { display: none; }
  .dashboard-panel-heading > strong { max-width: 120px; text-align: right; }
  .dashboard-decision-panel .attention-item { grid-template-columns: 30px minmax(0, 1fr); padding: 11px 12px; }
  .dashboard-decision-panel .attention-item .primary-btn { grid-column: 2; width: fit-content; min-width: 0; }
  .dashboard-department-row { grid-template-columns: minmax(0, 1fr) auto 14px; }
  .dashboard-department-row .department-activity-counts { grid-column: 1; grid-row: 2; }
  .dashboard-department-row em { grid-column: 2; grid-row: 1 / span 2; }
  .dashboard-department-row > svg { grid-column: 3; grid-row: 1 / span 2; }
}

.metric-skeleton { height: 112px; margin: 0; }