/* =============================================
   Theme: the portal's colors, light and dark
   The dark set applies under html[data-theme="dark"], which the sidebar's
   Dark mode switch sets (installer_base.html). Styles take their colors
   from these tokens rather than naming them, so a new component works in
   both themes. The sidebar and phone top bar stay brand green in both.
   ============================================= */

:root {
    /* Surfaces, from the page up */
    --in-page: #fff;
    --in-surface: #fff;
    --in-sheet: #f7f9fa;
    --in-sheet-2: #fbfcfc;
    --in-sheet-glass: rgba(247, 249, 250, 0.96);
    --in-hover: #f3f6f7;
    --in-wash: #eef2f3;
    --in-track: #e3e8ea;

    --in-border: #dfe5e8;
    --in-border-soft: #e6ebed;
    --in-border-input: #d5dde0;
    --in-border-hover: #c3cdd1;

    --in-text: #1f2d2e;
    --in-text-2: #3d4d4e;
    --in-text-muted: #5b6b6c;
    --in-text-faint: #6b7879;
    --in-text-placeholder: #97a5a6;

    /* The brand green, as text and icons, and as a button */
    --in-accent: var(--fe-dark-green-1);
    --in-accent-hover: #00474c;
    --in-accent-wash: #e4efef;
    --in-accent-soft: #c9dcdd;
    --in-button: var(--fe-dark-green-1);
    --in-button-hover: var(--fe-dark-green-2);
    --in-focus: rgba(0, 97, 104, 0.12);
    --in-shadow: rgba(15, 23, 42, 0.18);
    --in-shadow-soft: rgba(16, 42, 43, 0.06);
    --in-tag-bg: var(--fe-light-green-1);
    --in-tag-text: #0f3d40;

    --in-danger: #b42318;
    --in-danger-border: #d92d20;
    --in-danger-wash: #fdf1f2;

    /* Status groups (see status.css) */
    --in-flett: #2563eb;
    --in-flett-text: #1e3a8a;
    --in-flett-wash: #eef4ff;
    --in-amber: #d98a0b;
    --in-amber-text: #8a5200;
    --in-amber-wash: #fff7e6;
    --in-amber-border: #eab35a;
    --in-complete: #16a34a;
    --in-complete-text: #14532d;
    --in-complete-wash: #e9f9ef;
    --in-idle: #9aa3af;
    --in-idle-text: #4b5563;
    --in-idle-wash: #f3f4f6;
    /* The phases (Facility Status): the brand greens, light to dark in
       flowchart order, and the text on each */
    --in-phase-new: var(--fe-light-green-1);
    --in-phase-new-text: #0f3d40;
    --in-phase-info: var(--fe-primary-green);
    --in-phase-info-text: #06282a;
    --in-phase-review: var(--fe-dark-green-1);
    --in-phase-review-text: #fff;

    /* Memos, highlights, file types and Ask AI */
    --in-memo-bg: #f7f8fa;
    --in-memo-wash: #eef1f5;
    --in-memo-mark: #94a3b8;
    --in-memo-border: #c9d1da;
    --in-memo-text: #6b7480;
    --in-memo-strong: #334155;
    --in-hatch: rgba(71, 84, 103, 0.035);
    --in-glow: #fcefc0;
    --in-glow-wash: rgba(250, 214, 92, 0.3);
    --in-pdf: #c2410c;
    --in-pdf-wash: #fdeee6;
    --in-image: #7c3aed;
    --in-archive: #a16207;
    --in-ai: #7c5cbf;
    --in-ai-wash: #f3f0fa;
    --in-ai-border: #d3c8ef;

    /* Code examples (the API Guide): dark in both themes */
    --in-code-bg: #0f2527;
    --in-code-text: #dbe9e8;
    --in-code-dim: #8db1ae;
    --in-code-key: #8fd6cc;
    --in-code-string: #f2c98b;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --in-page: #0f1719;
    --in-surface: #142023;
    --in-sheet: #19272a;
    --in-sheet-2: #172427;
    --in-sheet-glass: rgba(25, 39, 42, 0.96);
    --in-hover: #1d2c30;
    --in-wash: #223337;
    --in-track: #26383c;

    --in-border: #2a3d41;
    --in-border-soft: #223236;
    --in-border-input: #364b50;
    --in-border-hover: #4a6268;

    --in-text: #e3ebec;
    --in-text-2: #c4d0d1;
    --in-text-muted: #9eafb1;
    --in-text-faint: #869a9c;
    --in-text-placeholder: #62777a;

    --in-accent: #5ccfc4;
    --in-accent-hover: #8fe0d8;
    --in-accent-wash: rgba(92, 207, 196, 0.12);
    --in-accent-soft: #2c5559;
    --in-button: #127b7b;
    --in-button-hover: #178d8c;
    --in-focus: rgba(92, 207, 196, 0.22);
    --in-shadow: rgba(0, 0, 0, 0.5);
    --in-shadow-soft: rgba(0, 0, 0, 0.3);
    --in-tag-bg: rgba(137, 213, 209, 0.16);
    --in-tag-text: #9fe3dd;

    --in-danger: #f1857a;
    --in-danger-border: #e5534b;
    --in-danger-wash: rgba(241, 133, 122, 0.12);

    --in-flett: #4f83f1;
    --in-flett-text: #a9c4ff;
    --in-flett-wash: rgba(59, 130, 246, 0.14);
    --in-amber: #e0a030;
    --in-amber-text: #f2c26b;
    --in-amber-wash: rgba(217, 138, 11, 0.14);
    --in-amber-border: #7a5a1c;
    --in-complete: #2fb562;
    --in-complete-text: #8ee0ad;
    --in-complete-wash: rgba(34, 197, 94, 0.13);
    --in-idle: #7d8794;
    --in-idle-text: #c3c9d1;
    --in-idle-wash: rgba(154, 163, 175, 0.13);
    --in-phase-new: #9fe3dd;
    --in-phase-new-text: #06282a;
    --in-phase-info: #3cc4b6;
    --in-phase-info-text: #06282a;
    --in-phase-review: #147a78;
    --in-phase-review-text: #fff;

    --in-memo-bg: #161f25;
    --in-memo-wash: #243241;
    --in-memo-mark: #7b8ba0;
    --in-memo-border: #3a4a5a;
    --in-memo-text: #9aa7b6;
    --in-memo-strong: #d3dce8;
    --in-hatch: rgba(255, 255, 255, 0.025);
    --in-glow: #4d4220;
    --in-glow-wash: rgba(250, 214, 92, 0.16);
    --in-pdf: #fb8a4c;
    --in-pdf-wash: rgba(251, 138, 76, 0.14);
    --in-image: #b194f5;
    --in-archive: #e2b340;
    --in-ai: #b8a2e6;
    --in-ai-wash: rgba(124, 92, 191, 0.2);
    --in-ai-border: #4d3f75;

    --in-code-bg: #081112;
    --in-code-text: #dbe9e8;
    --in-code-dim: #8db1ae;
    --in-code-key: #8fd6cc;
    --in-code-string: #f2c98b;
}

