:root {
    --background: #ffffff;
    --background-subtle: #f3f5f2;
    --surface: #ffffff;
    --surface-muted: #e9f2f1;
    --text-primary: #003f45;
    --text-secondary: #526a6c;
    --accent-primary: #008d95;
    --accent-dark: #005f66;
    --accent-soft: #d7ecee;
    --accent-yellow: #ffd500;
    --border: #cbdcda;
    --success: #08765f;
    --warning: #a86a00;
    --danger: #b83c48;
    --danger-soft: #fae9ec;
    --shadow: 0 22px 60px rgba(0, 63, 69, .12);
    --shadow-soft: 0 10px 30px rgba(0, 63, 69, .08);
    --radius: 0;
    --max: 1380px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text-primary);
    background: var(--background);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }

.container {
    width: min(var(--max), calc(100% - 56px));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--accent-yellow);
    color: var(--text-primary);
    padding: 11px 16px;
    z-index: 999;
    font-weight: 700;
}
.skip-link:focus { left: 16px; top: 16px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid var(--border);
}

.nav {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -.015em;
}

.brand-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.brand-mark img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.desktop-nav {
    display: flex;
    align-items: stretch;
    gap: 30px;
    min-height: 86px;
}

.nav-tab {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
}

.nav-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 18px;
    height: 3px;
    background: var(--accent-yellow);
    transition: right .18s ease;
}

.nav-tab:hover::after,
.nav-tab.active::after {
    right: 0;
}

.header-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--accent-dark);
    font-size: .83rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(8,118,95,.10);
}

.hero {
    position: relative;
    overflow: hidden;
    background: #eef4f2;
}

.compact-hero {
    padding: 72px 0 66px;
}

.hero::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -220px;
    top: -250px;
    border-radius: 50%;
    border: 2px solid rgba(0,141,149,.20);
    box-shadow:
        0 0 0 34px rgba(0,141,149,.05),
        0 0 0 68px rgba(255,213,0,.10);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr);
    gap: 66px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    padding-bottom: 9px;
    border-bottom: 4px solid var(--accent-yellow);
    color: var(--accent-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.small-eyebrow {
    font-size: .68rem;
    border-bottom-width: 3px;
    padding-bottom: 5px;
}

.hero h1,
.section-header h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.hero h1 {
    margin: 24px 0 18px;
    max-width: 850px;
    font-size: clamp(3rem, 5vw, 5.2rem);
    line-height: .94;
    letter-spacing: -.055em;
}

.hero-copy {
    max-width: 720px;
    color: var(--text-secondary);
    font-size: 1.08rem;
}

.hero-note {
    margin: 20px 0 0;
    color: var(--text-secondary);
    font-size: .85rem;
}

.context-grid {
    display: grid;
    gap: 1px;
    margin-top: 30px;
    border: 1px solid var(--border);
    background: var(--border);
}

.context-field {
    padding: 15px 17px;
    background: rgba(255,255,255,.92);
}

.context-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.context-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.context-value-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.context-select,
.recommendation-toolbar select,
.record-toolbar input {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: #fff;
    color: var(--text-primary);
    padding: 0 12px;
    outline: none;
}

.context-select {
    width: min(100%, 430px);
}

.context-select:focus,
.recommendation-toolbar select:focus,
.record-toolbar input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(0,141,149,.08);
}

.text-link {
    flex: 0 0 auto;
    color: var(--accent-dark);
    font-weight: 800;
    border-bottom: 2px solid var(--accent-yellow);
}

.disabled-link {
    opacity: .46;
    pointer-events: none;
    border-bottom-color: var(--border);
}

.hero-summary {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 27px;
}

.hero-summary::before,
.card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 74px;
    height: 6px;
    background: var(--accent-yellow);
}

.hero-summary-top,
.card-heading,
.mini-lifecycle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.hero-summary h2 {
    margin: .2rem 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    font-weight: 400;
}

.muted { color: var(--text-secondary); }

.score-ring {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    background: conic-gradient(var(--accent-primary) 0 0%, var(--accent-soft) 0 100%);
    flex: 0 0 auto;
}

.score-ring::after {
    content: "";
    position: absolute;
    width: 81px;
    height: 81px;
    border-radius: 50%;
    background: #fff;
}

.score-ring strong {
    position: relative;
    z-index: 1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 400;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 24px;
    background: var(--border);
    border: 1px solid var(--border);
}

.metric {
    padding: 18px;
    background: #fff;
}

.metric strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.7rem;
    font-weight: 400;
}

.metric span {
    color: var(--text-secondary);
    font-size: .8rem;
}

.mini-lifecycle {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid var(--border);
}

.mini-bar {
    height: 8px;
    margin-top: 12px;
    overflow: hidden;
    background: var(--accent-soft);
}

.mini-bar span {
    display: block;
    width: 78%;
    height: 100%;
    background: var(--accent-yellow);
}

.tab-panel[hidden] { display: none !important; }

.section { padding: 78px 0; }
.section.alt { background: var(--background-subtle); }

.section-header {
    display: flex;
    justify-content: space-between;
    gap: 44px;
    align-items: end;
    margin-bottom: 34px;
}

.section-header h2 {
    margin: 18px 0 0;
    max-width: 780px;
    font-size: clamp(2.35rem, 4vw, 4rem);
    line-height: .98;
    letter-spacing: -.04em;
}

.section-header p {
    max-width: 620px;
    margin: 0;
    color: var(--text-secondary);
}

.grid {
    display: grid;
    gap: 20px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.kpi-grid { margin-bottom: 20px; }

.card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    padding: 25px;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
    border-color: #a7c5c2;
    box-shadow: var(--shadow-soft);
}

.kpi-card {
    min-height: 174px;
}

.kpi-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.icon-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-dark);
    display: grid;
    place-items: center;
    font-weight: 900;
}

.icon-box.small {
    width: 34px;
    height: 34px;
    font-size: .72rem;
}

.kpi-value {
    display: block;
    margin-top: 15px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.65rem;
    font-weight: 400;
    line-height: 1;
}

.small-value {
    font-size: 1.7rem;
    line-height: 1.08;
}

.kpi-card p {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-size: .82rem;
}

.dashboard-grid { margin-top: 20px; }

.card-heading {
    margin-bottom: 18px;
}

.card-heading h3 {
    margin: 10px 0 0;
    font-size: 1.18rem;
}

