:root {
            --bg: #f0f2f5;
            --card-bg: #ffffff;
            --text: #1f1f1f;
            --muted-text: #333333;
            --header-bg: #10a372;
            --border: #dddddd;
            --table-head-bg: #f2f2f2;
            --row-alt-bg: #f9f9f9;
            --row-hover-bg: #e9f5ff;
            --row-active-bg: #cce5ff;
            --changed-row-bg: #fff6da;
            --changed-row-hover-bg: #ffeab1;
            --changed-cell-bg: #ffe087;
            --changed-outline: #d19a00;
            --shadow: 0 4px 12px rgba(0,0,0,0.08);
            --link: #0c6fd6;
            --link-hover: #0955a3;
        }

        body.dark-theme {
            --bg: #171b20;
            --card-bg: #232933;
            --text: #e8edf4;
            --muted-text: #cfd7e3;
            --header-bg: #0a7b57;
            --border: #3a4454;
            --table-head-bg: #2b3442;
            --row-alt-bg: #1e2530;
            --row-hover-bg: #2d394d;
            --row-active-bg: #365476;
            --changed-row-bg: #5b4613;
            --changed-row-hover-bg: #6f5712;
            --changed-cell-bg: #9a7618;
            --changed-outline: #f2bf3f;
            --shadow: 0 6px 16px rgba(0,0,0,0.35);
            --link: #7ebeff;
            --link-hover: #a7d4ff;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
            overscroll-behavior: none;
        }
        /* ---------------------------------------------------------------------
           Roboto, bundled.

           This used to be a bare `font-family: Roboto` with no fallback and no
           font file, so the dashboard rendered in whatever the viewing machine
           happened to have installed -- and any weight that machine lacked fell
           through to the browser default, Times New Roman. The Delivery Risk
           column, the only place asking for weight 600, turned serif in the
           middle of a sans table and read as corrupted data.

           These are the faces the code actually asks for. Adding a font-weight
           anywhere without adding its face here brings the bug straight back.

           Files are from @fontsource/roboto 5.2.8 and are licensed under the SIL
           Open Font License 1.1 -- NOT Apache-2.0, which is what Roboto used to
           carry before it was relicensed. The full text ships beside them in
           assets/fonts/LICENSE and must stay with them. These are static
           single-weight cuts; Google Fonts itself now serves one variable file per
           subset instead, so these are not byte-for-byte what fonts.gstatic.com
           returns.

           Paths are relative to THIS stylesheet, so they resolve the same from
           / and from /fy27/ and under the /dash-cos/ project path on Pages.
           --------------------------------------------------------------------- */
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('fonts/roboto-latin-400-normal.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('fonts/roboto-latin-500-normal.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 600;
            font-display: swap;
            src: url('fonts/roboto-latin-600-normal.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('fonts/roboto-latin-700-normal.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 800;
            font-display: swap;
            src: url('fonts/roboto-latin-800-normal.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Roboto';
            font-style: italic;
            font-weight: 400;
            font-display: swap;
            src: url('fonts/roboto-latin-400-italic.woff2') format('woff2');
        }

        body {
            /* Roboto is bundled above, so it is always present. The fallbacks remain
               deliberately: if a font file ever 404s, this degrades to the system sans
               rather than to Times. Never leave this family without a fallback. */
            /* (historical) Roboto was not bundled and no @font-face was declared, so this resolved
               against whatever was INSTALLED, which is what broke Delivery Risk. */
            font-family: Roboto, "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
            font-size: 12px;
            background: var(--bg);
            color: var(--text);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            transition: background-color 0.25s ease, color 0.25s ease;
        }
        .header {
            background: var(--header-bg);
            color: white;
            padding: 8px 12px;
            text-align: center;
            position: relative;
            min-height: 40px;
        }
        .header-title-wrap {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            max-width: calc(100% - 470px);
            white-space: nowrap;
        }
        .header-title {
            margin: 0;
            font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
            font-weight: 700;
            line-height: 1.1;
        }
        .header-total {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 3px 8px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.34);
            backdrop-filter: blur(1px);
        }
        .header-total-count {
            font-size: clamp(1.3rem, 1.08rem + 0.75vw, 1.95rem);
            font-weight: 800;
            line-height: 1;
            min-width: 2ch;
            text-align: right;
        }
        .header-total-text {
            display: flex;
            flex-direction: column;
            line-height: 1.1;
        }
        .header-total-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .header-total-meta {
            font-size: 10px;
            opacity: 0.95;
        }
        h2 {
            color: var(--muted-text);
            border-bottom: 2px solid var(--header-bg);
            padding-bottom: 1px;
            margin-bottom: 4px;
            font-size: 1.1em;
            margin-top: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        .dashboard-container {
            padding: 4px;
            flex: 1;
            min-height: 0;
        }
        .dashboard-grid {
            display: grid;
                grid-template-columns: 0.9fr 1.25fr 0.78fr 1.2fr 1.52fr; /* Slightly reduce pie width and redistribute space */
            grid-template-rows: minmax(0, 2.25fr) minmax(0, 2.75fr); /* Top row carries the facet lists; details scrolls anyway */
            grid-template-areas:
                "logos filters pkg bar pie"
                "details details details details details";
            gap: 4px;
            height: 100%;
        }

        /* Assign each card to its grid area */
        .logos-card { grid-area: logos; }
        .filters-card { grid-area: filters; }
        .pkg-card { grid-area: pkg; }
        .bar-chart-card { grid-area: bar; }
        .pie-chart-card { grid-area: pie; }
        .details-card { grid-area: details; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }

        .logos-card {
            display: grid;
            grid-template-rows: minmax(0, 1fr) auto auto;
            gap: 4px;
            justify-content: flex-start;
            align-items: stretch;
            min-height: 0;
            overflow: hidden;
        }
        .org-logos {
            width: 100%;
            height: auto;
            display: grid;
            grid-template-rows: repeat(3, minmax(0, 1fr));
            gap: clamp(2px, 0.6vh, 8px);
            min-height: 0;
            overflow-y: hidden;
            overflow-x: hidden;
            padding-right: 0;
        }
        .org-logo-block {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            gap: 2px;
            min-height: 0;
        }
        .org-logo-label {
            font-size: clamp(9px, 0.72vw, 12px);
            font-weight: 700;
            color: var(--text);
            letter-spacing: 0.03em;
        }
        .org-logo {
            width: 100%;
            height: 100%;
            max-width: 100%;
            min-width: 0;
            max-height: none;
            object-fit: contain;
            object-position: left center;
            display: block;
        }
        .org-logo-cs {
            max-height: none;
        }
        .org-logo-cos {
            max-height: none;
        }
        .org-logo-erm {
            max-height: none;
        }
        .filters-card {
            display: grid;
            grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
            /* Top row sized so a 4-value Financial Year list fits without its own scrollbar;
               Design Lead starts lower and keeps the remainder. */
            grid-template-rows: minmax(0, 0.95fr) minmax(0, 1.05fr);
            grid-template-areas:
                "fy status"
                "lead lead";
            column-gap: 10px;
            row-gap: 6px;
            min-height: 0;
        }
        .filter-section {
            min-height: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }
        .filter-section.fy-section { grid-area: fy; }
        .filter-section.status-section { grid-area: status; }
        .filter-section.lead-section { grid-area: lead; }
        .filter-section h2 {
            margin-bottom: 3px;
            font-size: clamp(12px, 0.78vw, 14px);
        }
        .filter-section .table-container {
            flex: 1;
            min-height: 0;
        }

        .summary-table th,
        .summary-table td {
            font-size: clamp(11px, 0.72vw, 13px);
        }

        .pie-chart-card {
            padding: 4px;
        }
        .pie-chart-card h2 {
            margin-bottom: 2px;
        }
        .pie-chart-card .chart-container {
            min-height: 180px;
        }

        .card {
            background: var(--card-bg);
            padding: 8px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            position: relative; /* For reset button positioning */
            transition: background-color 0.25s ease, box-shadow 0.25s ease;
        }
        .card.filters-card {
            display: grid;
        }
        .chart-container { flex-grow: 1; min-height: 150px; } /* Reduced min-height */
        .table-container { overflow: auto; position: relative; }
        .details-card .table-container { flex-grow: 1; min-height: 0; }

        table { width: 100%; border-collapse: collapse; }
        th, td {
            padding: 4px 8px;
            border: 1px solid var(--border);
            text-align: left;
            white-space: nowrap;
        }
        th.sortable {
            cursor: pointer;
            position: sticky;
            top: 0;
            z-index: 3;
            background-color: var(--table-head-bg);
        }
        th.sortable:hover { filter: brightness(0.95); }
        th.sortable::after {
            content: '';
            position: absolute;
            right: 8px;
            top: 50%;
            margin-top: -7px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            opacity: 0.3;
        }
        th.sort-asc::after {
            border-bottom: 5px solid #333;
            opacity: 1;
        }
        th.sort-desc::after {
            border-top: 5px solid #333;
            opacity: 1;
        }
        .comments-cell {
            white-space: pre-wrap; /* Changed from normal */
            word-break: break-word;
            /* No min-width: computeStableColWidths/fitNotesColumn own this column's width,
               and under table-layout:fixed a min-width here silently outvotes them. */
        }
        .link-cell { text-align: center; }
        .stage-cell { white-space: normal; word-break: break-word; }
        /* Data table uses separated borders so borders travel WITH the sticky header/first
           column. With border-collapse:collapse the table owns the borders, so the frozen
           header leaked the row above it and jumped ~1px when scrolling engaged. */
        #data-table table { border-collapse: separate; border-spacing: 0; }
        #data-table th, #data-table td { border-width: 0 1px 1px 0; }
        #data-table thead th { border-top-width: 1px; box-shadow: none; }
        #data-table th:first-child, #data-table td:first-child { border-left-width: 1px; }
        .cell-link-icon {
            color: #0078d4;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.15s;
        }
        .cell-link-icon svg { width: 15px; height: 15px; fill: currentColor; }
        .cell-link-icon:hover { opacity: 0.65; }
        body.dark-theme .cell-link-icon { color: #4aa3e0; }
        thead th {
            background-color: var(--table-head-bg);
            box-shadow: inset 0 -1px 0 var(--border);
        }
        tbody tr:nth-child(even) { background-color: var(--row-alt-bg); }
        .summary-table tbody tr { cursor: pointer; }
        .summary-table tbody tr:hover { background-color: var(--row-hover-bg); }
        .summary-table tbody tr.active { background-color: var(--row-active-bg); font-weight: bold; }
        .summary-table tbody tr.faded {
            opacity: 0.38;
        }

        a {
            color: var(--link);
        }
        a:hover {
            color: var(--link-hover);
        }

        .reset-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 3px 8px;
            font-size: 10px;
            border-radius: 7px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.2s ease;
        }
        .reset-btn:hover {
            background-color: #c0392b;
        }
        .reset-btn:disabled {
            background-color: #b7bdc4;
            color: #eef1f5;
            cursor: not-allowed;
            opacity: 0.7;
        }
        .reset-btn:disabled:hover {
            background-color: #b7bdc4;
        }
        #reset-all-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: normal;
            min-width: 90px;
            max-width: 120px;
            line-height: 1.15;
            padding: 5px 10px 5px 24px;
            text-align: center;
        }
        #reset-all-btn .btn-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 11px;
            line-height: 1;
        }
        #reset-all-btn .btn-wrap {
            display: inline-block;
            white-space: normal;
            text-align: center;
        }
        h2 .reset-btn {
            position: absolute;
            right: -5px;
            top: -5px;
            margin: 0;
        }

        .header-controls {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
        }

        .fy-switch-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            background: #0078d4;
            color: #ffffff;
            border: 1px solid #0078d4;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            transition: background 0.15s;
        }
        .fy-switch-btn:hover { background: #005fa3; }

        .last-updated {
            font-size: 10px;
            line-height: 1.3;
            color: var(--muted-text);
            white-space: normal;
            margin-top: 0;
            padding-top: 3px;
            border-top: 1px solid var(--border);
            text-align: center;
        }

        .last-updated strong {
            font-weight: 700;
            display: block;
        }

        .filter-hint {
            margin-top: 0;
            padding-top: 4px;
            border-top: 1px dashed var(--border);
            color: var(--muted-text);
            font-size: 9px;
            line-height: 1.25;
            text-align: center;
        }

        .theme-btn {
            background-color: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.45);
            width: 25px;
            height: 25px;
            min-width: 25px;
            padding: 0;
            font-size: 19px;
            line-height: 1;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 700;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }

        .theme-btn:hover {
            background-color: rgba(255, 255, 255, 0.35);
            transform: translateY(-1px);
        }

        body.dark-theme .theme-btn {
            background-color: rgba(255, 255, 255, 0.12);
            color: #f4f7ff;
            border-color: rgba(255, 255, 255, 0.35);
        }

        body.dark-theme .theme-btn:hover {
            background-color: rgba(255, 255, 255, 0.22);
        }

        .theme-icon {
            display: inline-block;
            line-height: 1;
        }

        .theme-icon-moon {
            transform: rotate(320deg);
        }

        .details-title-wrap {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .change-legend {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 600;
            color: var(--muted-text);
        }

        .change-filter-btn {
            background: transparent;
            color: var(--muted-text);
            border: 1px solid var(--border);
            padding: 3px 8px;
            font-size: 11px;
            line-height: 1.2;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        .change-filter-btn:hover {
            background: var(--row-hover-bg);
        }

        .change-filter-btn.active {
            background: var(--changed-cell-bg);
            border-color: var(--changed-outline);
            color: var(--text);
        }

        .change-filter-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            background: transparent;
        }

        .compare-baseline-wrap {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-weight: 600;
            color: var(--muted-text);
        }

        .compare-baseline-wrap label {
            white-space: nowrap;
        }

        #baseline-select {
            font-size: 11px;
            padding: 2px 4px;
            border: 1px solid var(--border);
            border-radius: 5px;
            background: var(--card-bg);
            color: var(--text);
            cursor: pointer;
            width: min(220px, 62vw);
            max-width: 125%;
        }

        .change-legend-swatch {
            width: 10px;
            height: 10px;
            border-radius: 3px;
            border: 1px solid var(--changed-outline);
            background-color: var(--changed-cell-bg);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
        }

        .changed-row {
            background-color: var(--changed-row-bg) !important;
        }

        .changed-row:hover {
            background-color: var(--changed-row-hover-bg) !important;
        }

        td.changed-cell {
            background-color: var(--changed-cell-bg) !important;
            font-weight: 700;
            box-shadow: inset 0 0 0 1px var(--changed-outline);
            position: relative;
        }

        .diff-tooltip {
            position: fixed;
            background: white;
            color: #1f1f1f;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 9999;
            width: min(760px, calc(100vw - 24px));
            min-width: min(560px, calc(100vw - 24px));
            max-width: calc(100vw - 24px);
            max-height: min(420px, calc(100vh - 24px));
            overflow-y: auto;
            overflow-x: hidden;
            pointer-events: auto;
            white-space: normal;
            word-wrap: break-word;
        }

        body.dark-theme .diff-tooltip {
            background: #ffffff;
            color: #1f1f1f;
            border-color: #b8c0cc;
        }

        .diff-tooltip::after {
            display: none;
        }

        /* Timeline Tooltip Styling */
        .diff-tooltip.history-popup {
            padding: 0 !important;
        }
        .history-popup .history-tooltip-content {
            padding: 0 !important;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: #1f1f1f;
        }
        .history-title {
            position: sticky;
            top: 0;
            background: #ffffff;
            margin: 0;
            padding: 14px 16px 10px 16px;
            font-size: 14px;
            font-weight: 600;
            color: #555555;
            border-bottom: 1px solid #dddddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }
        .history-title strong {
            color: #000000;
        }
        .timeline {
            position: relative;
            margin: 0 16px 16px 24px;
            padding-left: 16px;
            border-left: 2px solid #e1e4e8;
        }
        .timeline-item {
            position: relative;
            margin-bottom: 20px;
        }
        .timeline-item:last-child {
            margin-bottom: 4px;
        }
        .timeline-marker {
            position: absolute;
            left: -22px;
            top: 4px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #0078d4;
            border: 2px solid #ffffff;
        }
        .timeline-item.current-item .timeline-marker {
            background-color: #2ca02c;
            box-shadow: 0 0 0 3px rgba(44, 160, 44, 0.2);
        }
        .timeline-item.not-created .timeline-marker {
            background-color: #a0a0a0;
        }
        .timeline-header {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 6px;
        }
        .timeline-date {
            font-size: 12px;
            font-weight: 600;
            color: #1f1f1f;
        }
        .timeline-badge {
            font-size: 10px;
            background-color: #f1f3f5;
            color: #555555;
            padding: 1px 6px;
            border-radius: 10px;
            border: 1px solid #dddddd;
        }
        .timeline-item.current-item .timeline-badge.current-badge {
            background-color: #dcffe4;
            color: #22863a;
            border-color: #34d058;
        }
        .timeline-body {
            font-size: 12px;
            line-height: 1.5;
            background-color: #f6f8fa;
            padding: 8px 12px;
            border-radius: 6px;
            white-space: pre-wrap;
            word-break: break-word;
            border: 1px solid #e1e4e8;
            color: #24292e;
        }
        .timeline-item.current-item .timeline-body {
            background-color: #ffffff;
            border-color: #34d058;
        }
        .timeline-body.empty-value {
            color: #6a737d;
            font-style: italic;
        }

        /* Row Hover Helper & Highlighting Styling */
        .row-hover-tooltip {
            position: fixed;
            background: rgba(31, 31, 31, 0.95);
            color: #ffffff;
            font-size: 11px;
            font-weight: 500;
            padding: 5px 9px;
            border-radius: 4px;
            pointer-events: none;
            z-index: 10000;
            box-shadow: 0 3px 8px rgba(0,0,0,0.25);
            transition: opacity 0.1s ease;
            opacity: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        .project-id-cell {
            font-weight: 600;
            position: sticky;
            left: 0;
            z-index: 2;
            background-color: var(--card-bg);
        }
        tbody tr:nth-child(even) .project-id-cell { background-color: var(--row-alt-bg); }
        .changed-row .project-id-cell { background-color: var(--changed-row-bg) !important; }
        .changed-row:hover .project-id-cell { background-color: var(--changed-row-hover-bg) !important; }
        td.project-id-cell.changed-cell { background-color: var(--changed-cell-bg) !important; }
        /* first column header: freeze in both axes (corner) above body sticky cells */
        thead th[data-column="Unique_ID"] {
            left: 0;
            z-index: 4;
        }
        .comments-cell {
            white-space: pre-wrap;
            word-break: break-word;
        }
        tr.history-active-row td {
            background-color: var(--row-active-bg) !important;
            border-top: 2px solid var(--link) !important;
            border-bottom: 2px solid var(--link) !important;
        }
        tr.history-active-row td:first-child {
            border-left: 2px solid var(--link) !important;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        tr.history-active-row td:last-child {
            border-right: 2px solid var(--link) !important;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        /* Unified Project Changes Popup Styling */
        .changes-section {
            padding: 16px 16px 0 16px;
            margin-bottom: 16px;
            border-bottom: 1px dashed #dddddd;
            padding-bottom: 16px;
        }
        .timeline-title {
            font-size: 13px;
            font-weight: 600;
            color: #0078d4;
            margin: 16px 16px 10px 16px;
        }
        .delta-toggle-btn {
            font-size: 11px;
            font-weight: 600;
            color: #0078d4;
            background: #eef6fd;
            border: 1px solid #bcdcf5;
            border-radius: 12px;
            padding: 3px 10px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            white-space: nowrap;
        }
        .delta-toggle-btn:hover {
            background: #dcecfb;
        }
        .delta-toggle-btn.active {
            background: #0078d4;
            color: #ffffff;
            border-color: #0078d4;
        }
        .timeline-body.delta-body {
            border-left: 3px solid #5cb85c;
            padding-left: 8px;
            background: rgba(92, 184, 92, 0.06);
        }
        .delta-note {
            margin-top: 6px;
            font-size: 11px;
            font-style: italic;
            color: #6a737d;
        }
        .changes-section-title {
            font-size: 13px;
            font-weight: 600;
            color: #d19a00;
            margin-bottom: 12px;
        }
        .changes-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .change-row-item {
            background: #fffdf5;
            border: 1px solid #ffeeba;
            border-radius: 6px;
            padding: 8px 12px;
        }
        .change-field-header {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            color: #856404;
            margin-bottom: 6px;
        }
        .change-inline-diff {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
        }
        .old-val-pill {
            background-color: #f8d7da;
            color: #721c24;
            text-decoration: line-through;
            padding: 2px 6px;
            border-radius: 4px;
        }
        .new-val-pill {
            background-color: #d4edda;
            color: #155724;
            padding: 2px 6px;
            border-radius: 4px;
        }
        .diff-arrow {
            color: #856404;
            font-weight: bold;
        }
        .change-diff-block {
            margin-top: 4px;
        }

        @media (max-width: 1600px) {
            .dashboard-grid {
                grid-template-columns: 0.7fr 1.4fr 0.8fr 1.18fr 1.45fr;
            }

            .filter-section h2 {
                font-size: 11px;
            }

            .summary-table th,
            .summary-table td {
                font-size: 10px;
            }

            .logos-card {
                padding: 6px;
            }

            .last-updated {
                font-size: 9px;
            }

            .filter-hint {
                font-size: 8px;
            }

            .pie-chart-card {
                padding: 3px;
            }

            .pie-chart-card h2 {
                margin-bottom: 1px;
            }

            .pie-chart-card .chart-container {
                min-height: 172px;
            }
        }

        @media (max-width: 900px) {
            .header {
                min-height: 84px;
            }

            .header-title-wrap {
                top: 35%;
                max-width: calc(100% - 16px);
            }

            .header-controls {
                top: auto;
                bottom: 4px;
                transform: none;
            }

            .header-total {
                top: auto;
                bottom: 4px;
                left: 8px;
                transform: none;
                gap: 6px;
                padding: 3px 6px;
            }

            .header-total-count {
                font-size: 1.2rem;
            }

            .header-total-label,
            .header-total-meta {
                font-size: 9px;
            }

            .last-updated {
                font-size: 9px;
            }

            .org-logo-label {
                font-size: clamp(8px, 2.2vw, 11px);
            }

            .filters-card {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(3, minmax(0, 1fr));
                grid-template-areas:
                    "fy"
                    "status"
                    "lead";
            }
        }