/* Bootstrap's and styles.css's components, dark. :where() keeps each rule
   as specific as the one it overrides, so the portal's own classes still
   win. */
:where(html[data-theme="dark"]) body {
    color: var(--in-text);
}

:where(html[data-theme="dark"]) a {
    color: var(--in-accent);
}

:where(html[data-theme="dark"]) a:hover,
:where(html[data-theme="dark"]) a:focus {
    color: var(--in-accent-hover);
}

:where(html[data-theme="dark"]) .text-muted {
    color: var(--in-text-faint) !important;
}

:where(html[data-theme="dark"]) hr {
    border-top-color: var(--in-border);
}

:where(html[data-theme="dark"]) .card,
:where(html[data-theme="dark"]) .box,
:where(html[data-theme="dark"]) .list-group-item,
:where(html[data-theme="dark"]) .dropdown-menu,
:where(html[data-theme="dark"]) .modal-content,
:where(html[data-theme="dark"]) .popover {
    border-color: var(--in-border);
    background-color: var(--in-surface);
    color: var(--in-text);
}

:where(html[data-theme="dark"]) .card-header,
:where(html[data-theme="dark"]) .card-footer {
    border-color: var(--in-border);
    background-color: var(--in-sheet);
}

:where(html[data-theme="dark"]) .modal-header,
:where(html[data-theme="dark"]) .modal-footer {
    border-color: var(--in-border);
}