.card-heading p {
    max-width: 720px;
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: .82rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    color: var(--accent-dark);
    background: #fff;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.live-badge {
    color: var(--success);
    border-color: rgba(8,118,95,.25);
    background: rgba(8,118,95,.05);
}

.simulation-badge {
    color: var(--warning);
    border-color: rgba(168,106,0,.24);
    background: rgba(255,213,0,.12);
}

.wide-card { margin-top: 20px; }

.chart-box {
    position: relative;
    width: 100%;
}
.medium-chart { height: 310px; }
.large-chart { height: 390px; }

.status-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: .75rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
}
.status-pill.error i { background: var(--danger); }
.status-pill.cancelled i { background: var(--warning); }

.table-wrap { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.data-table th {
    padding: 11px 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
}

.data-table td {
    padding: 13px 12px;
    border-bottom: 1px solid #e8efed;
    font-size: .83rem;
}

.data-table tbody tr:hover {
    background: var(--background-subtle);
}

.risk-pill {
    display: inline-flex;
    padding: 4px 8px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .03em;
    border: 1px solid var(--border);
}

.risk-low { color: var(--success); background: rgba(8,118,95,.05); }
.risk-medium { color: var(--warning); background: rgba(255,213,0,.14); }
.risk-high { color: #9b5a00; background: #fff2d3; }
.risk-critical { color: var(--danger); background: var(--danger-soft); border-color: #efc4ca; }

.table-action {
    border: 0;
    background: transparent;
    color: var(--accent-dark);
    font-weight: 800;
    border-bottom: 2px solid var(--accent-yellow);
    cursor: pointer;
}

.empty-cell {
    text-align: center !important;
    color: var(--text-secondary);
    padding: 28px !important;
}

.record-toolbar,
.recommendation-toolbar {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid var(--border);
    background: #fff;
}

.record-toolbar > div,
.recommendation-toolbar > div {
    display: grid;
    gap: 6px;
}

.record-toolbar label,
.recommendation-toolbar label {
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 0;
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
    background: var(--accent-yellow);
    color: var(--text-primary);
}

.btn-primary:hover { background: #f0c900; }

.btn-secondary {
    border-color: var(--text-primary);
    background: #fff;
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--text-primary);
    color: #fff;
}

.histogram-grid { margin-top: 8px; }

.mini-chart-panel {
    min-height: 255px;
    padding: 17px;
    border: 1px solid var(--border);
    background: var(--background-subtle);
}

.mini-chart-panel strong {
    display: block;
    margin-bottom: 10px;
    font-size: .82rem;
}

.mini-chart-panel canvas {
    width: 100% !important;
    height: 210px !important;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1px;
    border: 1px solid var(--border);
    background: var(--border);
}

.detail {
    min-height: 84px;
    padding: 14px;
    background: #fff;
}

.detail span {
    display: block;
    color: var(--text-secondary);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.detail strong {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.notice {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid var(--border);
    background: var(--background-subtle);
}

.notice strong { display: block; }
.notice p { margin: 4px 0 0; color: var(--text-secondary); }

.recommendation-list {
    display: grid;
    gap: 18px;
}

.recommendation-card {
    position: relative;
    border: 1px solid var(--border);
    background: #fff;
    padding: 25px;
}

.recommendation-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 74px;
    height: 6px;
    background: var(--accent-yellow);
}

.recommendation-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: start;
}

.recommendation-top h3 {
    margin: 0;
    font-size: 1.15rem;
}

.recommendation-top p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: .82rem;
}

.recommendation-evidence {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 1px;
    margin-top: 18px;
    border: 1px solid var(--border);
    background: var(--border);
}

.evidence-cell {
    padding: 13px;
    background: var(--background-subtle);
}

.evidence-cell span {
    display: block;
    color: var(--text-secondary);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.evidence-cell strong {
    display: block;
    margin-top: 5px;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.ai-output {
    margin-top: 18px;
    padding: 19px;
    border-left: 5px solid var(--accent-primary);
    background: #f7fbfa;
}

.ai-output.pending {
    border-left-color: var(--border);
    background: var(--background-subtle);
}

.ai-output h4 {
    margin: 0 0 7px;
}

.ai-output p {
    margin: 0;
    color: var(--text-secondary);
}

.actions-list {
    margin: 10px 0 0;
    padding-left: 19px;
}

.governance-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 17px;
}

.asset-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--accent-dark);
    font-size: .75rem;
    font-weight: 800;
}

.asset-chip.enabled {
    border-bottom: 3px solid var(--accent-yellow);
}

.asset-chip.disabled {
    opacity: .48;
    pointer-events: none;
}

.empty-card {
    color: var(--text-secondary);
}

.footer {
    padding: 32px 0;
    border-top: 1px solid var(--border);
    background: #fff;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
}

.footer-note {
    color: var(--text-secondary);
    font-size: .78rem;
}

.toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100;
    max-width: 420px;
    padding: 14px 16px;
    color: #fff;
    background: var(--text-primary);
    box-shadow: var(--shadow-soft);
}

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .details-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .recommendation-evidence { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .header-live { display: none; }
}

@media (max-width: 800px) {
    .container { width: min(100% - 28px, var(--max)); }
    .nav { min-height: auto; padding: 14px 0; flex-wrap: wrap; }
    .desktop-nav {
        order: 3;
        width: 100%;
        min-height: 48px;
        gap: 18px;
        overflow-x: auto;
    }
    .nav-tab { white-space: nowrap; }
    .nav-tab::after { bottom: 2px; }

    .compact-hero { padding: 50px 0; }
    .hero h1 { font-size: clamp(2.7rem, 12vw, 4.4rem); }

    .section { padding: 58px 0; }
    .section-header { align-items: start; flex-direction: column; }
    .grid-2, .grid-4 { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: 1fr; }
    .details-grid { grid-template-columns: 1fr; }
    .recommendation-evidence { grid-template-columns: 1fr; }
    .footer-grid { align-items: start; flex-direction: column; }
    .context-value-row { align-items: flex-start; flex-direction: column; }
}
.transaction-group-card {
    padding: 28px;
}

.transaction-columns {
    margin-top: 6px !important;
    font-size: 0.75rem !important;
    color: var(--accent-dark) !important;
}

.transaction-summary-evidence {
    margin-top: 22px;
}

