/* =========================================================
   Darkscope / 360TPRM Theme Layer
   Load this file AFTER site.css.
   Supported theme hooks:
      <body data-theme="dark">  or  <body class="theme-dark">
      <body data-theme="light"> or  <body class="theme-light">
   ========================================================= */

/* ---------- Base variables ---------- */
:root,
body[data-theme="dark"],
body.theme-dark {
    --ds-bg-0: #020617;
    --ds-bg-1: #071126;
    --ds-bg-2: #0f172a;
    --ds-bg-3: #111827;

    --ds-surface-0: rgba(15, 23, 42, 0.42);
    --ds-surface-1: rgba(15, 23, 42, 0.58);
    --ds-surface-2: rgba(30, 41, 59, 0.50);
    --ds-surface-3: rgba(2, 6, 23, 0.68);

    --ds-card-bg: rgba(15, 23, 42, 0.48);
    --ds-card-bg-hover: rgba(15, 23, 42, 0.62);
    --ds-panel-bg: rgba(15, 23, 42, 0.78);
    --ds-dialog-bg: rgba(15, 23, 42, 0.72);
    --ds-table-bg: rgba(15, 23, 42, 0.42);
    --ds-table-header-bg: linear-gradient(90deg, rgba(37,99,235,0.16) 0%, rgba(30,41,59,0.10) 100%);
    --ds-row-alt-bg: rgba(255,255,255,0.018);
    --ds-row-hover-bg: linear-gradient(90deg, rgba(37,99,235,0.12), rgba(255,255,255,0.02));

    --ds-text: rgba(255,255,255,0.94);
    --ds-text-strong: #ffffff;
    --ds-text-muted: rgba(255,255,255,0.64);
    --ds-text-soft: rgba(255,255,255,0.50);
    --ds-text-inverse: #0f172a;

    --ds-border: rgba(255,255,255,0.07);
    --ds-border-strong: rgba(96,165,250,0.18);
    --ds-border-hover: rgba(96,165,250,0.34);

    --ds-primary: #60a5fa;
    --ds-primary-strong: #2563eb;
    --ds-primary-soft: rgba(37,99,235,0.16);
    --ds-danger: #ef4444;
    --ds-warning: #f59e0b;
    --ds-success: #22c55e;

    --ds-shadow: 0 18px 45px rgba(0,0,0,0.38);
    --ds-shadow-soft: 0 8px 32px rgba(0,0,0,0.35);
    --ds-glass-blur: blur(18px);

    color-scheme: dark;
}

body[data-theme="light"],
body.theme-light {
    --ds-bg-0: #f8fafc;
    --ds-bg-1: #f1f5f9;
    --ds-bg-2: #e2e8f0;
    --ds-bg-3: #cbd5e1;

    --ds-surface-0: rgba(255, 255, 255, 0.76);
    --ds-surface-1: rgba(255, 255, 255, 0.88);
    --ds-surface-2: rgba(248, 250, 252, 0.88);
    --ds-surface-3: rgba(241, 245, 249, 0.92);

    --ds-card-bg: rgba(255, 255, 255, 0.82);
    --ds-card-bg-hover: rgba(255, 255, 255, 0.94);
    --ds-panel-bg: rgba(248, 250, 252, 0.92);
    --ds-dialog-bg: rgba(255, 255, 255, 0.92);
    --ds-table-bg: rgba(255, 255, 255, 0.84);
    --ds-table-header-bg: linear-gradient(90deg, rgba(37,99,235,0.14) 0%, rgba(226,232,240,0.82) 100%);
    --ds-row-alt-bg: rgba(15,23,42,0.025);
    --ds-row-hover-bg: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(255,255,255,0.60));

    --ds-text: rgba(15,23,42,0.92);
    --ds-text-strong: #020617;
    --ds-text-muted: rgba(51,65,85,0.76);
    --ds-text-soft: rgba(71,85,105,0.62);
    --ds-text-inverse: #ffffff;

    --ds-border: rgba(15,23,42,0.10);
    --ds-border-strong: rgba(37,99,235,0.22);
    --ds-border-hover: rgba(37,99,235,0.38);

    --ds-primary: #2563eb;
    --ds-primary-strong: #1d4ed8;
    --ds-primary-soft: rgba(37,99,235,0.12);
    --ds-danger: #dc2626;
    --ds-warning: #d97706;
    --ds-success: #15803d;

    --ds-shadow: 0 18px 45px rgba(15,23,42,0.14);
    --ds-shadow-soft: 0 8px 32px rgba(15,23,42,0.10);
    --ds-glass-blur: blur(14px);

    color-scheme: light;
}

