@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: rgb(var(--background-default));
    color: #171717;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

svg {
    height: 1.25rem;
    width: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

/* The rule above is for inline icons, but it reaches every svg on the page. */
.apexcharts-canvas svg {
    fill: initial;
    height: auto;
    stroke: initial;
    stroke-linecap: initial;
    stroke-linejoin: initial;
    stroke-width: initial;
    width: auto;
}

/* A legend marker is an svg too, but it carries no intrinsic height, so the "auto" above let it grow past
   its 16px slot and gave the legend a scrollbar. */
.apexcharts-legend-marker svg {
    height: 100%;
    width: 100%;
}

/* The tooltip marker is not a shape but a "●" glyph that ApexCharts sizes with font-size - 26px for its own
   16px box. */
.apexcharts-tooltip-marker {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
}

.apexcharts-tooltip-marker::before {
    font-size: 13px !important;
    line-height: 13px !important;
}

/* A pie/donut tooltip carries no marker - ApexCharts tints the label with the slice colour instead, so a
   pale slice would wash out on the panel. */
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-series-group,
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text {
    color: #0f172a !important;
}

/* Accessibility: visually hidden until focused, so keyboard users can jump past the shell's header and
   navigation straight to the page content. */
.skip-link {
    background: #fff;
    border-radius: 0 0 0.5rem 0;
    color: rgb(var(--primary-dark));
    font-size: 0.85rem;
    font-weight: 600;
    left: 0;
    padding: 0.65rem 1rem;
    position: absolute;
    top: -3rem;
    transition: top 150ms ease;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

.sidebar-nav {
    flex: 1;
}

/* framework.css shows the header's desktop nav starting at its own "sm" 640px breakpoint via two separate rules. */
@media (min-width: 640px) and (max-width: 767.98px) {
    .navbar-nav,
    #nav-left {
        display: none;
    }

    .navbar-toggler {
        display: flex;
    }
}

@media (min-width: 768px) {
    .navbar-nav {
        display: flex;
        margin-left: 1.5rem;
    }

    #nav-left {
        display: flex;
    }
}

/* Sidebar (icon-rail) expand/collapse toggle: _Sidebar.cshtml's compact panel
   ("[data-rail-panel='compact']") and _MainMenu.cshtml's companion expanded panel are mutually exclusive,
   switched by toggling "data-rail-mode" on <html> */
[data-rail-panel="expanded"] {
    display: none !important;
}

/* The rail's dropdown must escape the rail's own "overflow-y:auto" clipping. */
[data-rail-panel="compact"] .hs-dropdown {
    --strategy: fixed !important;
}

/* framework.css pins ".navbar-position--left" to "min-height:100vh", which is taller than the rail itself. */
.min-h-auto {
    min-height: auto;
}

/* The rail spaces its children 1.25rem apart (framework.css ".navbar-position--left > :not([hidden]) ~
   :not([hidden])"), which leaves too much room above the expand button. */
.rail-brand {
    margin-bottom: 20px !important;
    margin-top: 8px !important;
}

/* The header title sits on the <header> itself (which is position:relative), so it stays in the middle of
   the viewport regardless of how wide the brand and account slots beside it render. */