.transaction-history {
    margin-top: 20px;
    border: 1px solid var(--border);
    background: var(--background-subtle);
}

.transaction-history > summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 18px;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transaction-history > summary::-webkit-details-marker {
    display: none;
}

.transaction-history > summary::after {
    content: "+";
    font-size: 1.35rem;
    font-weight: 400;
}

.transaction-history[open] > summary::after {
    content: "−";
}

.history-timeline {
    border-top: 1px solid var(--border);
    padding: 8px 20px 20px;
}

.history-event {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding-top: 22px;
}

.history-event:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50px;
    bottom: -20px;
    width: 1px;
    background: var(--border);
}

.history-event-marker {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 0.7rem;
    font-weight: 900;
}

.history-event-content {
    min-width: 0;
}

.history-event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.history-event-header strong,
.history-event-header .muted {
    display: block;
}

.history-event-header .muted {
    margin-top: 3px;
    font-size: 0.76rem;
}

.history-recommendation {
    margin-top: 12px;
    padding: 14px 16px;
    border-left: 4px solid var(--accent-primary);
    background: #ffffff;
}

.history-recommendation p {
    margin: 5px 0 0;
    color: var(--text-secondary);
}

.history-recommendation ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

/* =========================================================
   MODERN DATA VISUALIZATION PATCH
   Append this to the end of frontend/styles.css
   ========================================================= */

.chart-card,
.wide-card {
    overflow: hidden;
}

.chart-box {
    padding: 14px 10px 4px;
    border: 1px solid #e3ecea;
    background:
        linear-gradient(
            180deg,
            rgba(247, 251, 250, .92) 0%,
            rgba(255, 255, 255, 1) 62%
        );
    border-radius: 14px;
}

.large-chart {
    height: 360px;
}

.medium-chart {
    height: 290px;
}

.mini-chart-panel {
    border: 1px solid #e1ebe9;
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            #f8fbfa 0%,
            #ffffff 100%
        );
    padding: 16px 16px 10px;
}

.mini-chart-panel strong {
    color: var(--text-primary);
    font-size: .78rem;
    letter-spacing: .01em;
}

.status-summary {
    justify-content: center;
    gap: 18px;
    margin-top: 14px;
}

.status-pill {
    padding: 7px 10px;
    border: 1px solid #e2ecea;
    border-radius: 999px;
    background: #fafcfc;
}

.date-range-toolbar {
    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #f7faf9 100%
        );
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 63, 69, .04);
}

.date-range-toolbar select,
.date-range-toolbar input {
    min-height: 42px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 0 12px;
    color: var(--text-primary);
}

.custom-date-field {
    display: none !important;
}

.custom-date-field.is-visible {
    display: grid !important;
}

#activeDateRange {
    align-self: center;
    padding-bottom: 10px;
    font-weight: 600;
}

.zscore-matrix {
    padding-top: 4px;
}

.zscore-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}

.zscore-record-label {
    color: var(--text-primary);
    font-weight: 800;
}

.zscore-scale-note {
    color: var(--text-secondary);
    font-size: .74rem;
}

.zscore-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(145px, 1fr)
        );
    gap: 8px;
}

.zscore-cell {
    min-height: 88px;
    padding: 13px;
    border-radius: 12px;
    border: 1px solid rgba(0, 63, 69, .07);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.zscore-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 63, 69, .08);
}

.zscore-cell span {
    font-size: .68rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.zscore-cell strong {
    margin-top: 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-weight: 400;
}

.z-heat-normal {
    background: #f4f8f7;
    color: #42686a;
}

.z-heat-low {
    background: #dff1ef;
    color: #006d73;
}

.z-heat-medium {
    background: #fff6c7;
    color: #765e00;
}

.z-heat-high {
    background: #ffe1af;
    color: #8c4e00;
}

.z-heat-critical {
    background: #f6d8dc;
    color: #9d2736;
}

.zscore-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: .68rem;
}

.zscore-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zscore-legend i {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(0, 63, 69, .08);
    border-radius: 4px;
}

.transaction-group-card {
    padding: 28px;
    border-radius: 14px;
}

.transaction-columns {
    margin-top: 6px !important;
    font-size: .75rem !important;
    color: var(--accent-dark) !important;
}

.transaction-summary-evidence {
    margin-top: 22px;
    border-radius: 10px;
    overflow: hidden;
}

.transaction-history {
    margin-top: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fafcfc;
}

.transaction-history > summary {
    cursor: pointer;
    list-style: none;
    padding: 15px 17px;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transaction-history > summary::-webkit-details-marker {
    display: none;
}

.transaction-history > summary span:last-child {
    display: grid;
    place-items: center;
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: .68rem;
}

.history-timeline {
    border-top: 1px solid var(--border);
    padding: 8px 18px 20px;
}

.history-event {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding-top: 22px;
}

.history-event:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50px;
    bottom: -20px;
    width: 1px;
    background: var(--border);
}

.history-event-marker {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: .7rem;
    font-weight: 900;
}

.history-event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.history-event-header strong,
.history-event-header .muted {
    display: block;
}

.history-event-header .muted {
    margin-top: 3px;
    font-size: .76rem;
}

.history-recommendation {
    margin-top: 12px;
    padding: 14px 16px;
    border-left: 4px solid var(--accent-primary);
    border-radius: 0 10px 10px 0;
    background: #ffffff;
}

@media (max-width: 800px) {
    .large-chart {
        height: 320px;
    }

    .medium-chart {
        height: 270px;
    }

    .zscore-header-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .zscore-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

/* =========================================================
   ML UI FIX V3
   Append to the END of frontend/styles.css
   ========================================================= */

/* ---------- raw score distribution cards ---------- */

.distribution-explainer {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: -2px 0 18px;
    color: var(--text-secondary);
    font-size: .72rem;
}

.distribution-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.distribution-area-swatch {
    width: 22px;
    height: 10px;
    border-radius: 4px;
    background: rgba(0, 141, 149, .20);
    border: 1px solid var(--accent-primary);
}

.distribution-selected-swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent-yellow);
    border: 2px solid var(--text-primary);
}

.mini-chart-panel small {
    display: block;
    min-height: 34px;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: .68rem;
    line-height: 1.35;
}

/* ---------- real z-score matrix ---------- */

