/* RADAR · Remote Diagnostics Analytics & Reporting · Designed & Built by Harry Whitter · © 2026 SPM UK Remote Diagnostic Centre · All Rights Reserved */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@700;800&display=swap");

/* ============================================================
   SPM UK RDC CRM — Global Stylesheet v2
   SPM Brand: Navy #1E2330, Blue #00AEEF,
              Red #E63946, Amber #F4A721, Green #4CAF50
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --spm-dark:    #1E2330;
    --spm-nav:     #1E2330;
    --spm-blue:    #00AEEF;
    --spm-red:     #E63946;
    --spm-amber:   #F4A721;
    --spm-green:   #4CAF50;
    --spm-grey:    #F5F6F8;
    --spm-border:  #E8E9EC;
    --spm-text:    #1a1a1a;
    --spm-muted:   #999999;
    --spm-white:   #FFFFFF;
    --radius:      8px;
    --shadow:      0 1px 3px rgba(0,0,0,0.06);
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: var(--spm-text);
    background:
        radial-gradient(ellipse 50% 35% at 92% 5%, rgba(0,174,239,0.04) 0%, transparent 70%)
        var(--spm-grey);
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ── Header ───────────────────────────────────────────────── */
.app-header {
    background: var(--spm-dark);
    padding: 0 24px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(0,174,239,0.25);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-dots {
    display: flex;
    gap: 5px;
    align-items: center;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block;
}

.dot-red   { background: var(--spm-red); }
.dot-amber { background: var(--spm-amber); }
.dot-green { background: var(--spm-green); }
.dot-grey  { background: rgba(255,255,255,0.2); }

.header-divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.12);
}

/* ── RADAR wordmark ──────────────────────────────── */
.radar-wordmark {
    display: flex;
    align-items: center;
    gap: 0;
    line-height: 1;
}
.radar-wordmark-text {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 4px;
    line-height: 1;
}
.radar-wordmark-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00AEEF;
    flex-shrink: 0;
    margin-left: 2px;
    margin-bottom: 1px;
}

/* ── Header right brand ──────────────────────────── */
.header-title h1 {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-align: right;
    opacity: 0;
    transition: opacity 0.2s;
}

.header-title p {
    color: rgba(255,255,255,0.2);
    font-size: 10px;
    text-align: right;
    opacity: 0;
    transition: opacity 0.2s;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-badge {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

.user-avatar {
    width: 30px;
    height: 30px;
    background: var(--spm-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* ── App Shell ────────────────────────────────────────────── */
.app-shell {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 54px);
}

/* ── Sidebar Navigation ───────────────────────────────────── */
.app-nav {
    width: 176px;
    min-width: 176px;
    background: linear-gradient(180deg, #252B3B 0%, #1E2330 100%);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
    overflow-y: visible;
    position: sticky;
    top: 54px;
    min-height: calc(100vh - 54px);
    overflow: hidden;
}
.app-nav::after {
    content: '';
    position: fixed;
    bottom: -80px;
    left: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,174,239,0.18) 0%, rgba(0,174,239,0.05) 45%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.nav-section {
    padding: 8px 0 2px;
}

.nav-section-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    padding: 0 14px;
    margin-bottom: 3px;
    display: block;
}

.nav-divider {
    height: 0.5px;
    background: rgba(255,255,255,0.07);
    margin: 4px 14px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px;
    color: rgba(255,255,255,0.5);
    font-size: 11.5px;
    white-space: nowrap;
    border-left: 2px solid transparent;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
}

.nav-item i {
    font-size: 15px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.nav-item:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.05);
}

.nav-item.active {
    color: var(--spm-blue);
    border-left-color: var(--spm-blue);
    background: rgba(0,174,239,0.1);
    font-weight: 500;
}

.nav-item.admin-only {
    display: none;
}

/* ── Main Content ─────────────────────────────────────────── */
.app-main {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

.app-main-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 28px;
}

.page-title {
    margin-bottom: 22px;
}

.page-title h2 {
    font-size: 19px;
    font-weight: 700;
    color: var(--spm-text);
    letter-spacing: -0.2px;
}

.page-title p {
    color: var(--spm-muted);
    font-size: 12px;
    margin-top: 3px;
}

/* ── KPI Cards ────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.kpi-card {
    background: var(--spm-white);
    border-radius: 10px;
    padding: 13px 14px;
    border: 1px solid var(--spm-border);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
}

.kpi-card:hover {
    border-color: var(--spm-blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.kpi-card-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 13px;
    flex-shrink: 0;
}

.kpi-card--neutral .kpi-card-icon  { background: #F1EFE8; color: #5F5E5A; }
.kpi-card--info .kpi-card-icon     { background: #E6F1FB; color: #185FA5; }
.kpi-card--good .kpi-card-icon     { background: #EAF3DE; color: #3B6D11; }
.kpi-card--warning .kpi-card-icon  { background: #FAEEDA; color: #854F0B; }
.kpi-card--danger .kpi-card-icon   { background: #FCEBEB; color: #A32D2D; }

.kpi-label {
    font-size: 9px;
    color: var(--spm-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
}

.kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--spm-text);
    line-height: 1;
}

.kpi-sub {
    font-size: 10px;
    color: var(--spm-muted);
    margin-top: 4px;
}

/* ── Section Title ────────────────────────────────────────── */
.section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--spm-text);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--spm-border);
}

/* ── Summary Card (monthly) ───────────────────────────────── */
.summary-card {
    background: var(--spm-white);
    border-radius: 10px;
    border: 1px solid var(--spm-border);
    padding: 14px 16px;
}