/* ---------- Page backgrounds ---------- */
body[data-theme="dark"] .bg-tpms,
body.theme-dark .bg-tpms {
    background:
        radial-gradient(circle at 70% 20%, rgba(37,99,235,0.12), transparent 40%),
        linear-gradient(135deg, #111827 0%, #020617 100%) !important;
}

body[data-theme="light"] .bg-tpms,
body.theme-light .bg-tpms,
body[data-theme="light"] .bg-default,
body.theme-light .bg-default,
body[data-theme="light"] .bg-analytics,
body.theme-light .bg-analytics {
    background:
        radial-gradient(circle at 70% 20%, rgba(37,99,235,0.10), transparent 42%),
        linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

body[data-theme="dark"] .page,
body.theme-dark .page,
body[data-theme="dark"] .scroll-page,
body.theme-dark .scroll-page {
    color: var(--ds-text);
}

body[data-theme="light"] .page,
body.theme-light .page,
body[data-theme="light"] .scroll-page,
body.theme-light .scroll-page {
    color: var(--ds-text);
}

/* ---------- General typography ---------- */
body[data-theme] .mud-typography,
body.theme-dark .mud-typography,
body.theme-light .mud-typography,
body[data-theme] .page-title,
body.theme-dark .page-title,
body.theme-light .page-title,
body[data-theme] .chart-title,
body.theme-dark .chart-title,
body.theme-light .chart-title,
body[data-theme] .risk-label,
body.theme-dark .risk-label,
body.theme-light .risk-label {
    color: var(--ds-text) !important;
}

body[data-theme] .page-subtitle,
body.theme-dark .page-subtitle,
body.theme-light .page-subtitle,
body[data-theme] .dependency-subtitle,
body.theme-dark .dependency-subtitle,
body.theme-light .dependency-subtitle,
body[data-theme] .risk-description,
body.theme-dark .risk-description,
body.theme-light .risk-description,
body[data-theme] .chart-summary-row,
body.theme-dark .chart-summary-row,
body.theme-light .chart-summary-row,
body[data-theme] .supplier-card .mud-typography-caption,
body.theme-dark .supplier-card .mud-typography-caption,
body.theme-light .supplier-card .mud-typography-caption {
    color: var(--ds-text-muted) !important;
}

/* ---------- Core cards / glass surfaces ---------- */
body[data-theme] .dashboard-kpi,
body[data-theme] .tprm-table,
body[data-theme] .tprm-chart-card,
body[data-theme] .glass-form-card,
body[data-theme] .glass-paper,
body[data-theme] .value-chain-card,
body[data-theme] .customer-tile,
body[data-theme] .dashboard-card,
body[data-theme] .process-card,
body[data-theme] .treatment-card,
body[data-theme] .treatment-response-card,
body[data-theme] .attachment-row,
body.theme-dark .dashboard-kpi,
body.theme-dark .tprm-table,
body.theme-dark .tprm-chart-card,
body.theme-dark .glass-form-card,
body.theme-dark .glass-paper,
body.theme-dark .value-chain-card,
body.theme-dark .customer-tile,
body.theme-dark .dashboard-card,
body.theme-dark .process-card,
body.theme-dark .treatment-card,
body.theme-dark .treatment-response-card,
body.theme-dark .attachment-row,
body.theme-light .dashboard-kpi,
body.theme-light .tprm-table,
body.theme-light .tprm-chart-card,
body.theme-light .glass-form-card,
body.theme-light .glass-paper,
body.theme-light .value-chain-card,
body.theme-light .customer-tile,
body.theme-light .dashboard-card,
body.theme-light .process-card,
body.theme-light .treatment-card,
body.theme-light .treatment-response-card,
body.theme-light .attachment-row {
    background: var(--ds-card-bg) !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border) !important;
    box-shadow: var(--ds-shadow-soft);
    backdrop-filter: var(--ds-glass-blur);
    -webkit-backdrop-filter: var(--ds-glass-blur);
}

body[data-theme] .tprm-chart-card:hover,
body.theme-dark .tprm-chart-card:hover,
body.theme-light .tprm-chart-card:hover,
body[data-theme] .supplier-card:hover,
body.theme-dark .supplier-card:hover,
body.theme-light .supplier-card:hover {
    background: var(--ds-card-bg-hover) !important;
    border-color: var(--ds-border-hover) !important;
}

/* ---------- Supplier analytics exposure cards ---------- */
body[data-theme] .tprm-analytics-card,
body.theme-dark .tprm-analytics-card,
body.theme-light .tprm-analytics-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-height: 108px;
    background: transparent !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border-strong);
}