.z-matrix-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dce8e6;
    border-radius: 14px;
    background: #ffffff;
}

.z-matrix-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    padding: 8px;
}

.z-matrix-table th,
.z-matrix-table td {
    min-width: 82px;
    height: 58px;
    padding: 8px 9px;
    border-radius: 9px;
    text-align: center;
    vertical-align: middle;
}

.z-matrix-table thead th {
    max-width: 125px;
    color: var(--text-secondary);
    background: #f6f9f8;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.z-matrix-corner {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 145px !important;
    color: var(--text-primary) !important;
    text-align: left !important;
}

.z-matrix-transaction {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 145px !important;
    background: #f8fbfa !important;
    color: var(--text-primary);
    text-align: left !important;
}

.z-matrix-transaction strong {
    display: block;
    font-size: .74rem;
}

.z-matrix-transaction small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .63rem;
}

.z-matrix-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .72rem;
    font-weight: 800;
    border: 1px solid rgba(0, 63, 69, .05);
}

.z-matrix-selected-row .z-matrix-transaction {
    box-shadow: inset 4px 0 0 var(--accent-yellow);
}

.z-matrix-selected-row .z-matrix-cell {
    outline: 1px solid rgba(0, 63, 69, .12);
}

/* ---------- methodology at the bottom ---------- */

.methodology-details {
    margin-top: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
}

.methodology-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 78px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #f7faf9 100%
        );
}

.methodology-details > summary::-webkit-details-marker {
    display: none;
}

.methodology-details > summary strong {
    display: block;
    margin-top: 8px;
    color: var(--text-primary);
    font-size: 1rem;
}

.methodology-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 32px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.methodology-details[open] .methodology-toggle {
    background: var(--accent-yellow);
    color: var(--text-primary);
}

.methodology-details[open] .methodology-toggle::before {
    content: "Close";
    font-size: .68rem;
}

.methodology-details[open] .methodology-toggle {
    font-size: 0;
}

.methodology-content {
    padding: 22px;
    border-top: 1px solid var(--border);
    background: #fbfdfc;
}
/* =========================================================
   AI RECOMMENDER + DATA STEWARD COPILOT
   ========================================================= */

.btn-ai {
    background: var(--text-primary);
    color: #fff;
    border-color: var(--text-primary);
}

.btn-ai:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.btn-ai:disabled,
.btn:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
}

.ai-recommendation-panel {
    margin-top: 20px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #f7fbfa 0%, #ffffff 70%);
}

.ai-recommendation-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 19px 0;
}

.ai-recommendation-head h4 {
    margin: 3px 0 0;
    font-size: 1rem;
}

.ai-recommendation-label {
    color: var(--accent-dark);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ai-model-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(0,141,149,.24);
    background: rgba(0,141,149,.06);
    color: var(--accent-dark);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ai-recommendation-body {
    padding: 16px 19px 19px;
}

.ai-recommendation-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: .88rem;
}

.ai-next-steps-title {
    display: block;
    margin-top: 17px;
    color: var(--text-primary);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ai-next-steps {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.ai-next-steps li {
    position: relative;
    padding: 10px 12px 10px 36px;
    border: 1px solid #e0ebe9;
    background: #fff;
    color: var(--text-secondary);
    font-size: .8rem;
}

.ai-next-steps li::before {
    content: "✓";
    position: absolute;
    left: 12px;
    top: 9px;
    color: var(--success);
    font-weight: 900;
}

.ai-recommendation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.btn-compact {
    min-height: 38px;
    padding: 8px 13px;
    font-size: .75rem;
}

.btn-ghost {
    border-color: var(--border);
    background: #fff;
    color: var(--accent-dark);
}

.btn-ghost:hover {
    border-color: var(--accent-primary);
    background: var(--accent-soft);
}

.ai-loading-line {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: .82rem;
}

.ai-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent-soft);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: ai-spin .75s linear infinite;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

.ai-error {
    color: var(--danger);
}

.copilot-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 88;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--text-primary);
    background: var(--text-primary);
    color: #fff;
    box-shadow: 0 14px 40px rgba(0,63,69,.24);
    font-weight: 800;
    cursor: pointer;
}

.copilot-launcher:hover {
    background: var(--accent-dark);
}

.copilot-launcher-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-yellow);
    color: var(--text-primary);
}

.copilot-backdrop {
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(0, 32, 36, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.copilot-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.copilot-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    width: min(480px, 100vw);
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 70px rgba(0,63,69,.18);
    transform: translateX(102%);
    transition: transform .22s ease;
}

.copilot-panel.open {
    transform: translateX(0);
}

.copilot-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #f3f8f7 0%, #ffffff 75%);
}

.copilot-header h2 {
    margin: 13px 0 3px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    font-weight: 400;
}

.copilot-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .78rem;
}

.copilot-close {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-primary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.copilot-context-strip {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 24px;
    border-bottom: 1px solid #e8efed;
    background: #fbfdfc;
    font-size: .7rem;
}

.copilot-context-strip span {
    color: var(--text-secondary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.copilot-context-strip strong {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.copilot-quick-prompts {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 18px;
    border-bottom: 1px solid #e8efed;
    scrollbar-width: thin;
}

.copilot-quick-prompts button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--accent-dark);
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
}

.copilot-quick-prompts button:hover {
    border-color: var(--accent-primary);
    background: var(--accent-soft);
}

.copilot-messages {
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    background: #f7faf9;
}

.copilot-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.copilot-message.user {
    justify-content: flex-end;
}

.copilot-message.user .copilot-bubble {
    max-width: 86%;
    background: var(--text-primary);
    color: #fff;
    border-color: var(--text-primary);
}

.copilot-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent-yellow);
    color: var(--text-primary);
    font-size: .75rem;
    font-weight: 900;
}

.copilot-bubble {
    max-width: calc(100% - 42px);
    padding: 12px 14px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    font-size: .83rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.copilot-source-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.copilot-source {
    padding: 4px 7px;
    border: 1px solid var(--border);
    background: #f8fbfa;
    color: var(--accent-dark);
    font-size: .63rem;
    font-weight: 800;
}

.copilot-live-source {
    border-color: rgba(8,118,95,.25);
    color: var(--success);
}

.copilot-composer {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    padding: 16px;
    border-top: 1px solid var(--border);
    background: #fff;
}

.copilot-composer textarea {
    width: 100%;
    min-height: 50px;
    max-height: 150px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 11px 12px;
    color: var(--text-primary);
    outline: none;
}

.copilot-composer textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(0,141,149,.08);
}