.header-title {
    font-weight: 600;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* The copyright line is secondary chrome, so it sits a step below body text in both size and colour weight. */
.app-footer {
    color: #6b7280;
    font-size: 0.75rem;
}

/* Executive dashboard (Views/Dashboard/_ExecutivePublished.cshtml and the other dashboards). */
/* Stacked, not split: the toolbar is its own row under the breadcrumb. */
.exec-header {
    display: block;
}

.exec-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.exec-section {
    align-items: center;
    color: #1f3a5f;
    display: flex;
    font-size: 0.875rem;
    font-weight: 700;
    gap: 0.625rem;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.exec-section::before {
    background: #1f3a5f;
    border-radius: 2px;
    content: "";
    flex: none;
    height: 1.125rem;
    width: 4px;
}

/* Runs from the last word to the edge of the row, so a heading reads as the rule between two sections rather
   than a label floating above one. */
.exec-section::after {
    background: linear-gradient(90deg, #dbe3ec, rgba(219, 227, 236, 0));
    content: "";
    flex: 1 1 auto;
    height: 1px;
    min-width: 1.5rem;
}

.exec-loan-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.exec-kpis {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .exec-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .exec-loan-row {
        grid-template-columns: 3fr 2fr;
    }
}

.exec-kpi {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    border-top: 3px solid #1f3a5f;
    padding: 0.875rem 1rem;
}

.exec-kpi-label {
    color: #6b7280;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.exec-kpi-value {
    color: #0f172a;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0.25rem;
}

.exec-kpi-caption {
    color: #9ca3af;
    font-size: 0.75rem;
}

.exec-highlight {
    background: #fdf6e3;
    border: 1px solid #f0d9a0;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
}

.exec-highlight-title {
    align-items: center;
    color: #8a5a12;
    display: flex;
    font-size: 0.6875rem;
    font-weight: 700;
    gap: 0.375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Capped so a long narrative cannot stretch the row past the KPI cards beside it; the body scrolls on its
   own instead. */
.exec-highlight-body {
    color: #5c4a2a;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-top: 0.5rem;
    max-height: 4.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.exec-chart-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 1rem;
}

@media (min-width: 1280px) {
    .exec-chart-row {
        grid-template-columns: 3fr 2fr;
    }
}

.exec-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
}

.exec-card-title {
    color: #0f172a;
    font-size: 0.9375rem;
    font-weight: 700;
}

.exec-card-subtitle {
    color: #9ca3af;
    font-size: 0.75rem;
}

.exec-chart {
    margin-top: 0.5rem;
    min-height: 1px;
}

.exec-chart-pending {
    color: #9ca3af;
    font-size: 0.75rem;
}

.exec-chart-error {
    color: #b91c1c;
    font-size: 0.75rem;
    word-break: break-word;
}

.exec-legend {
    display: grid;
    gap: 0.25rem 0.75rem;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

@media (min-width: 640px) {
    .exec-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.exec-legend-item {
    align-items: center;
    display: flex;
    font-size: 0.6875rem;
    gap: 0.375rem;
    min-width: 0;
}

.exec-legend-dot {
    border-radius: 2px;
    flex: none;
    height: 0.625rem;
    width: 0.625rem;
}

/* The label yields the row's spare width so a long subsidiary name truncates instead of pushing the figure
   out of the card. */
.exec-legend-label {
    color: #4b5563;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exec-legend-value {
    color: #0f172a;
    flex: none;
    font-weight: 600;
}

/* Seven chips on one row at desktop, so each is narrower than a KPI card and sets its own type scale. */
.exec-ratios {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .exec-ratios {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .exec-ratios {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

.exec-ratio {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    border-top: 3px solid #1f3a5f;
    padding: 0.625rem 0.75rem;
}

.exec-ratio-label {
    align-items: center;
    color: #6b7280;
    display: flex;
    font-size: 0.5625rem;
    font-weight: 700;
    gap: 0.25rem;
    justify-content: space-between;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.exec-ratio-flag {
    color: #d97706;
    flex: none;
}

.exec-ratio-value {
    color: #0f172a;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0.25rem;
}

.exec-ratio-threshold {
    color: #9ca3af;
    font-size: 0.625rem;
    margin-bottom: 0.25rem;
}

/* The arrow states the direction and the colour states whether that direction is good news. */
.exec-delta {
    align-items: center;
    display: inline-flex;
    font-size: 0.625rem;
    font-weight: 600;
    gap: 0.125rem;
}

.exec-delta--good {
    color: #15803d;
}

.exec-delta--bad {
    color: #b91c1c;
}

.exec-delta i {
    font-size: 0.75rem;
}

.exec-headroom {
    display: grid;
    gap: 0.875rem;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.exec-headroom-head {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.exec-headroom-label {
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 600;
}

.exec-headroom-reading {
    color: #6b7280;
    font-size: 0.6875rem;
}

.exec-headroom-head--muted {
    color: #9ca3af;
    font-size: 0.625rem;
    margin-top: 0.125rem;
}

.exec-headroom-track {
    background: #eef1f5;
    border-radius: 9999px;
    height: 0.375rem;
    margin-top: 0.375rem;
    overflow: hidden;
}

.exec-headroom-fill {
    height: 100%;
}

.exec-headroom-summary {
    font-size: 0.625rem;
    font-weight: 600;
    margin-top: 0.25rem;
    text-align: right;
}

.exec-headroom-warning {
    align-items: center;
    background: #fdf6e3;
    border: 1px solid #f0d9a0;
    border-radius: 0.5rem;
    color: #8a5a12;
    display: flex;
    font-size: 0.75rem;
    gap: 0.375rem;
    margin-top: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.exec-section--spaced {
    margin-top: 1.75rem;
}

.exec-section-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-top: 1.75rem;
}

/* Claims the row's spare width so the heading's own hairline reaches the badge. */
.exec-section-heading {
    flex: 1 1 16rem;
    min-width: 0;
}

.exec-section--tight {
    margin-bottom: 0.125rem;
}

/* Indented past the accent bar that .exec-section::before draws, so it hangs off the heading. */
.exec-section-subtitle {
    color: #9ca3af;
    font-size: 0.6875rem;
    padding-left: 0.875rem;
}

.exec-badge {
    background: #eef4ff;
    border: 1px solid #c7d8f7;
    border-radius: 0.25rem;
    color: #1f3f77;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.5rem;
    text-transform: uppercase;
}

.exec-ratio-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin-top: 0.75rem;
}

@media (min-width: 768px) {
    .exec-ratio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .exec-ratio-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.exec-ratio-card-head {
    align-items: center;
    display: flex;
    gap: 0.375rem;
}

.exec-ratio-ordinal {
    background: #f1f5f9;
    border-radius: 0.25rem;
    color: #64748b;
    flex: none;
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 0.125rem 0.25rem;
}

.exec-ratio-card-title {
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 600;
}

.exec-ratio-card-figure {
    align-items: baseline;
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.exec-ratio-card-value {
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Loan dashboard (Views/Dashboard/_LoanPublished.cshtml). */
@media (min-width: 640px) {
    .exec-kpis--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .exec-kpis--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Four cards share the width three do on the Executive page, so the figure steps down a size rather than
   wrapping "25.60 Bn" onto two lines. */
.exec-kpis--4 .exec-kpi-value {
    font-size: 1.5rem;
}

/* A figure the published run does not carry yet ("belum tersedia"): smaller and muted, so the words fit a
   tile sized for a number and do not read as one. */
.exec-kpi-value.exec-value--na,
.exec-ratio-value.exec-value--na {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
}

.exec-chart-row--even {
    grid-template-columns: 1fr;
}

@media (min-width: 1280px) {
    .exec-chart-row--even {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The donut keeps a fixed column so a legend of thirteen names cannot squeeze it to nothing. */
.exec-donut-row {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .exec-donut-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.exec-legend--stacked {
    grid-template-columns: 1fr;
    margin-top: 0;
}

@media (min-width: 640px) {
    .exec-legend--stacked {
        grid-template-columns: 1fr;
    }
}

/* Expanding this card grows main.content, which is a fixed-height scroller. */
.exec-disclosure {
    contain: layout;
    padding: 0;
}

.exec-disclosure-summary {
    align-items: center;
    color: #1f3a5f;
    cursor: pointer;
    display: flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.5rem;
    list-style: none;
    padding: 0.875rem 1rem;
}

.exec-disclosure-summary::-webkit-details-marker {
    display: none;
}

.exec-disclosure-chevron {
    transition: transform 0.15s ease;
}

.exec-disclosure[open] .exec-disclosure-chevron {
    transform: rotate(180deg);
}

/* Light padding only: the .data-area inside brings its own. */
.exec-disclosure-body {
    border-top: 1px solid #e5e7eb;
    padding: 0.5rem;
}

/* Twelve columns are wider than the card. */
.exec-disclosure .table-wrapper {
    display: block;
    min-width: 0;
    overflow-x: auto;
}

/* The sr-only <caption> is a sibling of <thead>, so Tailwind's divide-y on .table draws a rule above the header too. */
.exec-disclosure .table > thead:not([hidden]) {
    border-top-width: 0;
}

/* Financial Ratios (Views/Dashboard/_FinancialRatios.cshtml) */
/* The seven chips share the row with the highlight panel rather than spanning the page, so they wrap at five
   instead of the seven .exec-ratios lays out on the Executive dashboard. */
@media (min-width: 1280px) {
    .exec-ratios--compact {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.exec-account-card {
    contain: layout;
}

/* Thirteen columns are wider than the card. */
.exec-account-wrapper {
    display: block;
    margin-top: 0.75rem;
    min-width: 0;
    overflow-x: auto;
}

/* The sr-only caption is a sibling of the header row, so Tailwind's divide-y on .table draws a rule above
   the header too. */
.exec-account-wrapper .table > thead:not([hidden]) {
    border-top-width: 0;
}

/* The account name is the row's heading, so it is a th; without this it would inherit the centred, uppercase
   treatment framework.css gives a column heading. */
.exec-account-name {
    color: #0f172a;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

/* RKAP and Prognosa are plan, not actual. */
.exec-account-plan {
    background: #f1f6fd;
}

/* Bank Exposure (Views/Dashboard/_BankExposure.cshtml) */
/* The page is about one lender, so the selector is the first thing it has to offer. */
.bank-picker {
    margin-bottom: 1rem;
}

.bank-picker-label {
    color: #6b7280;
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.bank-picker-toggle {
    justify-content: space-between;
    min-width: 22rem;
}

.bank-picker-menu {
    max-width: 26rem;
}

.bank-picker-current {
    background: #eef4ff;
    font-weight: 600;
}

/* Each column of the main row is a stack of cards rather than a single one. */
.bank-stack {
    align-content: start;
    display: grid;
    gap: 1rem;
}

.bank-table-card {
    contain: layout;
}

.bank-table-head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
}

.bank-table-head .exec-badge {
    margin-left: 0.5rem;
}

.bank-table-total {
    color: #6b7280;
    display: flex;
    font-size: 0.6875rem;
    gap: 0.375rem;
}

.bank-table-total strong {
    color: #0f172a;
    font-size: 0.8125rem;
}

/* Six columns are wider than the card on a 3fr column. */
.bank-table-wrapper {
    display: block;
    margin-top: 0.75rem;
    min-width: 0;
    overflow-x: auto;
}

/* The sr-only caption is a sibling of the header row, so Tailwind's divide-y on .table draws a rule above
   the header too. */
.bank-table-wrapper .table > thead:not([hidden]) {
    border-top-width: 0;
}

.bank-facility {
    color: #0f172a;
    display: block;
    font-weight: 600;
    white-space: nowrap;
}

.bank-facility-meta {
    color: #9ca3af;
    display: block;
    font-size: 0.6875rem;
    white-space: nowrap;
}

.bank-total-row {
    background: #f8fafc;
    font-weight: 700;
}

.bank-total-row th {
    color: #0f172a;
    text-align: left;
}

.bank-entity-name {
    color: #0f172a;
    font-weight: 600;
    text-align: left;
}

/* The bar carries the reading and the number states it; neither alone survives a greyscale print or a
   colour-blind reader. */
.bank-util-cell {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    min-width: 7rem;
}

.bank-util-cell .exec-headroom-track {
    flex: 1 1 auto;
    margin-top: 0;
    min-width: 3rem;
}

.bank-util-cell span {
    color: #0f172a;
    flex: none;
    font-size: 0.6875rem;
    font-weight: 600;
}

.bank-concentration-total {
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.6875rem;
    margin-top: 0.625rem;
    padding-top: 0.5rem;
}

.bank-empty {
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    color: #64748b;
    display: flex;
    font-size: 0.75rem;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
}

.bank-notice {
    align-items: flex-start;
    border-radius: 0.5rem;
    border-style: solid;
    border-width: 1px;
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 0.875rem;
}

.bank-notice--clear {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.bank-notice--alert {
    background: #fdf6e3;
    border-color: #f0d9a0;
    color: #8a5a12;
}

.bank-notice--breach {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.bank-notice-more {
    color: #6b7280;
    font-size: 0.6875rem;
    margin-top: 0.5rem;
}

.bank-notice-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
}

.bank-notice-detail {
    display: block;
    font-size: 0.6875rem;
    opacity: 0.85;
}

.bank-count-card {
    align-content: center;
    display: grid;
    justify-items: center;
    text-align: center;
}

.bank-count-value {
    color: #1f3a5f;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Hosting-environment chip in the header. */
.env-badge {
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 0.3125rem 0.625rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.env-badge--dev {
    background: #fdf1e3;
    color: #8a4b22;
}

.env-badge--staging {
    background: #e8eefb;
    color: #1f4b99;
}

.env-badge--prod {
    background: #e9f7ef;
    color: #1f5c3a;
}

.env-badge--other {
    background: #f1f2f4;
    color: rgb(var(--active-dark));
}

/* Circular frame for the header account button's person glyph. */
.avatar {
    align-items: center;
    background: rgb(var(--primary-default) / 0.1);
    border-radius: 50%;
    color: rgb(var(--primary-default));
    display: inline-flex;
    flex: none;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

@media (min-width: 768px) {
    html[data-rail-mode="expanded"] [data-rail-panel="expanded"] {
        display: block !important;
    }

    html[data-rail-mode="expanded"] [data-rail-panel="compact"] {
        display: none !important;
    }
}

/* Expand/collapse motion. */
@keyframes rail-panel-in {
    from {
        opacity: 0;
        transform: translateX(-0.75rem);
    }
}

html[data-rail-animating] [data-rail-panel] {
    animation: rail-panel-in 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    html[data-rail-animating] [data-rail-panel] {
        animation: none;
    }
}

.status-dot {
    background: currentColor;
    border-radius: 50%;
    color: rgb(var(--success-dark));
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
}

.status-success {
    background: #e9f7ef;
    /* Success-dark's own text-on-tint contrast is 3.89:1, so the pill reuses the darkest existing Parama
       neutral instead of introducing a new color. */
    color: rgb(var(--active-dark));
}

.status-error {
    background: #fbeceb;
    /* Same normal-text-contrast correction as .status-success above (error-dark on this tint is only 2.48:1). */
    color: rgb(var(--active-dark));
}

.status-error .status-dot {
    color: rgb(var(--error-dark));
}

.api-connection-state {
    align-items: center;
    border-radius: 0.5rem;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 500;
    gap: 0.45rem;
    padding: 0.4rem 0.65rem;
}

.metric-icon {
    align-items: center;
    border-radius: 0.6rem;
    display: inline-flex;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    justify-content: center;
}

.metric-icon-orange {
    background: #fff3e6;
    color: #c66b22;
}

.empty-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 5rem 1rem;
    text-align: center;
}

.empty-state h2 {
    margin-bottom: 0.25rem;
}

.empty-state p {
    color: #737373;
}

/* .primary-action's white label text on --primary-default measures 3.20:1, below WCAG AA's 4.5:1 for normal text. */
.primary-action {
    background: rgb(var(--primary-dark));
    border-radius: 0.5rem;
    color: #fff;
    margin-top: 1rem;
    padding: 0.65rem 1rem;
    text-decoration: none;
}

/* Contrast corrections below reuse existing Parama semantic tokens instead of adding new colors. */

/* .btn--primary's white label text on --primary-default measures 3.20:1, below WCAG AA's 4.5:1 for normal text. */
.btn--primary,
.btn--primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--primary-dark), var(--tw-bg-opacity));
}

/* .btn--error's white label text measures 2.29:1 on --primary-default and only 2.85:1 even on --error-dark:
   the error hue has no shade dark enough to pass with white text. */
.btn--error,
.btn--error:hover {
    --tw-text-opacity: 1;
    color: rgba(var(--active-dark), var(--tw-text-opacity));
}

/* .link--primary's 80%-opacity primary-dark measures 4.11:1; full opacity reaches 6.00:1. */
.link--primary {
    color: rgb(var(--primary-dark));
}

/* .badge--success's success-dark-on-tint text measures 3.80:1. */
.badge--success {
    --tw-text-opacity: 1;
    color: rgba(var(--active-dark), var(--tw-text-opacity));
}

/* Generic fallback so every interactive element has a clearly visible keyboard focus indicator, without
   overriding the framework's own higher-specificity per-component :focus-visible/:focus rules that already
   provide one. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgb(var(--primary-dark));
    outline-offset: 2px;
}

/* A dialog's title is given tabindex="-1" and focused programmatically when it opens with no form control to
   focus instead. */
[role="dialog"] [tabindex="-1"]:focus {
    outline: none;
}

/* framework.css only reveals a row's ".row-action" (Edit/Delete) buttons via ".group:hover", so they are
   display:none and fully out of the Tab order. */
.group:focus-within .row-action {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
    display: flex;
}

/* Touch/coarse-pointer devices have no ":hover" to reveal row actions with at all, so this always shows them there. */
@media (hover: none), (pointer: coarse) {
    .row-action {
        display: flex;
        position: static;
        width: auto;
    }
}

/* Respects the OS/browser-level motion preference for the modal slide/zoom/fade transitions
   (wwwroot/lib/animate) instead of always animating. */
@media (prefers-reduced-motion: reduce) {
    .animate__animated {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* CSS-only fallback for Xamzo's loading indicator on every route that does not opt into the optional,
   route-level-only lottiefiles bundle. */
.spinner-border {
    /* Color intentionally left to the "text-primary" class the _spinner markup already pairs this with (see
       xamzo.callback.js), so this only supplies the missing shape/motion. */
    border: 0.2em solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    display: inline-block;
    height: 2rem;
    width: 2rem;
}

@media (prefers-reduced-motion: no-preference) {
    .spinner-border {
        animation: spinner-border 0.75s linear infinite;
    }
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* Repeating-row editor used by CRUD "Lines" fields (project period profiles, badge options, weight sets). */
.inline-modal--grid {
    width: min(1200px, 96vw);
    max-width: 96vw;
}

/* A section's note is supporting text, not a page-level alert, so it sits a step below the stock
   .alert-paragraph size. */
.crud-section-note .alert-paragraph {
    margin-top: 0;
    font-size: 0.75rem;
    line-height: 1.1rem;
}

/* Calculation summary dashboard. */
.summary-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .summary-row--2,
    .summary-row--3,
    .summary-row--5,
    .summary-row--wide-left { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .summary-row--3,
    .summary-row--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .summary-row--wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* Five KPIs only fit on one line once there is room for ~260px each. */
@media (min-width: 1440px) {
    .summary-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.summary-panel {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: #fff;
    min-width: 0;
}

/* Uses and Sources sit side by side only when each still has room to read. */
.summary-split {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 520px) {
    .summary-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A panel's table keeps its own scroller rather than widening the grid track. */
.summary-scroll {
    overflow-x: auto;
}

.summary-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.summary-panel-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1d4ed8;
}

.summary-panel-unit {
    font-size: 0.6875rem;
    color: #9ca3af;
}

/* KPI card: icon chip beside the caption, figure and qualifier. */
.summary-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-top: 3px solid #1f3a5f;
}

/* Without this the text column refuses to shrink below its longest line and the chip is squeezed out of its square. */
.summary-kpi > div {
    min-width: 0;
}

.summary-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 0.5rem;
    background-color: #dbeafe;
    color: #2563eb;
    font-size: 1rem;
}

.summary-kpi-caption {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.summary-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
}

.summary-kpi-note {
    font-size: 0.6875rem;
    color: #6b7280;
}

/* One label/value line of a panel. */
.summary-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.8125rem;
    border-top: 1px solid #f3f4f6;
}

.summary-line:first-child {
    border-top: 0;
}

.summary-line dt {
    color: #4b5563;
    min-width: 0;
}

.summary-line dd {
    font-weight: 600;
    color: #111827;
    text-align: right;
    white-space: nowrap;
}

.summary-line--total {
    border-top: 1px solid #d1d5db;
    margin-top: 0.25rem;
    padding-top: 0.6rem;
    font-size: 0.875rem;
}

.summary-line--total dt {
    font-weight: 700;
    color: #111827;
}

.summary-pos { color: #15803d; }
.summary-neg { color: #b91c1c; }

/* Value creation: the base case, the latest calculation and the change, figures right-aligned. */
.summary-vc {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.summary-vc thead th {
    padding: 0 0 0.5rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #9ca3af;
    text-align: right;
    white-space: nowrap;
}

.summary-vc tbody th {
    padding: 0.45rem 0.5rem 0.45rem 0;
    font-weight: 400;
    color: #4b5563;
    text-align: left;
}

.summary-vc tbody td {
    padding: 0.45rem 0 0.45rem 0.75rem;
    font-weight: 600;
    color: #111827;
    text-align: right;
    white-space: nowrap;
}

.summary-vc tbody tr + tr > * {
    border-top: 1px solid #f3f4f6;
}

.summary-vc tbody td.summary-pos { color: #15803d; }
.summary-vc tbody td.summary-neg { color: #b91c1c; }
.summary-teal { color: #0f766e; }

.summary-chart {
    min-height: 200px;
}

/* Marks a panel whose figures are illustrative because the engine does not produce them yet. */
.summary-sample {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #b45309;
    background-color: rgba(245, 158, 11, 0.15);
    border-radius: 9999px;
    padding: 0.1rem 0.45rem;
}

.summary-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    background-color: #1e3a8a;
    color: #e0e7ff;
    padding: 0.9rem 1rem;
    font-size: 0.8125rem;
}

.summary-banner > span:first-of-type {
    flex: 1 1 16rem;
    min-width: 0;
}

.summary-banner-badge {
    margin-left: auto;
    flex: none;
    background-color: #16a34a;
    color: #fff;
    border-radius: 9999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* A structure that fails a recommendation test: amber-700 keeps the white label above 4.5:1. */
.summary-banner--review .summary-banner-badge {
    background-color: #b45309;
}

/* Three checklist columns of the gearing optimum panel. */
.gearing-optimum-grid {
    display: grid;
    gap: 0 2rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .gearing-optimum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .gearing-optimum-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gearing-tick {
    color: #16a34a;
    margin-left: 0.25rem;
}

.gearing-tick--fail {
    color: #dc2626;
}

/* Formula legend above the cash flow table. */
.cashflow-legend p {
    font-size: 0.6875rem;
    line-height: 1.25rem;
    color: #374151;
}

.cashflow-legend-title {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

/* Construction periods have no revenue, so they are set apart rather than read as empty rows. */
.cash-row--construction {
    background-color: #fffbeb;
}

/* framework.css colours every cell with ".table tbody td:not(:first-child)" (0,2,1), so a plain single-class
   rule here never wins. */
.cash-zero,
.table tbody td.cash-zero { color: #9ca3af; }

.cash-neg,
.table tbody td.cash-neg { color: #b45309; }

.cash-pos,
.table tbody td.cash-pos { color: #15803d; }

/* Capitalised IDC and fees never leave as cash, so they are set apart from the cash columns. */
.debt-capitalised,
.table tbody td.debt-capitalised { color: #7c3aed; }

/* Sensitivity: switching-value cards, the combined-stress banner and the per-driver grid. */
.sens-stats,
.sens-drivers {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .sens-stats,
    .sens-drivers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .sens-stats,
    .sens-drivers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The same card as the Executive dashboard's KPIs (.exec-kpi): one neutral style for all three, so the
   figures - not a traffic-light tint - carry the reading. */
.sens-stat {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 3px solid #1f3a5f;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    min-width: 0;
}

.sens-stat-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.sens-stat-value {
    margin-top: 0.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
}

.sens-stat-note {
    font-size: 0.75rem;
    color: #9ca3af;
}

.sens-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    background-color: #111827;
    color: #e5e7eb;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    margin-bottom: 1rem;
}

.sens-banner-badge {
    background-color: #dc2626;
    color: #fff;
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    font-weight: 600;
    flex: none;
}

.sens-banner-label { color: #f9fafb; }

.sens-banner-stat em {
    font-style: normal;
    color: #9ca3af;
    margin-right: 0.3rem;
}

.sens-callout ul {
    font-size: 0.75rem;
    line-height: 1.25rem;
    list-style: disc;
    padding-left: 1rem;
    color: #374151;
}

.sens-driver {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    min-width: 0;
}

.sens-driver-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

/* One line per card head: the label keeps its natural width and the badges take what is left, collapsing
   into "+N" (js/badge-overflow.js). */
.sens-driver-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sens-driver-head .badge-overflow {
    flex: 1 1 0;
    min-width: 2.5rem;
}

/* A row of badges held to one line; js/badge-overflow.js hides the ones that do not fit and appends a "+N"
   badge listing them in a tooltip. */
.badge-overflow {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.badge-overflow > .badge {
    flex: none;
    white-space: nowrap;
}

/* .badge's own display:inline-flex would otherwise beat the [hidden] reset. */
.badge-overflow > .badge[hidden] {
    display: none;
}

.badge-overflow-more {
    position: relative;
    cursor: default;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
}

.badge-overflow-more:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.badge-overflow-tip {
    position: absolute;
    bottom: calc(100% + 0.375rem);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: max-content;
    max-width: 16rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    background-color: #1f2937;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25;
    white-space: normal;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s;
}

.badge-overflow-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0.5rem;
    border: 5px solid transparent;
    border-top-color: #1f2937;
}

.badge-overflow-more:hover .badge-overflow-tip,
.badge-overflow-more:focus-visible .badge-overflow-tip {
    opacity: 1;
    visibility: visible;
}

.sens-driver-note {
    margin-top: 0.5rem;
    border-radius: 0.375rem;
    background-color: #eff6ff;
    color: #1e40af;
    padding: 0.4rem 0.6rem;
    font-size: 0.6875rem;
}

/* Bordered scroller for the gearing level table: the border sits on the box, so the table's own edges never
   show through as a second line. */
.gearing-grid {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* The sr-only caption is a sibling of the header row, so Tailwind's divide-y on .table draws a rule above
   the header too. */
.gearing-grid .table > thead:not([hidden]) {
    border-top-width: 0;
}

/* A dense reference table: it is scanned for the optimal level, so it sits a step below the body size and
   lets the optimum row carry the eye. */
.gearing-table,
.gearing-table .table-cell-sm {
    font-size: 0.8125rem;
}

.gearing-table .table-cell-sm {
    padding: 0.35rem 0.5rem;
}

/* The level table carries up to three badges per row; at the stock badge size they push the Gearing column
   wider than everything else in the row. */
.gearing-table .badge {
    font-size: 0.625rem;
    line-height: 1.3;
    padding: 0.15rem 0.5rem;
    margin-left: 0.25rem;
}

/* The row's verdict, now that the rows themselves are untinted. */
.gearing-score {
    display: inline-block;
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
    font-weight: 600;
}

.gearing-score--pass {
    background-color: #dcfce7;
    color: #15803d;
}

.gearing-score--fail {
    background-color: #fee2e2;
    color: #b91c1c;
}

/* Step head of a CRUD wizard. */
.step-head .step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 600;
}

.step-head:not(.is-active) > span:last-child > span:first-child {
    color: #6b7280;
}

.step-head.is-active .step-dot {
    background-color: #111827;
    color: #fff;
}

.step-head.is-done .step-dot {
    position: relative;
    background-color: #0d6efd;
    color: #fff;
    /* Collapses the step number without removing it from the DOM. */
    font-size: 0;
}

/* Centred against the dot itself: as a flex item it would share the row with the collapsed number and sit
   off to one side. */
.step-head.is-done .step-dot::after {
    content: "\2713";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1;
}

/* The grid scrolls in its own box rather than pushing the Save/Cancel footer off-screen, and that box is
   also what the sticky header below sticks to. */
.lines-grid {
    overflow: auto;
    max-width: 100%;
    max-height: 60vh;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.lines-grid-table {
    font-size: 0.75rem;
}

/* ".table th:not(:first-child)" in framework.css is (0,2,1); matching that specificity here lets the later
   stylesheet win, which is what keeps the dense padding. */
.table.lines-grid-table th,
.table.lines-grid-table td {
    padding: 0.25rem;
    white-space: nowrap;
    vertical-align: middle;
}

/* Column headings stay put while the rows scroll - with twelve periods the labels would otherwise be the
   first thing to disappear. */
.table.lines-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;
    box-shadow: inset 0 -1px 0 #e5e7eb;
    font-size: 0.75rem;
    line-height: 1.25rem;
}

/* Each cell only takes the width its content needs; the stock .form-control padding of 1rem a side leaves no
   room for the value once a row has nine of them. */
.lines-grid-table .form-control {
    height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.lines-grid-table .lines-cell--int {
    min-width: 4.5rem;
}

.lines-grid-table .lines-cell--num {
    min-width: 5.25rem;
}

.lines-grid-table .lines-cell--text {
    min-width: 7rem;
}

/* The row's delete control reads as destructive; framework.css has no danger icon-button. */
.lines-grid-table .lines-remove {
    color: rgb(var(--error-default));
}


/* Dense table cell used by the read-only figure tables (period profiles, calculation results) and the Lines
   grid header. */
.table-cell-sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* framework.css gives ".sidebar-container" "min-height:100vh" */
.sidebar-container--below-header {
    min-height: calc(100vh - 3.125rem);
}

/* Gearing simulation (Views/Projects/_Gearing.cshtml, _GearingPoint.cshtml). */
.gearing-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gearing-row--optimal {
    background: rgba(var(--warning-default), 0.45);
    box-shadow: inset 3px 0 0 rgb(var(--warning-dark));
}

.gearing-row--rejected {
    box-shadow: inset 3px 0 0 rgb(var(--error-dark));
}

.gearing-cell--fail,
.table tbody td.gearing-cell--fail {
    color: #b91c1c;
    font-weight: 600;
}

.gearing-gate--pass,
.table tbody td.gearing-gate--pass {
    color: #15803d;
    font-weight: 600;
}

.gearing-gate--fail,
.table tbody td.gearing-gate--fail {
    color: #b91c1c;
    font-weight: 600;
}

.gearing-optimum {
    border: 1px solid rgb(var(--success-dark));
    border-radius: 0.5rem;
    padding: 1rem;
}

.gearing-optimum--none {
    border-color: rgb(var(--error-dark));
}

.gearing-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
}

.gearing-chart {
    min-height: 16rem;
}

/* The global "svg" rule above styles every svg as a 1.25rem stroked icon. */
.gearing-chart svg {
    width: auto;
    height: auto;
    fill: initial;
    stroke: initial;
    stroke-linecap: initial;
    stroke-linejoin: initial;
    stroke-width: initial;
}

/* Sensitivity tornado (Views/Projects/_Sensitivity.cshtml). */
/* Section headings of the Sensitivity tab: a step above the 14px body copy under them. */
.sensitivity-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.sensitivity-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2.5rem;
}

/* The title takes the slack so the base-case block stays on the same row and keeps its width. */
.sensitivity-head > div:first-child {
    flex: 1 1 20rem;
    min-width: 0;
}

/* A tinted card, in the same shape as the stress-test stats below, so the number every bar is measured
   against stands apart from the description beside it. */
.sensitivity-base {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex: none;
    min-width: 12rem;
    padding: 0.75rem 1.125rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    text-align: right;
}

.sensitivity-base-value {
    font-size: 1.75rem;
    line-height: 2.25rem;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.sensitivity-row {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) 5rem 1fr 5rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f1f1f1;
}

/* Up to three badges share the driver cell; at the stock size they crowd the narrow column. */
.sensitivity-row .badge {
    font-size: 0.625rem;
    line-height: 1.3;
    padding: 0.1rem 0.4rem;
}

/* The driver cell is three fixed lines. */
.sensitivity-range {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sensitivity-row .badge-overflow {
    margin-top: 0.2rem;
}

/* The bars carry the comparison; the end labels only annotate them. */
.sensitivity-row:not(.sensitivity-row--head) > .sensitivity-neg,
.sensitivity-row:not(.sensitivity-row--head) > .sensitivity-pos {
    font-size: 0.8125rem;
}

.sensitivity-row--head {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
}

.sensitivity-axis-label {
    text-align: center;
}

.sensitivity-neg {
    color: #b91c1c;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sensitivity-pos {
    color: #15803d;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sensitivity-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 1.75rem;
    background: #f7f7f8;
    border-radius: 0.25rem;
}

.sensitivity-half {
    display: flex;
    height: 100%;
}

.sensitivity-half--neg {
    justify-content: flex-end;
    border-right: 2px solid #9ca3af;
}

.sensitivity-bar {
    height: 100%;
}

/* Flat and desaturated: a full-saturation gradient on nine stacked bars is tiring to read, and length is the
   only thing being compared. */
.sensitivity-bar--neg {
    background: #cf7f7f;
    border-radius: 0.25rem 0 0 0.25rem;
}

.sensitivity-bar--pos {
    background: #4fab84;
    border-radius: 0 0.25rem 0.25rem 0;
}

/* The rank chip and the two lines beside it, so both lines share one left edge instead of the second one
   starting under the chip. */
.sensitivity-driver {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.sensitivity-driver > div {
    min-width: 0;
}

.sensitivity-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    margin-top: 0.1rem;
    border-radius: 50%;
    background: #1f2937;
    color: #fff;
    font-size: 0.7rem;
}

.sensitivity-notes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 1.25rem;
    list-style: disc;
}

/* View switch (Views/Shared/_ViewSwitch.cshtml) */
.view-switch {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    overflow: hidden;
}

.view-switch-option {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: #374151;
    background: #fff;
}

.view-switch-option + .view-switch-option {
    border-left: 1px solid #d1d5db;
}

.view-switch-option:hover {
    background: #f3f4f6;
}

.view-switch-option.is-active {
    color: #fff;
    background-color: rgb(var(--primary-dark));
}

/* Companies tree (Views/MasterData/_CompanyTree.cshtml) */
/* Its own toolbar rather than .data-area-header: five controls plus the filter need to wrap, and the filter
   should take the full row on a phone instead of shrinking to one character. */
.company-tree-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.company-tree-filter {
    flex: 1 1 16rem;
    max-width: 22rem;
}

.company-tree-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.company-tree-summary {
    margin: 1rem 0 0.5rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.company-tree,
.company-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.company-tree {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

/* One indent step per level, with a guide line so siblings deep in the tree still read as belonging to the
   same parent. */
.company-tree-children {
    margin-left: 1.0625rem;
    padding-left: 0.75rem;
    border-left: 1px dashed #d1d5db;
}

.company-tree-node[hidden] {
    display: none;
}

.company-tree-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #111827;
    cursor: default;
}

summary.company-tree-row {
    list-style: none;
    cursor: pointer;
}

summary.company-tree-row::-webkit-details-marker {
    display: none;
}

.company-tree-row:hover {
    background: #f3f4f6;
}

summary.company-tree-row:focus-visible {
    outline: 2px solid rgb(var(--primary-dark));
    outline-offset: -2px;
}

.company-tree-caret {
    display: inline-flex;
    flex-shrink: 0;
    width: 1rem;
    justify-content: center;
    color: #6b7280;
    transition: transform 0.15s ease;
}

details[open] > summary .company-tree-caret {
    transform: rotate(90deg);
}

.company-tree-icon {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: #6b7280;
}

.company-tree-icon--holding {
    color: rgb(var(--primary-dark));
}

.company-tree-icon--subholding,
.company-tree-icon--affiliateportfolio {
    color: #b45309;
}

.company-tree-code {
    flex-shrink: 0;
    font-weight: 600;
}

.company-tree-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-tree-count,
.company-tree-type {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #6b7280;
}

.company-tree-type {
    margin-left: auto;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    background: #f3f4f6;
}

.company-tree-node.is-inactive > details > summary,
.company-tree-node.is-inactive > .company-tree-row {
    color: #6b7280;
}

/* Row actions appear on hover or keyboard focus, like the table's. */
.company-tree-actions {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.5rem;
    visibility: hidden;
}

.company-tree-row:hover .company-tree-actions,
.company-tree-row:focus-within .company-tree-actions {
    visibility: visible;
}

.company-tree mark {
    padding: 0 0.0625rem;
    border-radius: 0.125rem;
    background: #fde68a;
    color: inherit;
}

.company-tree-empty {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
}

@media (max-width: 640px) {
    .company-tree-filter {
        max-width: none;
    }

    .company-tree {
        padding: 0.25rem;
    }

    .company-tree-children {
        margin-left: 0.5rem;
        padding-left: 0.375rem;
    }

    .company-tree-row {
        gap: 0.375rem;
        padding: 0.25rem;
    }

    /* Only the code and name fit a phone; the rest is one tap away in the View dialog, which takes the row's
       place while the row is focused (tapped). */
    .company-tree-count,
    .company-tree-type {
        display: none;
    }

    .company-tree-actions {
        display: none;
    }

    .company-tree-row:focus-within .company-tree-actions {
        display: inline-flex;
    }
}

/* Project Report tab (Views/Projects/_Reports.cshtml) */

.report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

/* The two notes on what enters the total project cost: tinted like the alerts, but a title, a row of figures
   and the explanation instead of one message. */
.report-callout {
    border: 1px solid;
    border-radius: 0.5rem;
    padding: 1rem 1.125rem;
    margin-bottom: 1.25rem;
}

.report-callout--warn { background-color: #fffbeb; border-color: #fde68a; color: #92400e; }
.report-callout--good { background-color: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.report-callout--bad { background-color: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

.report-callout-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.report-callout-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
}

.report-callout-note {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.45;
}

.report-callout-figures + .report-callout-note {
    margin-top: 0.5rem;
}

.report-section-title {
    margin: 1.75rem 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #4b5563;
}

/* One table per group. */
.report-table-scroll {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.report-table {
    width: 100%;
    min-width: 52rem;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.report-col-metric { width: 28%; }
.report-col-value { width: 20%; }

.report-table thead th {
    padding: 0.625rem 1rem;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    color: #6b7280;
}

.report-table tbody th,
.report-table tbody td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #f1f1f1;
    vertical-align: top;
    text-align: left;
}

.report-table tbody tr:last-child th,
.report-table tbody tr:last-child td {
    border-bottom: 0;
}

.report-table tbody tr:hover {
    background-color: #f9fafb;
}

.report-table tbody th {
    font-weight: 500;
    color: #1f2937;
}

.report-table .report-value {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.report-table tbody .report-value {
    font-weight: 700;
    color: #0f172a;
}

.report-description {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #6b7280;
}

/* System-controlled values (credit rating, WACC, cost of equity): shown, never edited. */
.form-control[data-system-controlled] {
    background-color: #f3f4f6;
    color: #374151;
    cursor: not-allowed;
}

.form-control[data-system-controlled]:focus {
    box-shadow: none;
}

.policy-issues {
    padding-left: 1.25rem;
}

/* Company tree picker: legal entities are the only buttons; holding, subholdings and portfolios are headings
   that fold their branch. */
.company-picker-display {
    cursor: pointer;
    background-color: #f9fafb;
}

.company-picker-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 64px));
    padding: 20px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    flex-direction: column;
}

.company-picker-dialog[open] {
    display: flex;
}

.company-picker-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.company-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.company-picker-list {
    margin-top: 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    list-style: none;
    padding: 0;
}

.company-picker-list > li {
    padding-left: calc(var(--depth, 0) * 18px);
}

.company-picker-option,
.company-picker-group {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    text-align: left;
    font-size: 0.8125rem;
}

.company-picker-group {
    color: #6b7280;
    font-weight: 600;
}

.company-picker-group[aria-expanded="false"] i {
    transform: rotate(-90deg);
}

.company-picker-option {
    color: #1f2937;
    cursor: pointer;
}

.company-picker-option:hover,
.company-picker-option:focus-visible {
    background-color: #eff6ff;
    outline: none;
}

.company-picker-option[aria-selected="true"] {
    background-color: #dbeafe;
    font-weight: 600;
}

/* Searchable dropdown (js/searchable-select.js): the native select stays in the form, hidden; a button shows
   the choice and opens a panel with a filter box. */
.searchable-select-native {
    display: none !important;
}

.searchable-select {
    position: relative;
}

.searchable-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    background-color: #fff;
    cursor: pointer;
}

.searchable-select-button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.searchable-select-list {
    max-height: 260px;
    margin: 6px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.searchable-select-option {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #1f2937;
    cursor: pointer;
}

.searchable-select-option.is-active {
    background-color: #eff6ff;
}

.searchable-select-option[aria-selected="true"] {
    font-weight: 600;
}

.searchable-select-empty {
    padding: 6px 10px;
    font-size: 0.8125rem;
    color: #6b7280;
}

/* A table with a side panel: the panel is a narrow card on the left that narrows the table on the right,
   like a folder tree beside a file list. */
.data-table-with-side {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.data-table-with-side > .card-body:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.data-table-side {
    flex: 0 0 280px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    position: sticky;
    top: 1rem;
}

@media (max-width: 1024px) {
    .data-table-with-side {
        flex-direction: column;
    }

    .data-table-side {
        flex-basis: auto;
        width: 100%;
        position: static;
        max-height: none;
    }
}

.side-list-items,
.side-list-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-list-children {
    padding-left: 1.25rem;
}

.side-list-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    background: none;
    text-align: left;
    font-size: 0.875rem;
    color: #111827;
    cursor: pointer;
}

.side-list-item:hover,
.side-list-item:focus-visible {
    background: #f3f4f6;
    outline: none;
}

.side-list-item.is-selected {
    color: rgb(var(--primary-dark));
    font-weight: 600;
}

.side-list-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: #fbbf24;
}

.side-list-item--root .side-list-icon {
    color: #d97706;
}

.side-list-label {
    flex: 1 1 auto;
    min-width: 0;
}

.side-list-count {
    flex-shrink: 0;
    min-width: 1.75rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
}

.side-list-empty {
    padding: 0.5rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

/* Shared list tables (_DataTable.cshtml): a record reads as its name with the code underneath in small
   monospace, and row actions sit at the right edge of the row. */
.data-record {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.data-record-title {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    font-weight: 500;
}

/* A plain title is near-black; a linked one keeps its link colour. */
.data-record-title:not(.link) {
    color: #111827;
}

button.data-record-title {
    padding: 0;
    border: 0;
    background: none;
}

.data-record-code {
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: #6b7280;
}

.table th.data-actions-cell,
.table td.data-actions-cell {
    width: 1px;
    white-space: nowrap;
    text-align: right;
}

/* Every sortable header shows a mark, muted until it is the active sort; figures and dates line up in
   tabular digits. */
.sort-icon {
    font-size: 0.875rem;
    line-height: 1;
    color: #374151;
}

.sort-icon--idle {
    color: #9ca3af;
}

.data-area .table td {
    font-variant-numeric: tabular-nums;
}

/* Status badge dot (Parama: a round dot in the status's -dark shade, no outline). */
.badge.badge-dot > svg {
    flex: none;
    stroke: none;
}

.badge--success.badge-dot > svg { fill: rgb(var(--success-dark)); }
.badge--warning.badge-dot > svg { fill: rgb(var(--warning-dark)); }
.badge--error.badge-dot > svg { fill: rgb(var(--error-dark)); }
.badge--primary.badge-dot > svg { fill: rgb(var(--primary-default)); }

/* One-line column headers: a wrapped header makes the whole row taller than the data. */
.data-area .table thead th {
    white-space: nowrap;
}

.data-record-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    color: #6b7280;
}

/* List tables carry an sr-only <caption> before <thead>, so framework.css's divide-y
   (".table>:not([hidden])~:not([hidden])") gives the header a 1px top rule that doubles the wrapper's own
   border into a thick line. */
.data-area .table > thead:not([hidden]) {
    border-top-width: 0;
}

/* A select behind a tick box (CrudField.ToggleOffValue): the tick box is optional, so its label must not get
   the framework's required "*", which framework.css draws for a label followed by a required select. */
.form-label.crud-toggle-label::after {
    content: none !important;
}

/* CRUD form check boxes: the box beside its label text, with corners matching the inputs. */
.form-label.crud-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

[data-crud-form] .form-check-input {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
}

.form-label.crud-toggle-label {
    cursor: pointer;
}

/* A field locked by another answer: shown in the muted look of the system-controlled fields, not typed into. */
[data-locked-when-field]:not([data-locked-when-field=""]) .form-control[readonly] {
    background-color: rgb(var(--background-default));
    color: #374151;
    cursor: not-allowed;
}

/* Header account menu: Idaman photo over the user's initials, then their full name. */
.account-menu {
    flex-shrink: 0;
    margin-left: 1rem;
}

.account-menu-toggle {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    white-space: nowrap;
}

.account-menu-name {
    color: rgb(55 65 81);
    font-size: 1rem;
}

.avatar--photo {
    height: 2.5rem;
    overflow: hidden;
    position: relative;
    width: 2.5rem;
}

.avatar-initials {
    font-size: 0.8125rem;
    font-weight: 600;
}

.avatar-photo {
    border-radius: 50%;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.account-menu-panel {
    min-width: 100%;
}

/* What-If scenarios (Views/Projects/_WhatIf.cshtml, _WhatIfResult.cshtml). */
.whatif-grid {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.whatif-grid .table > thead:not([hidden]) {
    border-top-width: 0;
}

.whatif-table,
.whatif-table .table-cell-sm {
    font-size: 0.8125rem;
}

/* framework.css aligns and weights every .table cell by position, so these match its specificity. */
.table.whatif-table tbody th.whatif-label:first-child {
    font-weight: 400;
    white-space: nowrap;
}

.whatif-table thead th.whatif-num,
.whatif-table tbody td.whatif-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.whatif-input {
    min-width: 7.5rem;
}

.whatif-column-label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.whatif-problems {
    padding-left: 1.25rem;
    list-style: disc;
    font-size: 0.875rem;
    color: #374151;
}

.whatif-group > th {
    background: #f9fafb;
    font-weight: 600;
}

.whatif-delta {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
}

.whatif-errors {
    margin: 0;
    padding-left: 1rem;
    list-style: disc;
    min-width: 12rem;
    white-space: normal;
    text-align: left;
    font-size: 0.75rem;
    color: rgb(var(--error-dark));
}

/* Funding draft: a source or project year taken beyond what it has; cell-scoped for the reason given at .cash-zero,
   and darker than --error-dark, which is too light for text on white. */
.table tbody td.funding-sim-over { color: #b91c1c; }

/* The share of a year's equity the draft covers, as a ring with the percentage in its middle. */
.funding-ring {
    height: 7.5rem;
    margin: 0.75rem auto;
    position: relative;
    width: 7.5rem;
}

.funding-ring svg {
    height: 100%;
    width: 100%;
}

.funding-ring-track,
.funding-ring-fill {
    fill: none;
    stroke-width: 10;
}

.funding-ring-track {
    stroke: #e5e7eb;
}

.funding-ring-fill {
    stroke: #2563eb;
}

.funding-ring-label {
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 700;
    inset: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-sim-year-panel] .funding-sim-over {
    color: #b91c1c;
}