/* Theme tokens + overrides for the staff console (not the kiosk). */

:root,
[data-theme="light"] {
    --app-bg: #ffffff;
    --app-surface: #ffffff;
    --app-surface-alt: #f8f9fa;
    --app-text: #212529;
    --app-text-muted: #6c757d;
    --app-border: #e2e8f0;
    --app-border-strong: #cbd5e1;
    --app-navbar-start: #2c3e50;
    --app-navbar-end: #4a4a4a;
    --app-navbar-accent: #cae0c7;
    --app-accent: #007bff;
    --app-accent-hover: #0056b3;
    --app-primary: #2c3e50;
    --app-tab-track: #eef1f5;
    --app-tab-border: #dde3ea;
    --app-tab-text: #55606c;
    --app-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
    --app-table-head: #e2e8f0;
    --app-table-head-text: #334155;
    --app-row-hover: rgba(226, 232, 240, 0.9);
    --app-input-bg: #ffffff;
    --app-input-border: #ced4da;
    --app-modal-bg: #ffffff;
    --primary-color: #2c3e50;
    --accent-color: #28a745;
    color-scheme: light;
}

[data-theme="dark"] {
    background-color: var(--app-bg, #15181e);
    --app-bg: #15181e;
    --app-surface: #1c2027;
    --app-surface-alt: #252a32;
    --app-text: #e8edf2;
    --app-text-muted: #b8c0c8;
    --app-border: #32383f;
    --app-border-strong: #3e454e;
    --app-navbar-start: #12151a;
    --app-navbar-end: #1c2027;
    --app-navbar-accent: #4c8fd4;
    --app-accent: #3d7dd6;
    --app-accent-hover: #6ea4e8;
    --app-link: #8bb4e8;
    --app-primary: #e8edf2;
    --app-tab-track: #252a32;
    --app-tab-border: #32383f;
    --app-tab-text: #c2c9d1;
    --app-shadow: 0 8px 20px rgba(8, 10, 14, 0.28);
    --app-table-head: #22262d;
    --app-table-head-text: #d7dde4;
    --app-row-hover: rgba(61, 125, 214, 0.14);
    --app-input-bg: #171a20;
    --app-input-border: #3e454e;
    --app-modal-bg: #1c2027;
    --primary-color: #e8edf2;
    --accent-color: #5fba78;
    color-scheme: dark;
}

/* Popular cool-blue look (Nord / midnight ocean). */
[data-theme="ocean"] {
    background-color: var(--app-bg, #0b1c2c);
    --app-bg: #0b1c2c;
    --app-surface: #12263a;
    --app-surface-alt: #173049;
    --app-text: #e6f1f8;
    --app-text-muted: #8fb0c4;
    --app-border: #234560;
    --app-border-strong: #2d5a7a;
    --app-navbar-start: #071521;
    --app-navbar-end: #0e2a40;
    --app-navbar-accent: #2dd4bf;
    --app-accent: #14b8a6;
    --app-accent-hover: #2dd4bf;
    --app-primary: #5eead4;
    --app-tab-track: #173049;
    --app-tab-border: #234560;
    --app-tab-text: #9ec4d8;
    --app-shadow: 0 4px 16px rgba(2, 12, 24, 0.45);
    --app-table-head: #173049;
    --app-table-head-text: #b8d4e6;
    --app-row-hover: rgba(45, 212, 191, 0.12);
    --app-input-bg: #0e2032;
    --app-input-border: #2a4d68;
    --app-modal-bg: #12263a;
    --primary-color: #5eead4;
    --accent-color: #2dd4bf;
    color-scheme: dark;
}

/* ---- Shared themed surfaces (dark + ocean use the tokens above) ---- */

[data-theme="dark"] body,
[data-theme="ocean"] body,
[data-theme="dark"] .app-main,
[data-theme="ocean"] .app-main {
    background-color: var(--app-bg);
    color: var(--app-text);
}

[data-theme="dark"] .content-wrapper,
[data-theme="ocean"] .content-wrapper,
[data-theme="dark"] .settings-page,
[data-theme="ocean"] .settings-page,
[data-theme="dark"] .settings-page-title,
[data-theme="ocean"] .settings-page-title,
[data-theme="dark"] h1,
[data-theme="ocean"] h1,
[data-theme="dark"] h2,
[data-theme="ocean"] h2,
[data-theme="dark"] h3,
[data-theme="ocean"] h3,
[data-theme="dark"] h4,
[data-theme="ocean"] h4,
[data-theme="dark"] h5,
[data-theme="ocean"] h5,
[data-theme="dark"] h6,
[data-theme="ocean"] h6 {
    color: var(--app-text);
}

[data-theme="dark"] .text-muted,
[data-theme="ocean"] .text-muted,
[data-theme="dark"] .form-text,
[data-theme="ocean"] .form-text {
    color: var(--app-text-muted) !important;
}

[data-theme="dark"] .card,
[data-theme="ocean"] .card,
[data-theme="dark"] .modal-content,
[data-theme="ocean"] .modal-content {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

[data-theme="dark"] .card-header,
[data-theme="ocean"] .card-header,
[data-theme="dark"] .modal-header,
[data-theme="ocean"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="ocean"] .modal-footer {
    background-color: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .card-body,
[data-theme="ocean"] .card-body,
[data-theme="dark"] .modal-body,
[data-theme="ocean"] .modal-body {
    background-color: var(--app-surface);
    color: var(--app-text);
}

[data-theme="dark"] .close,
[data-theme="ocean"] .close {
    color: var(--app-text);
    text-shadow: none;
    opacity: 0.85;
}

[data-theme="dark"] .close:hover,
[data-theme="ocean"] .close:hover {
    color: var(--app-text);
    opacity: 1;
}

[data-theme="dark"] .form-control,
[data-theme="ocean"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="ocean"] .custom-select,
[data-theme="dark"] select.form-control,
[data-theme="ocean"] select.form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="ocean"] textarea.form-control,
[data-theme="dark"] #emailSearch,
[data-theme="ocean"] #emailSearch {
    background-color: var(--app-input-bg);
    border-color: var(--app-input-border);
    color: var(--app-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="ocean"] .form-control:focus,
[data-theme="dark"] #emailSearch:focus,
[data-theme="ocean"] #emailSearch:focus {
    background-color: var(--app-input-bg);
    border-color: var(--app-accent);
    color: var(--app-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] #emailSearch:focus {
    box-shadow: 0 0 0 0.2rem rgba(47, 129, 247, 0.28);
}

[data-theme="ocean"] .form-control:focus,
[data-theme="ocean"] #emailSearch:focus {
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.25);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="ocean"] .form-control::placeholder,
[data-theme="dark"] #emailSearch::placeholder,
[data-theme="ocean"] #emailSearch::placeholder {
    color: var(--app-text-muted);
    opacity: 1;
}