.copilot-send {
    align-self: end;
}

@media (max-width: 800px) {
    .copilot-launcher {
        right: 14px;
        bottom: 14px;
    }

    .copilot-panel {
        width: 100vw;
    }

    .copilot-header,
    .copilot-context-strip {
        padding-left: 18px;
        padding-right: 18px;
    }

    .copilot-composer {
        grid-template-columns: 1fr;
    }

    .copilot-send {
        width: 100%;
    }

    .ai-recommendation-head {
        flex-direction: column;
    }
}

/* === COPILOT ANALYSIS MODE V13.5 START === */

.copilot-card-actions-v13-5 {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.copilot-card-actions-v13-5 > .badge {
    position: static !important;
    margin: 0 !important;
}

.copilot-chart-ask-v13-5 {
    min-width: 64px;
    height: 30px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 1px solid rgba(0, 141, 149, .20);
    border-radius: 9px;
    background: rgba(255, 255, 255, .96);
    color: var(--accent-primary, #008d95);

    box-shadow: 0 4px 13px rgba(0, 63, 69, .07);

    font: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;
    transition:
        transform .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}

.copilot-chart-ask-v13-5 span:last-child {
    font-size: 15px;
    line-height: 1;
}

.copilot-chart-ask-v13-5:hover {
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(0, 63, 69, .12);
}

.copilot-chart-ask-v13-5:focus-visible {
    outline: 3px solid rgba(0, 141, 149, .17);
    outline-offset: 2px;
}

.copilot-chart-ask-v13-5.is-loading {
    opacity: .62;
    pointer-events: none;
}

.copilot-mini-card-v13-5 {
    position: relative;
}

.copilot-mini-card-v13-5 > .copilot-chart-ask-v13-5 {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 7;
}

/* === COPILOT ANALYSIS MODE V13.5 END === */

/* === COPILOT DOCK + PDF V13.6 START === */

/*
 * Desktop analysis mode:
 * the right-side Copilot gets its own space instead of covering charts.
 */
@media (min-width: 1050px) {
    body.copilot-docked-v13-6 > .site-header,
    body.copilot-docked-v13-6 > main,
    body.copilot-docked-v13-6 > .footer {
        margin-right: var(
            --copilot-dock-width-v13-6,
            410px
        ) !important;

        transition:
            margin-right .22s ease;
    }

    body.copilot-docked-v13-6 > .site-header {
        width: auto !important;
    }

    body.copilot-docked-v13-6 .container {
        max-width: 100% !important;
    }
}

/*
 * On smaller screens, keeping the drawer as an overlay is more usable
 * than squeezing the dashboard into an unreadable column.
 */
@media (max-width: 1049px) {
    body.copilot-docked-v13-6 > .site-header,
    body.copilot-docked-v13-6 > main,
    body.copilot-docked-v13-6 > .footer {
        margin-right: 0 !important;
    }
}

.copilot-collapse-button-v13-6 {
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.copilot-pdf-button-v13-6 {
    position: absolute !important;
    z-index: 20 !important;
    top: 20px !important;
    right: 62px !important;

    height: 32px !important;
    min-width: 62px !important;
    padding: 0 10px !important;

    border: 1px solid #d3e4e2 !important;
    border-radius: 8px !important;

    background: #ffffff !important;
    color: #006f75 !important;

    font: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;

    box-shadow: 0 4px 12px rgba(0, 63, 69, .06) !important;
    cursor: pointer !important;
}

.copilot-pdf-button-v13-6:hover {
    background: #f5fbfa !important;
    border-color: #a9d1cd !important;
}

/* === COPILOT DOCK + PDF V13.6 END === */

/* === COPILOT HEADER POLISH V13.7 START === */

/*
 * Give PDF and Hide separate, obvious hit areas.
 * v13.6 put them a little too close together.
 */
.copilot-pdf-button-v13-6.copilot-pdf-button-v13-7 {
    top: 25px !important;
    right: 82px !important;

    min-width: 58px !important;
    width: 58px !important;
    height: 34px !important;

    padding: 0 10px !important;

    border-radius: 9px !important;

    font-size: 10px !important;
    font-weight: 800 !important;
}

/*
 * Clear "collapse to the right" control.
 * Wider than the old X/arrow button and visually distinct from PDF.
 */
.copilot-collapse-button-v13-6.copilot-hide-button-v13-7 {
      top: 25px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 34px !important;
    padding: 0 !important;

    display: inline-grid !important;
    place-items: center !important;

    border: 1px solid #cbdedc !important;
    border-radius: 9px !important;

    background: #ffffff !important;
    color: #006f75 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    cursor: pointer !important;
}

.copilot-collapse-button-v13-6.copilot-hide-button-v13-7:hover {
    background: #f3faf9 !important;
    border-color: #9fc9c5 !important;
}

/*
 * Make the Send direction cue bolder and less like a tiny text arrow.
 */
.copilot-send-button-v13-7 {
    min-width: 100px !important;
    letter-spacing: .01em !important;
}

@media (max-width: 1180px) {
    .copilot-pdf-button-v13-6.copilot-pdf-button-v13-7 {
        right: 78px !important;
    }
}

.date-range-toolbar {
    padding: 12px 16px !important;
    gap: 10px !important;
    align-items: center !important;
}

.date-range-toolbar select {
    min-height: 40px !important;
}

.date-range-toolbar #applyDateRange {
    min-height: 40px !important;
    padding: 9px 16px !important;
}

#activeDateRange {
    padding-bottom: 0 !important;
    align-self: center !important;
}
/* ===== DATE RANGE ALIGNMENT FIX ===== */

.date-range-toolbar {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 18px !important;
}

/* wszystkie pola z labelem */
.date-range-toolbar > div {
    display: grid !important;
    grid-template-rows: 14px 42px !important;
    gap: 6px !important;
}

/* label zawsze zajmuje dokładnie tę samą wysokość */
.date-range-toolbar label {
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 !important;
}

/* selecty i inputy */
.date-range-toolbar select,
.date-range-toolbar input {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
}

/* button zaczyna się dokładnie tam, gdzie select */
.date-range-toolbar #applyDateRange {
    height: 42px !important;
    min-height: 42px !important;
    margin-top: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* napis Last 30 days też w tej samej linii */
.date-range-toolbar #activeDateRange {
    height: 42px !important;
    margin-top: 20px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    align-self: flex-start !important;
}
/* =========================================================
   DIAGNOSTICS UI V2
   ========================================================= */