body[data-theme] .tprm-analytics-card span,
body.theme-dark .tprm-analytics-card span,
body.theme-light .tprm-analytics-card span {
    color: var(--ds-text-strong);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
}

body[data-theme] .tprm-analytics-card strong,
body.theme-dark .tprm-analytics-card strong,
body.theme-light .tprm-analytics-card strong {
    margin: 0;
    color: var(--ds-success);
    font-size: 1.45rem;
    line-height: 1;
}

body[data-theme] .tprm-analytics-card small,
body.theme-dark .tprm-analytics-card small,
body.theme-light .tprm-analytics-card small {
    color: var(--ds-text-muted);
    font-size: .76rem;
    line-height: 1.1;
}

body[data-theme] .tprm-analytics-card:hover,
body[data-theme] .tprm-analytics-card.is-active,
body.theme-dark .tprm-analytics-card:hover,
body.theme-dark .tprm-analytics-card.is-active,
body.theme-light .tprm-analytics-card:hover,
body.theme-light .tprm-analytics-card.is-active {
    background: color-mix(in srgb, var(--ds-success) 8%, transparent) !important;
    border-color: var(--ds-success);
}

/* Supplier analytics inventory keeps the page surface visible behind the grid. */
body[data-theme] .tprm-analytics-supplier-grid,
body[data-theme] .tprm-analytics-supplier-grid .mud-table-container,
body[data-theme] .tprm-analytics-supplier-grid .mud-table-root,
body[data-theme] .tprm-analytics-supplier-grid .mud-table-body,
body.theme-dark .tprm-analytics-supplier-grid,
body.theme-light .tprm-analytics-supplier-grid {
    background: transparent !important;
}

body[data-theme] .tprm-analytics-supplier-grid .mud-table-body tr,
body.theme-dark .tprm-analytics-supplier-grid .mud-table-body tr,
body.theme-light .tprm-analytics-supplier-grid .mud-table-body tr {
    cursor: pointer;
}

body[data-theme] .tprm-analytics-cirs-score,
body.theme-dark .tprm-analytics-cirs-score,
body.theme-light .tprm-analytics-cirs-score {
    color: var(--ds-text-strong);
    font-weight: 700;
}

body[data-theme] .tprm-analytics-cirs-score.is-na,
body.theme-dark .tprm-analytics-cirs-score.is-na,
body.theme-light .tprm-analytics-cirs-score.is-na {
    color: var(--ds-text-muted);
    font-weight: 500;
}

body[data-theme] .supplier-card,
body.theme-dark .supplier-card,
body.theme-light .supplier-card {
    background: linear-gradient(145deg, var(--ds-surface-2), var(--ds-surface-3)) !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border) !important;
    box-shadow: var(--ds-shadow-soft);
}

