/* ============================================================
   Dark / light theme layer.

   Loaded AFTER the Riday theme CSS (style.css, skin_color.css, custom.css).

   How it works
   - html[data-theme="dark"] is the single switch (set pre-paint by the
     inline boot script; toggled by assets/js/theme-switcher.js which also
     syncs the body light-skin/dark-skin class so the bundled theme's own
     dark rules participate).
   - :root declares the surface tokens with their LIGHT values (matching the
     theme's existing colors, so light mode is pixel-identical); the dark
     block swaps ONLY these surfaces to a neutral gray ramp.
   - Company brand colors (--company-primary/-secondary/-accent) are never
     set here — they stay per-tenant from the master layout. Everything
     below either recolors neutral surfaces or re-derives tints of the
     brand variables against dark surfaces.
   - Every dark rule is prefixed html[data-theme="dark"] so it outranks the
     theme's .dark-skin navy palette (and the master layout's inline
     !important rules) by specificity, regardless of source order.
   ============================================================ */

:root {
    --bg: #f3f6f9;
    --surface: #ffffff;
    --surface-2: #f8f9fa;
    --surface-3: #eef1f6;
    --text: #172b4c;
    --text-strong: #0f1f3d;
    --muted: #6c757d;
    --border: #e9eef5;
    --border-strong: #dee2e6;
    --input-bg: #ffffff;
    --shadow-1: 0 0 15px 0 rgba(34, 41, 47, 0.05);
    --overlay: rgba(17, 20, 45, 0.55);
}

html[data-theme="dark"] {
    color-scheme: dark;
    /* Premium deep-navy ramp — derived from the approved auth/setup pages
       (login, register, verify-email, setup wizard) and the payment/void
       modals. Hierarchy, deepest → lightest:
         --bg (body) < --surface-nav (sidebar/header) < --surface (cards)
         < --surface-2 (nested panels/hover) < --surface-3 (active). */
    --bg: #08152a;
    --surface-nav: #0c1a30;
    --surface: #101f35;
    --surface-2: #172a45;
    --surface-3: #1f3557;
    --text: #eef5ff;
    --text-strong: #f6faff;
    --muted: #9cabc0;
    --border: #263a55;
    --border-strong: #34496a;
    --input-bg: #0f2136;
    --shadow-1: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    --overlay: rgba(3, 9, 20, 0.72);
}

/* ------------------------------------------------------------
   1. Base surfaces (overrides the theme's navy dark-skin)
   ------------------------------------------------------------ */
html[data-theme="dark"] body {
    background-color: var(--bg);
    color: var(--text);
}

html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .wrapper {
    background-color: var(--bg);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--text-strong);
}

html[data-theme="dark"] .main-footer {
    background-color: var(--surface-nav);
    color: var(--muted);
    border-color: var(--border);
}

/* ------------------------------------------------------------
   2. Topbar
   ------------------------------------------------------------ */
html[data-theme="dark"] .main-header,
html[data-theme="dark"] .main-header .navbar {
    background-color: var(--surface-nav);
}

html[data-theme="dark"] .main-header .logo-box {
    background-color: var(--surface-nav);
}

html[data-theme="dark"] .main-header .navbar .nav > li > a {
    color: var(--text);
}

html[data-theme="dark"] .main-header .navbar .nav > li > a:hover,
html[data-theme="dark"] .main-header .navbar .nav > li > a:active,
html[data-theme="dark"] .main-header .navbar .nav > li > a:focus {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--company-primary, #4c95dd);
}

html[data-theme="dark"] .main-header .app-menu .search-bx input[type="search"] {
    background-color: var(--input-bg);
    color: var(--text);
}

html[data-theme="dark"] .main-header .app-menu .search-bx ::placeholder {
    color: var(--muted);
}

html[data-theme="dark"] .main-header .app-menu .search-bx .btn {
    background-color: var(--input-bg);
    color: var(--muted);
}