/* ---------- plain z-score matrix ---------- */

.z-matrix-context {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 700;
}

.z-matrix-table-plain {
    border-spacing: 0;
    padding: 0;
}

.z-matrix-table-plain th,
.z-matrix-table-plain td {
    min-width: 94px;
    height: auto;
    padding: 12px 13px;
    border-radius: 0;
    border-right: 1px solid #e6eeec;
    border-bottom: 1px solid #e6eeec;
    background: #ffffff !important;
    color: var(--text-primary) !important;
}

.z-matrix-table-plain thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7faf9 !important;
    font-size: .68rem;
    line-height: 1.25;
    font-weight: 800;
    white-space: normal;
    word-break: break-word;
}

.z-matrix-table-plain .z-matrix-corner {
    left: 0;
    z-index: 4;
    min-width: 150px;
}

.z-matrix-table-plain .z-matrix-transaction {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 150px;
    text-align: left;
    background: #ffffff !important;
}

.z-matrix-table-plain .z-matrix-transaction strong {
    display: block;
    font-size: .75rem;
}

.z-matrix-table-plain .z-matrix-transaction small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .64rem;
    font-weight: 600;
}

.z-matrix-table-plain .z-matrix-cell {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: .76rem;
    font-weight: 700;
    text-align: right;
}

.z-matrix-table-plain
.z-matrix-selected-row
.z-matrix-transaction strong {
    font-weight: 900;
}

.z-matrix-table-plain
.z-matrix-selected-row
td {
    font-weight: 900;
}

.z-matrix-footnote {
    margin-top: 11px;
    color: var(--text-secondary);
    font-size: .68rem;
    line-height: 1.5;
}


/* ---------- raw-score distribution diagnostics ---------- */

.histogram-grid .mini-chart-panel {
    min-height: 330px;
}

.histogram-grid .mini-chart-panel canvas {
    height: 205px !important;
    margin-top: 4px;
}

.distribution-model-meta {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 6px;
    margin: 12px 0 8px;
}

.distribution-model-meta > span {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #e3ecea;
    border-radius: 8px;
    background: #ffffff;
}

.distribution-model-meta small {
    min-height: 0;
    margin: 0 0 3px;
    color: var(--text-secondary);
    font-size: .58rem;
    line-height: 1.2;
}

.distribution-model-meta strong {
    display: block;
    overflow: hidden;
    color: var(--text-primary);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .distribution-model-meta {
        grid-template-columns: 1fr;
    }

    .z-matrix-context {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* =========================================================
   DIAGNOSTICS UI V3
   ========================================================= */


/* ---------- signed z-score colours ---------- */

.z-matrix-table-plain td.z-value-neutral {
    background: #f8fbfa !important;
    color: #184b4e !important;
}


/* negative = teal */

.z-matrix-table-plain td.z-value-negative-1 {
    background: #e6f4f3 !important;
    color: #006c72 !important;
}

.z-matrix-table-plain td.z-value-negative-2 {
    background: #c6e7e5 !important;
    color: #005f65 !important;
}

.z-matrix-table-plain td.z-value-negative-3 {
    background: #8fcfcb !important;
    color: #004f55 !important;
}

.z-matrix-table-plain td.z-value-negative-4 {
    background: #008d95 !important;
    color: #ffffff !important;
}


/* positive = yellow / amber */

.z-matrix-table-plain td.z-value-positive-1 {
    background: #fff8d6 !important;
    color: #5f5200 !important;
}

.z-matrix-table-plain td.z-value-positive-2 {
    background: #ffef9a !important;
    color: #514300 !important;
}

.z-matrix-table-plain td.z-value-positive-3 {
    background: #ffdd58 !important;
    color: #443600 !important;
}

.z-matrix-table-plain td.z-value-positive-4 {
    background: #ffc928 !important;
    color: #003f45 !important;
}


/* matrix legend */

.z-matrix-color-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: .68rem;
}

.z-matrix-color-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.z-matrix-color-legend i {
    width: 17px;
    height: 10px;
    border-radius: 4px;
}

.z-legend-negative {
    background: #8fcfcb;
}

.z-legend-neutral {
    background: #f8fbfa;
    border: 1px solid #dce8e6;
}

.z-legend-positive {
    background: #ffdd58;
}

.z-matrix-legend-note {
    margin-left: auto;
}


/* ---------- compact distribution cards ---------- */

.histogram-grid {
    align-items: start;
}

.histogram-grid .mini-chart-panel {
    min-height: 0 !important;
    height: 345px;
    display: flex;
    flex-direction: column;
}

.histogram-grid .mini-chart-panel canvas {
    width: 100% !important;
    height: 185px !important;
    max-height: 185px !important;
}

.distribution-model-meta {
    margin: 9px 0 6px;
}

.distribution-vote-anomaly {
    color: #b35b00 !important;
}

.distribution-vote-normal {
    color: #008d95 !important;
}

.distribution-range-note {
    min-height: 30px;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: .62rem;
    line-height: 1.35;
}

.distribution-range-note strong {
    color: #9d6900;
    font-size: inherit;
}


/* avoid oversized cards when Copilot docks */

body.copilot-docked-v13-6
.histogram-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(
                280px,
                1fr
            )
        );
}

body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel {
    height: 325px;
}

body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel canvas {
    height: 165px !important;
    max-height: 165px !important;
}

@media (max-width: 980px) {
    .histogram-grid,
    body.copilot-docked-v13-6
    .histogram-grid {
        grid-template-columns: 1fr;
    }
}


/* Lazy recommendation pagination */

.recommendation-group-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 26px 0 8px;
}

.recommendation-group-pager .muted {
    min-width: 240px;
    text-align: center;
}

.recommendation-group-pager button:disabled {
    opacity: .45;
    cursor: default;
}

.transaction-history:not([open])
.history-timeline {
    display: none;
}


.recommendation-card-ai-actions-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 4px;
}


/* === Copilot structured tables === */

.copilot-table-card {
    margin-top: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.34);
}