/* ---------- Tables ---------- */
body[data-theme] .tprm-table .mud-table-head,
body.theme-dark .tprm-table .mud-table-head,
body.theme-light .tprm-table .mud-table-head {
    background: var(--ds-table-header-bg) !important;
}

body[data-theme] .tprm-table .mud-table-head th,
body[data-theme] .tprm-table .mud-table-sort-label,
body.theme-dark .tprm-table .mud-table-head th,
body.theme-dark .tprm-table .mud-table-sort-label,
body.theme-light .tprm-table .mud-table-head th,
body.theme-light .tprm-table .mud-table-sort-label {
    color: var(--ds-text-strong) !important;
}

body[data-theme] .tprm-table .mud-table-body tr:nth-child(even),
body.theme-dark .tprm-table .mud-table-body tr:nth-child(even),
body.theme-light .tprm-table .mud-table-body tr:nth-child(even) {
    background: var(--ds-row-alt-bg) !important;
}

body[data-theme] .tprm-table .mud-table-body tr:hover,
body.theme-dark .tprm-table .mud-table-body tr:hover,
body.theme-light .tprm-table .mud-table-body tr:hover {
    background: var(--ds-row-hover-bg) !important;
}

body[data-theme] .tprm-table .mud-table-body td,
body.theme-dark .tprm-table .mud-table-body td,
body.theme-light .tprm-table .mud-table-body td {
    color: var(--ds-text) !important;
    border-bottom-color: var(--ds-border) !important;
}

body[data-theme] .tprm-table .mud-table-pagination,
body.theme-dark .tprm-table .mud-table-pagination,
body.theme-light .tprm-table .mud-table-pagination {
    background: var(--ds-surface-0) !important;
    color: var(--ds-text) !important;
    border-top-color: var(--ds-border) !important;
}

body[data-theme] .mud-table-cell,
body.theme-dark .mud-table-cell,
body.theme-light .mud-table-cell {
    color: var(--ds-text) !important;
}

/* ---------- Forms, inputs, selects ---------- */
body[data-theme] .mud-input,
body[data-theme] .mud-input-control,
body[data-theme] .mud-select,
body[data-theme] .mud-select-input,
body[data-theme] input,
body[data-theme] textarea,
body.theme-dark .mud-input,
body.theme-dark .mud-input-control,
body.theme-dark .mud-select,
body.theme-dark .mud-select-input,
body.theme-dark input,
body.theme-dark textarea,
body.theme-light .mud-input,
body.theme-light .mud-input-control,
body.theme-light .mud-select,
body.theme-light .mud-select-input,
body.theme-light input,
body.theme-light textarea {
    color: var(--ds-text) !important;
}

body[data-theme] .mud-input-label,
body.theme-dark .mud-input-label,
body.theme-light .mud-input-label {
    color: var(--ds-text-muted) !important;
}

body[data-theme] .mud-input-slot,
body.theme-dark .mud-input-slot,
body.theme-light .mud-input-slot,
body[data-theme] .tprm-search .mud-input-control,
body.theme-dark .tprm-search .mud-input-control,
body.theme-light .tprm-search .mud-input-control {
    background: var(--ds-surface-0) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text) !important;
}

body[data-theme] .tprm-search input,
body.theme-dark .tprm-search input,
body.theme-light .tprm-search input {
    color: var(--ds-text) !important;
}

body[data-theme] .tprm-search .mud-input-adornment,
body.theme-dark .tprm-search .mud-input-adornment,
body.theme-light .tprm-search .mud-input-adornment {
    color: var(--ds-text-muted) !important;
}

/* ---------- Dialogs ---------- */
body[data-theme] .glass-dialog,
body.theme-dark .glass-dialog,
body.theme-light .glass-dialog {
    background: var(--ds-dialog-bg) !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border-strong) !important;
}