/* Topbar user block (uses .text-dark utility) */
html[data-theme="dark"] .main-header .user-menu > a.text-dark,
html[data-theme="dark"] .main-header .user-menu > a.text-dark strong {
    color: var(--text) !important;
}

/* Topbar global-search suggestion dropdown (styled inline in topbar.blade) */
html[data-theme="dark"] .global-search-dropdown {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

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

html[data-theme="dark"] .global-search-dropdown .gs-item:hover,
html[data-theme="dark"] .global-search-dropdown .gs-footer a:hover {
    background: var(--surface-2);
}

html[data-theme="dark"] .global-search-dropdown .gs-footer {
    border-top-color: var(--border);
}

/* Topbar notifications dropdown (styled inline in topbar.blade) */
html[data-theme="dark"] .notifications-menu > .dropdown-menu {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .notifications-menu .restaurant-notification-link i {
    background: var(--surface-2);
}

html[data-theme="dark"] .notifications-menu .restaurant-notification-title {
    color: var(--text-strong);
}

html[data-theme="dark"] .notifications-menu .restaurant-notification-message {
    color: var(--muted);
}

html[data-theme="dark"] .notifications-menu .restaurant-notification-unread > a {
    background: color-mix(in srgb, var(--company-primary, #4c95dd) 12%, var(--surface));
}

/* ------------------------------------------------------------
   3. Sidebar
   ------------------------------------------------------------ */
html[data-theme="dark"] .main-sidebar {
    background-color: var(--surface-nav);
    box-shadow: var(--shadow-1);
}

html[data-theme="dark"] .sidebar-brand {
    background: var(--surface-nav);
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .sidebar-brand-name {
    color: var(--text-strong);
}

html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .sidebar-menu > li > a {
    color: var(--text);
}

/* Inactive sidebar icons: the master layout mixes the brand color with a
   dark ink (!important) — remix against a light ink for dark surfaces. */
html[data-theme="dark"] .theme-primary .sidebar-menu > li > a > i,
html[data-theme="dark"] .theme-primary .sidebar-menu > li > a > svg {
    color: color-mix(in srgb, var(--company-primary, #4c95dd) 35%, #aeb7c6 65%) !important;
}

html[data-theme="dark"] .treeview-menu li > a {
    color: var(--muted);
}

/* Collapsed-sidebar hover flyouts (custom.css pins the label ink dark) */
html[data-theme="dark"] .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) {
    color: var(--text);
    background-color: var(--surface-2) !important;
}

html[data-theme="dark"] .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
    background-color: var(--surface-2) !important;
}

html[data-theme="dark"] .sidebar-collapse .sidebar-menu > li > .treeview-menu,
html[data-theme="dark"] .sidebar-collapse .sidebar-menu > li > .treeview-menu > .treeview .treeview-menu {
    background-color: var(--surface-2);
    box-shadow: 5px 8px 10px 0px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .sidebar-widgets .side-bx {
    background-color: transparent;
}

/* ------------------------------------------------------------
   4. Boxes / cards / KPI
   ------------------------------------------------------------ */
html[data-theme="dark"] .box,
html[data-theme="dark"] .card {
    background-color: var(--surface);
    color: var(--text);
}

html[data-theme="dark"] .box .box-header,
html[data-theme="dark"] .card .card-header {
    color: var(--text);
    border-color: var(--border);
    background-color: transparent;
}

html[data-theme="dark"] .box .box-header .box-title {
    color: var(--text-strong);
}

html[data-theme="dark"] .box .box-footer,
html[data-theme="dark"] .card .card-footer {
    background-color: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .box.box-solid .box-body {
    background-color: var(--surface) !important;
    color: var(--text);
}

html[data-theme="dark"] .box .border-right { border-right-color: var(--border); }
html[data-theme="dark"] .box .border-left { border-left-color: var(--border); }

html[data-theme="dark"] .kpi-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .kitchen-ticket {
    border-color: var(--border);
}

/* ------------------------------------------------------------
   5. Forms
   ------------------------------------------------------------ */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .custom-select {
    background-color: var(--input-bg);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--company-primary, #4c95dd);
    color: var(--text);
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--muted);
    opacity: 0.8;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled {
    background-color: var(--surface-2);
    color: var(--muted);
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--muted);
}

html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .col-form-label {
    color: var(--text);
}

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

/* ------------------------------------------------------------
   6. Dropdown menus
   ------------------------------------------------------------ */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface-2);
    border-color: var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .dropdown-menu > li > a,
html[data-theme="dark"] .dropdown-item {
    color: var(--text);
}

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

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

/* Master layout styles these with !important — match specificity + order */
html[data-theme="dark"] .theme-primary .dropdown-menu button.dropdown-item:hover,
html[data-theme="dark"] .theme-primary .user-menu .dropdown-menu button.dropdown-item:hover {
    background: var(--surface-3) !important;
}

html[data-theme="dark"] .theme-primary .user-menu .dropdown-menu button.dropdown-item,
html[data-theme="dark"] .theme-primary .user-menu .dropdown-menu button.dropdown-item span,
html[data-theme="dark"] .theme-primary .user-menu .dropdown-menu button.dropdown-item i {
    color: var(--muted) !important;
}

/* ------------------------------------------------------------
   7. Tables + DataTables
   ------------------------------------------------------------ */
html[data-theme="dark"] .table {
    color: var(--text);
    border-color: var(--border);
}

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

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

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

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

html[data-theme="dark"] table.dataTable tbody tr {
    background-color: transparent;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--muted) !important;
}

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

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

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

/* ------------------------------------------------------------
   8. Modals
   ------------------------------------------------------------ */
html[data-theme="dark"] .modal-content {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

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

html[data-theme="dark"] .modal-title {
    color: var(--text-strong);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

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

/* ------------------------------------------------------------
   9. Buttons + soft tint utilities
   ------------------------------------------------------------ */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text) !important;
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:active,
html[data-theme="dark"] .btn-default.active,
html[data-theme="dark"] .btn-light:hover {
    background-color: var(--surface-3);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .btn-white {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

/* Soft "-light" tinted buttons/badges (topbar icon buttons, KPI icons…):
   keep each hue but derive the wash from the dark surface instead of white. */
html[data-theme="dark"] .btn-primary-light,
html[data-theme="dark"] .bg-primary-light {
    background-color: color-mix(in srgb, #4c95dd 18%, var(--surface)) !important;
    color: #7db4e8 !important;
}

html[data-theme="dark"] .btn-info-light,
html[data-theme="dark"] .bg-info-light {
    background-color: color-mix(in srgb, #17a2b8 18%, var(--surface)) !important;
    color: #52c5d8 !important;
}

html[data-theme="dark"] .btn-success-light,
html[data-theme="dark"] .bg-success-light {
    background-color: color-mix(in srgb, #28a745 18%, var(--surface)) !important;
    color: #56c974 !important;
}

html[data-theme="dark"] .btn-warning-light,
html[data-theme="dark"] .bg-warning-light {
    background-color: color-mix(in srgb, #f59e0b 18%, var(--surface)) !important;
    color: #f5b95c !important;
}

html[data-theme="dark"] .btn-danger-light,
html[data-theme="dark"] .bg-danger-light {
    background-color: color-mix(in srgb, #dc3545 18%, var(--surface)) !important;
    color: #ec7581 !important;
}

html[data-theme="dark"] .btn-secondary-light,
html[data-theme="dark"] .bg-secondary-light {
    background-color: color-mix(in srgb, #6c757d 22%, var(--surface)) !important;
    color: #aab2ba !important;
}

/* ------------------------------------------------------------
   10. Common utilities remapped for dark surfaces
   ------------------------------------------------------------ */
html[data-theme="dark"] .bg-white {
    background-color: var(--surface) !important;
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-lightest {
    background-color: var(--surface-2) !important;
}

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

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

html[data-theme="dark"] .text-fade {
    color: #8b93a0 !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--border) !important;
}

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

html[data-theme="dark"] .list-group-item-action:hover {
    background-color: var(--surface-2);
    color: var(--text-strong);
}

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

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

html[data-theme="dark"] .nav-tabs-custom {
    background-color: var(--surface);
}

html[data-theme="dark"] .content-header .page-title {
    color: var(--text-strong);
}

html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb .breadcrumb-item a {
    color: var(--muted);
}

/* ------------------------------------------------------------
   11. Vendor plugins
   ------------------------------------------------------------ */
/* Select2 */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg);
    border-color: var(--border);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text);
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--company-primary, #4c95dd);
    color: #ffffff;
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--surface-3);
    color: var(--text);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--surface-3);
    border-color: var(--border);
    color: var(--text);
}

/* SweetAlert2 */
html[data-theme="dark"] .swal2-popup {
    background: var(--surface);
    color: var(--text);
}

html[data-theme="dark"] .swal2-title {
    color: var(--text-strong);
}

html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content {
    color: var(--text);
}

/* Daterangepicker + bootstrap-datepicker */
html[data-theme="dark"] .daterangepicker {
    background-color: var(--surface-2);
    border-color: var(--border);
}

html[data-theme="dark"] .daterangepicker .calendar-table {
    background-color: var(--surface-2);
    border-color: var(--border);
}

html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover {
    background-color: var(--surface-3);
}

html[data-theme="dark"] .daterangepicker td.off {
    background-color: transparent;
    color: var(--muted);
}

html[data-theme="dark"] .daterangepicker:after { border-bottom-color: var(--surface-2); }
html[data-theme="dark"] .daterangepicker:before { border-bottom-color: var(--border); }

html[data-theme="dark"] .datepicker-dropdown {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker table tr td.focused {
    background: var(--surface-3);
}

html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new {
    color: var(--muted);
}

/* ------------------------------------------------------------
   12. Trial pill + demo-data banner/modal
   ------------------------------------------------------------ */
html[data-theme="dark"] .ns-trial-pill.is-trial {
    background: color-mix(in srgb, var(--company-primary) 20%, var(--surface));
    color: color-mix(in srgb, var(--company-primary) 55%, #ffffff);
    border-color: color-mix(in srgb, var(--company-primary) 40%, var(--surface));
}

html[data-theme="dark"] .ns-trial-pill.is-trial .ns-trial-link {
    color: color-mix(in srgb, var(--company-primary) 55%, #ffffff);
}

html[data-theme="dark"] .ns-trial-pill.is-low {
    background: #3a2a12;
    color: #fb923c;
    border-color: #6b4a1c;
}

html[data-theme="dark"] .ns-trial-pill.is-expired {
    background: #3d1a1c;
    color: #f87171;
    border-color: #7f2b30;
}

html[data-theme="dark"] .ns-demo-modal-backdrop {
    background: var(--overlay);
}

html[data-theme="dark"] .ns-demo-modal-card {
    background: var(--surface);
}

html[data-theme="dark"] .ns-demo-modal-card h3 { color: var(--text-strong); }
html[data-theme="dark"] .ns-demo-modal-card p { color: var(--text); }

html[data-theme="dark"] .ns-demo-modal-ic {
    background: #3d1a1c;
    color: #f87171;
}

html[data-theme="dark"] .ns-demo-modal-card .ns-demo-keep {
    background: #10362a;
    color: #4ade80;
    border-color: #1d5c44;
}

html[data-theme="dark"] .ns-demo-modal-actions .ns-demo-btn.ghost {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .ns-demo-modal-actions .ns-demo-btn.ghost:hover {
    background: var(--surface-3);
}

/* ------------------------------------------------------------
   13. POS (.pos-screen) — swap its own design tokens
   ------------------------------------------------------------ */
html[data-theme="dark"] .pos-screen {
    --pos-ink: #f6faff;
    --pos-text: #d7e0ee;
    --pos-muted: #9cabc0;
    --pos-surface: #101f35;
    --pos-bg: #08152a;
    --pos-border: #263a55;
    --pos-hairline: #1c3049;
    --pos-accent-soft: color-mix(in srgb, var(--pos-accent) 22%, #101f35);
    --pos-accent-tint: color-mix(in srgb, var(--pos-accent) 13%, #08152a);
    --pos-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --pos-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 10px 30px -12px rgba(0, 0, 0, 0.5);
    --pos-shadow-pop: 0 4px 10px rgba(0, 0, 0, 0.4), 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}

/* Hardcoded light chips/surfaces inside pos.css */
html[data-theme="dark"] .pos-recent-fulfillment { color: #aab7c9; background: #1c3049; }
html[data-theme="dark"] .pos-recent-preparing { color: #f0b45f; background: #3a2c14; }
html[data-theme="dark"] .pos-recent-ready { color: #85aef2; background: #1d2c4d; }
html[data-theme="dark"] .pos-recent-served { color: #46d39c; background: #123529; }
html[data-theme="dark"] .pos-recent-cancelled { color: #f3808a; background: #3d1a1c; }
html[data-theme="dark"] .pos-recent-payment.pos-recent-paid { color: #46d39c; background: #123529; }
html[data-theme="dark"] .pos-recent-payment.pos-recent-unpaid { color: #f0b45f; background: #3a2c14; }

html[data-theme="dark"] .pos-totals {
    background: var(--surface-2);
    border-color: var(--border);
}

html[data-theme="dark"] .pos-sheet-close {
    background: var(--surface-2);
    color: var(--muted);
}

html[data-theme="dark"] .pos-sheet-close:hover {
    background: var(--surface-3);
    color: var(--text-strong);
}

/* ------------------------------------------------------------
   14. KDS (.kds-screen) — swap its own design tokens
   ------------------------------------------------------------ */
html[data-theme="dark"] .kds-screen {
    --kds-ink: #f6faff;
    --kds-text: #d7e0ee;
    --kds-muted: #9cabc0;
    --kds-surface: #101f35;
    --kds-bg: #08152a;
    --kds-border: #263a55;
    --kds-hairline: #1c3049;
    --kds-accent-soft: color-mix(in srgb, var(--kds-accent) 22%, #101f35);
    --kds-accent-tint: color-mix(in srgb, var(--kds-accent) 13%, #08152a);
    --kds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --kds-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 10px 30px -12px rgba(0, 0, 0, 0.5);
    --kds-shadow-pop: 0 4px 10px rgba(0, 0, 0, 0.4), 0 18px 40px -14px rgba(0, 0, 0, 0.6);
    --kds-shadow-ticket: 0 2px 5px rgba(0, 0, 0, 0.35), 0 12px 28px -16px rgba(0, 0, 0, 0.55);
    --kds-screen-border: rgba(38, 58, 85, 0.72);
    --kds-inset-hi: rgba(255, 255, 255, 0.04);
    --kds-inset-hi-soft: rgba(255, 255, 255, 0.05);
    --kds-head-bg: linear-gradient(135deg, #17294a 0%, #101f35 58%, var(--kds-accent-tint) 100%);
    --kds-icon-bg: linear-gradient(145deg, color-mix(in srgb, var(--kds-accent) 22%, #101f35), #101f35);
    --kds-panel-bg: rgba(16, 31, 53, 0.85);
    --kds-live-ink: color-mix(in srgb, var(--kds-accent) 72%, #ffffff);
    --kds-column-bg: linear-gradient(180deg, rgba(16, 31, 53, 0.55), rgba(10, 22, 40, 0.45));
    --kds-head-confirmed-ink: #c6d3e8;
    --kds-head-confirmed-border: #33496a;
    --kds-head-confirmed-bg: linear-gradient(135deg, #1c3253 0%, #16283f 100%);
    --kds-head-preparing-ink: #f0b45f;
    --kds-head-preparing-border: #5c4419;
    --kds-head-preparing-bg: linear-gradient(135deg, #3a2c14 0%, #2d2210 100%);
    --kds-head-ready-ink: #46d39c;
    --kds-head-ready-border: #1d5c44;
    --kds-head-ready-bg: linear-gradient(135deg, #123529 0%, #0f2b22 100%);
    --kds-badge-mix: #08152a;
    --kds-column-icon-bg: rgba(8, 21, 42, 0.42);
    --kds-count-bg: rgba(8, 21, 42, 0.5);
    --kds-scroll-thumb: #34496a;
    --kds-empty-border: #2c4364;
    --kds-empty-bg: linear-gradient(180deg, #142440, #0e1d33);
    --kds-empty-icon-bg: linear-gradient(145deg, #101f35, var(--kds-accent-tint));
    --kds-age-ink: #46d39c;
    --kds-age-border: #1d5c44;
    --kds-age-bg: #123529;
    --kds-chip-ink: #aab7c9;
    --kds-chip-border: #34496a;
    --kds-chip-bg: #1c3049;
    --kds-item-sep: #2a3f5c;
    --kds-qty-ink: color-mix(in srgb, var(--kds-accent) 70%, #ffffff);
    background: linear-gradient(180deg, #0b1830 0%, var(--kds-bg) 100%);
}

/* Hardcoded light chips/surfaces inside kds.css */
html[data-theme="dark"] .kds-ticket.age-warm .kds-age { color: #f0b45f; border-color: #5c4419; background: #3a2c14; }
html[data-theme="dark"] .kds-ticket.age-late .kds-age { color: #f3808a; border-color: #6e2b30; background: #3d1a1c; }
html[data-theme="dark"] .kds-chip-type-dine_in { color: #4fc2b4; border-color: #1e4d47; background: #12332f; }
html[data-theme="dark"] .kds-chip-type-takeaway { color: #f0b45f; border-color: #5c4419; background: #3a2c14; }
html[data-theme="dark"] .kds-chip-type-delivery { color: #85aef2; border-color: #27406e; background: #1d2c4d; }
html[data-theme="dark"] .kds-payment-chip.kds-payment-paid { color: #4ade80; border-color: #1d5c44; background: #123529; }
html[data-theme="dark"] .kds-payment-chip.kds-payment-unpaid { color: #f0b45f; border-color: #5c4419; background: #3a2c14; }
html[data-theme="dark"] .kds-table-chip { color: #c4cbd8; border-color: #34496a; background: #1c3049; }
html[data-theme="dark"] .kds-ticket-items { background: #0e1d33; }
html[data-theme="dark"] .kds-item-variant { background: #1c3049; }
html[data-theme="dark"] .kds-order-note { color: #eab308; border-color: #5c4419; background: #3a2c14; }
html[data-theme="dark"] .kds-awaiting { color: #4ade80; border-color: #1d5c44; background: #10362a; }

/* ------------------------------------------------------------
   15. Reports (.reports-page) — swap its own design tokens
   ------------------------------------------------------------ */
html[data-theme="dark"] .reports-page {
    --rp-ink: #eef5ff;
    --rp-muted: #9cabc0;
    --rp-surface: #101f35;
    --rp-bg: #08152a;
    --rp-border: #263a55;
    --rp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -18px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .reports-page .rp-kpi-icon {
    background: color-mix(in srgb, var(--rp-tone, var(--rp-primary)) 22%, var(--rp-surface));
}

html[data-theme="dark"] .reports-page .rp-insight-icon {
    background: color-mix(in srgb, var(--rp-primary) 20%, var(--rp-surface));
}

html[data-theme="dark"] .reports-page .rp-export-csv { background: #123529; color: #4ade80; border-color: #1d5c44; }
html[data-theme="dark"] .reports-page .rp-export-pdf { background: #3d1a1c; color: #f3808a; border-color: #6e2b30; }
html[data-theme="dark"] .reports-page .rp-delta-up { color: #4ade80; background: #123529; }
html[data-theme="dark"] .reports-page .rp-delta-down { color: #f3808a; background: #3d1a1c; }
html[data-theme="dark"] .reports-page .rp-delta-flat { color: #9cabc0; background: #1c3049; }

html[data-theme="dark"] .reports-page .rp-table tbody tr:hover td {
    background: color-mix(in srgb, var(--rp-primary) 9%, var(--rp-surface));
}

html[data-theme="dark"] .reports-page .rp-preset.is-active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------
   16. Standalone "ns" pages (login / register / forgot-password /
       billing / setup wizard) — they share the --ns-* convention.
       Brand accents (--ns-accent-*) are NOT touched.
   ------------------------------------------------------------ */
html[data-theme="dark"] {
    --ns-ink: #eef5ff;
    --ns-muted: #9cabc0;
    --ns-border: #263a55;
}

html[data-theme="dark"] .ns-auth {
    background: var(--bg);
}

html[data-theme="dark"] .ns-panel {
    background: radial-gradient(1100px 620px at 100% 0%, #12233c 0%, #08152a 55%);
}

html[data-theme="dark"] .ns-card,
html[data-theme="dark"] .ns-plan,
html[data-theme="dark"] .setup-card {
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .ns-field > label { color: #cbd5e1; }
html[data-theme="dark"] .ns-field > label .opt { color: var(--muted); }

html[data-theme="dark"] .ns-input {
    background: var(--input-bg);
    border-color: var(--border);
}

html[data-theme="dark"] .ns-input input { color: var(--ns-ink, #eef5ff); }
html[data-theme="dark"] .ns-input input::placeholder { color: #6b7280; }

html[data-theme="dark"] .ns-check { color: var(--text); }

html[data-theme="dark"] .ns-status {
    background: #10362a;
    color: #4ade80;
    border-color: #1d5c44;
}

html[data-theme="dark"] .ns-strength .bars i { background: var(--border); }

html[data-theme="dark"] .ns-pill.trial {
    background: color-mix(in srgb, var(--ns-accent-1, #1f8bec) 20%, var(--surface));
    color: color-mix(in srgb, var(--ns-accent-1, #1f8bec) 55%, #ffffff);
}

html[data-theme="dark"] .ns-pill.active { background: #123529; color: #4ade80; }
html[data-theme="dark"] .ns-pill.expired,
html[data-theme="dark"] .ns-pill.suspended { background: #3d1a1c; color: #f3808a; }
html[data-theme="dark"] .ns-pill.inactive { background: #1c3049; color: #aeb7c6; }

html[data-theme="dark"] .ns-notice.warn {
    background: #3a2a12;
    color: #fb923c;
    border-color: #6b4a1c;
}

html[data-theme="dark"] .stepper .lbl { color: #6b7280; }
html[data-theme="dark"] .stepper .stp.active .lbl { color: var(--ns-ink, #eef5ff); }
html[data-theme="dark"] .stepper .stp.done .lbl { color: #9cabc0; }

/* ------------------------------------------------------------
   17. Theme toggle buttons
   ------------------------------------------------------------ */
/* Floating variant for standalone pages (auth, billing, wizard) */
.theme-toggle-floating {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1200;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(15, 31, 61, 0.12);
    transition: color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.theme-toggle-floating:hover {
    color: var(--text-strong);
    box-shadow: 0 6px 18px rgba(15, 31, 61, 0.2);
}

.theme-toggle-floating:active {
    transform: scale(0.95);
}

html[data-theme="dark"] .theme-toggle-floating {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   18. Scrollbars (webkit) on dark
   ------------------------------------------------------------ */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}