.copilot-table-title {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.copilot-table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.copilot-result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.4;
}

.copilot-result-table th,
.copilot-result-table td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    white-space: nowrap;
}

.copilot-result-table th {
    font-weight: 700;
    opacity: 0.78;
}

.copilot-result-table tbody tr:last-child td {
    border-bottom: 0;
}



/* === HISTOGRAM AUTO HEIGHT FIX V1 === */

/*
 * Raw anomaly-score cards contain dynamic diagnostic text.
 * Keep the chart itself at a stable height, but allow the card
 * to grow when the diagnostic requires additional lines.
 */

.histogram-grid {
    align-items: stretch;
}

.histogram-grid .mini-chart-panel {
    height: auto !important;
    min-height: 345px !important;
    box-sizing: border-box;
}

.histogram-grid .mini-chart-panel canvas {
    flex: 0 0 185px;
    height: 185px !important;
    max-height: 185px !important;
}

.distribution-range-note {
    min-height: 0;
    margin-top: 8px;
    padding-top: 2px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.distribution-range-note strong {
    display: block;
    margin-bottom: 3px;
}

/* Copilot dock narrows cards, so text may wrap more.
   Let the card grow instead of clipping the diagnostic. */
body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel {
    height: auto !important;
    min-height: 325px !important;
}

body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel canvas {
    flex-basis: 165px;
    height: 165px !important;
    max-height: 165px !important;
}

/* === END HISTOGRAM AUTO HEIGHT FIX V1 === */


/* === HISTOGRAM FOOTER LAYOUT V2 === */

/*
 * Explicitly reserve vertical space for raw-score diagnostics.
 * We do not rely only on grid auto-sizing because these cards are
 * also affected by older fixed-height rules.
 */

.histogram-grid .mini-chart-panel {
    height: 390px !important;
    min-height: 390px !important;
    overflow: hidden;
}

.histogram-grid .mini-chart-panel canvas {
    flex: 0 0 185px !important;
    height: 185px !important;
    max-height: 185px !important;
}

.distribution-range-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 7px;

    min-height: 38px !important;
    margin-top: 8px !important;
    padding: 1px 0 4px;

    color: var(--text-secondary);
    font-size: .62rem;
    line-height: 1.4;

    white-space: normal;
    overflow: visible;
}

.distribution-range-note strong {
    display: inline !important;
    margin: 0 !important;
    color: #9d6900;
    font-size: inherit;
}

.distribution-range-note span {
    color: var(--text-secondary);
}

/* Slightly shorter graph when Copilot is actually docked,
   but still leave enough room for the diagnostic footer. */

body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel {
    height: 370px !important;
    min-height: 370px !important;
}

body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel canvas {
    flex: 0 0 160px !important;
    height: 160px !important;
    max-height: 160px !important;
}

/* === END HISTOGRAM FOOTER LAYOUT V2 === */


/* =========================================================
   HISTOGRAM FOOTER FIX V3
   Keep diagnostic text physically inside each histogram card
   ========================================================= */

.histogram-grid .mini-chart-panel {
    position: relative !important;

    /*
     * Space for:
     * title + subtitle + KPI row + chart + diagnostic footer.
     */
    height: 425px !important;
    min-height: 425px !important;

    /*
     * Reserve an explicit footer zone.
     */
    padding-bottom: 68px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}


/* Keep the actual graph stable. */
.histogram-grid .mini-chart-panel canvas {
    flex: 0 0 175px !important;
    width: 100% !important;
    height: 175px !important;
    max-height: 175px !important;
}


/*
 * Diagnostic is anchored INSIDE the card instead of relying
 * on normal document flow below the Chart.js canvas.
 */
.histogram-grid .distribution-range-note {
    position: absolute !important;

    left: 17px !important;
    right: 17px !important;
    bottom: 12px !important;

    width: auto !important;
    min-height: 34px !important;
    max-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    align-items: baseline !important;

    gap: 2px 7px !important;

    font-size: .62rem !important;
    line-height: 1.4 !important;

    white-space: normal !important;
    overflow: visible !important;
}


.histogram-grid .distribution-range-note strong {
    display: inline !important;
    margin: 0 !important;

    color: #9d6900 !important;
    font-size: inherit !important;
    line-height: inherit !important;
}


.histogram-grid .distribution-range-note span {
    display: inline !important;
    margin: 0 !important;

    color: var(--text-secondary) !important;
    font-size: inherit !important;
    line-height: inherit !important;
}


/*
 * When Copilot is docked the cards become narrower.
 * Give the footer a little more vertical room instead of
 * allowing wrapped text to collide with the border.
 */
body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel {
    height: 415px !important;
    min-height: 415px !important;
    padding-bottom: 72px !important;
}


body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel canvas {
    flex: 0 0 155px !important;
    height: 155px !important;
    max-height: 155px !important;
}


body.copilot-docked-v13-6
.histogram-grid
.distribution-range-note {
    bottom: 12px !important;
    max-height: 52px !important;
}

/* === END HISTOGRAM FOOTER FIX V3 === */


/* =========================================================
   HISTOGRAM LAYOUT V4
   Fixed larger cards + diagnostic rendered below the chart
   ========================================================= */

/*
 * Use a predictable card size.
 * The diagnostic remains in normal document flow after canvas.
 */
.histogram-grid {
    align-items: stretch !important;
}

.histogram-grid .mini-chart-panel {
    position: relative !important;

    display: block !important;

    height: 470px !important;
    min-height: 470px !important;

    padding: 17px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}


/*
 * Chart itself stays compact and does not consume
 * the diagnostic footer area.
 */
.histogram-grid .mini-chart-panel canvas {
    display: block !important;

    width: 100% !important;
    height: 185px !important;
    max-height: 185px !important;

    margin: 4px 0 0 !important;

    flex: none !important;
}


/*
 * IMPORTANT:
 * This element is inserted with canvas.after(rangeNote),
 * so position: static means it is physically rendered
 * underneath the chart.
 */
.histogram-grid .distribution-range-note {
    position: static !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;

    width: 100% !important;
    height: auto !important;

    min-height: 42px !important;
    max-height: none !important;

    margin: 10px 0 0 !important;
    padding: 9px 0 0 !important;

    border-top: 1px solid var(--border);

    gap: 3px 7px !important;

    box-sizing: border-box !important;

    color: var(--text-secondary) !important;
    font-size: .64rem !important;
    line-height: 1.45 !important;

    white-space: normal !important;
    overflow: visible !important;
}