body[data-theme] .glass-dialog .mud-dialog-title,
body.theme-dark .glass-dialog .mud-dialog-title,
body.theme-light .glass-dialog .mud-dialog-title {
    color: var(--ds-text-strong) !important;
    background: linear-gradient(90deg, rgba(96,165,250,0.10), rgba(214,31,55,0.08)) !important;
    border-bottom-color: var(--ds-border) !important;
}

body[data-theme] .glass-dialog .mud-dialog-actions,
body.theme-dark .glass-dialog .mud-dialog-actions,
body.theme-light .glass-dialog .mud-dialog-actions {
    background: var(--ds-surface-0) !important;
    border-top-color: var(--ds-border) !important;
}

body[data-theme="light"] .glass-dialog-overlay,
body.theme-light .glass-dialog-overlay {
    background: rgba(15, 23, 42, 0.30) !important;
}

/* ---------- Navigation dock ---------- */
body[data-theme] .tprm-dock,
body.theme-dark .tprm-dock,
body.theme-light .tprm-dock {
    background: var(--ds-surface-0) !important;
    border-color: var(--ds-border) !important;
    box-shadow: var(--ds-shadow-soft);
}

body[data-theme] .tprm-dock-item,
body.theme-dark .tprm-dock-item,
body.theme-light .tprm-dock-item,
body[data-theme] .tprm-dock-item span,
body.theme-dark .tprm-dock-item span,
body.theme-light .tprm-dock-item span {
    color: var(--ds-text) !important;
}

/* ---------- Map / dependency UI ---------- */
body[data-theme] .dependency-map-page,
body.theme-dark .dependency-map-page,
body.theme-light .dependency-map-page,
body[data-theme] .map-view-switch,
body.theme-dark .map-view-switch,
body.theme-light .map-view-switch,
body[data-theme] .supplier-control-filterbar,
body.theme-dark .supplier-control-filterbar,
body.theme-light .supplier-control-filterbar,
body[data-theme] .dock-header,
body.theme-dark .dock-header,
body.theme-light .dock-header {
    background: var(--ds-panel-bg) !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border-strong) !important;
}

body[data-theme] .process-tree,
body.theme-dark .process-tree,
body.theme-light .process-tree {
    border-left-color: var(--ds-border-strong) !important;
}

body[data-theme] .process-node::before,
body.theme-dark .process-node::before,
body.theme-light .process-node::before {
    background: var(--ds-border-hover) !important;
}

body[data-theme] .control-treatment-panel,
body.theme-dark .control-treatment-panel,
body.theme-light .control-treatment-panel,
body[data-theme] .treatment-response-toggle,
body.theme-dark .treatment-response-toggle,
body.theme-light .treatment-response-toggle {
    background: var(--ds-surface-0) !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border) !important;
}

/* ---------- Buttons ---------- */
body[data-theme] .glass-add-button,
body.theme-dark .glass-add-button,
body.theme-light .glass-add-button {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(37,99,235,0.90), rgba(29,78,216,0.82)) !important;
    border-color: var(--ds-border-strong) !important;
}

body[data-theme="light"] .mud-button-text,
body.theme-light .mud-button-text {
    color: var(--ds-primary) !important;
}

/* ---------- Icons ---------- */
body[data-theme] .node-header .mud-icon-root,
body[data-theme] .section-header .mud-icon-root,
body[data-theme] .chart-header-icon,
body.theme-dark .node-header .mud-icon-root,
body.theme-dark .section-header .mud-icon-root,
body.theme-dark .chart-header-icon,
body.theme-light .node-header .mud-icon-root,
body.theme-light .section-header .mud-icon-root,
body.theme-light .chart-header-icon {
    color: var(--ds-primary) !important;
}

body[data-theme] .mud-icon-button,
body.theme-dark .mud-icon-button,
body.theme-light .mud-icon-button {
    color: var(--ds-primary) !important;
}

/* ---------- Charts / summaries ---------- */
body[data-theme] .chart-summary,
body.theme-dark .chart-summary,
body.theme-light .chart-summary {
    border-top-color: var(--ds-border) !important;
}

