/* Dark remains the original customer-area treatment. Light mode adds only
   softer versions of its slate, cyan, and status colours. */
:root[data-portal-theme="light"] {
    color-scheme: light;
    --customer-bg: #eaf2f8;
    --customer-surface: #f8fbfd;
    --customer-raised: #eef5f9;
    --customer-text: #1d2939;
    --customer-muted: #516174;
    --customer-border: #c9d9e4;
    --customer-action: #087f9f;
    --customer-on-action: #ffffff;
    --customer-shadow-color: rgba(26, 61, 88, .10);
    --customer-red: #a93232;
    --customer-amber: #9a5a10;
    --customer-green: #167249;
    --customer-cyan: #087f9f;
    --customer-blue: #2563a8;
    --customer-purple: #7054a0;
    --customer-pink: #a33d70;
    --customer-red-bg: #fbecec;
    --customer-amber-bg: #fcf3df;
    --customer-green-bg: #e8f6ed;
    --customer-cyan-bg: #e5f5f8;
    --customer-blue-bg: #eaf1fa;
    --customer-purple-bg: #f1ecf8;
    --customer-pink-bg: #f9eaf1;
    --bs-body-bg: var(--customer-surface);
    --bs-body-color: var(--customer-text);
    --bs-border-color: var(--customer-border);
}

html[data-portal-theme="light"] body {
    min-height: 100vh;
    background-repeat: no-repeat;
    color: var(--customer-text);
    background: linear-gradient(180deg, var(--customer-bg), var(--customer-surface));
}
html[data-portal-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-portal-theme="light"] textarea,
html[data-portal-theme="light"] select {
    color: var(--customer-text);
    background-color: var(--customer-surface);
    border-color: var(--customer-border);
    color-scheme: light;
}
html[data-portal-theme="light"] option { background: var(--customer-surface); color: var(--customer-text); }
html[data-portal-theme="light"] input::placeholder,
html[data-portal-theme="light"] textarea::placeholder { color: var(--customer-muted); opacity: 1; }
html[data-portal-theme="light"] .btn-outline-light {
    --bs-btn-color: var(--customer-text);
    --bs-btn-border-color: var(--customer-border);
    --bs-btn-hover-color: var(--customer-text);
    --bs-btn-hover-bg: var(--customer-raised);
    --bs-btn-hover-border-color: var(--customer-muted);
    color: var(--customer-text);
    border-color: var(--customer-border);
}
html[data-portal-theme="light"] :is(.btn-primary, .btn-brand, .btn-cyan, .btn-go, .btn-run, .route-btn) {
    background: var(--customer-action);
    color: var(--customer-on-action);
    border-color: var(--customer-action);
}
html[data-portal-theme="light"] :is(.btn-ok, .btn-warn, .btn-danger) { color: var(--customer-on-action); }
html[data-portal-theme="light"] .btn-ok { background: var(--customer-green); border-color: var(--customer-green); }
html[data-portal-theme="light"] .btn-warn { background: var(--customer-amber); border-color: var(--customer-amber); }
html[data-portal-theme="light"] .btn-danger { background: var(--customer-red); border-color: var(--customer-red); }
html[data-portal-theme="light"] :is(.card, .section, .panel, .stat, .metric, .info, .tile, .module, .box) {
    color: var(--customer-text);
    background: #f8fbfd !important;
    border-color: var(--customer-border);
    box-shadow: 0 8px 24px var(--customer-shadow-color);
}
html[data-portal-theme="light"] :is(.card-disabled, .disabled, [aria-disabled="true"]) {
    background: #eef5f9 !important;
    color: var(--customer-muted);
}
html[data-portal-theme="light"] :is(.ci, .icon, .badge, .pill) {
    background-color: var(--customer-cyan-bg);
    border-color: var(--customer-border);
}
html[data-portal-theme="light"] [style*="color:Red" i],
html[data-portal-theme="light"] [style*="color: red" i],
html[data-portal-theme="light"] [style*="color:red" i] { color: var(--customer-red) !important; }
html[data-portal-theme="light"] [style*="color:Green" i],
html[data-portal-theme="light"] [style*="color: green" i],
html[data-portal-theme="light"] [style*="color:green" i] { color: var(--customer-green) !important; }

.portal-theme-dashboard-actions { display: flex; align-items: center; margin-left: auto; }
.portal-theme-toggle {
    appearance: none;
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: .375rem .75rem;
    font: 600 14px/1.5 system-ui, sans-serif;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.portal-theme-toggle:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media print { .portal-theme-toggle { display: none !important; } }