.histogram-grid .distribution-range-note strong {
    position: static !important;

    display: inline !important;
    margin: 0 !important;

    color: #9d6900 !important;

    font-size: inherit !important;
    line-height: inherit !important;
}


.histogram-grid .distribution-range-note span {
    display: inline !important;
    margin: 0 !important;

    color: var(--text-secondary) !important;

    font-size: inherit !important;
    line-height: inherit !important;
}


/*
 * Copilot makes the dashboard narrower, therefore allow
 * a little more card height in case the footer wraps.
 */
body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel {
    height: 490px !important;
    min-height: 490px !important;
}


body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel canvas {
    height: 175px !important;
    max-height: 175px !important;
}


/* === END HISTOGRAM LAYOUT V4 === */


/* =========================================================
   HISTOGRAM LAYOUT V5
   Large fixed cards with diagnostic visibly below chart
   ========================================================= */

.histogram-grid {
    align-items: stretch !important;
}


/*
 * Deliberately large fixed card.
 * We reserve enough space for:
 *
 * title
 * subtitle
 * KPI row
 * histogram
 * x-axis title
 * diagnostic footer
 */
.histogram-grid .mini-chart-panel {
    position: relative !important;
    display: block !important;

    height: 550px !important;
    min-height: 550px !important;

    padding: 17px 17px 22px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}


/* Histogram keeps a predictable size. */
.histogram-grid .mini-chart-panel canvas {
    position: static !important;
    display: block !important;

    width: 100% !important;

    height: 185px !important;
    min-height: 185px !important;
    max-height: 185px !important;

    margin: 5px 0 0 !important;

    flex: none !important;
}


/*
 * JS inserts this with canvas.after(...),
 * therefore it stays BELOW the graph in normal flow.
 */
.histogram-grid .distribution-range-note {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-height: 48px !important;
    max-height: none !important;

    margin: 16px 0 0 !important;
    padding: 11px 0 0 !important;

    border-top: 1px solid var(--border) !important;

    box-sizing: border-box !important;

    color: var(--text-secondary) !important;
    font-size: .66rem !important;
    line-height: 1.5 !important;

    white-space: normal !important;
    overflow: visible !important;
}


.histogram-grid .distribution-range-note strong {
    position: static !important;

    display: inline !important;
    margin: 0 7px 0 0 !important;

    color: #9d6900 !important;

    font-size: inherit !important;
    line-height: inherit !important;
}


.histogram-grid .distribution-range-note span {
    position: static !important;

    display: inline !important;
    margin: 0 !important;

    color: var(--text-secondary) !important;

    font-size: inherit !important;
    line-height: inherit !important;
}


/*
 * Docked Copilot = less horizontal space, so give the footer
 * even more vertical room in case the text wraps.
 */
body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel {
    height: 570px !important;
    min-height: 570px !important;
}


body.copilot-docked-v13-6
.histogram-grid
.mini-chart-panel canvas {
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
}


body.copilot-docked-v13-6
.histogram-grid
.distribution-range-note {
    min-height: 55px !important;
}


/* === END HISTOGRAM LAYOUT V5 === */


/* =========================================================
   RAW DISTRIBUTION SECTION LAYOUT V6
   Give the complete Population context section enough room
   for both rows of histogram cards and their diagnostics.
   ========================================================= */

.raw-distributions-card {
    height: auto !important;
    min-height: 1180px !important;
    max-height: none !important;

    overflow: visible !important;

    padding-bottom: 36px !important;

    box-sizing: border-box !important;
}


/*
 * Grid itself must grow with both rows.
 */
.raw-distributions-card .histogram-grid {
    height: auto !important;
    min-height: 1030px !important;
    max-height: none !important;

    overflow: visible !important;

    align-items: stretch !important;
    grid-auto-rows: 500px !important;

    row-gap: 24px !important;
}


/*
 * Each individual card now gets a predictable row height.
 */
.raw-distributions-card
.histogram-grid
.mini-chart-panel {
    height: 500px !important;
    min-height: 500px !important;
    max-height: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}


/*
 * Keep the graph smaller than the complete card so the
 * diagnostic has its own space underneath.
 */
.raw-distributions-card
.histogram-grid
.mini-chart-panel canvas {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
}


/*
 * Diagnostic footer stays in normal document flow directly
 * below the histogram.
 */
.raw-distributions-card
.distribution-range-note {
    position: static !important;

    display: block !important;

    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;

    margin: 16px 0 0 !important;
    padding: 10px 0 0 !important;

    border-top: 1px solid var(--border) !important;

    overflow: visible !important;
}


/*
 * Copilot narrows the whole dashboard and can cause wrapping.
 * Give the entire Population context section more room.
 */
body.copilot-docked-v13-6
.raw-distributions-card {
    min-height: 1250px !important;
}

body.copilot-docked-v13-6
.raw-distributions-card
.histogram-grid {
    min-height: 1100px !important;
    grid-auto-rows: 535px !important;
}

body.copilot-docked-v13-6
.raw-distributions-card
.histogram-grid
.mini-chart-panel {
    height: 535px !important;
    min-height: 535px !important;
}

/* === END RAW DISTRIBUTION SECTION LAYOUT V6 === */


/* =========================================================
   POPULATION CONTEXT COMPACT LAYOUT V7
   Reduce excessive vertical gaps only
   ========================================================= */

.raw-distributions-card {
    min-height: 820px !important;
    height: auto !important;
    padding-bottom: 24px !important;
}

.raw-distributions-card .histogram-grid {
    min-height: 0 !important;
    height: auto !important;

    grid-auto-rows: 360px !important;

    row-gap: 18px !important;
    column-gap: 20px !important;

    margin-top: 8px !important;
}

/*
 * Do NOT change the chart/footer internals here.
 * Only reduce the grid track that previously created
 * the huge blank area between rows.
 */
body.copilot-docked-v13-6
.raw-distributions-card {
    min-height: 860px !important;
}

body.copilot-docked-v13-6
.raw-distributions-card
.histogram-grid {
    min-height: 0 !important;
    grid-auto-rows: 380px !important;
    row-gap: 18px !important;
}

/* === END POPULATION CONTEXT COMPACT LAYOUT V7 === */