:root {
  --blue-1: #3487ff;
  --blue-2: #2b4d99;
  --blue-3: #3561bd;
  --blue-soft: #edf2ff;
  --gold: #fdb515;
  --gold-soft: #fff7dc;
  --grey: #a4a1a0;
  --paper: #f5f6f8;
  --line: #e1e4ea;
  --ink: #24345d;
  --muted: #707990;
  --green: #2d7b68;
  --green-soft: #e7f3ef;
  --red: #b74b56;
  --red-soft: #fbeaec;
  --white: #fff;
  --shadow: 0 16px 40px rgba(43, 77, 153, .09);
}

* { box-sizing: border-box; }
html { color: var(--ink); background: var(--paper); }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(52, 135, 255, .38); outline-offset: 2px; }

.login-page { display: grid; min-height: 100vh; grid-template-columns: minmax(400px, .9fr) minmax(480px, 1.1fr); }
.login-brand { display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; padding: 54px; color: white; background: radial-gradient(circle at 18% 82%, rgba(52,135,255,.28), transparent 34%), linear-gradient(145deg, var(--blue-2), #203b79); }
.clearview-logo-panel { display: grid; place-items: center; background: transparent; }
.clearview-logo-panel img { display: block; width: 100%; height: auto; opacity: 1; filter: none; mix-blend-mode: normal; }
.login-logo-panel { width: min(440px, 100%); }
.platform-brand-lockup { display: flex; align-items: center; }
.tcubed-mark { display: block; flex: 0 0 auto; object-fit: contain; }
.login-platform-lockup { width: 100%; justify-content: flex-start; gap: 2cm; }
.login-platform-lockup .tcubed-mark { width: 116px; height: 116px; }
.login-platform-lockup h1 { width: min-content; flex: 0 0 min-content; margin-top: 0; }
.login-brand h1 { max-width: 560px; margin: 16px 0 0; font-size: clamp(42px, 5vw, 72px); font-weight: 650; letter-spacing: -.055em; line-height: .98; }
.login-brand p { max-width: 500px; margin: 24px 0 0; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.7; }
.login-brand small { color: rgba(255,255,255,.55); }
.login-panel { display: grid; place-items: center; padding: 40px; background: white; }
.login-card { width: min(420px, 100%); }
.login-card h2 { margin: 9px 0 0; color: var(--blue-2); font-size: 38px; letter-spacing: -.045em; }
.login-card > p { margin: 10px 0 30px; color: var(--muted); line-height: 1.6; }
.login-card label, .form-panel label { display: grid; gap: 7px; margin-top: 17px; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.login-card input, .form-panel input, .form-panel select { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid #ccd3df; border-radius: 9px; color: var(--ink); background: white; font-size: 13px; font-weight: 400; }
.login-card .primary-button { width: 100%; min-height: 48px; margin-top: 24px; }
.mfa-card { max-width: 440px; }
.mfa-qr { display: grid; place-items: center; margin: 18px 0; }
.mfa-qr img { width: 220px; height: 220px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.mfa-card details { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #f8f9fc; font-size: 11px; }
.mfa-card summary { cursor: pointer; color: var(--blue-2); font-weight: 750; }
.mfa-manual-key { display: block; margin-top: 12px; color: var(--ink); font-size: 13px; letter-spacing: .08em; overflow-wrap: anywhere; }
.mfa-code-label { display: block; margin-top: 18px; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.mfa-code-inputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 8px; }
.mfa-card .mfa-code-inputs input { width: 100%; min-width: 0; height: 56px; padding: 0; border: 1px solid #bfc9d9; border-radius: 10px; color: var(--blue-2); background: #fff; font-size: 25px; font-weight: 750; line-height: 1; text-align: center; caret-color: var(--blue-1); }
.mfa-card .mfa-code-inputs input:focus { border-color: var(--blue-1); box-shadow: 0 0 0 3px rgba(52,135,255,.12); }
.mfa-entry-toggle { display: block; margin: 16px auto 0; }
.mfa-entry-message { margin: 14px 0 -8px; }
.login-cancel { display: block; margin: 15px auto 0; }
.recovery-card .secondary-button, .recovery-card .primary-button { width: 100%; margin-top: 14px; }
.recovery-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 6px; }
.recovery-code-list code { padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue-2); background: #f7f9fd; text-align: center; font-weight: 750; }
.support-copy { display: block; margin-top: 20px; color: var(--muted); text-align: center; }
.form-message { margin: -10px 0 20px; padding: 11px 12px; border-radius: 8px; color: var(--red); background: var(--red-soft); font-size: 12px; }
@media (max-width: 560px) { .mfa-code-inputs { gap: 6px; } .mfa-card .mfa-code-inputs input { height: 48px; font-size: 21px; } }

.eyebrow { display: block; color: var(--blue-2); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.light { color: #cbd7ff; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; display: flex; width: 250px; flex-direction: column; padding: 28px 22px 22px; color: white; background: radial-gradient(circle at 10% 82%, rgba(52,135,255,.18), transparent 34%), linear-gradient(160deg, #2b4d99 0%, #29478e 58%, #203b79 100%); transition: transform .24s ease, box-shadow .24s ease; }
.sidebar::after { position: absolute; inset: 0 0 0 auto; width: 6px; background: var(--blue-1); content: ""; opacity: 0; transition: opacity .2s ease; }
.sidebar-logo-panel { width: 100%; margin-top: 18px; }
.sidebar-platform-lockup { gap: 12px; margin-top: 14px; padding: 0 2px; }
.sidebar-platform-lockup .tcubed-mark { width: 42px; height: 42px; }
.sidebar-platform-lockup .platform-byline { margin-top: 0; padding-left: 0; }
.platform-byline { margin-top: 11px; padding-left: 2px; }
.platform-byline strong, .platform-byline small { display: block; }
.platform-byline strong { color: white; font-size: 10px; font-weight: 750; letter-spacing: .035em; }
.platform-byline small { margin-top: 3px; color: rgba(255,255,255,.58); font-size: 8px; font-weight: 650; letter-spacing: .045em; }
.client-block { margin: 25px 0 28px; padding: 18px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.06); }
.client-block span, .client-block strong, .client-block small { display: block; }
.client-block span { color: #b9c9ff; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.client-block strong { margin-top: 8px; font-size: 16px; }
.client-block small { margin-top: 4px; color: rgba(255,255,255,.58); font-size: 11px; }
.client-block-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.client-block-main > div { min-width: 0; }
.client-block-main img { display: block; width: 58px; height: 46px; flex: 0 0 auto; padding: 4px; object-fit: contain; border-radius: 9px; background: white; }
.sidebar nav { display: grid; gap: 6px; }
.sidebar-control { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; width: 34px; height: 34px; place-items: center; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); }
.sidebar-control:hover { color: white; border-color: rgba(255,255,255,.3); background: rgba(52,135,255,.22); }
.thumbtack-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.sidebar-control[aria-pressed="true"] .thumbtack-icon { transform: rotate(-35deg); }
.sidebar-control + .session-card { margin-top: auto; }
.nav-item { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 10px; color: rgba(255,255,255,.68); background: transparent; font-size: 12px; font-weight: 650; text-align: left; transition: .16s ease; }
.nav-icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; color: rgba(211,216,226,.58); transition: color .16s ease; }
.nav-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.nav-label { color: inherit; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(52,135,255,.2); }
.nav-item.active { box-shadow: inset 3px 0 var(--blue-1); }
.nav-item:hover .nav-icon { color: rgba(229,232,239,.82); }
.nav-item.active .nav-icon { color: #e2e5eb; }
.session-card { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 8px; margin-top: auto; padding: 15px 5px 3px 4px; border-top: 1px solid rgba(255,255,255,.14); }
.session-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-1); box-shadow: 0 0 0 4px rgba(52,135,255,.14); }
.session-card strong, .session-card small { display: block; }
.session-card strong { font-size: 11px; }
.session-card small { margin-top: 3px; color: rgba(255,255,255,.55); font-size: 9px; }
.account-menu { position: relative; min-width: 0; }
.account-trigger { display: grid; width: 100%; grid-template-columns: 8px minmax(0, 1fr); align-items: center; gap: 11px; padding: 9px 8px; border: 0; border-radius: 9px; color: white; background: transparent; text-align: left; }
.account-trigger:hover, .account-trigger[aria-expanded="true"] { background: rgba(255,255,255,.08); }
.account-popover { position: absolute; inset: auto 0 calc(100% + 7px); z-index: 10; padding: 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: #203b79; box-shadow: 0 14px 34px rgba(10,24,58,.34); }
.account-popover button { width: 100%; padding: 9px 11px; border: 0; border-radius: 7px; color: white; background: transparent; font-size: 10px; font-weight: 700; text-align: left; }
.account-popover button:hover { background: rgba(52,135,255,.24); }
.settings-cog { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); }
.settings-cog:hover, .settings-cog.active { color: white; border-color: rgba(255,255,255,.32); background: rgba(52,135,255,.24); }
.settings-cog svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.password-change-note { margin-top: 34px; padding: 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.08); }
.password-change-note strong, .password-change-note small { display: block; }
.password-change-note strong { font-size: 11px; }
.password-change-note small { margin-top: 5px; color: rgba(255,255,255,.68); font-size: 9px; line-height: 1.5; }
.hidden { display: none !important; }

.main-panel { min-height: 100vh; margin-left: 250px; padding: 0 34px 54px; transition: margin-left .24s ease; }
.sidebar-unpinned .sidebar { width: 72px; padding: 18px 10px; }
.sidebar-unpinned .main-panel { margin-left: 72px; }
.sidebar-unpinned .sidebar-logo-panel,.sidebar-unpinned .platform-byline,.sidebar-unpinned .client-block,.sidebar-unpinned .nav-label,.sidebar-unpinned .account-trigger > span:last-child { display: none; }
.sidebar-unpinned .sidebar-platform-lockup { justify-content: center; margin-top: 60px; padding: 0; }
.sidebar-unpinned .sidebar-platform-lockup .tcubed-mark { width: 40px; height: 40px; }
.sidebar-unpinned .sidebar nav { margin-top: 44px; }
.sidebar-unpinned .nav-item { justify-content: center; gap: 0; padding: 11px; }
.sidebar-unpinned .sidebar-control { right: 9px; }
.sidebar-unpinned .session-card { grid-template-columns: 1fr; justify-items: center; padding: 11px 0 0; }
.sidebar-unpinned .account-trigger { display: grid; width: 38px; height: 38px; grid-template-columns: 1fr; place-items: center; padding: 0; }
.sidebar-unpinned .settings-cog { margin-top: 5px; }
.topbar { display: flex; min-height: 116px; align-items: center; justify-content: space-between; gap: 24px; }
.breadcrumbs { color: var(--muted); font-size: 11px; }
.breadcrumbs b { margin: 0 8px; color: var(--grey); font-weight: 400; }
.topbar h1 { margin: 7px 0 0; color: var(--blue-2); font-size: clamp(25px, 2.3vw, 35px); font-weight: 680; letter-spacing: -.04em; }
.top-actions { display: flex; align-items: flex-end; gap: 10px; }
.project-selector { display: grid; gap: 5px; }
.project-selector span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.project-selector select { min-width: 285px; height: 42px; padding: 0 36px 0 12px; border: 1px solid #ccd3df; border-radius: 9px; color: var(--ink); background: white; font-size: 12px; }
.primary-button, .secondary-button { display: inline-grid; min-height: 41px; place-items: center; padding: 0 16px; border-radius: 9px; font-size: 11px; font-weight: 750; text-decoration: none; text-transform: capitalize; }
.primary-button { border: 0; color: white; background: var(--blue-2); box-shadow: 0 7px 18px rgba(43,77,153,.22); }
.primary-button:hover { background: #223f80; }
.secondary-button { border: 1px solid #cad2df; color: var(--blue-2); background: white; }
.secondary-button:hover { border-color: var(--blue-3); }
.primary-button:disabled { opacity: .6; cursor: wait; }

.view-stack { display: grid; gap: 18px; animation: enter .22s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } }
.project-toolbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 13px 10px 17px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.project-toolbar strong { display: block; margin-top: 4px; color: var(--ink); font-size: 11px; }
.hero-grid, .content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .78fr); gap: 18px; }
.content-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-card, .attention-card, .panel, .kpi-card { border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
.hero-card { display: grid; min-height: 210px; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; overflow: hidden; border: 0; color: white; background: radial-gradient(circle at 75% 18%, rgba(52,135,255,.27), transparent 35%), linear-gradient(130deg, var(--blue-2), #2d519f 62%, var(--blue-3)); }
.outlook-card { cursor: pointer; transition: transform .17s ease, box-shadow .17s ease; }
.outlook-card:hover, .outlook-card:focus-visible { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(31,55,116,.22); }
.hero-card > div:first-child { padding: 31px; }
.hero-card h2 { max-width: 680px; margin: 12px 0 0; font-size: clamp(27px, 2.6vw, 39px); font-weight: 620; letter-spacing: -.05em; line-height: 1.08; }
.hero-card p { max-width: 640px; margin: 18px 0 0; color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.65; }
.hero-metric { display: flex; min-width: 225px; flex-direction: column; justify-content: center; padding: 28px 31px; border-left: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.hero-metric span { color: rgba(255,255,255,.6); font-size: 9px; text-transform: uppercase; }
.hero-metric strong { margin: 8px 0; font-size: 35px; letter-spacing: -.05em; }
.hero-metric small { color: #ffe194; }
.attention-card, .panel { padding: 24px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.section-heading h3, .form-panel h3 { margin: 6px 0 0; color: var(--blue-2); font-size: 18px; font-weight: 690; letter-spacing: -.025em; }
.section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.count-badge { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: #735807; background: var(--gold-soft); font-size: 11px; font-weight: 800; }
.attention-list { display: grid; margin-top: 14px; }
.attention-list > div { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid #edf0f4; }
.attention-list > div > span { color: var(--blue-3); font-size: 9px; font-weight: 800; }
.attention-list p, .attention-list strong, .attention-list small { display: block; margin: 0; }
.attention-list strong { font-size: 12px; }
.attention-list small { margin-top: 4px; color: var(--muted); font-size: 10px; }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-card { position: relative; min-height: 120px; overflow: hidden; padding: 18px; }
.kpi-card::before { position: absolute; inset: 0 0 auto; height: 3px; background: var(--blue-2); content: ""; }
.kpi-card.tone-green::before { background: var(--green); }
.kpi-card.tone-red::before { background: var(--red); }
.kpi-card.tone-yellow::before { background: var(--gold); }
.kpi-card > span, .kpi-card > strong, .kpi-card > small { display: block; }
.kpi-card > span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.kpi-card > strong { margin-top: 11px; color: var(--blue-2); font-size: clamp(20px, 2vw, 28px); letter-spacing: -.045em; }
.kpi-card > small { margin-top: 7px; color: var(--muted); font-size: 9px; }
.kpi-card.interactive { cursor: pointer; transition: transform .16s ease, border-color .16s ease; }
.kpi-card.interactive:hover, .kpi-card.interactive:focus-visible { transform: translateY(-2px); border-color: var(--gold); }
.panel.wide { min-width: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 9px; }
.legend span::before { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; content: ""; }
.legend .plan::before { background: var(--grey); }
.legend .actual::before { background: var(--blue-2); }
.legend .forecast::before { background: var(--gold); }
.interactive-chart { position: relative; min-width: 0; margin-top: 10px; }
.interactive-chart [hidden] { display: none !important; }
.chart-series-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; min-height: 28px; }
.chart-series-button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; color: var(--muted); background: transparent; font-size: 9px; font-weight: 700; }
.chart-series-button i, .cash-chart-tooltip i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--grey); }
.chart-series-button.actual i, .cash-chart-tooltip i.actual { background: var(--blue-2); }
.chart-series-button.forecast i, .cash-chart-tooltip i.forecast { background: var(--gold); }
.chart-series-button.available i, .cash-chart-tooltip i.available { background: var(--blue-2); }
.chart-series-button[aria-pressed="false"] { opacity: .42; }
.cash-chart { display: block; width: 100%; height: 285px; overflow: visible; }
.cash-chart .chart-axis text { fill: var(--muted); font-size: 9px; }
.cash-chart .line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.6; transition: opacity .16s ease; }
.cash-chart .line.plan { stroke: var(--grey); stroke-width: 2.1; stroke-dasharray: 6 6; }
.cash-chart .line.actual, .cash-chart .line.available { stroke: var(--blue-2); }
.cash-chart .line.forecast { stroke: var(--gold); }
.cash-chart .series-hidden { opacity: 0; pointer-events: none; }
.cash-chart .chart-hover-overlay { fill: transparent; pointer-events: all; cursor: crosshair; }
.cash-chart .hover-guide { stroke: #7d8798; stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.cash-chart .hover-marker { fill: white; stroke-width: 3; pointer-events: none; }
.cash-chart .hover-marker.plan { stroke: var(--grey); }
.cash-chart .hover-marker.actual, .cash-chart .hover-marker.available { stroke: var(--blue-2); }
.cash-chart .hover-marker.forecast { stroke: var(--gold); }
.cash-chart .hover-axis-badges rect { fill: var(--blue-2); rx: 5; }
.cash-chart .hover-axis-badges text { fill: white; font-size: 9px; font-weight: 700; text-anchor: end; }
.cash-chart .hover-axis-badges .hover-x-text { text-anchor: middle; }
.cash-chart-tooltip { position: absolute; z-index: 4; display: grid; width: 190px; gap: 7px; padding: 12px 13px; border: 1px solid rgba(43,77,153,.13); border-radius: 10px; color: var(--ink); background: white; box-shadow: 0 14px 34px rgba(36,52,93,.16); pointer-events: none; }
.cash-chart-tooltip > strong { color: var(--blue-2); font-size: 11px; }
.cash-chart-tooltip > span { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.cash-chart-tooltip > span b { color: var(--ink); font-size: 10px; }
.cash-chart-tooltip > small { padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.cashflow-chart-tabs { display: inline-flex; gap: 4px; margin: 4px 0 6px; padding: 3px; border-radius: 9px; background: var(--paper); }
.cashflow-chart-tabs button { padding: 7px 11px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 700; }
.cashflow-chart-tabs button[aria-selected="true"] { color: var(--blue-2); background: white; box-shadow: 0 2px 8px rgba(43,77,153,.1); }
.cashflow-chart-panel[hidden] { display: none; }
.large-chart .cash-chart { height: 370px; }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.category-panel { min-width: 0; }
.category-panel .cash-chart { height: 205px; }
.category-total { color: var(--blue-2); font-size: 17px; }
.period-panel { min-width: 0; }
.period-measures { display: grid; gap: 10px; margin-top: 15px; }
.period-measure { display: grid; width: 100%; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; color: inherit; background: #fbfcff; text-align: left; }
.period-measure.clickable { transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.period-measure.clickable:hover, .period-measure.clickable:focus-visible { transform: translateY(-1px); border-color: var(--blue-3); background: var(--blue-soft); }
.period-measure-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.period-measure-heading strong, .period-measure-heading small { display: block; }
.period-measure-heading strong { color: var(--ink); font-size: 11px; }
.period-measure-heading small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.period-measure-heading > b { color: var(--blue-3); font-size: 8px; font-weight: 800; white-space: nowrap; }
.period-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.period-values > span { padding-top: 8px; border-top: 1px solid #e8ecf3; }
.period-values small, .period-values strong { display: block; }
.period-values small { color: var(--muted); font-size: 7px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.period-values strong { margin-top: 5px; font-size: 15px; letter-spacing: -.025em; }
.period-values i { margin-right: 4px; font-style: normal; }
.period-values em, .movement-project-row em, .movement-modal-total em { font-size: .72em; font-style: normal; font-weight: 700; white-space: nowrap; }
.period-change { padding-left: 9px; border-left: 1px solid #e8ecf3; }
.favourable { color: var(--green) !important; }
.unfavourable { color: var(--red) !important; }
.neutral { color: var(--muted) !important; }
.spend { color: var(--blue-2) !important; }

.table-scroll { overflow-x: auto; margin: 15px -7px -5px; }
table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 10px; }
th { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
td { padding: 13px 12px; border-bottom: 1px solid #edf0f4; color: #55627c; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td strong, td span { display: block; }
td strong { color: var(--ink); font-size: 10px; }
td span { margin-top: 3px; }
.status-chip, .role-chip, .risk, .action { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border-radius: 99px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.status-chip.on-track { color: var(--green); background: var(--green-soft); }
.status-chip.watch { color: #755908; background: var(--gold-soft); }
.status-chip.at-risk { color: var(--red); background: var(--red-soft); }
.progress { width: 82px; height: 9px; margin-right: 7px; padding: 1px; overflow: hidden; appearance: none; -webkit-appearance: none; border: 1px solid #aeb4c0; border-radius: 99px; background: white; vertical-align: 0; }
.progress::-webkit-progress-inner-element { overflow: hidden; border-radius: 999px; }
.progress::-webkit-progress-bar { border-radius: 999px; background: white; }
.progress::-webkit-progress-value { border-radius: 999px; background: var(--blue-2); }
.progress::-moz-progress-bar { border-radius: 999px; background: var(--blue-2); }
.project-view-row { cursor: pointer; transition: background .15s ease; }
.project-view-row:hover, .project-view-row:focus-visible { outline: none; background: var(--blue-soft); }
.portfolio-scope { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.portfolio-scope > div:first-child { display: grid; gap: 4px; }
.portfolio-scope > div:first-child strong { color: var(--ink); font-size: 11px; }
.portfolio-scope-options { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--paper); }
.portfolio-scope-options button { min-height: 34px; padding: 0 15px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.portfolio-scope-options button:hover { color: var(--blue-1); background: white; }
.portfolio-scope-options button.active { color: white; background: var(--blue-2); box-shadow: 0 2px 8px rgba(41,74,153,.2); }
.portfolio-scope-options button:focus-visible { outline: 2px solid var(--blue-3); outline-offset: 2px; }
@media (max-width: 700px) {
  .portfolio-scope { align-items: stretch; flex-direction: column; }
  .portfolio-scope-options { display: grid; grid-template-columns: 1fr; }
}
.bad { color: var(--red); }
.good { color: var(--green); }
.unit-label { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.file-button { position: relative; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.package-list { display: grid; gap: 11px; margin-top: 10px; }
.package-column-headings { display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(280px, 2.1fr) minmax(180px, 1.1fr); gap: 20px; margin-top: 22px; padding: 0 0 9px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.package-row { display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(280px, 2.1fr) minmax(180px, 1.1fr); align-items: center; gap: 20px; }
.package-toggle { width: 100%; padding: 7px 5px; border: 0; border-radius: 9px; color: inherit; background: transparent; text-align: left; }
.package-toggle:hover { background: var(--blue-soft); }
.package-name { display: flex; min-width: 0; align-items: center; gap: 8px; }
.drill-chevron { display: inline-grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border-radius: 5px; color: var(--blue-2); background: var(--blue-soft); font-size: 17px; line-height: 1; transition: transform .16s ease; }
.package-toggle[aria-expanded="true"] .drill-chevron { transform: rotate(90deg); }
.package-children { display: grid; gap: 10px; margin: 5px 0 2px 20px; padding: 13px 14px 13px 18px; border-left: 2px solid #cdd8f7; border-radius: 0 10px 10px 0; background: #f8faff; }
.child-package-row { padding: 3px 0; }
.package-row strong, .package-row small { display: block; }
.package-row strong { font-size: 11px; }
.package-row small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.bars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.bars span { display: block; max-width: 100%; height: 4px; justify-self: start; border-radius: 99px; }
.bars .budget { background: var(--grey); }
.bars .committed { background: var(--blue-3); }
.bars .forecast, .bars .forecast.over { background: var(--red); }
.bar-w-5 { width: 5%; }
.bar-w-10 { width: 10%; }
.bar-w-15 { width: 15%; }
.bar-w-20 { width: 20%; }
.bar-w-25 { width: 25%; }
.bar-w-30 { width: 30%; }
.bar-w-35 { width: 35%; }
.bar-w-40 { width: 40%; }
.bar-w-45 { width: 45%; }
.bar-w-50 { width: 50%; }
.bar-w-55 { width: 55%; }
.bar-w-60 { width: 60%; }
.bar-w-65 { width: 65%; }
.bar-w-70 { width: 70%; }
.bar-w-75 { width: 75%; }
.bar-w-80 { width: 80%; }
.bar-w-85 { width: 85%; }
.bar-w-90 { width: 90%; }
.bar-w-95 { width: 95%; }
.bar-w-100 { width: 100%; }
.package-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; color: var(--muted); font-size: 9px; text-align: right; }
.package-values strong { color: var(--ink); }
.package-column-headings .package-values { align-items: end; color: var(--muted); font-size: 8px; }
.child-detail-row td:first-child { padding-left: 28px; }
.package-detail-parent td { border-top: 1px solid #dfe5f2; background: #fbfcff; }
.package-detail-parent:first-child td { border-top: 0; }
.package-detail-toggle { display: flex; width: 100%; align-items: center; gap: 9px; padding: 2px 0; border: 0; color: inherit; background: transparent; text-align: left; }
.package-detail-toggle strong, .package-detail-toggle small { display: block; }
.package-detail-toggle small { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 400; }
.package-detail-toggle:hover strong { color: var(--blue-1); }
.package-detail-toggle[aria-expanded="true"] .drill-chevron { transform: rotate(90deg); }
.child-detail-row td { background: #f8faff; }
.cost-line-editable { cursor: pointer; }
.cost-line-editable:hover td { background: #eef3ff; }
.cost-line-editable:focus { outline: 2px solid var(--blue-3); outline-offset: -2px; }
.cashflow-detail-table { min-width: 900px; }
.cashflow-detail-parent td { border-top: 1px solid #dfe5f2; background: #fbfcff; }
.cashflow-detail-parent:first-child td { border-top: 0; }
.cashflow-detail-toggle { display: flex; width: 100%; align-items: center; gap: 9px; padding: 2px 0; border: 0; color: inherit; background: transparent; text-align: left; }
.cashflow-detail-toggle strong { color: var(--blue-2); font-size: 10px; }
.cashflow-detail-toggle:hover strong { color: var(--blue-1); }
.cashflow-detail-toggle[aria-expanded="true"] .drill-chevron { transform: rotate(90deg); }
.cashflow-child-row td { background: #f8faff; }
.cashflow-child-row td:first-child { padding-left: 28px; }
.cost-legend { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--paper); color: var(--muted); font-size: 9px; }
.cost-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cost-legend b { width: 24px; height: 5px; border-radius: 99px; background: var(--grey); }
.cost-legend .committed b { background: var(--blue-3); }
.cost-legend .forecast b { background: var(--red); }
.cost-legend strong { color: var(--ink); }
.edit-table { min-width: 1220px; }
.variation-table { min-width: 1380px; }
.variation-link { padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.variation-link:hover strong { color: var(--blue-1); }
.variation-status { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border-radius: 99px; font-size: 8px; font-weight: 800; }
.variation-status.awaiting-approval { color: #755908; background: var(--gold-soft); }
.variation-status.approved { color: var(--green); background: var(--green-soft); }
.variation-status.rejected, .variation-status.withdrawn { color: var(--muted); background: var(--paper); }
.variation-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.variation-summary-grid article,.variation-summary-card { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.variation-summary-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.variation-summary-grid article > span,.variation-summary-card > span { display: block; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.variation-summary-grid strong { display: block; margin: 0; color: var(--blue-2); font-size: 18px; white-space: nowrap; }
.variation-card-values { display: grid; gap: 6px; }
.variation-card-values > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.variation-card-values small { color: var(--muted); font-size: 8px; }
.variation-card-values b { color: var(--ink); font-size: 10px; }
.variation-cashflow-panel table { min-width: 720px; }
.field-help { margin: -2px 0 2px; color: var(--muted); font-size: 9px; }
.risk-register-table { min-width: 2050px; }
.risk-register-table th:nth-child(2), .risk-register-table td:nth-child(2) { width: 300px; }
.risk-register-table th:nth-child(8), .risk-register-table td:nth-child(8), .risk-register-table th:nth-child(11), .risk-register-table td:nth-child(11) { width: 280px; }
.risk-register-table td { vertical-align: top; }
.risk-register-table td .risk { margin-bottom: 6px; }
.risk-register-link { padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.risk-register-link strong, .risk-register-link span { display: block; }
.risk-register-link strong { color: var(--blue-2); }
.risk-register-link span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.risk-register-link:hover strong { color: var(--blue-1); }
.wrap-cell { max-width: 290px; overflow: visible; white-space: normal; line-height: 1.55; }
.risk-status { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border-radius: 99px; font-size: 8px; font-weight: 800; }
.risk-status.open { color: var(--red); background: var(--red-soft); }
.risk-status.monitoring { color: #755908; background: var(--gold-soft); }
.risk-status.closed { color: var(--green); background: var(--green-soft); }
.month-list { display: grid; margin-top: 14px; }
.month-list > div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf0f4; font-size: 10px; }
.month-list strong { color: var(--blue-2); }
.month-list span { color: var(--muted); }
.item-list { display: grid; margin-top: 14px; }
.item-list > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid #edf0f4; }
.item-main-link { display: grid; width: 100%; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 4px; border: 0; border-radius: 8px; color: inherit; background: transparent; text-align: left; }
.item-main-link:hover { background: var(--blue-soft); }
.item-list p, .item-list strong, .item-list small { display: block; margin: 0; }
.item-list strong { font-size: 11px; }
.item-list small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.item-list b { font-size: 10px; }
.risk.high, .action.overdue { color: var(--red); background: var(--red-soft); }
.risk.critical { color: white; background: #8d2935; }
.risk.medium, .action.due-soon { color: #755908; background: var(--gold-soft); }
.risk.low, .action.in-progress { color: var(--green); background: var(--green-soft); }
.action.complete { color: var(--blue-2); background: var(--blue-soft); }
.row-edit { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--blue-2); background: white; font-size: 8px; font-weight: 750; }
.row-edit:hover { border-color: var(--blue-3); }
.empty-state { padding: 34px 20px; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }

.admin-tabs { display: flex; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.admin-tabs button { padding: 10px 15px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 750; }
.admin-tabs button.active { color: white; background: var(--blue-2); }
.admin-panel.hidden { display: none; }
.user-list { display: grid; margin-top: 16px; }
.user-row { display: grid; width: 100%; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 12px; padding: 12px 4px; border: 0; border-bottom: 1px solid #edf0f4; background: transparent; text-align: left; }
.user-row:hover { background: #f8f9fc; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: white; background: var(--blue-3); font-size: 10px; font-weight: 800; }
.user-row strong, .user-row small { display: block; }
.user-row strong { color: var(--ink); font-size: 11px; }
.user-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.role-chip { color: var(--blue-2); background: var(--blue-soft); }
.status-dot { font-size: 9px; }
.status-dot.active { color: var(--green); }
.status-dot.inactive { color: var(--grey); }
.form-panel > p { color: var(--muted); font-size: 11px; line-height: 1.6; }
.form-panel form { margin-top: 18px; }
#admin-project-form .primary-button { margin-top: 23px; }
#settings-form .primary-button, #storage-form .secondary-button { margin-top: 23px; }
.form-panel fieldset { margin: 20px 0; padding: 0; border: 0; }
.form-panel legend { color: var(--ink); font-size: 11px; font-weight: 750; }
.form-panel fieldset > p { margin: 5px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.check-list { display: grid; max-height: 230px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.check-row { display: flex !important; align-items: center; gap: 9px !important; margin: 0 !important; padding: 9px 10px; border-bottom: 1px solid #edf0f4; cursor: pointer; }
.check-row:last-child { border: 0; }
.check-row input { width: 15px !important; min-height: 15px !important; }
.check-row span { display: grid; grid-template-columns: 70px 1fr; align-items: center; color: var(--muted); font-size: 9px; font-weight: 400; }
.check-row strong { color: var(--blue-2); font-size: 9px; }
.switch-row { display: flex !important; align-items: center; gap: 8px !important; }
.switch-row input { width: 16px !important; min-height: 16px !important; }
.field-status { min-height: 14px; color: var(--muted); font-size: 9px; font-weight: 600; }
.field-status.available { color: var(--green); }
.field-status.error { color: var(--red); }
.user-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.delete-button, .row-edit { text-transform: capitalize; }
.account-settings-panel { max-width: 700px; }
.account-settings-panel .primary-button { margin-top: 23px; }
.copyright-panel { max-width: 920px; }
.copyright-content { display: grid; gap: 14px; margin-top: 20px; }
.copyright-content section { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.copyright-content h4 { margin: 0 0 8px; color: var(--blue-2); font-size: 13px; }
.copyright-content p { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.7; }
.copyright-content p + p { margin-top: 8px; }
.account-required-message { margin: 18px 0 0; }
.admin-project-heading { padding: 2px 3px 0; margin-bottom: 20px; }
.project-admin-list { display: grid; }
.project-admin-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 10px; border: 0; border-bottom: 1px solid #edf0f4; border-radius: 8px; color: inherit; background: transparent; text-align: left; }
.project-admin-row:hover, .project-admin-row.selected { background: var(--blue-soft); }
.project-admin-row span strong, .project-admin-row span small { display: block; }
.project-admin-row span strong { color: var(--blue-2); font-size: 10px; }
.project-admin-row span small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.technical-settings { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.security-mode-note { margin: 16px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.mfa-user-list { display: grid; margin-top: 12px; }
.mfa-user-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 74px; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #edf0f4; }
.mfa-user-row strong, .mfa-user-row small { display: block; }
.mfa-user-row strong { color: var(--ink); font-size: 11px; }
.mfa-user-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.warning-panel { border-top: 3px solid var(--gold); }
code { display: block; margin-top: 5px; padding: 8px; overflow-wrap: anywhere; border-radius: 7px; color: var(--blue-2); background: var(--blue-soft); font-family: Consolas, monospace; font-size: 9px; }
.storage-note { margin-top: 24px; padding: 15px; border-radius: 10px; background: var(--gold-soft); }
.storage-note strong { color: #705706; font-size: 10px; }
.storage-note p { margin-bottom: 0; color: #6f632f; font-size: 9px; line-height: 1.6; }
.audit-list { display: grid; margin-top: 16px; }
.audit-heading { align-items: end; }
.audit-view-controls { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 8px; }
.audit-view-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.audit-view-controls select { min-width: 140px; height: 41px; padding: 0 32px 0 11px; border: 1px solid #ccd3df; border-radius: 9px; color: var(--ink); background: white; font-size: 10px; text-transform: none; }
.audit-clear-button { min-height: 41px; padding: 0 16px; }
.audit-row { display: grid; width: 100%; grid-template-columns: 180px minmax(150px,.7fr) minmax(260px,1.4fr); gap: 14px; padding: 12px 6px; border: 0; border-bottom: 1px solid #edf0f4; color: inherit; background: transparent; font-size: 9px; text-align: left; }
.audit-row.clickable:hover { border-radius: 8px; background: var(--blue-soft); }
.audit-row > span > small { display: block; margin-top: 4px; }
.audit-detail, .audit-detail b, .audit-detail small { display: block; }
.audit-detail > b { margin-bottom: 5px; color: var(--blue-2); }
.audit-detail small { margin-top: 3px; line-height: 1.5; }
.audit-detail small b { display: inline; color: var(--ink); }
.audit-detail i { color: var(--blue-1); font-style: normal; }
.audit-list span, .audit-list small { color: var(--muted); }
.audit-list strong { color: var(--ink); text-transform: capitalize; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 440px; padding: 13px 16px; border-radius: 10px; color: white; background: var(--green); box-shadow: 0 16px 50px rgba(25,40,70,.28); font-size: 11px; }
.toast.error { background: var(--red); }

.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: rgba(22,34,70,.55); backdrop-filter: blur(4px); }
.modal-card { width: min(620px, 100%); max-height: 90vh; overflow: auto; border-radius: 18px; background: white; box-shadow: 0 32px 90px rgba(18,28,60,.35); }
.modal-card.modal-wide { width: min(980px, 100%); }
.alert-backdrop { z-index: 70; background: rgba(22,34,70,.72); backdrop-filter: none; }
.alert-card { width: min(470px, 100%); border-top: 5px solid var(--red); }
.alert-card .modal-body p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.6; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 26px 19px; border-bottom: 1px solid var(--line); }
.modal-heading h2 { margin: 6px 0 0; color: var(--blue-2); font-size: 25px; letter-spacing: -.04em; }
.modal-heading p { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.modal-heading > button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: var(--paper); font-size: 20px; }
.modal-form { padding: 7px 26px 26px; }
.modal-form label { display: grid; gap: 7px; margin-top: 17px; color: var(--ink); font-size: 10px; font-weight: 700; }
.modal-form input, .modal-form select, .modal-form textarea { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #ccd3df; border-radius: 9px; color: var(--ink); background: white; font-size: 12px; font-weight: 400; }
.modal-form textarea { min-height: 90px; padding-top: 10px; resize: vertical; }
.modal-register { display: grid; padding: 8px 25px 25px; }
.variation-modal-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 4px; border: 0; border-bottom: 1px solid #edf0f4; color: inherit; background: transparent; text-align: left; }
.variation-modal-row:hover { padding-right: 10px; padding-left: 10px; border-radius: 9px; background: var(--blue-soft); }
.variation-modal-row strong, .variation-modal-row small { display: block; }
.variation-modal-row strong { color: var(--ink); font-size: 11px; }
.variation-modal-row small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.variation-modal-row b { color: var(--blue-2); font-size: 12px; }
.variation-summary-values { display: grid; min-width: 245px; grid-template-columns: repeat(3, auto); gap: 14px; text-align: right; }
.variation-summary-values small { margin: 0; }
.variation-summary-values b { display: block; margin-top: 3px; }
.movement-modal { padding: 8px 25px 25px; }
.movement-modal-head, .movement-project-row, .movement-modal-total { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(130px, .65fr)); align-items: center; gap: 14px; }
.movement-modal-head { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.movement-modal-head span:not(:first-child) { text-align: right; }
.movement-modal-head small { color: var(--muted); font-size: 7px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.movement-project-row { width: 100%; padding: 12px; border: 0; border-bottom: 1px solid #edf0f4; border-radius: 8px; color: inherit; background: transparent; text-align: left; }
.movement-project-row:hover { background: var(--blue-soft); }
.movement-project-row strong, .movement-project-row small { display: block; }
.movement-project-row strong { color: var(--blue-2); font-size: 10px; }
.movement-project-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.movement-project-row b { font-size: 11px; text-align: right; }
.movement-modal-total { margin-top: 8px; padding: 14px 12px; border-radius: 9px; background: var(--paper); }
.movement-modal-total span { color: var(--ink); font-size: 10px; font-weight: 800; }
.movement-modal-total strong { font-size: 12px; text-align: right; }
.audit-target { animation: auditHighlight 2.6s ease; }
@keyframes auditHighlight { 0%, 38% { box-shadow: 0 0 0 3px rgba(253,181,21,.65); background: var(--gold-soft); } 100% { box-shadow: none; } }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.variation-value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.variation-value-grid output { display: flex; min-height: 42px; align-items: center; padding: 0 12px; border: 1px solid #ccd3df; border-radius: 9px; color: var(--blue-2); background: var(--paper); font-size: 12px; font-weight: 750; }
.variation-upload-section { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafd; }
.variation-upload-section h3 { margin: 0; }
.variation-upload-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.variation-upload-status { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.variation-attachment-list { display: grid; gap: 8px; }
.variation-attachment-list article { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.variation-attachment-list article span { display: grid; gap: 3px; }
.variation-attachment-list small { color: var(--muted); }
.attachment-view-button { padding: 6px 10px; min-height: 0; }
.risk-form-section { margin-top: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcff; }
.risk-form-section .form-grid { margin-top: 2px; }
.modal-actions { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 9px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.delete-button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px; color: var(--red); background: var(--red-soft); font-size: 10px; font-weight: 750; }
.period-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.period-heading p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.period-editor { max-height: 360px; overflow: auto; }
.period-editor table { min-width: 700px; }
.period-editor input { width: 100%; min-height: 34px; padding: 0 8px; border: 1px solid #ccd3df; border-radius: 7px; color: var(--ink); background: white; font-size: 10px; }
.financial-controls-panel { border-top: 3px solid var(--blue-3); }
.validation-counts, .import-validation-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.validation-counts span, .validation-counts button, .import-validation-summary span { display: flex; align-items: baseline; gap: 5px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: var(--paper); font-size: 9px; font-weight: 750; }
.validation-counts strong, .import-validation-summary strong { color: var(--ink); font-size: 14px; }
.validation-counts .error, .import-validation-summary .error { color: var(--red); background: var(--red-soft); }
.validation-counts .warning, .import-validation-summary .warning { color: #8b6500; background: var(--gold-soft); }
.validation-counts .info, .import-validation-summary .info { color: var(--blue-2); background: var(--blue-soft); }
.validation-count-filter { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.validation-count-filter:hover { border-color: currentColor; transform: translateY(-1px); }
.validation-count-filter.active { border-color: currentColor; box-shadow: 0 0 0 2px rgba(53,97,189,.13); transform: translateY(-1px); }
.validation-count-filter:focus-visible, .validation-list-toggle:focus-visible { outline: 2px solid var(--blue-3); outline-offset: 2px; }
.validation-list { display: grid; gap: 6px; }
.validation-row { display: grid; width: 100%; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: inherit; background: white; text-align: left; }
.validation-row:hover { border-color: #bcc8de; background: #fafbfe; }
.validation-row > span:last-child, .validation-row strong, .validation-row small, .validation-values { display: block; }
.validation-row strong { color: var(--blue-2); font-size: 10px; }
.validation-row small { margin-top: 3px; color: var(--ink); font-size: 9px; line-height: 1.5; }
.validation-values { margin-top: 4px; color: var(--muted); font-size: 8px; }
.validation-severity { align-self: start; padding: 4px 7px; border-radius: 999px; color: var(--muted); background: var(--paper); font-size: 8px; font-weight: 800; text-align: center; text-transform: uppercase; }
.severity-error .validation-severity, .validation-severity.severity-error { color: var(--red); background: var(--red-soft); }
.severity-warning .validation-severity, .validation-severity.severity-warning { color: #8b6500; background: var(--gold-soft); }
.severity-info .validation-severity, .validation-severity.severity-info { color: var(--blue-2); background: var(--blue-soft); }
.validation-overflow { display: block; margin-top: 9px; color: var(--muted); }
.validation-list-toggle { padding: 0; border: 0; color: var(--blue-2); background: transparent; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.validation-list-toggle:hover { color: var(--blue-3); }
.import-validation-summary { padding: 0 25px 10px; }
.import-validation-table { max-height: 430px; margin: 0; padding: 0 18px; overflow: auto; }
.import-validation-table table { min-width: 880px; }
.import-validation-table td span { display: block; }
.warning-acknowledgement { display: flex; align-items: flex-start; gap: 9px; margin: 16px 25px 0; padding: 12px; border: 1px solid #f0d47a; border-radius: 9px; color: #735600; background: var(--gold-soft); font-size: 10px; font-weight: 700; }
.warning-acknowledgement input { width: 16px; height: 16px; flex: 0 0 auto; }
.import-validation-actions { margin: 16px 25px 25px; }
.primary-button:disabled, .secondary-button:disabled, .delete-button:disabled { cursor: not-allowed; opacity: .52; }
.inline-validation { margin: 0 0 16px; line-height: 1.5; }

@media (max-width: 1240px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-grid, .content-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr; }
  .variation-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 950px) {
  .login-page { grid-template-columns: 1fr; }
  .login-brand { min-height: 40vh; padding: 38px; }
  .login-brand h1 { font-size: 42px; }
  .sidebar { position: relative; width: 100%; min-height: auto; padding: 20px; }
  .sidebar-unpinned .sidebar { width: 100%; padding: 20px; }
  .sidebar-unpinned .main-panel { margin-left: 0; }
  .sidebar-unpinned .sidebar-logo-panel { display: grid; }
  .sidebar-unpinned .platform-byline { display: block; }
  .sidebar-unpinned .sidebar-platform-lockup { justify-content: flex-start; margin-top: 14px; padding: 0 2px; }
  .sidebar-unpinned .nav-label { display: inline; }
  .sidebar-unpinned .nav-item { justify-content: flex-start; gap: 12px; }
  .sidebar-unpinned .sidebar-control { width: auto; justify-content: flex-start; align-self: stretch; }
  .sidebar::after { display: none; }
  .sidebar nav { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; }
  .client-block, .session-card { display: none; }
  .main-panel { margin-left: 0; padding: 0 20px 40px; }
  .package-row { grid-template-columns: 1fr; gap: 8px; }
  .package-column-headings { display: none; }
  .package-values { text-align: left; }
}
@media (max-width: 700px) {
  .topbar { align-items: flex-start; flex-direction: column; padding: 24px 0; }
  .top-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .project-selector select { width: 100%; min-width: 0; }
  .sidebar nav { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid, .kpi-grid.four, .content-grid.even { grid-template-columns: 1fr; }
  .variation-summary-grid { grid-template-columns: 1fr; }
  .hero-card { grid-template-columns: 1fr; }
  .hero-metric { border-top: 1px solid rgba(255,255,255,.14); border-left: 0; }
  .admin-tabs { overflow-x: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid.three { grid-template-columns: 1fr; }
  .variation-value-grid { grid-template-columns: 1fr; }
  .variation-summary-values { min-width: 0; grid-template-columns: 1fr; gap: 3px; }
  .period-values { grid-template-columns: 1fr; }
  .period-change { padding-left: 0; border-left: 0; }
  .movement-modal-head, .movement-project-row, .movement-modal-total { grid-template-columns: minmax(130px, 1.2fr) repeat(3, minmax(82px, .8fr)); gap: 8px; }
  .audit-heading { align-items: stretch; flex-direction: column; }
  .audit-view-controls { justify-content: flex-start; }
  .audit-row { grid-template-columns: 1fr; }
}
@media print {
  .sidebar, .top-actions, .admin-tabs, .file-button { display: none !important; }
  .main-panel { margin: 0; padding: 20px; }
  .hero-card, .panel, .kpi-card { box-shadow: none; break-inside: avoid; }
}

/* ClearView local change log: contextual forecast bars and new controls. */
.bars .forecast,.bars .forecast.over,.cost-legend .forecast b {background:var(--gold);}
.change-actions {display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0;}
.change-warning {padding:12px;background:#fff4bf;color:#473900;border-radius:6px;}
.payment-table input {min-width:90px;width:100%;}
.payment-table td:first-child {min-width:190px;}
.payment-table .compact-code-input {min-width:0;text-transform:uppercase;font-weight:800;}
.payment-table .compact-name-input {min-width:0;margin-top:0;color:var(--muted);font-size:11px;}
.trade-breakdown-inputs {display:grid;grid-template-columns:minmax(68px,.6fr) minmax(110px,1.4fr);gap:6px;align-items:center;}
.payment-trade-summary {margin:16px 0;padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--paper);}
.payment-trade-summary > div:first-child {margin-bottom:10px;}
.hierarchy-level-control {flex-shrink:0;}
.archive-button {background:#1769aa;color:white;}

.bar-w-0 {width:0%;}
.bar-w-1 {width:1%;}
.bar-w-2 {width:2%;}
.bar-w-3 {width:3%;}
.bar-w-4 {width:4%;}
.bar-w-5 {width:5%;}
.bar-w-6 {width:6%;}
.bar-w-7 {width:7%;}
.bar-w-8 {width:8%;}
.bar-w-9 {width:9%;}
.bar-w-10 {width:10%;}
.bar-w-11 {width:11%;}
.bar-w-12 {width:12%;}
.bar-w-13 {width:13%;}
.bar-w-14 {width:14%;}
.bar-w-15 {width:15%;}
.bar-w-16 {width:16%;}
.bar-w-17 {width:17%;}
.bar-w-18 {width:18%;}
.bar-w-19 {width:19%;}
.bar-w-20 {width:20%;}
.bar-w-21 {width:21%;}
.bar-w-22 {width:22%;}
.bar-w-23 {width:23%;}
.bar-w-24 {width:24%;}
.bar-w-25 {width:25%;}
.bar-w-26 {width:26%;}
.bar-w-27 {width:27%;}
.bar-w-28 {width:28%;}
.bar-w-29 {width:29%;}
.bar-w-30 {width:30%;}
.bar-w-31 {width:31%;}
.bar-w-32 {width:32%;}
.bar-w-33 {width:33%;}
.bar-w-34 {width:34%;}
.bar-w-35 {width:35%;}
.bar-w-36 {width:36%;}
.bar-w-37 {width:37%;}
.bar-w-38 {width:38%;}
.bar-w-39 {width:39%;}
.bar-w-40 {width:40%;}
.bar-w-41 {width:41%;}
.bar-w-42 {width:42%;}
.bar-w-43 {width:43%;}
.bar-w-44 {width:44%;}
.bar-w-45 {width:45%;}
.bar-w-46 {width:46%;}
.bar-w-47 {width:47%;}
.bar-w-48 {width:48%;}
.bar-w-49 {width:49%;}
.bar-w-50 {width:50%;}
.bar-w-51 {width:51%;}
.bar-w-52 {width:52%;}
.bar-w-53 {width:53%;}
.bar-w-54 {width:54%;}
.bar-w-55 {width:55%;}
.bar-w-56 {width:56%;}
.bar-w-57 {width:57%;}
.bar-w-58 {width:58%;}
.bar-w-59 {width:59%;}
.bar-w-60 {width:60%;}
.bar-w-61 {width:61%;}
.bar-w-62 {width:62%;}
.bar-w-63 {width:63%;}
.bar-w-64 {width:64%;}
.bar-w-65 {width:65%;}
.bar-w-66 {width:66%;}
.bar-w-67 {width:67%;}
.bar-w-68 {width:68%;}
.bar-w-69 {width:69%;}
.bar-w-70 {width:70%;}
.bar-w-71 {width:71%;}
.bar-w-72 {width:72%;}
.bar-w-73 {width:73%;}
.bar-w-74 {width:74%;}
.bar-w-75 {width:75%;}
.bar-w-76 {width:76%;}
.bar-w-77 {width:77%;}
.bar-w-78 {width:78%;}
.bar-w-79 {width:79%;}
.bar-w-80 {width:80%;}
.bar-w-81 {width:81%;}
.bar-w-82 {width:82%;}
.bar-w-83 {width:83%;}
.bar-w-84 {width:84%;}
.bar-w-85 {width:85%;}
.bar-w-86 {width:86%;}
.bar-w-87 {width:87%;}
.bar-w-88 {width:88%;}
.bar-w-89 {width:89%;}
.bar-w-90 {width:90%;}
.bar-w-91 {width:91%;}
.bar-w-92 {width:92%;}
.bar-w-93 {width:93%;}
.bar-w-94 {width:94%;}
.bar-w-95 {width:95%;}
.bar-w-96 {width:96%;}
.bar-w-97 {width:97%;}
.bar-w-98 {width:98%;}
.bar-w-99 {width:99%;}
.bar-w-100 {width:100%;}

.status-chip.critical {color:#8b1414;background:#ffe5e5;}
.modal-card pre {white-space:pre-wrap;overflow-wrap:anywhere;max-height:400px;overflow:auto;}

/* Local beta feedback: aligned actions, consistent dialogs and independent cost bars. */
.form-message:empty {display:none;}
.modal-body {padding:20px 26px 26px;}
.modal-body > :first-child {margin-top:0;}
.modal-body > :last-child {margin-bottom:0;}
.archive-search-actions {margin-top:20px;display:flex;justify-content:flex-start;}
.project-register-actions,.project-lifecycle-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.project-register-actions {flex-shrink:0;}
.project-lifecycle-actions {margin-top:14px;}
.form-panel .project-lifecycle-actions > button {width:auto;margin:0;}
.modal-form .change-actions > .file-button {display:inline-flex;align-items:center;justify-content:center;margin:0;gap:0;color:white;font-size:11px;font-weight:750;}
.modal-form .file-button input[type=file] {position:absolute;width:1px;min-height:0;height:1px;padding:0;border:0;opacity:0;}
.top-actions > button {align-self:flex-end;white-space:nowrap;}
.cost-bar {display:block;width:100%;height:5px;border:0;border-radius:99px;appearance:none;background:transparent;}
.cost-bar::-webkit-progress-bar {background:transparent;border-radius:99px;}
.cost-bar::-webkit-progress-value {border-radius:99px;}
.bars .cost-bar {background:transparent;}
.cost-bar.budget::-webkit-progress-value {background:var(--grey);}
.cost-bar.committed::-webkit-progress-value {background:var(--blue-3);}
.cost-bar.forecast::-webkit-progress-value {background:var(--gold);}
.cost-bar.budget::-moz-progress-bar {background:var(--grey);}
.cost-bar.committed::-moz-progress-bar {background:var(--blue-3);}
.cost-bar.forecast::-moz-progress-bar {background:var(--gold);}
button:disabled {cursor:not-allowed;opacity:.55;}

/* v24 commercial controls and reporting design system */
.subtabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:thin}.subtab{border:1px solid #dbe3ef;background:#fff;color:var(--ink);border-radius:8px;padding:9px 12px;white-space:nowrap;font-size:12px;font-weight:700}.subtab.active{background:var(--blue-2);border-color:var(--blue-2);color:#fff}.commercial-summary{margin-bottom:12px}.readiness-panel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f7f9fc;border:1px solid #dfe7f1;border-radius:12px;padding:12px 16px;margin-bottom:12px}.readiness-item{font-size:12px;color:#7a879f;background:white;border:1px solid #dce3ec;border-radius:99px;padding:5px 9px}.readiness-item.complete{color:#126b45;background:#e9f8f0;border-color:#bce9d0}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.control-row{display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid #edf0f5;padding:12px 0}.control-row span{display:flex;flex-direction:column;gap:3px}.control-row small,td small{display:block;color:#7a879f;margin-top:3px}.report-workflow{border-top:4px solid var(--blue-3)}.checklist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.checklist-grid label{display:flex;align-items:center;gap:8px;background:#f8faff;border:1px solid #e0e7f0;border-radius:8px;padding:10px;font-size:12px;font-weight:650}.checklist-grid input{width:auto;min-height:0}.action-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.board-lane{background:#f4f7fb;border-radius:10px;padding:10px;min-height:130px}.board-lane h4{display:flex;justify-content:space-between;margin:0 0 8px}.board-lane h4 span{background:#fff;border-radius:99px;padding:2px 7px}.board-lane>p{color:#8a95a8;font-size:11px}.board-card{display:flex;flex-direction:column;text-align:left;width:100%;border:1px solid #dde5ef;background:#fff;border-radius:8px;padding:9px;margin-bottom:8px;color:var(--ink)}.board-card small{margin-top:5px;color:#7a879f}.project-selector{display:flex;flex-direction:column;gap:4px}.project-selector span{font-size:10px;font-weight:800;text-transform:uppercase;color:#697791}.modal-form textarea{resize:vertical}.panel table td{vertical-align:middle}
@media(max-width:1000px){.control-grid,.action-board{grid-template-columns:1fr 1fr}.checklist-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.control-grid,.action-board,.checklist-grid{grid-template-columns:1fr}}

.variation-summary-card{width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}.variation-summary-card:hover,.variation-summary-card:focus-visible{outline:2px solid var(--blue-1);outline-offset:2px;transform:translateY(-1px)}
.commercial-summary{grid-template-columns:repeat(3,1fr)}

/* Central contact directory and project linking. */
.contact-search-modal{display:grid;gap:14px;min-width:min(620px,calc(100vw - 70px))}
.contact-search-modal>label{display:grid;gap:9px;margin:0;color:var(--ink);font-size:10px;font-weight:700;text-align:left}
.contact-search-modal>label>input{width:100%;min-height:43px;padding:0 12px;border:1px solid #ccd3df;border-radius:9px;color:var(--ink);background:#fff;font-size:12px;font-weight:400}
.contact-search-feedback{color:var(--muted);font-size:11px;font-weight:700}
.contact-search-results{display:grid;gap:8px;max-height:330px;overflow:auto}
.contact-search-result{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);text-align:left}
.contact-search-result:hover:not(:disabled),.contact-search-result:focus-visible{border-color:var(--blue-3);background:var(--blue-soft);outline:0}
.contact-search-result span,.contact-search-result small{display:block}
.contact-search-result small{margin-top:4px;color:var(--muted)}
.contact-search-result b{color:var(--blue-2)}
.inline-contact-form{display:grid;gap:12px;margin-top:4px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.inline-contact-form .form-grid{margin:0}
.inline-contact-form .change-actions{margin:0;justify-content:flex-end}
@media(max-width:650px){.contact-search-modal{min-width:0}.contact-search-result{align-items:flex-start}.inline-contact-form{padding:12px}}

/* Development portfolio: summary, comparative site analysis and programme. */
.development-tabs{margin-bottom:10px}.development-kpis{grid-template-columns:repeat(5,1fr);margin-bottom:14px}.development-summary-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px}.development-list{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;align-self:start}.development-list .section-heading{margin-bottom:10px}.development-list-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;border:0;border-left:3px solid transparent;background:transparent;padding:10px;text-align:left;color:var(--ink);border-radius:5px}.development-list-item:hover,.development-list-item.active{background:var(--blue-soft);border-left-color:var(--blue-3)}.development-list-item span{display:grid;gap:3px}.development-list-item small{color:var(--muted);font-size:10px}.development-list-item b{font-size:9px;color:#126b45;background:#e9f8f0;border-radius:99px;padding:4px 7px}.development-detail{min-width:0}.development-comparison th:not(:first-child),.development-comparison td:not(:first-child){text-align:right}.variance-bad{color:#a61b1b;font-weight:700}.variance-good{color:#126b45;font-weight:700}.development-metric-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.development-metric-strip span{display:grid;gap:3px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--muted);font-size:10px}.development-metric-strip b{color:var(--ink);font-size:14px}.development-site-scroll,.development-pipeline-scroll{max-width:100%;max-height:620px}.development-site-table{min-width:2300px}.development-site-table th,.development-site-table td{white-space:nowrap}.sticky-development{position:sticky;left:0;z-index:2;background:#fff;box-shadow:5px 0 8px -8px #34435e}.development-site-table thead .sticky-development,.development-pipeline-table thead .sticky-development{z-index:4;background:#f6f8fb}.text-button{border:0;background:transparent;color:var(--blue-2);padding:0;font:inherit;font-weight:750;text-align:left}.text-button:hover{text-decoration:underline}.development-pipeline-table{table-layout:fixed;min-width:3650px;border-collapse:separate;border-spacing:0}.development-pipeline-table th:not(:first-child){width:55px;min-width:55px;text-align:center;font-size:9px}.development-pipeline-table th:first-child,.development-pipeline-table td:first-child{width:200px;min-width:200px}.development-pipeline-table td.pipeline-cell{height:34px;padding:0;border-right:1px solid #edf0f5}.development-pipeline-table td.planning{background:#9fc5e8}.development-pipeline-table td.procurement{background:#f6b26b}.development-pipeline-table td.construction{background:#6aa84f}.development-pipeline-table td.mobilisation{background:#8e7cc3}.development-pipeline-table td.settlement{background:#cc0000}.pipeline-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--muted)}.pipeline-legend span{display:flex;align-items:center;gap:4px}.pipeline-legend i{width:10px;height:10px;border-radius:2px;background:#bbb}.pipeline-legend .planning i{background:#9fc5e8}.pipeline-legend .procurement i{background:#f6b26b}.pipeline-legend .construction i{background:#6aa84f}.pipeline-legend .mobilisation i{background:#8e7cc3}.pipeline-legend .settlement i{background:#cc0000}.pipeline-editor{display:grid;gap:10px}.pipeline-editor fieldset{border:1px solid var(--line);border-radius:9px;padding:10px 14px}.pipeline-editor legend{padding:0 5px;font-size:11px;font-weight:750}.check-row{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px}.check-row input{width:auto!important;min-height:0!important}.development-pipeline-table td:first-child small{display:block;color:var(--muted);margin-top:2px;font-size:9px}
@media(max-width:1100px){.development-kpis{grid-template-columns:repeat(3,1fr)}.development-summary-layout{grid-template-columns:1fr}.development-list{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.development-list .section-heading{grid-column:1/-1}.development-metric-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.development-kpis,.development-list,.development-metric-strip{grid-template-columns:1fr}}
.development-approvals{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.development-approvals h4{margin:0}.development-approvals article{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid #edf0f5}.development-approvals article span{display:grid;gap:3px}.development-approvals article small{color:var(--muted)}
.approval-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.approval-row-actions>b{margin-right:4px;white-space:nowrap}.approval-row-actions .delete-button{min-height:0;padding:5px 8px;font-size:8px;line-height:normal}

/* Graphical development programme and bed capacity. */
.pipeline-panel{overflow:hidden}.development-pipeline-scroll{overflow:auto;padding-bottom:8px}.pipeline-canvas{min-width:2250px;padding:4px 2px 8px}.pipeline-month-heading{position:sticky;top:0;z-index:12;display:grid;grid-template-columns:210px 1fr;margin-bottom:8px;background:#fff;box-shadow:0 7px 10px -10px #26364e}.pipeline-year-row{grid-column:2;display:grid;grid-template-columns:repeat(5,1fr);background:#f1f5fa;border-radius:8px 8px 0 0}.pipeline-year-row b{text-align:center;padding:7px;border-right:1px solid #dfe7f1;color:var(--blue-2);font-size:11px}.pipeline-month-row{grid-column:2;display:grid;grid-template-columns:repeat(60,1fr);background:#f8fafd}.pipeline-month-row small{text-align:center;padding:5px 0;color:var(--muted);font-size:8px;border-right:1px solid #e8edf4}.pipeline-program{display:grid;grid-template-columns:210px 1fr;align-items:center;min-height:48px;border-bottom:1px solid #edf1f6}.pipeline-program:hover{background:#fafcff}.pipeline-program-label{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 12px 7px 4px}.pipeline-program-label button{grid-column:1}.pipeline-program-label small{grid-column:1;color:var(--muted);font-size:9px}.pipeline-program-label>b{grid-column:2;grid-row:1/3;align-self:center;color:var(--blue-2);font-size:10px;background:var(--blue-soft);padding:5px 7px;border-radius:99px}.pipeline-track{display:grid;grid-template-columns:repeat(60,1fr);align-items:center;height:30px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(1.666666% - 1px),#edf1f6 calc(1.666666% - 1px),#edf1f6 1.666666%);border-radius:6px}.pipeline-track>span{height:16px;position:relative}.pipeline-track>span.settlement{height:22px;background:#cc0000;border-radius:4px}.pipeline-track>span.planning{background:#9fc5e8}.pipeline-track>span.procurement{background:#f6b26b}.pipeline-track>span.construction{background:#6aa84f}.pipeline-track>span.mobilisation{background:#8e7cc3}.pipeline-track>span.opening{height:24px;border-radius:0 8px 8px 0;z-index:2}.pipeline-track>span.opening::after{content:"✓";position:absolute;right:-9px;top:-8px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#173f73;color:white;border:2px solid white;font-size:10px;box-shadow:0 2px 5px #26364e44}.pipeline-track>span.opening b{position:absolute;left:calc(100% + 12px);top:2px;white-space:nowrap;background:#173f73;color:#fff;padding:3px 6px;border-radius:5px;font-size:9px}.pipeline-legend .opening-key i{background:#173f73;border-radius:50%}.pipeline-capacity-row{display:grid;grid-template-columns:210px 1fr;align-items:center;margin-top:10px;border-radius:8px;background:#173f73;color:#fff;overflow:hidden}.pipeline-capacity-row>strong{padding:10px}.pipeline-capacity-row>div{display:grid;grid-template-columns:repeat(60,1fr)}.pipeline-capacity-row span{text-align:center;padding:10px 0;font-size:8px;border-left:1px solid #ffffff1f}.pipeline-capacity-panel>.section-heading>strong{font-size:18px;color:var(--blue-2)}.pipeline-capacity-chart{display:block;width:100%;height:190px}.pipeline-capacity-chart polygon{fill:#dcecff}.pipeline-capacity-chart polyline{fill:none;stroke:#2365a8;stroke-width:4;stroke-linejoin:round}.pipeline-capacity-chart text{font-size:10px;fill:#6d7a91;text-anchor:middle}.file-button{position:relative}.file-button input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pipeline-handle{position:absolute;top:50%;z-index:6;width:10px;height:26px;padding:0;border:2px solid #fff;border-radius:6px;background:#173f73;box-shadow:0 1px 5px #10294480;cursor:ew-resize;transform:translateY(-50%);touch-action:none}.pipeline-handle.left{left:-5px}.pipeline-handle.right{right:-5px}.pipeline-handle::before{content:"";position:absolute;top:7px;bottom:7px;left:3px;border-left:1px solid #ffffffaa}.pipeline-handle:hover,.pipeline-handle:focus-visible,.pipeline-handle.dragging{width:14px;height:30px;background:#0b2f5f;outline:2px solid #79aee6;outline-offset:2px}.pipeline-handle.left:hover,.pipeline-handle.left:focus-visible,.pipeline-handle.left.dragging{left:-7px}.pipeline-handle.right:hover,.pipeline-handle.right:focus-visible,.pipeline-handle.right.dragging{right:-7px}.pipeline-track:has(.pipeline-handle.dragging){background-color:#edf5ff}.pipeline-handle.dragging{cursor:grabbing}
.pipeline-capacity-chart polygon{fill-opacity:.68}.pipeline-capacity-chart .capacity-gridline{stroke:#b8c6d8;stroke-width:1}.pipeline-capacity-chart .capacity-axis-number{text-anchor:end;fill:#4f5f78;font-size:10px;font-weight:700}.pipeline-capacity-chart .capacity-axis-title{text-anchor:middle;fill:#4f5f78;font-size:10px;font-weight:700}
.pipeline-dragging,.pipeline-dragging *{cursor:ew-resize!important;user-select:none!important}.pipeline-dragging .development-pipeline-scroll{overflow-x:hidden}
.pipeline-track>span.settlement{height:16px;border-radius:0}
.pipeline-track>span.settlement{border-radius:0}.cumulative-funding-row td{background:#eef4fb;border-top:2px solid #9eb8d6;font-weight:750;color:#173f73}
.pipeline-track>span.dlp-milestone{overflow:visible;z-index:5}.pipeline-track>span.dlp-milestone::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;background:#173f73;border:2px solid #fff;box-shadow:0 1px 4px #10294466;transform:translate(-50%,-50%) rotate(45deg)}.pipeline-legend .dlp-key i{background:#173f73;border-radius:0;transform:rotate(45deg)}
.development-site-table thead th { vertical-align: top; }
.development-site-table thead th > span { display: block; }
.site-analysis-heading-label { display: inline-flex !important; align-items: center; gap: 4px; }
.site-analysis-filter-control { position: relative; display: inline-grid; width: 18px; height: 18px; place-items: center; margin: -3px 0 -3px 1px; border-radius: 50%; cursor: pointer; }
.site-analysis-filter-control:hover,.site-analysis-filter-control:focus-within,.site-analysis-filter-control.active { background: #dbeaff; }
.site-analysis-filter-arrow { color: var(--blue-2); font-size: 14px; line-height: 1; }
.site-analysis-filter-control select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.site-analysis-average-row th,.site-analysis-average-row td { position: sticky; bottom: 0; z-index: 3; background: #eaf1fa; color: var(--blue-2); font-weight: 750; border-top: 2px solid #adc2dc; }
.site-analysis-average-row .sticky-development { z-index: 5; background: #eaf1fa; }