body[data-theme] .chart-summary-row strong,
body.theme-dark .chart-summary-row strong,
body.theme-light .chart-summary-row strong {
    color: var(--ds-text-strong) !important;
}

body[data-theme] .tprm-chart-card .mud-chart-legend,
body[data-theme] .tprm-chart-card .mud-chart,
body.theme-dark .tprm-chart-card .mud-chart-legend,
body.theme-dark .tprm-chart-card .mud-chart,
body.theme-light .tprm-chart-card .mud-chart-legend,
body.theme-light .tprm-chart-card .mud-chart {
    color: var(--ds-text) !important;
}

/* ---------- Scrollbars ---------- */
body[data-theme] .vertical-scroll-only .mud-table-container,
body[data-theme] .unmapped-suppliers-sidepanel .supplier-row,
body.theme-dark .vertical-scroll-only .mud-table-container,
body.theme-dark .unmapped-suppliers-sidepanel .supplier-row,
body.theme-light .vertical-scroll-only .mud-table-container,
body.theme-light .unmapped-suppliers-sidepanel .supplier-row {
    scrollbar-width: thin;
    scrollbar-color: var(--ds-border-hover) transparent;
}

body[data-theme] .vertical-scroll-only .mud-table-container::-webkit-scrollbar,
body[data-theme] .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar,
body.theme-dark .vertical-scroll-only .mud-table-container::-webkit-scrollbar,
body.theme-dark .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar,
body.theme-light .vertical-scroll-only .mud-table-container::-webkit-scrollbar,
body.theme-light .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar {
    width: 8px;
}

body[data-theme] .vertical-scroll-only .mud-table-container::-webkit-scrollbar-track,
body[data-theme] .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-track,
body.theme-dark .vertical-scroll-only .mud-table-container::-webkit-scrollbar-track,
body.theme-dark .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-track,
body.theme-light .vertical-scroll-only .mud-table-container::-webkit-scrollbar-track,
body.theme-light .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-track {
    background: transparent;
}

body[data-theme] .vertical-scroll-only .mud-table-container::-webkit-scrollbar-thumb,
body[data-theme] .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-thumb,
body.theme-dark .vertical-scroll-only .mud-table-container::-webkit-scrollbar-thumb,
body.theme-dark .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-thumb,
body.theme-light .vertical-scroll-only .mud-table-container::-webkit-scrollbar-thumb,
body.theme-light .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-thumb {
    background: var(--ds-border-hover);
    border-radius: 20px;
}

/* ---------- Risk chips: light mode needs stronger contrast ---------- */
body[data-theme="light"] .risk-chip.unknown,
body.theme-light .risk-chip.unknown {
    background: rgba(100,116,139,0.15) !important;
    color: #334155 !important;
}

body[data-theme="light"] .risk-chip.low,
body.theme-light .risk-chip.low {
    background: rgba(34,197,94,0.16) !important;
    color: #166534 !important;
}

body[data-theme="light"] .risk-chip.medium,
body.theme-light .risk-chip.medium {
    background: rgba(234,179,8,0.18) !important;
    color: #854d0e !important;
}

body[data-theme="light"] .risk-chip.high,
body.theme-light .risk-chip.high {
    background: rgba(249,115,22,0.18) !important;
    color: #9a3412 !important;
}

body[data-theme="light"] .risk-chip.critical,
body.theme-light .risk-chip.critical {
    background: rgba(239,68,68,0.18) !important;
    color: #991b1b !important;
}

/* ---------- MudBlazor paper/popover defaults ---------- */
body[data-theme] .mud-paper,
body.theme-dark .mud-paper,
body.theme-light .mud-paper {
    color: var(--ds-text);
}

body[data-theme="light"] .mud-popover,
body.theme-light .mud-popover {
    background: rgba(255,255,255,0.96) !important;
    color: var(--ds-text) !important;
    border: 1px solid var(--ds-border) !important;
}