[data-theme="dark"] .input-group-text,
[data-theme="ocean"] .input-group-text,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="ocean"] .btn-outline-secondary {
    background-color: var(--app-surface-alt);
    border-color: var(--app-input-border);
    color: var(--app-text);
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="ocean"] .btn-outline-secondary:hover {
    background-color: var(--app-border);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

[data-theme="dark"] .btn-primary,
[data-theme="ocean"] .btn-primary {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="ocean"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus,
[data-theme="ocean"] .btn-primary:focus {
    background-color: var(--app-accent-hover);
    border-color: var(--app-accent-hover);
}

[data-theme="dark"] .btn-secondary,
[data-theme="ocean"] .btn-secondary {
    background-color: var(--app-surface-alt);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

[data-theme="dark"] .dropdown-menu,
[data-theme="ocean"] .dropdown-menu {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .dropdown-item,
[data-theme="ocean"] .dropdown-item {
    color: var(--app-text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="ocean"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="ocean"] .dropdown-item:focus {
    background-color: var(--app-surface-alt);
    color: var(--app-text);
}

[data-theme="dark"] .dropdown-divider,
[data-theme="ocean"] .dropdown-divider {
    border-top-color: var(--app-border);
}

[data-theme="dark"] .list-group-item,
[data-theme="ocean"] .list-group-item {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .alert-info,
[data-theme="ocean"] .alert-info {
    background-color: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text);
}

/* Tables */
[data-theme="dark"] .custom-table,
[data-theme="ocean"] .custom-table,
[data-theme="dark"] .table-responsive .table,
[data-theme="ocean"] .table-responsive .table,
[data-theme="dark"] .content-wrapper .table,
[data-theme="ocean"] .content-wrapper .table {
    background: var(--app-surface);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

[data-theme="dark"] .custom-table thead th,
[data-theme="ocean"] .custom-table thead th,
[data-theme="dark"] .table-responsive .table thead th,
[data-theme="ocean"] .table-responsive .table thead th,
[data-theme="dark"] .content-wrapper .table thead th,
[data-theme="ocean"] .content-wrapper .table thead th,
[data-theme="dark"] .thead-light th,
[data-theme="ocean"] .thead-light th {
    background-color: var(--app-table-head) !important;
    color: var(--app-table-head-text);
    border-bottom-color: var(--app-border-strong);
}

[data-theme="dark"] .custom-table td,
[data-theme="ocean"] .custom-table td,
[data-theme="dark"] .table-responsive .table td,
[data-theme="ocean"] .table-responsive .table td,
[data-theme="dark"] .content-wrapper .table td,
[data-theme="ocean"] .content-wrapper .table td,
[data-theme="dark"] .table td,
[data-theme="ocean"] .table td {
    color: var(--app-text);
    border-bottom-color: var(--app-border);
}

[data-theme="dark"] .table-hover tbody tr:hover td,
[data-theme="ocean"] .table-hover tbody tr:hover td,
[data-theme="dark"] .custom-table tbody tr.row-hover td,
[data-theme="ocean"] .custom-table tbody tr.row-hover td {
    background-color: var(--app-row-hover) !important;
}

@media (hover: hover) {
    [data-theme="dark"] .custom-table td.email:hover,
    [data-theme="ocean"] .custom-table td.email:hover,
    [data-theme="dark"] .custom-table td.notes:hover,
    [data-theme="ocean"] .custom-table td.notes:hover,
    [data-theme="dark"] .custom-table td.view-photos:hover,
    [data-theme="ocean"] .custom-table td.view-photos:hover {
        background-color: var(--app-surface-alt) !important;
    }
}

[data-theme="dark"] .custom-table tbody tr.unpaid,
[data-theme="ocean"] .custom-table tbody tr.unpaid {
    background-color: rgba(185, 28, 28, 0.22);
}

[data-theme="dark"] .custom-table tbody tr.staff,
[data-theme="ocean"] .custom-table tbody tr.staff {
    background-color: rgba(14, 116, 144, 0.28);
}

[data-theme="dark"] .custom-table tbody tr.sent,
[data-theme="ocean"] .custom-table tbody tr.sent {
    background-color: rgba(21, 128, 61, 0.22);
}

[data-theme="dark"] .custom-table tbody tr.paid,
[data-theme="ocean"] .custom-table tbody tr.paid {
    background-color: rgba(180, 83, 9, 0.24);
}

[data-theme="dark"] .order-ticket-summary,
[data-theme="ocean"] .order-ticket-summary {
    background: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

[data-theme="dark"] .order-notes-more,
[data-theme="ocean"] .order-notes-more {
    background: var(--app-surface-alt);
    color: var(--app-text-muted);
}

[data-theme="dark"] .order-notes-empty,
[data-theme="ocean"] .order-notes-empty {
    color: var(--app-text-muted);
}

[data-theme="dark"] .merge-price-breakdown,
[data-theme="ocean"] .merge-price-breakdown {
    color: var(--app-text-muted);
}

/* Navbar */
.navbar {
    background: linear-gradient(to right, var(--app-navbar-start), var(--app-navbar-end));
}

.navbar.navbar-dark.fixed-top,
.navbar.navbar-dark {
    border-top-color: var(--app-navbar-accent);
}

/* Settings / admin cards that hardcode light greys */
[data-theme="dark"] .whitelist-container .card-header,
[data-theme="ocean"] .whitelist-container .card-header,
[data-theme="dark"] .settings-pins-container .card-header,
[data-theme="ocean"] .settings-pins-container .card-header {
    background-color: var(--app-surface-alt);
    border-bottom-color: var(--app-border);
}

[data-theme="dark"] .settings-unlock-card,
[data-theme="ocean"] .settings-unlock-card {
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

/* Gallery */
[data-theme="dark"] #gallery-header,
[data-theme="ocean"] #gallery-header,
[data-theme="dark"] .photo-card,
[data-theme="ocean"] .photo-card {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .gallery-title,
[data-theme="ocean"] .gallery-title,
[data-theme="dark"] #gallery-header,
[data-theme="ocean"] #gallery-header {
    color: var(--app-text);
}

[data-theme="dark"] .gallery-date-input,
[data-theme="ocean"] .gallery-date-input,
[data-theme="dark"] .gallery-date-arrow,
[data-theme="ocean"] .gallery-date-arrow,
[data-theme="dark"] .gallery-location-select,
[data-theme="ocean"] .gallery-location-select,
[data-theme="dark"] .gallery-tour-select,
[data-theme="ocean"] .gallery-tour-select,
[data-theme="dark"] .gallery-sold-toggle,
[data-theme="ocean"] .gallery-sold-toggle {
    background: var(--app-input-bg);
    border-color: var(--app-input-border);
    color: var(--app-text);
}

[data-theme="dark"] .gallery-detection-summary,
[data-theme="ocean"] .gallery-detection-summary {
    background: var(--app-surface-alt);
    color: var(--app-text-muted);
    border-bottom-color: var(--app-border);
}

[data-theme="dark"] .photo-gallery-page,
[data-theme="ocean"] .photo-gallery-page {
    background-color: var(--app-bg);
}

[data-theme="dark"] .gallery-photo-modal,
[data-theme="ocean"] .gallery-photo-modal,
[data-theme="dark"] .gallery-photo-modal .modal-header,
[data-theme="ocean"] .gallery-photo-modal .modal-header,
[data-theme="dark"] .gallery-modal-toolbar,
[data-theme="ocean"] .gallery-modal-toolbar {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .gallery-photo-modal .modal-title,
[data-theme="ocean"] .gallery-photo-modal .modal-title {
    color: var(--app-text);
}

[data-theme="dark"] .gallery-modal-index,
[data-theme="ocean"] .gallery-modal-index,
[data-theme="dark"] .gallery-modal-taken,
[data-theme="ocean"] .gallery-modal-taken {
    color: var(--app-text-muted);
}

[data-theme="dark"] .gallery-modal-tour,
[data-theme="ocean"] .gallery-modal-tour {
    background: var(--app-input-bg);
    border-color: var(--app-input-border);
    color: var(--app-text);
}

[data-theme="dark"] .gallery-modal-tour:hover,
[data-theme="ocean"] .gallery-modal-tour:hover {
    background: var(--app-surface-alt);
    border-color: var(--app-border-strong, var(--app-border));
    color: var(--app-text);
}

[data-theme="dark"] .gallery-modal-tour.is-active,
[data-theme="ocean"] .gallery-modal-tour.is-active {
    background: var(--app-text);
    border-color: var(--app-text);
    color: var(--app-surface);
}

[data-theme="dark"] .photo-card-sold-to,
[data-theme="ocean"] .photo-card-sold-to,
[data-theme="dark"] .gallery-modal-sold-emails,
[data-theme="ocean"] .gallery-modal-sold-emails {
    color: #86efac;
}

/* Sales / orders chrome */
[data-theme="dark"] .sales-container,
[data-theme="ocean"] .sales-container {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

/* Admin */
[data-theme="dark"] .admin-header,
[data-theme="ocean"] .admin-header {
    border-bottom-color: var(--app-border);
}

[data-theme="dark"] .admin-page-title,
[data-theme="ocean"] .admin-page-title,
[data-theme="dark"] .admin-dashboard h5,
[data-theme="ocean"] .admin-dashboard h5 {
    color: var(--app-text);
}

[data-theme="dark"] .admin-page-lead,
[data-theme="ocean"] .admin-page-lead {
    color: var(--app-text-muted);
}

[data-theme="dark"] .user-management,
[data-theme="ocean"] .user-management {
    background: var(--app-surface);
    border-color: var(--app-border);
}

[data-theme="dark"] .user-management .table-wrap,
[data-theme="ocean"] .user-management .table-wrap {
    border-color: var(--app-border);
}

[data-theme="dark"] .admin-table thead th,
[data-theme="ocean"] .admin-table thead th {
    background: var(--app-table-head);
    border-bottom-color: var(--app-border-strong);
    color: var(--app-text-muted);
}

[data-theme="dark"] .admin-table tbody td,
[data-theme="ocean"] .admin-table tbody td {
    border-bottom-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .admin-table tbody tr:hover,
[data-theme="ocean"] .admin-table tbody tr:hover {
    background: var(--app-row-hover);
}

[data-theme="dark"] .admin-table select,
[data-theme="ocean"] .admin-table select {
    background: var(--app-input-bg);
    border-color: var(--app-input-border);
    color: var(--app-text);
}

[data-theme="dark"] .admin-dashboard .nav-tabs,
[data-theme="ocean"] .admin-dashboard .nav-tabs {
    border-bottom-color: var(--app-border);
}

[data-theme="dark"] .admin-dashboard .nav-tabs .nav-link,
[data-theme="ocean"] .admin-dashboard .nav-tabs .nav-link {
    color: var(--app-tab-text) !important;
    background-color: var(--app-surface-alt);
}

[data-theme="dark"] .admin-dashboard .nav-tabs .nav-link:hover,
[data-theme="ocean"] .admin-dashboard .nav-tabs .nav-link:hover {
    border-color: var(--app-border);
    background-color: var(--app-border);
}

[data-theme="dark"] .admin-dashboard .nav-tabs .nav-link.active,
[data-theme="ocean"] .admin-dashboard .nav-tabs .nav-link.active,
[data-theme="dark"] .admin-dashboard .nav-tabs .nav-item.show .nav-link,
[data-theme="ocean"] .admin-dashboard .nav-tabs .nav-item.show .nav-link {
    color: var(--app-text) !important;
    background-color: var(--app-surface);
    border-color: var(--app-border) var(--app-border) var(--app-surface);
}

[data-theme="dark"] .admin-dashboard .table,
[data-theme="ocean"] .admin-dashboard .table {
    color: var(--app-text);
}

[data-theme="dark"] .admin-top-tab-content,
[data-theme="ocean"] .admin-top-tab-content,
[data-theme="dark"] .action-menu-list,
[data-theme="ocean"] .action-menu-list,
[data-theme="dark"] .client-checkbox-summary,
[data-theme="ocean"] .client-checkbox-summary,
[data-theme="dark"] .client-checkbox-options,
[data-theme="ocean"] .client-checkbox-options,
[data-theme="dark"] .collapsible-card.is-nested,
[data-theme="ocean"] .collapsible-card.is-nested,
[data-theme="dark"] .sales-summary-bar,
[data-theme="ocean"] .sales-summary-bar {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .admin-dashboard .form-control,
[data-theme="ocean"] .admin-dashboard .form-control,
[data-theme="dark"] .user-management .stack input,
[data-theme="ocean"] .user-management .stack input,
[data-theme="dark"] .user-management .stack select,
[data-theme="ocean"] .user-management .stack select {
    background-color: var(--app-input-bg);
    border-color: var(--app-input-border);
    color: var(--app-text);
}

[data-theme="dark"] .user-management .stack label,
[data-theme="ocean"] .user-management .stack label,
[data-theme="dark"] .collapsible-chevron,
[data-theme="ocean"] .collapsible-chevron,
[data-theme="dark"] .admin-stat-label,
[data-theme="ocean"] .admin-stat-label {
    color: var(--app-text-muted);
}

[data-theme="dark"] .collapsible-toggle:hover,
[data-theme="ocean"] .collapsible-toggle:hover,
[data-theme="dark"] .action-menu-list button:hover,
[data-theme="ocean"] .action-menu-list button:hover {
    background: var(--app-surface-alt);
}

[data-theme="dark"] .collapsible-body,
[data-theme="ocean"] .collapsible-body {
    border-top-color: var(--app-border);
}

[data-theme="dark"] .admin-stat-card,
[data-theme="ocean"] .admin-stat-card,
[data-theme="dark"] .app-update-log,
[data-theme="ocean"] .app-update-log,
[data-theme="dark"] .admin-dashboard .card-header,
[data-theme="ocean"] .admin-dashboard .card-header {
    background: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .admin-stat-value,
[data-theme="ocean"] .admin-stat-value,
[data-theme="dark"] .admin-dashboard .admin-card-heading,
[data-theme="ocean"] .admin-dashboard .admin-card-heading {
    color: var(--app-text);
}

[data-theme="dark"] .admin-dashboard .card,
[data-theme="ocean"] .admin-dashboard .card {
    border-color: var(--app-border);
}

[data-theme="dark"] .admin-sub-tabs .nav-link,
[data-theme="ocean"] .admin-sub-tabs .nav-link,
[data-theme="dark"] .sales-sub-nav .nav-link,
[data-theme="ocean"] .sales-sub-nav .nav-link {
    color: var(--app-tab-text);
}

[data-theme="dark"] .admin-sub-tabs .nav-link:hover,
[data-theme="ocean"] .admin-sub-tabs .nav-link:hover,
[data-theme="dark"] .sales-sub-nav .nav-link:hover,
[data-theme="ocean"] .sales-sub-nav .nav-link:hover {
    background: var(--app-surface-alt);
    color: var(--app-text);
}

[data-theme="dark"] .admin-sub-tabs .nav-link.active,
[data-theme="ocean"] .admin-sub-tabs .nav-link.active,
[data-theme="dark"] .sales-sub-nav .nav-link.active,
[data-theme="ocean"] .sales-sub-nav .nav-link.active {
    color: #fff;
    background-color: var(--app-accent);
}

[data-theme="dark"] .sales-workspace,
[data-theme="ocean"] .sales-workspace {
    --sales-border: var(--app-border);
    --sales-surface: var(--app-surface);
    --sales-muted: var(--app-text-muted);
    --sales-text: var(--app-text);
}

[data-theme="dark"] .sales-callout,
[data-theme="ocean"] .sales-callout {
    background: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

[data-theme="dark"] .support-page,
[data-theme="ocean"] .support-page {
    --support-ink: var(--app-text);
    --support-muted: var(--app-text-muted);
    --support-line: var(--app-border);
    --support-surface: var(--app-surface);
    --support-rail: var(--app-surface-alt);
    --support-accent: var(--app-primary);
}

[data-theme="dark"] .support-open-count,
[data-theme="ocean"] .support-open-count {
    background: var(--app-surface-alt);
}

[data-theme="dark"] .camera-health-tours-panel,
[data-theme="ocean"] .camera-health-tours-panel {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .camera-health-tours-nav-btn,
[data-theme="ocean"] .camera-health-tours-nav-btn,
[data-theme="dark"] .tours-day-today-btn,
[data-theme="ocean"] .tours-day-today-btn,
[data-theme="dark"] .camera-health-tour-card,
[data-theme="ocean"] .camera-health-tour-card,
[data-theme="dark"] .tours-admin-settings-header,
[data-theme="ocean"] .tours-admin-settings-header,
[data-theme="dark"] .tours-admin-settings-exclude-toggle,
[data-theme="ocean"] .tours-admin-settings-exclude-toggle,
[data-theme="dark"] .tours-admin-settings-exclude-menu,
[data-theme="ocean"] .tours-admin-settings-exclude-menu {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

[data-theme="dark"] .tours-admin-settings,
[data-theme="ocean"] .tours-admin-settings,
[data-theme="dark"] .tours-full-tour-stage,
[data-theme="ocean"] .tours-full-tour-stage {
    background: var(--app-surface-alt);
    border-color: var(--app-border);
}

[data-theme="dark"] .tours-full-tour-stage-loc,
[data-theme="ocean"] .tours-full-tour-stage-loc,
[data-theme="dark"] .tours-camera-cards-heading,
[data-theme="ocean"] .tours-camera-cards-heading {
    color: var(--app-text);
}

[data-theme="dark"] .tours-full-tour-stage-meta,
[data-theme="ocean"] .tours-full-tour-stage-meta {
    color: var(--app-text-muted);
}

[data-theme="dark"] .camera-health-tours-nav-btn:hover:not(:disabled),
[data-theme="ocean"] .camera-health-tours-nav-btn:hover:not(:disabled),
[data-theme="dark"] .tours-day-today-btn:hover,
[data-theme="ocean"] .tours-day-today-btn:hover,
[data-theme="dark"] .tours-admin-settings-header:hover,
[data-theme="ocean"] .tours-admin-settings-header:hover,
[data-theme="dark"] .tours-admin-settings-exclude-option:hover,
[data-theme="ocean"] .tours-admin-settings-exclude-option:hover {
    background: var(--app-surface-alt);
    color: var(--app-text);
}

[data-theme="dark"] .tours-timeline-row .tours-camera-name,
[data-theme="ocean"] .tours-timeline-row .tours-camera-name {
    background: var(--app-surface);
}

/* Login / set-password (standalone pages) */
[data-theme="dark"] .login-page,
[data-theme="ocean"] .login-page {
    background: linear-gradient(165deg, var(--app-bg) 0%, var(--app-surface-alt) 45%, var(--app-bg) 100%);
}

[data-theme="dark"] .login-card,
[data-theme="ocean"] .login-card {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    box-shadow: var(--app-shadow);
}

[data-theme="dark"] .login-card::before,
[data-theme="ocean"] .login-card::before {
    background: linear-gradient(90deg, var(--app-accent), var(--app-accent-hover));
}

[data-theme="dark"] .login-brand .login-title,
[data-theme="ocean"] .login-brand .login-title,
[data-theme="dark"] .login-card label,
[data-theme="ocean"] .login-card label {
    color: var(--app-text);
}

[data-theme="dark"] .login-brand .login-subtitle,
[data-theme="ocean"] .login-brand .login-subtitle,
[data-theme="dark"] .login-footer p,
[data-theme="ocean"] .login-footer p {
    color: var(--app-text-muted);
}

[data-theme="dark"] .login-card .form-control,
[data-theme="ocean"] .login-card .form-control {
    background-color: var(--app-input-bg);
    border-color: var(--app-input-border);
    color: var(--app-text);
}

[data-theme="dark"] .login-card .btn-primary,
[data-theme="ocean"] .login-card .btn-primary {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

[data-theme="dark"] .login-card .btn-primary:hover,
[data-theme="ocean"] .login-card .btn-primary:hover,
[data-theme="dark"] .login-alt-link a,
[data-theme="ocean"] .login-alt-link a,
[data-theme="dark"] .login-footer a,
[data-theme="ocean"] .login-footer a {
    color: var(--app-accent-hover);
}

[data-theme="dark"] .login-alt-link a,
[data-theme="ocean"] .login-alt-link a {
    color: var(--app-accent);
}

[data-theme="dark"] .login-card .btn-primary:hover,
[data-theme="ocean"] .login-card .btn-primary:hover {
    background-color: var(--app-accent-hover);
    border-color: var(--app-accent-hover);
    color: #fff;
}

/* Theme picker */
.theme-picker-container {
    max-width: 880px;
    margin: 0 auto;
}

.theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.theme-option {
    display: block;
    width: 100%;
    padding: 0;
    border: 2px solid var(--app-border, #e2e8f0);
    border-radius: 12px;
    background: var(--app-surface, #fff);
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.theme-option:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow);
}

.theme-option.is-selected {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.28);
}

[data-theme="dark"] .theme-option.is-selected {
    box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.35);
}

[data-theme="ocean"] .theme-option.is-selected {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.28);
}

.theme-option-preview {
    height: 112px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.theme-option-preview-bar {
    height: 14px;
    border-radius: 4px;
}

.theme-option-preview-body {
    flex: 1;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.theme-option-preview-line {
    height: 8px;
    width: 70%;
    border-radius: 4px;
}

.theme-option-preview-chip {
    height: 16px;
    width: 42px;
    border-radius: 999px;
    margin-top: auto;
}

.theme-option-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--app-border, #e2e8f0);
}

.theme-option-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.theme-option-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--app-text-muted, #6c757d);
    margin-top: 0.1rem;
}

.theme-option-check {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    border: 1px solid var(--app-border-strong, #cbd5e1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: transparent;
    flex-shrink: 0;
}

.theme-option.is-selected .theme-option-check {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}

.theme-preview-light {
    background: #f4f6f8;
}
.theme-preview-light .theme-option-preview-bar { background: linear-gradient(to right, #2c3e50, #4a4a4a); }
.theme-preview-light .theme-option-preview-body { background: #fff; border: 1px solid #e2e8f0; }
.theme-preview-light .theme-option-preview-line { background: #cbd5e1; }
.theme-preview-light .theme-option-preview-chip { background: #007bff; }

.theme-preview-dark {
    background: #15181e;
}
.theme-preview-dark .theme-option-preview-bar { background: linear-gradient(to right, #12151a, #1c2027); }
.theme-preview-dark .theme-option-preview-body { background: #1c2027; border: 1px solid #32383f; }
.theme-preview-dark .theme-option-preview-line { background: #3e454e; }
.theme-preview-dark .theme-option-preview-chip { background: #3d7dd6; }

.theme-preview-ocean {
    background: #0b1c2c;
}
.theme-preview-ocean .theme-option-preview-bar { background: linear-gradient(to right, #071521, #0e2a40); }
.theme-preview-ocean .theme-option-preview-body { background: #12263a; border: 1px solid #234560; }
.theme-preview-ocean .theme-option-preview-line { background: #2d5a7a; }
.theme-preview-ocean .theme-option-preview-chip { background: #14b8a6; }

@media (max-width: 700px) {
    .theme-picker-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------
   Dark mode readability — beat leftover light-theme ink and keep
   secondary copy above WCAG AA on charcoal surfaces.
   ------------------------------------------------------------------ */
html[data-theme="dark"] {
    --app-link: #8bb4e8;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .content-wrapper {
    color: var(--app-text);
}

html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] li,
html[data-theme="dark"] dt,
html[data-theme="dark"] dd,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] legend,
html[data-theme="dark"] summary,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-text,
html[data-theme="dark"] .custom-control-label,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black-50 {
    color: var(--app-text);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .text-black-50 {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.logout-btn) {
    color: var(--app-link);
}

html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover {
    color: var(--app-accent-hover);
}

html[data-theme="dark"] .page-link {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-link);
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}

html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .jumbotron,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-header,
html[data-theme="dark"] .popover-body {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

/* Orders toolbar / filters (inline styles load after themes.css) */
html[data-theme="dark"] .day-today-btn,
html[data-theme="dark"] .exit-search-btn,
html[data-theme="dark"] .day-seg-btn,
html[data-theme="dark"] .day-seg-label,
html[data-theme="dark"] .orders-search-inline,
html[data-theme="dark"] .orders-date-field,
html[data-theme="dark"] .orders-filter-select,
html[data-theme="dark"] .clear-date-btn,
html[data-theme="dark"] .order-tour-link {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .day-segment {
    background: var(--app-surface-alt);
    border-color: var(--app-border);
}

html[data-theme="dark"] .day-seg-btn + .day-seg-label,
html[data-theme="dark"] .day-seg-label + .day-seg-btn {
    border-left-color: var(--app-border);
}

html[data-theme="dark"] .day-today-btn:hover,
html[data-theme="dark"] .exit-search-btn:hover,
html[data-theme="dark"] .day-seg-btn:hover:not(:disabled),
html[data-theme="dark"] .clear-date-btn:hover,
html[data-theme="dark"] .order-tour-link:hover {
    background: var(--app-surface-alt);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

html[data-theme="dark"] .orders-total-label,
html[data-theme="dark"] .day-label-caret,
html[data-theme="dark"] .orders-search-row > .fa-search {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .day-seg-label:hover .day-label-caret {
    color: var(--app-text);
}

html[data-theme="dark"] .orders-search-inline:focus,
html[data-theme="dark"] .orders-date-field:focus,
html[data-theme="dark"] .orders-filter-select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.22);
    color: var(--app-text);
    background: var(--app-input-bg);
}

/* Gallery leftover ink */
html[data-theme="dark"] .gallery-title,
html[data-theme="dark"] .photo-card-title,
html[data-theme="dark"] .gallery-date-input,
html[data-theme="dark"] .gallery-location-select,
html[data-theme="dark"] .gallery-tour-select,
html[data-theme="dark"] .gallery-photo-modal .modal-title {
    color: var(--app-text);
}

html[data-theme="dark"] .gallery-photo-count,
html[data-theme="dark"] .photo-card-time,
html[data-theme="dark"] .gallery-modal-index,
html[data-theme="dark"] .gallery-modal-taken,
html[data-theme="dark"] .gallery-sold-toggle button,
html[data-theme="dark"] .detection-count-participant {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .gallery-sold-toggle button:hover:not(.active) {
    background: var(--app-surface-alt);
    color: var(--app-text);
}

html[data-theme="dark"] .gallery-utility-subrow,
html[data-theme="dark"] #order-card {
    border-top-color: var(--app-border);
}

/* Admin leftover ink */
html[data-theme="dark"] .admin-page-title,
html[data-theme="dark"] .admin-dashboard h5,
html[data-theme="dark"] .admin-stat-value,
html[data-theme="dark"] .admin-dashboard .admin-card-heading,
html[data-theme="dark"] .client-checkbox-summary,
html[data-theme="dark"] .client-checkbox-option,
html[data-theme="dark"] .user-management .stack input,
html[data-theme="dark"] .user-management .stack select {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .admin-page-lead,
html[data-theme="dark"] .admin-stat-label,
html[data-theme="dark"] .user-management .stack label,
html[data-theme="dark"] .collapsible-chevron,
html[data-theme="dark"] .admin-table thead th {
    color: var(--app-text-muted) !important;
}

/* Support / Tours leftover ink */
html[data-theme="dark"] .support-page,
html[data-theme="dark"] .tours-container,
html[data-theme="dark"] .camera-health-tours-nav-label strong,
html[data-theme="dark"] .tours-full-tour-stage-loc,
html[data-theme="dark"] .tours-camera-cards-heading,
html[data-theme="dark"] .tours-admin-settings-header,
html[data-theme="dark"] .tours-admin-settings-exclude-toggle,
html[data-theme="dark"] .tours-admin-settings-exclude-option-copy strong {
    color: var(--app-text);
}

html[data-theme="dark"] .camera-health-tours-nav-label span,
html[data-theme="dark"] .tours-full-tour-stage-meta,
html[data-theme="dark"] .tours-admin-settings-exclude-chevron {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .order-notes-hint,
html[data-theme="dark"] .order-notes-empty,
html[data-theme="dark"] .merge-price-breakdown {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .btn-primary {
    color: #fff;
}

html[data-theme="dark"] .camera-health-hours-cell,
html[data-theme="dark"] .support-ticket-description,
html[data-theme="dark"] .ticket-admin-form input,
html[data-theme="dark"] .ticket-admin-form textarea,
html[data-theme="dark"] .ticket-admin-form select {
    color: var(--app-text);
    background-color: var(--app-input-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .camera-health-hours-cell {
    background-color: transparent;
    border-color: inherit;
}

html[data-theme="dark"] .support-ticket-details {
    background: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .support-ticket-description {
    background-color: transparent;
    border-color: transparent;
}

html[data-theme="dark"] .support-ticket-description.is-empty {
    color: var(--app-text-muted);
}

/* Soften leftover white chrome and neon status colors on Support */
html[data-theme="dark"] .support-section-head,
html[data-theme="dark"] .support-tickets-panel .archived-tickets .support-section-head {
    background: var(--app-surface-alt);
    border-bottom-color: var(--app-border);
}

html[data-theme="dark"] .support-section-card {
    background: var(--app-surface);
    border-color: var(--app-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .support-ticket-card,
html[data-theme="dark"] .support-ticket-card.is-archived,
html[data-theme="dark"] .ticket-category-chip,
html[data-theme="dark"] .ticket-response,
html[data-theme="dark"] .support-ticket-empty,
html[data-theme="dark"] .support-tickets-panel .archived-tickets {
    background: var(--app-surface-alt);
    border-color: var(--app-border);
    box-shadow: none;
    color: var(--app-text);
}

html[data-theme="dark"] .support-ticket-card:hover,
html[data-theme="dark"] .support-ticket-card.is-expanded {
    border-color: var(--app-border-strong);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .support-ticket-card.is-location-match {
    border-color: #4c6f99;
    box-shadow: 0 0 0 1px rgba(76, 143, 212, 0.18);
}

html[data-theme="dark"] .ticket-location-offer {
    background: rgba(61, 125, 214, 0.12);
    border-color: #3d5573;
    box-shadow: none;
}

html[data-theme="dark"] .ticket-location-offer.has-open-tickets {
    background: rgba(217, 119, 6, 0.12);
    border-color: #7a5a32;
    box-shadow: none;
}

html[data-theme="dark"] .ticket-location-offer-copy > strong,
html[data-theme="dark"] .ticket-reply > p,
html[data-theme="dark"] .ticket-response-meta strong,
html[data-theme="dark"] .ticket-response-body,
html[data-theme="dark"] .support-archive-count {
    color: var(--app-text);
}

html[data-theme="dark"] .ticket-location-offer-label,
html[data-theme="dark"] .ticket-location-offer-copy > p,
html[data-theme="dark"] .ticket-reply-form > label,
html[data-theme="dark"] .support-ticket-card.is-archived .support-ticket-title {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .ticket-location-offer-icon {
    background: rgba(61, 125, 214, 0.2);
    color: #8bb4e8;
}

html[data-theme="dark"] .ticket-reply-form textarea,
html[data-theme="dark"] .ticket-admin-form input,
html[data-theme="dark"] .ticket-admin-form textarea,
html[data-theme="dark"] .ticket-admin-form select {
    background: var(--app-input-bg);
    border-color: var(--app-input-border);
    color: var(--app-text);
}

html[data-theme="dark"] .camera-health-container .table thead th,
html[data-theme="dark"] .camera-health-container table.table thead th {
    background: var(--app-table-head) !important;
    color: var(--app-table-head-text) !important;
    border-bottom-color: var(--app-border);
}

html[data-theme="dark"] .camera-health-container .table tbody tr.is-ticket-selected {
    background-color: rgba(61, 125, 214, 0.16) !important;
    box-shadow: inset 3px 0 0 #4c8fd4;
}

html[data-theme="dark"] .camera-health-container .table tbody tr.is-ticket-selected td {
    background-color: transparent !important;
    color: var(--app-text);
}

html[data-theme="dark"] .camera-health-container .table tbody tr.is-ticket-selected .camera-health-name-text {
    color: #c5dbf5;
}

html[data-theme="dark"] .camera-health-container .table tbody tr:hover {
    box-shadow: inset 3px 0 0 #4c6f99;
}

html[data-theme="dark"] .uptime-thumb-wrap {
    background: var(--app-surface-alt);
    border-color: var(--app-border);
}

html[data-theme="dark"] .last-photo-thumb {
    border-color: var(--app-border);
}

html[data-theme="dark"] .status-healthy {
    background-color: rgba(95, 186, 120, 0.18) !important;
    color: #9fd4ad !important;
}

html[data-theme="dark"] .status-connection_issues {
    background-color: rgba(217, 119, 6, 0.2) !important;
    color: #e2b56a !important;
}

html[data-theme="dark"] .status-offline,
html[data-theme="dark"] .unit-status-failed {
    background-color: rgba(220, 80, 90, 0.2) !important;
    color: #e8a0a6 !important;
}

html[data-theme="dark"] .unit-status-online {
    background-color: rgba(56, 163, 176, 0.2) !important;
    color: #8fd0d8 !important;
}

html[data-theme="dark"] .unit-status-offline,
html[data-theme="dark"] .unit-status-pending,
html[data-theme="dark"] .unit-status-none {
    background-color: rgba(148, 163, 184, 0.16) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .camera-open-ticket-status {
    background: rgba(217, 119, 6, 0.16);
    border-color: #7a5a32;
    color: #e2b56a;
}

html[data-theme="dark"] .camera-open-ticket-status.is-in-progress {
    background: rgba(61, 125, 214, 0.16);
    border-color: #3d5573;
    color: #8bb4e8;
}

html[data-theme="dark"] .ticket-status-pill.status-open,
html[data-theme="dark"] .ticket-status-chip.status-closed {
    background: rgba(95, 186, 120, 0.16);
    color: #9fd4ad;
}

html[data-theme="dark"] .ticket-status-pill.status-in-progress,
html[data-theme="dark"] .ticket-priority-pill.priority-medium {
    background: rgba(61, 125, 214, 0.16);
    color: #8bb4e8;
}

html[data-theme="dark"] .ticket-status-pill.status-resolved {
    background: rgba(15, 118, 110, 0.2);
    color: #7ec8c0;
}

html[data-theme="dark"] .ticket-status-pill.status-closed,
html[data-theme="dark"] .ticket-status-pill.status-archived,
html[data-theme="dark"] .ticket-status-chip,
html[data-theme="dark"] .ticket-priority-pill.priority-low {
    background: rgba(148, 163, 184, 0.14);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .ticket-priority-pill.priority-critical {
    background: rgba(220, 80, 90, 0.16);
    color: #e8a0a6;
}

html[data-theme="dark"] .ticket-priority-pill.priority-high {
    background: rgba(217, 119, 6, 0.16);
    color: #e2b56a;
}

html[data-theme="dark"] .ticket-priority-pill.priority-feature-request {
    background: rgba(139, 92, 246, 0.16);
    color: #c4b5fd;
}

html[data-theme="dark"] .btn-primary {
    background-color: #3d7dd6;
    border-color: #3d7dd6;
    color: #fff;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus {
    background-color: #4c8fd4;
    border-color: #4c8fd4;
}

html[data-theme="dark"] .btn-outline-primary {
    color: #8bb4e8;
    border-color: #4c6f99;
    background: transparent;
}

html[data-theme="dark"] .btn-outline-primary:hover {
    color: #e8edf2;
    background: rgba(61, 125, 214, 0.16);
    border-color: #6ea4e8;
}