.summary-card-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--spm-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.summary-card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--spm-text);
    line-height: 1;
}

.summary-card-sub {
    font-size: 10px;
    color: var(--spm-muted);
    margin-top: 4px;
}

/* ── Data Table ───────────────────────────────────────────── */
.table-wrap {
    background: var(--spm-white);
    border-radius: 10px;
    border: 1px solid var(--spm-border);
    overflow: auto;
    margin-bottom: 20px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead {
    background: #FAFAFA;
}

.data-table th {
    padding: 9px 16px;
    text-align: left;
    color: #bbb;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    border-bottom: 1px solid var(--spm-border);
}

.data-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #F5F5F5;
    color: var(--spm-text);
}


.data-table tbody tr:hover {
    background: #F8F9FA;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.loading, .empty, .error {
    text-align: center;
    padding: 32px !important;
    color: var(--spm-muted);
    font-style: italic;
}

.error { color: var(--spm-red); }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.badge--green  { background: #EAF3DE; color: #3B6D11; }
.badge--amber  { background: #FAEEDA; color: #854F0B; }
.badge--red    { background: #FCEBEB; color: #A32D2D; }
.badge--blue   { background: #E6F1FB; color: #185FA5; }
.badge--grey   { background: #F1EFE8; color: #5F5E5A; }

/* ── Forms ────────────────────────────────────────────────── */
.form-card {
    background: var(--spm-white);
    border-radius: 10px;
    border: 1px solid var(--spm-border);
    padding: 20px;
    margin-bottom: 16px;
}

.form-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--spm-muted);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--spm-border);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-field label {
    font-size: 10px;
    font-weight: 600;
    color: var(--spm-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.form-field input,
.form-field select,
.form-field textarea {
    padding: 8px 11px;
    border: 1px solid var(--spm-border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: inherit;
    color: var(--spm-text);
    background: var(--spm-white);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--spm-blue);
    box-shadow: 0 0 0 3px rgba(0,174,239,0.08);
}

.form-field input:disabled,
.form-field select:disabled {
    background: var(--spm-grey);
    color: #bbb;
    cursor: not-allowed;
}

.form-field textarea {
    min-height: 100px;
    resize: vertical;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.btn {
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    font-family: inherit;
}

.btn:hover   { opacity: 0.88; }
.btn:active  { transform: scale(0.98); }

.btn-primary { background: var(--spm-blue);  color: white; }
.btn-success { background: var(--spm-green); color: white; }
.btn-danger  { background: var(--spm-red);   color: white; }
.btn-neutral { background: #555;             color: white; }
.btn-outline {
    background: transparent;
    color: var(--spm-blue);
    border: 1px solid var(--spm-blue);
}

/* ── Split layout ─────────────────────────────────────────── */
.split-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .split-layout { grid-template-columns: 1fr; }
}

.list-panel {
    background: var(--spm-white);
    border-radius: 10px;
    border: 1px solid var(--spm-border);
    overflow: hidden;
}

.list-panel-header {
    background: var(--spm-dark);
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-panel-header span {
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 600;
}

.list-search {
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-bottom: 1px solid var(--spm-border);
    font-size: 13px;
    font-family: inherit;
    background: #FAFAFA;
    color: var(--spm-text);
}

.list-search:focus { outline: none; background: #fff; }

.list-items {
    max-height: 600px;
    overflow-y: auto;
}

.list-item {
    padding: 11px 16px;
    border-bottom: 1px solid #F5F5F5;
    cursor: pointer;
    transition: background 0.1s;
}

.list-item:hover { background: #F8F9FA; }

.list-item.active {
    background: #EDF7FD;
    border-left: 3px solid var(--spm-blue);
}

.list-item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--spm-text);
}

.list-item-sub {
    font-size: 11px;
    color: var(--spm-muted);
    margin-top: 2px;
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    padding: 11px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 14px;
}

.alert-success { background: #EAF3DE; color: #3B6D11; }
.alert-error   { background: #FCEBEB; color: #A32D2D; }
.alert-warning { background: #FAEEDA; color: #854F0B; }
.alert-info    { background: #E6F1FB; color: #185FA5; }

/* ── Schedule / Planner ───────────────────────────────────── */
.week-card {
    background: var(--spm-white);
    border-radius: 10px;
    border: 1px solid var(--spm-border);
    margin-bottom: 14px;
    overflow: hidden;
}

.week-header {
    background: var(--spm-dark);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.week-header span {
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 600;
}

/* ── KPI progress bar ─────────────────────────────────────── */
.kpi-bar-track {
    height: 3px;
    background: var(--spm-border);
    border-radius: 2px;
    margin-top: 8px;
}

.kpi-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--spm-green);
}

/* ── Clickable utility ────────────────────────────────────── */
.clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.clickable:hover {
    background: #F8F9FA;
}

/* ── Month summary inline ─────────────────────────────────── */
.month-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

/* ── KPI compliance bar (legacy) ─────────────────────────── */
.kpi-compliance-bar {
    height: 3px;
    background: var(--spm-border);
    border-radius: 2px;
    margin-top: 8px;
}
.kpi-compliance-fill {
    height: 100%;
    border-radius: 2px;
}


/* ══════════════════════════════════════════════════════════
   POLISH ANIMATIONS — added
   ══════════════════════════════════════════════════════════ */

/* ── 1. Page content fade-in ──────────────────────────────── */
@keyframes spmFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.app-main-inner {
    animation: spmFadeIn 0.3s ease both;
}

/* ── 2. List item stagger slide-in ───────────────────────── */
@keyframes spmSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.list-item {
    animation: spmSlideIn 0.2s ease both;
}

/* Stagger up to 12 items */
.list-item:nth-child(1)  { animation-delay: 0.03s; }
.list-item:nth-child(2)  { animation-delay: 0.06s; }
.list-item:nth-child(3)  { animation-delay: 0.09s; }
.list-item:nth-child(4)  { animation-delay: 0.12s; }
.list-item:nth-child(5)  { animation-delay: 0.15s; }
.list-item:nth-child(6)  { animation-delay: 0.18s; }
.list-item:nth-child(7)  { animation-delay: 0.21s; }
.list-item:nth-child(8)  { animation-delay: 0.24s; }
.list-item:nth-child(9)  { animation-delay: 0.27s; }
.list-item:nth-child(10) { animation-delay: 0.30s; }
.list-item:nth-child(11) { animation-delay: 0.33s; }
.list-item:nth-child(12) { animation-delay: 0.36s; }

/* ── 3. Modal entrance ────────────────────────────────────── */
@keyframes spmModalIn {
    from { opacity: 0; transform: scale(0.96) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Works for any direct child of a modal overlay */
.modal-overlay > div,
.modal-overlay > .modal,
[id$="Modal"] > div,
[id$="kpiModal"] > div {
    animation: spmModalIn 0.18s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* ── 4. Alert / toast slide-down ─────────────────────────── */
@keyframes spmAlertIn {
    from { opacity: 0; transform: translateY(-10px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0);     max-height: 80px; }
}

@keyframes spmAlertOut {
    from { opacity: 1; transform: translateY(0);     max-height: 80px; }
    to   { opacity: 0; transform: translateY(-6px);  max-height: 0; }
}

.alert {
    animation: spmAlertIn 0.25s ease both;
    overflow: hidden;
}

.alert.dismissing {
    animation: spmAlertOut 0.2s ease both;
}

/* ── 5. KPI card count-up (value element) ────────────────── */
@keyframes spmCountPop {
    0%   { opacity: 0; transform: scale(0.7); }
    70%  { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

.kpi-value.counting {
    animation: spmCountPop 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* KPI cards stagger in on load */
@keyframes spmCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kpi-card {
    animation: spmCardIn 0.3s ease both;
}

.kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-card:nth-child(2) { animation-delay: 0.10s; }
.kpi-card:nth-child(3) { animation-delay: 0.15s; }
.kpi-card:nth-child(4) { animation-delay: 0.20s; }
.kpi-card:nth-child(5) { animation-delay: 0.25s; }
.kpi-card:nth-child(6) { animation-delay: 0.30s; }
.kpi-card:nth-child(7) { animation-delay: 0.35s; }
.kpi-card:nth-child(8) { animation-delay: 0.40s; }


/* ── Timer Indicator (injected by timer.js) ────────────────── */
.timer-indicator {
    display: none;
    align-items: center;
    gap: 0;
    background: rgba(0,174,239,0.15);
    border: 1px solid rgba(0,174,239,0.4);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.timer-indicator__main {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-right: 1px solid rgba(0,174,239,0.25);
}

.timer-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00AEEF;
    display: inline-block;
    flex-shrink: 0;
}
.timer-dot--paused { background: #F4A721; }

.timer-display {
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
}

.timer-status {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}

.timer-indicator__info {
    padding: 5px 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.timer-indicator__row1 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.timer-task-name {
    font-size: 11px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

.timer-task-type {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    background: #E6F1FB;
    color: #185FA5;
}

.timer-indicator__row2 {
    display: flex;
    gap: 5px;
    align-items: center;
}

.timer-task-meta {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
}

.timer-meta-sep {
    color: rgba(255,255,255,0.3);
    font-size: 10px;
}

.timer-indicator__return {
    padding: 5px 10px;
    border-left: 1px solid rgba(0,174,239,0.25);
    color: rgba(255,255,255,0.4);
    font-size: 11px;
}

.timer-indicator__cancel {
    padding: 5px 10px;
    border-left: 1px solid rgba(0,174,239,0.25);
    color: rgba(255,100,100,0.7);
    font-size: 11px;
    cursor: pointer;
}
.timer-indicator__cancel:hover { color: rgba(255,100,100,1); }

/* ── Dark Mode ────────────────────────────────────────────── */
:root {
    --dm-bg:        #161B25;
    --dm-surface:   #1E2535;
    --dm-surface2:  #242D40;
    --dm-border:    #2A3448;
    --dm-text:      #D4D8E2;
    --dm-muted:     #6B7590;
    --dm-nav:       #0D1119;
}

[data-theme="dark"] {
    --spm-grey:    var(--dm-bg);
    --spm-white:   var(--dm-surface);
    --spm-border:  var(--dm-border);
    --spm-text:    var(--dm-text);
    --spm-muted:   var(--dm-muted);
}

[data-theme="dark"] body {
    background: var(--dm-bg);
    color: var(--dm-text);
}

/* ── Header ── */
[data-theme="dark"] .app-header {
    background: #080C12;
    border-bottom-color: rgba(0,174,239,0.18);
}

/* ── Nav ── */
[data-theme="dark"] .app-nav {
    background: linear-gradient(180deg, #111622 0%, #0D1119 100%);
    border-right: 1px solid #1A2035;
}
[data-theme="dark"] .nav-item         { color: #7A85A0; }
[data-theme="dark"] .nav-item:hover   { background: rgba(255,255,255,0.04); color: #C8D0E0; }
[data-theme="dark"] .nav-item.active  { background: rgba(0,174,239,0.12); color: #00AEEF; }
[data-theme="dark"] .nav-section-label { color: #3A4560; }
[data-theme="dark"] .nav-divider      { background: #1A2035; }
[data-theme="dark"] .dark-mode-toggle  { border-top-color: #1A2035; }
[data-theme="dark"] .dark-mode-toggle:hover { background: rgba(255,255,255,0.03); }

/* ── Shell & Main ── */
[data-theme="dark"] .app-main         { background: var(--dm-bg); }
[data-theme="dark"] .app-main-inner   { background: var(--dm-bg); }

/* ── Cards ── */
[data-theme="dark"] .form-card {
    background: var(--dm-surface);
    border-color: var(--dm-border);
}
[data-theme="dark"] .form-section-title { color: var(--dm-muted); border-bottom-color: var(--dm-border); }
[data-theme="dark"] .form-card .section-title { color: var(--dm-muted); }

/* ── KPI cards ── */
[data-theme="dark"] .kpi-card {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
[data-theme="dark"] .kpi-card:hover   { border-color: var(--spm-blue); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
[data-theme="dark"] .kpi-label        { color: var(--dm-muted); }
[data-theme="dark"] .kpi-value        { color: var(--dm-text); }
[data-theme="dark"] .kpi-sub          { color: var(--dm-muted); }
[data-theme="dark"] .kpi-card-icon    { background: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .kpi-card--neutral .kpi-card-icon { color: #8A92A8; }
[data-theme="dark"] .kpi-card--info .kpi-card-icon    { background: rgba(0,174,239,0.15) !important; color: #29B6F6; }
[data-theme="dark"] .kpi-card--good .kpi-card-icon    { background: rgba(76,175,80,0.15) !important; color: #66BB6A; }
[data-theme="dark"] .kpi-card--warning .kpi-card-icon { background: rgba(244,167,33,0.15) !important; color: #FFB74D; }
[data-theme="dark"] .kpi-card--danger .kpi-card-icon  { background: rgba(230,57,70,0.15) !important; color: #EF5350; }

/* ── Tables ── */
[data-theme="dark"] .table-wrap       { border-color: var(--dm-border); background: var(--dm-surface); }
[data-theme="dark"] .data-table       { background: var(--dm-surface); }
[data-theme="dark"] .data-table thead { background: var(--dm-surface2); }
[data-theme="dark"] .data-table th    { color: var(--dm-muted); border-bottom-color: var(--dm-border); background: var(--dm-surface2); }
[data-theme="dark"] .data-table td    { color: var(--dm-text); border-bottom-color: var(--dm-border); }
[data-theme="dark"] .data-table tbody tr:hover td { background: rgba(0,174,239,0.05); }
[data-theme="dark"] .data-table .empty,
[data-theme="dark"] .data-table .loading { color: var(--dm-muted); }

/* ── Forms ── */
[data-theme="dark"] .form-field label { color: var(--dm-muted); }
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea,
[data-theme="dark"] input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #131820 !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
[data-theme="dark"] .form-field input::placeholder,
[data-theme="dark"] .form-field textarea::placeholder { color: #3A4560; }
[data-theme="dark"] .form-field input:focus,
[data-theme="dark"] .form-field select:focus,
[data-theme="dark"] .form-field textarea:focus {
    border-color: var(--spm-blue);
    background: #161B25;
    box-shadow: 0 0 0 3px rgba(0,174,239,0.1);
}
[data-theme="dark"] select option     { background: #1E2535; color: var(--dm-text); }

/* ── Buttons ── */
[data-theme="dark"] .btn-neutral      { background: var(--dm-surface2); color: #C8D0E0; border-color: var(--dm-border); }
[data-theme="dark"] .btn-neutral:hover { background: #2E3850; }

/* ── Badges ── */
[data-theme="dark"] .badge            { background: var(--dm-surface2); color: var(--dm-muted); }
[data-theme="dark"] .badge--green     { background: rgba(76,175,80,0.18);  color: #81C784; }
[data-theme="dark"] .badge--amber     { background: rgba(244,167,33,0.18); color: #FFB74D; }
[data-theme="dark"] .badge--red       { background: rgba(230,57,70,0.18);  color: #EF5350; }
[data-theme="dark"] .badge--blue      { background: rgba(0,174,239,0.18);  color: #29B6F6; }
[data-theme="dark"] .badge--grey      { background: rgba(255,255,255,0.06); color: #8A92A8; }

/* ── Alerts ── */
[data-theme="dark"] .alert-success    { background: rgba(76,175,80,0.15);  color: #81C784; border-color: rgba(76,175,80,0.25); }
[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger     { background: rgba(230,57,70,0.15);  color: #EF5350; border-color: rgba(230,57,70,0.25); }
[data-theme="dark"] .alert-warning    { background: rgba(244,167,33,0.15); color: #FFB74D; border-color: rgba(244,167,33,0.25); }
[data-theme="dark"] .alert-info       { background: rgba(0,174,239,0.15);  color: #29B6F6; border-color: rgba(0,174,239,0.25); }

/* ── Page titles & section headers ── */
[data-theme="dark"] .page-title h2    { color: var(--dm-text); }
[data-theme="dark"] .page-title p     { color: var(--dm-muted); }
[data-theme="dark"] .section-title    { color: var(--dm-muted); }

/* ── List panel ── */
[data-theme="dark"] .list-panel       { background: var(--dm-surface); border-color: var(--dm-border); }
[data-theme="dark"] .list-header      { background: var(--dm-surface2); border-bottom-color: var(--dm-border); }
[data-theme="dark"] .list-search      { background: #131820; border-color: var(--dm-border); color: var(--dm-text); }
[data-theme="dark"] .list-search:focus { background: #161B25; }
[data-theme="dark"] .list-item        { border-bottom-color: var(--dm-border); color: var(--dm-text); }
[data-theme="dark"] .list-item:hover  { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .list-item.active { background: rgba(0,174,239,0.1); color: var(--spm-blue); }
[data-theme="dark"] .list-item-sub    { color: var(--dm-muted); }

/* ── Modals ── */
[data-theme="dark"] .modal-overlay    { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .modal            { background: var(--dm-surface); border-color: var(--dm-border); }
[data-theme="dark"] .modal-body       { background: var(--dm-surface); color: var(--dm-text); }
[data-theme="dark"] .modal-footer     { background: var(--dm-surface2); border-top-color: var(--dm-border); }

/* ── Tabs ── */
[data-theme="dark"] .tab-row          { border-bottom-color: var(--dm-border); }
[data-theme="dark"] .tab              { color: var(--dm-muted); }
[data-theme="dark"] .tab:hover        { color: var(--dm-text); }
[data-theme="dark"] .tab.active       { color: var(--spm-blue); border-bottom-color: var(--spm-blue); }
[data-theme="dark"] .tab-content      { background: var(--dm-surface); border-color: var(--dm-border); }

/* ── KPI bar track ── */
[data-theme="dark"] .kpi-bar-track    { background: rgba(255,255,255,0.08); }

/* ── Misc hardcoded backgrounds ── */
[data-theme="dark"] .summary-card     { background: var(--dm-surface); border-color: var(--dm-border); }
[data-theme="dark"] .summary-card-label { color: var(--dm-muted); }
[data-theme="dark"] .summary-card-value { color: var(--dm-text); }
[data-theme="dark"] .monthly-panel    { background: var(--dm-surface); border-color: var(--dm-border); }
[data-theme="dark"] .monthly-panel-header { border-bottom-color: var(--dm-border); }
[data-theme="dark"] .monthly-stat     { border-right-color: var(--dm-border); }
[data-theme="dark"] .monthly-stat-value { color: var(--dm-text); }
[data-theme="dark"] .monthly-stat-label { color: var(--dm-muted); }
[data-theme="dark"] .monthly-stat-sub { color: var(--dm-muted); }
[data-theme="dark"] .dash-panel       { background: var(--dm-surface); border-color: var(--dm-border); }
[data-theme="dark"] .dash-panel-header { border-bottom-color: var(--dm-border); }
[data-theme="dark"] .dash-panel-title { color: var(--dm-muted); }
[data-theme="dark"] .dash-list-row    { border-bottom-color: var(--dm-border); }
[data-theme="dark"] .dash-list-row:hover { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .dash-list-primary { color: var(--dm-text); }
[data-theme="dark"] .dash-list-secondary { color: var(--dm-muted); }
[data-theme="dark"] .dash-list-meta   { color: var(--dm-muted); }
[data-theme="dark"] .dash-welcome     { background: #0D1119; border-color: rgba(0,174,239,0.15); }
[data-theme="dark"] .alert-card       { background: var(--dm-surface); border-color: var(--dm-border); }
[data-theme="dark"] .alert-card:hover { border-color: var(--spm-blue); }
[data-theme="dark"] .alert-card-value { color: var(--dm-text); }
[data-theme="dark"] .alert-card-label { color: var(--dm-muted); }

/* ── Dark mode toggle ── */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin: 8px 8px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    user-select: none;
}
.dark-mode-toggle:hover { background: rgba(255,255,255,0.04); }
.dark-mode-toggle-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.dark-mode-switch {
    width: 34px; height: 19px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.dark-mode-switch::after {
    content: '';
    position: absolute;
    width: 13px; height: 13px;
    background: rgba(255,255,255,0.45);
    border-radius: 50%;
    top: 3px; left: 3px;
    transition: transform 0.2s, background 0.2s;
}
[data-theme="dark"] .dark-mode-switch           { background: var(--spm-blue); }
[data-theme="dark"] .dark-mode-switch::after    { transform: translateX(15px); background: #fff; }
[data-theme="dark"] .dark-mode-toggle-label     { color: rgba(255,255,255,0.45); }

/* ── Page-specific dark mode overrides ─────────────────────── */

/* Schedule page */
[data-theme="dark"] .week-card         { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .week-card-header  { background: var(--dm-surface2) !important; }
[data-theme="dark"] .task-item         { background: transparent !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; }
[data-theme="dark"] .task-item:hover   { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .task-item.selected { background: rgba(0,174,239,0.1) !important; }
[data-theme="dark"] .generate-panel    { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }

/* Site Dashboard */
[data-theme="dark"] .kpi-card          { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .kpi-modal         { background: var(--dm-surface) !important; }
[data-theme="dark"] .kpi-modal-hdr     { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .kpi-modal-body    { background: var(--dm-surface) !important; }
[data-theme="dark"] .kpi-modal-table th { background: var(--dm-surface2) !important; color: var(--dm-muted) !important; }
[data-theme="dark"] .kpi-modal-table td { color: var(--dm-text) !important; border-bottom-color: var(--dm-border) !important; }
[data-theme="dark"] .kpi-modal-table tr:hover td { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .kpi-pass          { background: rgba(76,175,80,0.15) !important;  color: #81C784 !important; }
[data-theme="dark"] .kpi-fail          { background: rgba(230,57,70,0.15) !important;  color: #EF5350 !important; }
[data-theme="dark"] .dash-card         { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .donut-leg-item    { color: var(--dm-text) !important; }
[data-theme="dark"] .defect-row        { background: transparent !important; border-bottom-color: var(--dm-border) !important; }
[data-theme="dark"] .badge-amber       { background: rgba(244,167,33,0.15) !important; color: #FFB74D !important; }
[data-theme="dark"] .badge-grey        { background: rgba(255,255,255,0.06) !important; color: #8A92A8 !important; }
[data-theme="dark"] .sev-pill          { filter: brightness(1.2) !important; }

/* Projects */
[data-theme="dark"] .project-card      { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .project-card-name { color: var(--dm-text) !important; }
[data-theme="dark"] .project-card-ref  { color: var(--dm-muted) !important; }
[data-theme="dark"] .project-card-desc { color: var(--dm-muted) !important; }
[data-theme="dark"] .project-card-footer { color: var(--dm-muted) !important; }
[data-theme="dark"] .filter-chip       { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-muted) !important; }
[data-theme="dark"] .filter-chip:hover:not(.active) { border-color: var(--spm-blue) !important; color: var(--spm-blue) !important; }
[data-theme="dark"] .filter-chip.active { background: #29B6F6 !important; color: #000 !important; border-color: #29B6F6 !important; }
[data-theme="dark"] .empty-state       { color: var(--dm-muted) !important; }

/* Project detail - Gantt */
[data-theme="dark"] .gantt-wrap        { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .gantt-toolbar     { background: var(--dm-surface) !important; border-bottom-color: var(--dm-border) !important; }
[data-theme="dark"] .gantt-scale-btn   { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; color: var(--dm-muted) !important; }
[data-theme="dark"] .gantt-scale-btn.active { background: var(--spm-blue) !important; color: #fff !important; border-color: var(--spm-blue) !important; }
[data-theme="dark"] .gantt-left        { background: var(--dm-surface) !important; border-right-color: var(--dm-border) !important; }
[data-theme="dark"] .gantt-right       { background: var(--dm-surface) !important; }
[data-theme="dark"] .gantt-header-row  { background: var(--dm-surface2) !important; color: var(--dm-muted) !important; border-bottom-color: var(--dm-border) !important; }
[data-theme="dark"] .gantt-row         { border-bottom-color: var(--dm-border) !important; }
[data-theme="dark"] .gantt-row.phase-row { background: var(--dm-surface2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .gantt-row:hover   { background: rgba(0,174,239,0.05) !important; }
[data-theme="dark"] .gantt-gridline    { background: #1E2840 !important; }
[data-theme="dark"] .gantt-gridline-major { background: #263050 !important; }
[data-theme="dark"] .gantt-today-line  { opacity: 0.8 !important; }
[data-theme="dark"] .task-name-cell    { color: var(--dm-text) !important; }
[data-theme="dark"] .view-tabs         { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .view-tab          { color: var(--dm-muted) !important; }
[data-theme="dark"] .view-tab.active   { background: var(--dm-surface) !important; color: var(--dm-text) !important; }
[data-theme="dark"] .kanban-col        { background: var(--dm-surface2) !important; }
[data-theme="dark"] .kanban-card       { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .kanban-card-name  { color: var(--dm-text) !important; }
[data-theme="dark"] .kanban-card-meta  { color: var(--dm-muted) !important; }
[data-theme="dark"] .kanban-col-header { color: var(--dm-muted) !important; }
[data-theme="dark"] .project-header-card { background: #0D1119 !important; }

/* REAM (time-tracking) */
[data-theme="dark"] .day-col           { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .summary-pill      { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .entry-item        { border-left-color: var(--spm-blue) !important; background: rgba(0,174,239,0.08) !important; }
[data-theme="dark"] .lock-warning      { background: rgba(244,167,33,0.12) !important; border-color: rgba(244,167,33,0.3) !important; color: #FFB74D !important; }

/* Task analysis */
[data-theme="dark"] .machine-block     { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .mp-note-input     { background: #131820 !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
[data-theme="dark"] .def-btn           { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }

/* Site import */
[data-theme="dark"] .import-drop-zone  { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .import-drop-zone:hover { background: rgba(0,174,239,0.08) !important; }
[data-theme="dark"] .preview-tab       { background: var(--dm-surface2) !important; color: var(--dm-muted) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .preview-tab.active { background: var(--dm-surface) !important; color: var(--dm-text) !important; }
[data-theme="dark"] .preview-pane      { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .preview-table td  { border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; }
[data-theme="dark"] .validation-card.ok     { background: rgba(76,175,80,0.1) !important; border-color: rgba(76,175,80,0.25) !important; }
[data-theme="dark"] .validation-card.errors { background: rgba(230,57,70,0.1) !important; border-color: rgba(230,57,70,0.25) !important; }
[data-theme="dark"] .validation-card.warn   { background: rgba(244,167,33,0.1) !important; border-color: rgba(244,167,33,0.25) !important; }
[data-theme="dark"] .import-step       { border-bottom-color: var(--dm-border) !important; }
[data-theme="dark"] .step-label        { color: var(--dm-text) !important; }

/* Matrix */
[data-theme="dark"] .matrix-card       { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .import-area       { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; }

/* Users / permissions */
[data-theme="dark"] .permission-row    { border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; }
[data-theme="dark"] .toggle-slider     { background: #3A4560 !important; }

/* Customer support */
[data-theme="dark"] .support-card      { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }

/* Machines admin */
[data-theme="dark"] .inactive-badge    { background: rgba(255,255,255,0.08) !important; color: var(--dm-muted) !important; }
[data-theme="dark"] .xml-mp-row        { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }

/* Inline style overrides — force dark on common patterns */
/* White backgrounds set via inline style */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#FFFFFF"] {
    background: var(--dm-surface) !important;
}
/* Light grey backgrounds */
[data-theme="dark"] [style*="background:#F8F9F"],
[data-theme="dark"] [style*="background:#FAFAFA"],
[data-theme="dark"] [style*="background:#F5F6F8"],
[data-theme="dark"] [style*="background: #F8F9F"],
[data-theme="dark"] [style*="background: #FAFAFA"] {
    background: var(--dm-surface2) !important;
}
/* Dark text set via inline style */
[data-theme="dark"] [style*="color:#1a1a1a"],
[data-theme="dark"] [style*="color: #1a1a1a"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"] {
    color: var(--dm-text) !important;
}
/* Light info boxes */
[data-theme="dark"] [style*="background:#F0FBFF"],
[data-theme="dark"] [style*="background:#E6F1FB"],
[data-theme="dark"] [style*="background:#EAF3DE"],
[data-theme="dark"] [style*="background:#FCEBEB"],
[data-theme="dark"] [style*="background:#FAEEDA"],
[data-theme="dark"] [style*="background:#FEF3E2"],
[data-theme="dark"] [style*="background:#F0FDF4"] {
    background: var(--dm-surface2) !important;
}

/* ── Modal body/footer universal dark overrides ────────────── */
[data-theme="dark"] [style*="background:#fff; border-radius:12px"],
[data-theme="dark"] [style*="background: #fff; border-radius:12px"],
[data-theme="dark"] [style*="background:#fff;border-radius:12px"],
[data-theme="dark"] [style*="background:white;border-radius"] {
    background: var(--dm-surface) !important;
}
[data-theme="dark"] [style*="background:#FAFAFA; border-radius:0 0 12px 12px"],
[data-theme="dark"] [style*="background:#FAFAFA;border-radius:0 0"] {
    background: var(--dm-surface2) !important;
}
/* Any sticky footer in a panel */
[data-theme="dark"] [style*="position:sticky;bottom:0;background:var(--spm-white)"],
[data-theme="dark"] [style*="position:sticky; bottom:0; background:var(--spm-white)"] {
    background: var(--dm-surface2) !important;
    border-top-color: var(--dm-border) !important;
}
/* Inline form labels using #999 */
[data-theme="dark"] [style*="color:#999"] { color: var(--dm-muted) !important; }
[data-theme="dark"] [style*="color: #999"] { color: var(--dm-muted) !important; }
[data-theme="dark"] [style*="color:#888"] { color: var(--dm-muted) !important; }
[data-theme="dark"] [style*="color: #888"] { color: var(--dm-muted) !important; }
[data-theme="dark"] [style*="color:#bbb"] { color: #4A5568 !important; }
/* Report generator A4 pages - keep white (they are print output) */
[data-theme="dark"] [style*="background:#fff;width:794px"],
[data-theme="dark"] [style*="background:#fff;width:${A4_W}"] {
    background: #fff !important; color: #1a1a1a !important;
}

/* ── Header title always white ─────────────────────────────── */
[data-theme="dark"] .header-title h1 { color: rgba(255,255,255,0.45) !important; }
[data-theme="dark"] .header-title p  { color: rgba(255,255,255,0.22) !important; }
[data-theme="dark"] .radar-wordmark-text { color: #fff !important; }
[data-theme="dark"] .radar-wordmark-dot  { background: #00AEEF !important; }

[data-theme="dark"] .app-nav::after {
    background: radial-gradient(circle, rgba(0,174,239,0.12) 0%, rgba(0,174,239,0.03) 45%, transparent 70%);
}



[data-theme="dark"] body {
    background:
        radial-gradient(ellipse 50% 30% at 95% 4%, rgba(0,174,239,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 2% 95%, rgba(0,174,239,0.05) 0%, transparent 60%),
        var(--dm-bg) !important;
}

/* ── REAM page dark mode ────────────────────────────────────── */
[data-theme="dark"] .summary-pill       { background: var(--dm-surface) !important; box-shadow: none !important; border: 1px solid var(--dm-border); }
[data-theme="dark"] .summary-pill-label { color: var(--dm-muted) !important; }
[data-theme="dark"] .summary-pill-value { color: var(--dm-text) !important; }
[data-theme="dark"] .day-col            { background: var(--dm-surface) !important; box-shadow: none !important; border: 1px solid var(--dm-border); }
[data-theme="dark"] #engineerFilter     { background: var(--dm-surface) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }

/* ── Final catch-all dark mode overrides ───────────────────── */

/* Task analysis */
[data-theme="dark"] .machine-block   { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .sev-pill-label  { background: var(--dm-surface2) !important; color: var(--dm-text) !important; }
[data-theme="dark"] .mp-row          { border-bottom-color: var(--dm-border) !important; }
[data-theme="dark"] .analysis-footer { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }

/* Customer support */
[data-theme="dark"] .support-card    { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .locked-field    { color: var(--dm-muted) !important; }

/* Matrix */
[data-theme="dark"] .matrix-card     { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }

/* Users */
[data-theme="dark"] .permission-section { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .user-role-badge { background: var(--dm-surface2) !important; color: var(--dm-text) !important; }

/* Site dashboard defect modal */
[data-theme="dark"] #defectModal > div { background: var(--dm-surface) !important; }
[data-theme="dark"] #defectModal [style*="background:#FAFAFA"],
[data-theme="dark"] #defectModal [style*="background: #FAFAFA"] { background: var(--dm-surface2) !important; }

/* Project detail view tabs */
[data-theme="dark"] .view-tab.active { background: var(--dm-surface) !important; color: var(--dm-text) !important; }

/* Any remaining colour:#333 or #1a1a1a in content areas */
[data-theme="dark"] .kpi-modal-table [style*="color:#333"],
[data-theme="dark"] .kpi-modal-table [style*="color: #333"] { color: var(--dm-text) !important; }
[data-theme="dark"] [style*="color:#1a1a1a"] { color: var(--dm-text) !important; }

/* Lookups page */
[data-theme="dark"] .lookup-table-wrap { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
[data-theme="dark"] .lookup-selector   { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }

/* ── Report generator A4 pages — immune to dark mode ───────── */
[data-theme="dark"] div[style*="background:#fff"][style*="width:794px"],
[data-theme="dark"] div[style*="background:#fff"][style*="width:794px"] * {
    color: #1a1a1a !important;
    background-color: #fff;
}
[data-theme="dark"] div[style*="background:#fff"][style*="width:794px"] [style*="color:#"] {
    /* individual inline colours are preserved — only the catch-all override is cancelled */
}

/* ── Header reveal after auth ───────────────────────────── */
body.header-ready .user-badge,
body.header-ready .header-title h1,
body.header-ready .header-title p {
    opacity: 1;
}

/* ── User menu dropdown ──────────────────────────────── */
.user-menu-wrap { position: relative; }
#userMenuDropdown a:hover,
#userMenuDropdown button:hover {
    background: rgba(255,255,255,0.07) !important;
}


/* ================================================================
   MOBILE & TABLET RESPONSIVE STYLES
   Designed & Built by Harry Whitter · © 2026 SPM UK RDC
   ================================================================ */

/* ── Tablet (≤1024px) ──────────────────────────────────────── */
@media (max-width: 1024px) {

    /* App nav collapses to icons only */
    .app-nav {
        width: 56px;
        overflow: hidden;
    }
    .nav-section-label,
    .nav-item span,
    .dark-mode-toggle-label { display: none; }
    .nav-item {
        justify-content: center;
        padding: 10px 0;
    }
    .nav-item i { margin: 0; font-size: 18px; }
    .dark-mode-toggle { justify-content: center; padding: 12px 0; }
    .dark-mode-switch { margin: 0; }

    /* Header tightens */
    .app-header { padding: 0 14px; }
    .header-title h1 { font-size: 10px; }
    .header-title p  { display: none; }
    .radar-wordmark-text { font-size: 17px; }

    /* Main content uses full width */
    .app-main { padding: 16px; }

    /* Data grids become 2-col */
    .grid-3, .grid-4 { grid-template-columns: 1fr 1fr !important; }

    /* Form grids become 1 or 2 col */
    .form-grid-4 { grid-template-columns: 1fr 1fr !important; }
}

/* ── Mobile (≤768px) ───────────────────────────────────────── */
@media (max-width: 768px) {

    /* Nav hides completely — toggled by hamburger */
    .app-nav { display: none; }
    .app-nav.mobile-open {
        display: flex;
        position: fixed;
        left: 0; top: 54px; bottom: 0;
        width: 240px;
        z-index: 9998;
        box-shadow: 4px 0 20px rgba(0,0,0,0.4);
    }
    .app-nav.mobile-open .nav-section-label,
    .app-nav.mobile-open .nav-item span,
    .app-nav.mobile-open .dark-mode-toggle-label { display: block; }
    .app-nav.mobile-open .nav-item {
        justify-content: flex-start;
        padding: 8px 16px;
    }
    .app-nav.mobile-open .nav-item i { font-size: 15px; margin-right: 8px; }

    /* Mobile overlay */
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9997;
    }
    .mobile-nav-overlay.active { display: block; }

    /* Hamburger button */
    .btn-hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 6px;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        margin-right: 8px;
    }

    /* Header */
    .app-header { padding: 0 12px; height: 54px; }
    .header-title  { display: none; }
    .radar-wordmark-text { font-size: 16px; letter-spacing: 3px; }
    .radar-wordmark-dot { width: 5px; height: 5px; }
    .user-badge { font-size: 11px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Main content full width */
    .app-main { padding: 12px; }
    .app-shell { grid-template-columns: 1fr !important; }

    /* Cards and grids single column */
    .grid-3, .grid-4,
    .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr !important; }

    /* Tables scroll horizontally */
    .table-wrap, .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 600px; }

    /* Login page */
    .top-bar { padding: 10px 14px; }
    .top-brand { display: none; }
    .main { padding: 20px 14px; }
    .login-card { padding: 24px 18px 20px; }
    .card-heading h2 { font-size: 18px; }
    .product-identity { margin-bottom: 20px; }

    /* Modals full screen */
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 12px 12px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .modal { align-items: flex-end !important; }

    /* Site dashboard cards stack */
    .dash-cards-grid { grid-template-columns: 1fr 1fr !important; }
    .dash-stat-cards { grid-template-columns: 1fr 1fr !important; }

    /* Schedule / planner */
    .planner-grid { font-size: 11px; }

    /* Insights sidebar hides */
    .ins-sidebar { display: none !important; }
    .ins-main { padding: 12px !important; }

    /* Project cards single column */
    .projects-grid { grid-template-columns: 1fr !important; }
}

/* ── Small mobile (≤480px) ─────────────────────────────────── */
@media (max-width: 480px) {
    .dash-cards-grid { grid-template-columns: 1fr !important; }
    .dash-stat-cards { grid-template-columns: 1fr 1fr !important; }
    .radar-wordmark-text { font-size: 14px; letter-spacing: 2px; }
    .app-main { padding: 8px; }
    .section-title { font-size: 14px; }
    .form-card { padding: 14px; }
    .btn { padding: 6px 12px; font-size: 12px; }
}

/* ── Hide hamburger on desktop ─────────────────────────────── */
.btn-hamburger { display: none; }