body[data-theme="dark"] .mud-popover,
body.theme-dark .mud-popover {
    background: rgba(15,23,42,0.96) !important;
    color: var(--ds-text) !important;
    border: 1px solid var(--ds-border) !important;
}

/* ---------- Utility helpers ---------- */
.theme-surface {
    background: var(--ds-card-bg) !important;
    color: var(--ds-text) !important;
    border: 1px solid var(--ds-border) !important;
}

.theme-text {
    color: var(--ds-text) !important;
}

.theme-muted {
    color: var(--ds-text-muted) !important;
}

/* ---------- Darkscope administration tabs ---------- */
.ds-admin-tabs .mud-tabs-toolbar,
.ds-admin-tabs .mud-tabs-tabbar {
    background: var(--ds-surface-1) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-text) !important;
}

.ds-admin-tabs .mud-tabs-toolbar {
    border-radius: 8px;
}

.ds-admin-tabs .mud-tab {
    color: var(--ds-text-muted) !important;
}

.ds-admin-tabs .mud-tab.mud-tab-active {
    color: var(--ds-primary) !important;
}

/* Keep administration usable on short laptop screens.  MudTabs does not
   consistently expose a height-constrained panel across its render modes, so
   the main content is deliberately the reliable outer scroll container. */
.ds-admin-content {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    box-sizing: border-box;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding-bottom: 2rem;
    scrollbar-gutter: stable;
}

.ds-admin-tabs {
    height: auto;
    min-height: 0;
    display: block;
}

.ds-admin-tabs .mud-tabs-panels,
.ds-admin-tabs .mud-tabs-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
}

.ds-mssp-grid {
    height: auto;
    min-height: 0;
}

.ds-mssp-grid > .mud-grid-item { min-height: 0; }
.ds-mssp-panel {
    /* Each column remains independently scrollable without allowing a tall
       form or list to disappear below a short browser viewport. */
    height: clamp(260px, calc(100dvh - 235px), 760px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ds-mssp-list-scroll,
.ds-mssp-details-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 4px;
}

/* Darkscope administration: make form hints readable in both portal themes
   and align the native ZIP selector with MudBlazor text fields. */
.ds-mssp-panel .mud-input-helper-text,
.ds-mssp-panel .mud-typography-caption {
    color: var(--ds-text-muted) !important;
}

.ds-package-upload {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}

.ds-package-upload-input {
    width: 100%;
    min-height: 36px;
    color: var(--ds-text-muted) !important;
    font: inherit;
}

.ds-package-upload-input::file-selector-button {
    height: 36px;
    margin: 0 10px 0 0;
    padding: 0 12px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 4px;
    background: var(--ds-surface-2);
    color: var(--ds-text) !important;
    font: inherit;
    cursor: pointer;
}

.ds-package-upload-input::-webkit-file-upload-button {
    height: 36px;
    margin: 0 10px 0 0;
    padding: 0 12px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 4px;
    background: var(--ds-surface-2);
    color: var(--ds-text) !important;
    font: inherit;
    cursor: pointer;
}

/* Maintenance status results must not inherit MudBlazor's light table surface
   while the Darkscope administration page is in dark mode. */
.ds-maintenance-status-table,
.ds-maintenance-status-table .mud-table-container,
.ds-maintenance-status-table .mud-table-root {
    background: var(--ds-table-bg) !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border) !important;
}

.ds-maintenance-status-table .mud-table-head,
.ds-maintenance-status-table .mud-table-head .mud-table-cell {
    background: var(--ds-table-header-bg) !important;
    color: var(--ds-text-strong) !important;
    border-color: var(--ds-border) !important;
}

.ds-maintenance-status-table .mud-table-body,
.ds-maintenance-status-table .mud-table-row,
.ds-maintenance-status-table .mud-table-cell {
    background: transparent !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border) !important;
}

.ds-maintenance-status-table .mud-table-row:hover,
.ds-maintenance-status-table .mud-table-row:hover .mud-table-cell {
    background: var(--ds-row-hover-bg) !important;
}