:where(html[data-theme="dark"]) .close {
    color: var(--in-text);
    text-shadow: none;
}

:where(html[data-theme="dark"]) .dropdown-item {
    color: var(--in-text);
}

:where(html[data-theme="dark"]) .dropdown-item:hover,
:where(html[data-theme="dark"]) .dropdown-item:focus {
    background-color: var(--in-hover);
    color: var(--in-text);
}

:where(html[data-theme="dark"]) .table {
    color: var(--in-text);
}

:where(html[data-theme="dark"]) .table th,
:where(html[data-theme="dark"]) .table td,
:where(html[data-theme="dark"]) .table thead th {
    border-color: var(--in-border-soft);
}

:where(html[data-theme="dark"]) .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.025);
}

:where(html[data-theme="dark"]) .table-hover tbody tr:hover {
    background-color: var(--in-hover);
}

:where(html[data-theme="dark"]) .bg-light,
:where(html[data-theme="dark"]) .bg-faded,
:where(html[data-theme="dark"]) .thead-default th {
    background-color: var(--in-sheet) !important;
}

:where(html[data-theme="dark"]) .bg-white {
    background-color: var(--in-surface) !important;
}

:where(html[data-theme="dark"]) .form-control,
:where(html[data-theme="dark"]) .custom-select,
:where(html[data-theme="dark"]) .input-group-addon {
    border-color: var(--in-border-input);
    background-color: var(--in-page);
    color: var(--in-text);
}

:where(html[data-theme="dark"]) .input-group-addon {
    background-color: var(--in-sheet);
}

:where(html[data-theme="dark"]) .form-control:focus {
    border-color: var(--in-accent);
    background-color: var(--in-page);
    color: var(--in-text);
}

:where(html[data-theme="dark"]) .form-control::placeholder {
    color: var(--in-text-placeholder);
}

:where(html[data-theme="dark"]) .form-control:disabled,
:where(html[data-theme="dark"]) .form-control[readonly] {
    background-color: var(--in-wash);
}

:where(html[data-theme="dark"]) .btn-secondary {
    border-color: var(--in-border-input);
    background-color: var(--in-surface);
    color: var(--in-text);
}

:where(html[data-theme="dark"]) .btn-secondary:hover,
:where(html[data-theme="dark"]) .btn-secondary:focus {
    border-color: var(--in-border-hover);
    background-color: var(--in-hover);
    color: var(--in-text);
}

:where(html[data-theme="dark"]) .btn-outline {
    color: var(--in-accent);
}

:where(html[data-theme="dark"]) .nav-tabs {
    border-bottom-color: var(--in-border);
}

:where(html[data-theme="dark"]) .nav-tabs .nav-link.active {
    border-color: var(--in-border) var(--in-border) var(--in-page);
    background-color: var(--in-page);
    color: var(--in-text);
}

:where(html[data-theme="dark"]) .alert-success {
    border-color: rgba(47, 181, 98, 0.35);
    background-color: rgba(34, 197, 94, 0.12);
    color: #a6e9bf;
}

:where(html[data-theme="dark"]) .alert-info {
    border-color: rgba(92, 207, 196, 0.35);
    background-color: rgba(92, 207, 196, 0.1);
    color: #b3ebe5;
}

:where(html[data-theme="dark"]) .alert-warning {
    border-color: rgba(224, 160, 48, 0.4);
    background-color: rgba(217, 138, 11, 0.12);
    color: #f5d08c;
}

:where(html[data-theme="dark"]) .alert-danger,
:where(html[data-theme="dark"]) .alert-error {
    border-color: rgba(229, 83, 75, 0.4);
    background-color: rgba(241, 133, 122, 0.12);
    color: #f8b4ad;
}

:where(html[data-theme="dark"]) code {
    background-color: var(--in-wash);
    color: #f5a3c7;
}

:where(html[data-theme="dark"]) .fe-spinner {
    border-color: var(--in-track);
    border-top-color: var(--fe-primary-green);
}