@media (max-width: 960px) {
    .ds-mssp-grid { height: auto; }
    .ds-mssp-panel { height: auto; max-height: 65dvh; min-height: 260px; }
    .ds-mssp-list-scroll { max-height: 42dvh; }
}

/* ---------- Supplier cyber-risk dashboard ---------- */
/* The dashboard uses explicit theme variables rather than a hard-coded light
   background, so it remains readable when the portal theme is switched. */
.supplier-cyber-risk-dashboard {
    background: var(--ds-panel-bg) !important;
    border-color: var(--ds-border-strong) !important;
    color: var(--ds-text) !important;
    box-shadow: var(--ds-shadow-soft);
}

.supplier-cyber-risk-dashboard__title,
.supplier-cyber-risk-dashboard .mud-typography {
    color: var(--ds-text) !important;
}

.supplier-cyber-risk-dashboard .mud-typography-caption {
    color: var(--ds-text-muted) !important;
}

.supplier-cyber-risk-dashboard__card {
    background: var(--ds-card-bg) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text) !important;
}

.supplier-cyber-risk-dashboard__card:hover {
    background: var(--ds-card-bg-hover) !important;
    border-color: var(--ds-border-hover) !important;
}

body.theme-dark .supplier-cyber-risk-dashboard,
body[data-theme="dark"] .supplier-cyber-risk-dashboard {
    background: rgba(15, 23, 42, 0.90) !important;
}

body.theme-light .supplier-cyber-risk-dashboard,
body[data-theme="light"] .supplier-cyber-risk-dashboard {
    background: rgba(255, 255, 255, 0.94) !important;
}

/* Supplier cyber-risk analysis is an inspection page, not a modal dashboard.
   Keep its content surfaces transparent so the page background remains visible,
   just like the supplier inventory.  The border and typography still derive
   from the active portal theme. */
body[data-theme] .supplier-cyber-risk-analysis__card,
body.theme-dark .supplier-cyber-risk-analysis__card,
body.theme-light .supplier-cyber-risk-analysis__card,
body[data-theme] .supplier-cyber-risk-analysis__vector,
body.theme-dark .supplier-cyber-risk-analysis__vector,
body.theme-light .supplier-cyber-risk-analysis__vector {
    background: transparent !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text) !important;
    box-shadow: none !important;
}

/* MudGrid stretches each column in a row, but MudPaper itself sizes to its
   content.  Let the paper fill the stretched grid item so vector cards in the
   same row always share the height of the longest assessment. */
.supplier-cyber-risk-analysis__vector-item {
    display: flex;
}

.supplier-cyber-risk-analysis__vector-item .supplier-cyber-risk-analysis__vector {
    width: 100%;
    height: 100%;
}

body[data-theme] .supplier-cyber-risk-analysis__notice,
body.theme-dark .supplier-cyber-risk-analysis__notice,
body.theme-light .supplier-cyber-risk-analysis__notice {
    background: var(--ds-primary-soft) !important;
    border: 1px solid var(--ds-border-strong) !important;
    color: var(--ds-text) !important;
}

body[data-theme] .supplier-cyber-risk-analysis__table,
body[data-theme] .supplier-cyber-risk-analysis__table .mud-table-root,
body[data-theme] .supplier-cyber-risk-analysis__table .mud-table-container,
body[data-theme] .supplier-cyber-risk-analysis__table .mud-table-head,
body[data-theme] .supplier-cyber-risk-analysis__table .mud-table-body,
body[data-theme] .supplier-cyber-risk-analysis__table .mud-table-row,
body[data-theme] .supplier-cyber-risk-analysis__table .mud-table-cell,
body.theme-dark .supplier-cyber-risk-analysis__table,
body.theme-light .supplier-cyber-risk-analysis__table {
    background: transparent !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text) !important;
}

body[data-theme] .supplier-cyber-risk-analysis__table .mud-table-row:hover,
body[data-theme] .supplier-cyber-risk-analysis__table .mud-table-row:hover .mud-table-cell {
    background: var(--ds-row-hover-bg) !important;
}