/*
 * UI refresh — design tokens, light/dark themes and component polish for the admin area and the customers portal.
 * Active when <html data-ui="refresh">; theme from data-theme="light|dark|auto" (auto follows the OS).
 * Retheme by editing the tokens only: every rule below reads var(--ui-*).
 */

/* ---------- tokens: light (matches the stock palette) ---------- */
html[data-ui="refresh"] {
  --ui-bg: #f4f4f5;
  --ui-surface: #ffffff;
  --ui-surface-2: #f9fafb;
  --ui-surface-3: #f3f4f6;
  --ui-sidebar: #f9f9f9;
  --ui-text: #111827;
  --ui-text-2: #374151;
  --ui-muted: #6b7280;
  --ui-faint: #9ca3af;
  --ui-border: rgba(209, 213, 219, .75);
  --ui-border-strong: #d1d5db;
  --ui-accent: #2563eb;
  --ui-accent-hover: #1d4ed8;
  --ui-accent-soft: #eff6ff;
  --ui-accent-text: #ffffff;
  --ui-btn-primary: #1f2937;
  --ui-btn-primary-hover: #111827;
  --ui-btn-primary-text: #ffffff;
  --ui-ok: #15803d;
  --ui-ok-soft: #f0fdf4;
  --ui-warn: #a16207;
  --ui-warn-soft: #fefce8;
  --ui-danger: #b91c1c;
  --ui-danger-soft: #fef2f2;
  --ui-info: #0369a1;
  --ui-info-soft: #f0f9ff;
  --ui-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --ui-shadow-lg: 0 10px 30px -10px rgba(16, 24, 40, .25);
  --ui-focus: 0 0 0 3px rgba(37, 99, 235, .25);
  --ui-radius: 10px;
  --ui-radius-sm: 6px;
  --ui-input-text: #1f2937;
  /* Tailwind neutral scale, remapped in dark mode */
  --ui-n-50: #f9fafb; --ui-n-100: #f3f4f6; --ui-n-200: #e5e7eb; --ui-n-300: #d1d5db; --ui-n-400: #9ca3af;
  --ui-n-500: #6b7280; --ui-n-600: #4b5563; --ui-n-700: #374151; --ui-n-800: #1f2937; --ui-n-900: #111827;
  color-scheme: light;
}

/* ---------- tokens: dark ---------- */
html[data-ui="refresh"][data-theme="dark"] {
  --ui-bg: #0d1117;
  --ui-surface: #161b22;
  --ui-surface-2: #1c222b;
  --ui-surface-3: #232a35;
  --ui-sidebar: #11161d;
  --ui-text: #e6e9ef;
  --ui-text-2: #c5cbd5;
  --ui-muted: #98a2b3;
  --ui-faint: #6b7686;
  --ui-border: #2a313c;
  --ui-border-strong: #39424f;
  --ui-accent: #6e9bff;
  --ui-accent-hover: #8fb2ff;
  --ui-accent-soft: rgba(110, 155, 255, .14);
  --ui-accent-text: #0b1220;
  --ui-btn-primary: #6e9bff;
  --ui-btn-primary-hover: #8fb2ff;
  --ui-btn-primary-text: #0b1220;
  --ui-ok: #4ade80;
  --ui-ok-soft: rgba(74, 222, 128, .12);
  --ui-warn: #facc15;
  --ui-warn-soft: rgba(250, 204, 21, .12);
  --ui-danger: #f87171;
  --ui-danger-soft: rgba(248, 113, 113, .13);
  --ui-info: #38bdf8;
  --ui-info-soft: rgba(56, 189, 248, .12);
  --ui-shadow: none;
  --ui-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .6);
  --ui-focus: 0 0 0 3px rgba(110, 155, 255, .35);
  --ui-input-text: #e6e9ef;
  --ui-n-50: #1c222b; --ui-n-100: #232a35; --ui-n-200: #2a313c; --ui-n-300: #39424f; --ui-n-400: #6b7686;
  --ui-n-500: #98a2b3; --ui-n-600: #b4bcc8; --ui-n-700: #c5cbd5; --ui-n-800: #dde1e8; --ui-n-900: #e6e9ef;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-ui="refresh"][data-theme="auto"] {
    --ui-bg: #0d1117; --ui-surface: #161b22; --ui-surface-2: #1c222b; --ui-surface-3: #232a35; --ui-sidebar: #11161d;
    --ui-text: #e6e9ef; --ui-text-2: #c5cbd5; --ui-muted: #98a2b3; --ui-faint: #6b7686; --ui-border: #2a313c; --ui-border-strong: #39424f;
    --ui-accent: #6e9bff; --ui-accent-hover: #8fb2ff; --ui-accent-soft: rgba(110, 155, 255, .14); --ui-accent-text: #0b1220;
    --ui-btn-primary: #6e9bff; --ui-btn-primary-hover: #8fb2ff; --ui-btn-primary-text: #0b1220;
    --ui-ok: #4ade80; --ui-ok-soft: rgba(74, 222, 128, .12); --ui-warn: #facc15; --ui-warn-soft: rgba(250, 204, 21, .12);
    --ui-danger: #f87171; --ui-danger-soft: rgba(248, 113, 113, .13); --ui-info: #38bdf8; --ui-info-soft: rgba(56, 189, 248, .12);
    --ui-shadow: none; --ui-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .6); --ui-focus: 0 0 0 3px rgba(110, 155, 255, .35); --ui-input-text: #e6e9ef;
    --ui-n-50: #1c222b; --ui-n-100: #232a35; --ui-n-200: #2a313c; --ui-n-300: #39424f; --ui-n-400: #6b7686;
    --ui-n-500: #98a2b3; --ui-n-600: #b4bcc8; --ui-n-700: #c5cbd5; --ui-n-800: #dde1e8; --ui-n-900: #e6e9ef;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
/* Element rules use :where() (zero specificity) so Bootstrap/Tailwind utility classes such as .text-danger still win. */
:where(html[data-ui="refresh"]) body,
:where(html[data-ui="refresh"]) #wrapper { background: var(--ui-bg); color: var(--ui-text); }
:where(html[data-ui="refresh"]) :where(h1, h2, h3, h4, h5, h6) { color: var(--ui-text); }
:where(html[data-ui="refresh"]) a { color: var(--ui-accent); }
:where(html[data-ui="refresh"]) a:hover { color: var(--ui-accent-hover); }
html[data-ui="refresh"] .text-muted, html[data-ui="refresh"] .text-muted a { color: var(--ui-muted); }
:where(html[data-ui="refresh"]) hr { border-color: var(--ui-border); }
:where(html[data-ui="refresh"]) ::selection { background: var(--ui-accent-soft); }
:where(html[data-ui="refresh"]) :focus-visible { outline: none; box-shadow: var(--ui-focus); }
:where(html[data-ui="refresh"]) code { background: var(--ui-surface-3); color: var(--ui-text-2); border-radius: 4px; }
:where(html[data-ui="refresh"]) pre { background: var(--ui-surface-2); color: var(--ui-text-2); border-color: var(--ui-border); }

/* ---------- Tailwind neutral utilities follow the theme ---------- */
html[data-ui="refresh"] .tw-text-neutral-900 { color: var(--ui-n-900); }
html[data-ui="refresh"] .tw-text-neutral-800, html[data-ui="refresh"] .hover\:tw-text-neutral-800:hover { color: var(--ui-n-800); }
html[data-ui="refresh"] .tw-text-neutral-700, html[data-ui="refresh"] .hover\:tw-text-neutral-700:hover { color: var(--ui-n-700); }
html[data-ui="refresh"] .tw-text-neutral-600 { color: var(--ui-n-600); }
html[data-ui="refresh"] .tw-text-neutral-500 { color: var(--ui-n-500); }
html[data-ui="refresh"] .tw-text-neutral-400 { color: var(--ui-n-400); }
html[data-ui="refresh"] .tw-bg-white { background-color: var(--ui-surface); }
html[data-ui="refresh"] .tw-bg-neutral-50 { background-color: var(--ui-n-50); }
html[data-ui="refresh"] .tw-bg-neutral-100, html[data-ui="refresh"] .hover\:tw-bg-neutral-200:hover { background-color: var(--ui-n-100); }
/* Tailwind "!important" variants (same values in light mode) */
html[data-ui="refresh"] .\!tw-bg-white { background-color: var(--ui-surface) !important; }
html[data-ui="refresh"] .\!tw-bg-neutral-50 { background-color: var(--ui-n-50) !important; }
html[data-ui="refresh"] .\!tw-bg-neutral-100 { background-color: var(--ui-n-100) !important; }
html[data-ui="refresh"] .\!tw-bg-neutral-200 { background-color: var(--ui-n-200) !important; }
html[data-ui="refresh"] .\!tw-border-white { border-color: var(--ui-surface) !important; }
html[data-ui="refresh"] .\!tw-placeholder-neutral-500::placeholder { color: var(--ui-n-500) !important; }
html[data-ui="refresh"] .tw-border-neutral-200, html[data-ui="refresh"] .tw-border-neutral-300,
html[data-ui="refresh"] .tw-border-neutral-300\/80, html[data-ui="refresh"] .tw-divide-neutral-300 > * + * { border-color: var(--ui-border); }

/* ---------- header & sidebar (admin) ---------- */
html[data-ui="refresh"] #header { background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); box-shadow: none; }
html[data-ui="refresh"] #header .navbar-nav > li > a,
html[data-ui="refresh"] #header .hide-menu { color: var(--ui-text-2); }
html[data-ui="refresh"] #header #top_search input { background: var(--ui-surface-3); color: var(--ui-text); border-color: transparent; }
html[data-ui="refresh"] #menu { background: var(--ui-sidebar); border-color: var(--ui-border); }
html[data-ui="refresh"] .sidebar .nav > li > a { color: var(--ui-text-2); border-radius: var(--ui-radius-sm); }
html[data-ui="refresh"] .sidebar .nav > li > a:hover,
html[data-ui="refresh"] .sidebar .nav > li > a:focus { background: var(--ui-surface-3); color: var(--ui-text); }
html[data-ui="refresh"] .sidebar .nav > li.active > a {
  background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border);
  box-shadow: inset 3px 0 0 var(--ui-accent), var(--ui-shadow);
}
html[data-ui="refresh"] .sidebar .nav-second-level { background: transparent; }
html[data-ui="refresh"] .sidebar .nav-second-level li a { color: var(--ui-muted); }
html[data-ui="refresh"] .sidebar .nav-second-level li.active a,
html[data-ui="refresh"] .sidebar .nav-second-level li a:hover { color: var(--ui-text); }
html[data-ui="refresh"] #menu .sidebar-user-profile, html[data-ui="refresh"] #menu li.sidebar-user-profile a { color: var(--ui-text); }

/* ---------- surfaces ---------- */
html[data-ui="refresh"] .panel_s,
html[data-ui="refresh"] .top_stats_wrapper,
html[data-ui="refresh"] .panel-default > .panel-heading + .panel-collapse,
html[data-ui="refresh"] .panel {
  background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); color: var(--ui-text);
}
html[data-ui="refresh"] .panel_s .panel-body, html[data-ui="refresh"] .panel-body { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
html[data-ui="refresh"] .panel-heading, html[data-ui="refresh"] .panel-footer { background: var(--ui-surface-2) !important; border-color: var(--ui-border) !important; color: var(--ui-text); }
html[data-ui="refresh"] .well { background: var(--ui-surface-2); border-color: var(--ui-border); box-shadow: none; }
html[data-ui="refresh"] .modal-content { background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-lg); color: var(--ui-text); }
html[data-ui="refresh"] .modal-header, html[data-ui="refresh"] .modal-footer { background: var(--ui-surface); border-color: var(--ui-border); }
html[data-ui="refresh"] .modal-header .close, html[data-ui="refresh"] .close { color: var(--ui-text); text-shadow: none; }
html[data-ui="refresh"] .modal-backdrop.in { opacity: .55; }
html[data-ui="refresh"] .dropdown-menu { background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-lg); border-radius: var(--ui-radius-sm); }
html[data-ui="refresh"] .dropdown-menu > li > a { color: var(--ui-text-2); }
html[data-ui="refresh"] .dropdown-menu > li > a:hover, html[data-ui="refresh"] .dropdown-menu > li > a:focus { background: var(--ui-surface-3); color: var(--ui-text); }
html[data-ui="refresh"] .dropdown-menu .divider { background: var(--ui-border); }
html[data-ui="refresh"] .popover { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); }
html[data-ui="refresh"] .popover-title { background: var(--ui-surface-2); border-color: var(--ui-border); }
html[data-ui="refresh"] .list-group-item { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); }

/* ---------- forms ---------- */
html[data-ui="refresh"] .form-control,
html[data-ui="refresh"] .bootstrap-select > .dropdown-toggle,
html[data-ui="refresh"] .input-group-addon,
html[data-ui="refresh"] .dataTables_filter input,
html[data-ui="refresh"] .dataTables_length select,
:where(html[data-ui="refresh"]) :where(select, textarea) {
  background-color: var(--ui-surface); color: var(--ui-input-text); border-color: var(--ui-border-strong);
}
html[data-ui="refresh"] .form-control::placeholder { color: var(--ui-faint); }
html[data-ui="refresh"] .form-control:focus,
html[data-ui="refresh"] .bootstrap-select > .dropdown-toggle:focus,
html[data-ui="refresh"] .bootstrap-select.open > .dropdown-toggle { border-color: var(--ui-accent); box-shadow: var(--ui-focus); outline: none !important; }
html[data-ui="refresh"] .form-control[disabled], html[data-ui="refresh"] .form-control[readonly],
html[data-ui="refresh"] fieldset[disabled] .form-control { background-color: var(--ui-surface-3); color: var(--ui-muted); }
html[data-ui="refresh"] .control-label, :where(html[data-ui="refresh"]) label { color: var(--ui-text-2); }
html[data-ui="refresh"] .checkbox label::before, html[data-ui="refresh"] .radio label::before { background: var(--ui-surface); border-color: var(--ui-border-strong); }
html[data-ui="refresh"] .has-error .form-control { border-color: var(--ui-danger); }
html[data-ui="refresh"] .help-block { color: var(--ui-muted); }

/* ---------- buttons ---------- */
html[data-ui="refresh"] .btn { border-radius: var(--ui-radius-sm); transition: background-color .12s, border-color .12s, box-shadow .12s; }
html[data-ui="refresh"] .btn:focus-visible { box-shadow: var(--ui-focus); }
html[data-ui="refresh"] .btn-default { background: var(--ui-surface); color: var(--ui-text-2); border-color: var(--ui-border-strong); }
html[data-ui="refresh"] .btn-default:hover, html[data-ui="refresh"] .btn-default:focus,
html[data-ui="refresh"] .btn-default.active, html[data-ui="refresh"] .open > .btn-default.dropdown-toggle { background: var(--ui-surface-3); color: var(--ui-text); border-color: var(--ui-border-strong); }
html[data-ui="refresh"] .btn-primary { background: var(--ui-btn-primary); border-color: var(--ui-btn-primary); color: var(--ui-btn-primary-text); }
html[data-ui="refresh"] .btn-primary:hover, html[data-ui="refresh"] .btn-primary:focus,
html[data-ui="refresh"] .btn-primary:active, html[data-ui="refresh"] .btn-primary.active { background: var(--ui-btn-primary-hover); border-color: var(--ui-btn-primary-hover); color: var(--ui-btn-primary-text); }
html[data-ui="refresh"] .btn-link { color: var(--ui-accent); }

/* ---------- tables ---------- */
html[data-ui="refresh"] .table { color: var(--ui-text); }
html[data-ui="refresh"] .table > thead > tr > th { color: var(--ui-muted); border-color: var(--ui-border); font-weight: 600; }
html[data-ui="refresh"] .table > tbody > tr > td, html[data-ui="refresh"] .table > tfoot > tr > td,
html[data-ui="refresh"] .table > tbody > tr > th { border-color: var(--ui-border); }
html[data-ui="refresh"] .table-hover > tbody > tr:hover, html[data-ui="refresh"] .table > tbody > tr:hover > td { background: var(--ui-surface-2); }
html[data-ui="refresh"] .table-striped > tbody > tr:nth-of-type(odd) { background: var(--ui-surface-2); }
html[data-ui="refresh"] table.dataTable tbody tr { background: transparent; }
html[data-ui="refresh"] .dataTables_wrapper .dataTables_info, html[data-ui="refresh"] .dataTables_wrapper .dataTables_length label { color: var(--ui-muted); }
html[data-ui="refresh"] .pagination > li > a, html[data-ui="refresh"] .pagination > li > span { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text-2); }
html[data-ui="refresh"] .pagination > .active > a, html[data-ui="refresh"] .pagination > .active > a:hover { background: var(--ui-btn-primary); border-color: var(--ui-btn-primary); color: var(--ui-btn-primary-text); }
html[data-ui="refresh"] .pagination > .disabled > a { background: var(--ui-surface-2); color: var(--ui-faint); }

/* ---------- navigation, feedback ---------- */
html[data-ui="refresh"] .nav-tabs { border-color: var(--ui-border); }
html[data-ui="refresh"] .nav-tabs > li > a { color: var(--ui-muted); }
html[data-ui="refresh"] .nav-tabs > li > a:hover { background: transparent; color: var(--ui-text); border-color: transparent; }
html[data-ui="refresh"] .nav-tabs > li.active > a, html[data-ui="refresh"] .nav-tabs > li.active > a:hover,
html[data-ui="refresh"] .nav-tabs > li.active > a:focus { background: transparent; color: var(--ui-text); border-color: transparent transparent var(--ui-accent); }
html[data-ui="refresh"] .alert { border-radius: var(--ui-radius-sm); border-width: 1px; }
html[data-ui="refresh"] .alert-success { background: var(--ui-ok-soft); color: var(--ui-ok); border-color: transparent; }
html[data-ui="refresh"] .alert-danger { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: transparent; }
html[data-ui="refresh"] .alert-warning { background: var(--ui-warn-soft); color: var(--ui-warn); border-color: transparent; }
html[data-ui="refresh"] .alert-info { background: var(--ui-info-soft); color: var(--ui-info); border-color: transparent; }
html[data-ui="refresh"] .progress { background: var(--ui-surface-3); }
html[data-ui="refresh"] .tooltip-inner { background: var(--ui-n-900); color: var(--ui-surface); }
html[data-ui="refresh"] .label-default { background: var(--ui-surface-3); color: var(--ui-text-2); }
html[data-ui="refresh"] .badge { background: var(--ui-surface-3); color: var(--ui-text-2); }

/* ---------- components with their own hard-coded colours ---------- */
html[data-ui="refresh"] #search_input { background: var(--ui-surface-3); color: var(--ui-text); border-color: transparent; }
html[data-ui="refresh"] #search_input::placeholder { color: var(--ui-faint); }
html[data-ui="refresh"] .nav-tabs-horizontal, html[data-ui="refresh"] .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal, html[data-ui="refresh"] .horizontal-scrollable-tabs .scroller { background: var(--ui-surface-3); border-color: var(--ui-border); color: var(--ui-text-2); }
html[data-ui="refresh"] .nav-tabs-horizontal > li > a { color: var(--ui-text-2); background: transparent; }
html[data-ui="refresh"] .nav-tabs-horizontal > li.active > a { background: var(--ui-surface); color: var(--ui-text); }
html[data-ui="refresh"] .btn-default.buttons-collection, html[data-ui="refresh"] .btn-default-dt-options,
html[data-ui="refresh"] .dt-buttons .btn-default { background: var(--ui-surface) !important; color: var(--ui-text-2) !important; border-color: var(--ui-border-strong) !important; }
html[data-ui="refresh"] .screen-options-btn { background: var(--ui-surface); color: var(--ui-text-2); border-color: var(--ui-border); }
html[data-ui="refresh"] .fc {
  --fc-page-bg-color: var(--ui-surface); --fc-neutral-bg-color: var(--ui-surface-2); --fc-border-color: var(--ui-border);
  --fc-today-bg-color: var(--ui-accent-soft); --fc-neutral-text-color: var(--ui-muted);
}
html[data-ui="refresh"] .fc .fc-daygrid-day, html[data-ui="refresh"] .fc .fc-col-header-cell { background: var(--ui-surface); }
html[data-ui="refresh"] .fc .fc-daygrid-day.fc-day-today { background: var(--ui-accent-soft); }
html[data-ui="refresh"] .fc .fc-col-header-cell-cushion, html[data-ui="refresh"] .fc .fc-daygrid-day-number { color: var(--ui-text-2); }

/* ---------- theme toggle (admin top bar) ---------- */
.ui-theme-toggle { display: inline-flex; align-items: center; gap: .35rem; }
.ui-theme-toggle .ui-theme-label { font-size: .8rem; }
html[data-theme="light"] .ui-theme-toggle .fa-sun,
html[data-theme="dark"] .ui-theme-toggle .fa-moon,
html[data-theme="auto"] .ui-theme-toggle .fa-circle-half-stroke { display: inline-block; }
.ui-theme-toggle .fa-sun, .ui-theme-toggle .fa-moon, .ui-theme-toggle .fa-circle-half-stroke { display: none; }

/* ---------- dark: imagery and third-party widgets ---------- */
html[data-ui="refresh"][data-theme="dark"] img.company-logo,
html[data-ui="refresh"][data-theme="dark"] .logo img { background: #fff; border-radius: 4px; padding: 2px; }
html[data-ui="refresh"][data-theme="dark"] .tox .tox-edit-area__iframe { background: #fff; }
@media (prefers-color-scheme: dark) {
  html[data-ui="refresh"][data-theme="auto"] img.company-logo,
  html[data-ui="refresh"][data-theme="auto"] .logo img { background: #fff; border-radius: 4px; padding: 2px; }
}

/* ---------- customers portal ---------- */
html[data-ui="refresh"] .customers .navbar-default, html[data-ui="refresh"] body.customers .navbar { background: var(--ui-surface); border-color: var(--ui-border); }
html[data-ui="refresh"] body.customers .navbar-default .navbar-nav > li > a { color: var(--ui-text-2); }
html[data-ui="refresh"] body.customers .navbar-default .navbar-nav > .active > a { background: var(--ui-surface-3); color: var(--ui-text); }
html[data-ui="refresh"] .navbar-brand.logo-text, html[data-ui="refresh"] .logo-text { color: var(--ui-text); }
html[data-ui="refresh"] body.customers footer, html[data-ui="refresh"] body.customers .footer { background: var(--ui-surface); color: var(--ui-muted); border-color: var(--ui-border); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-ui="refresh"] *, html[data-ui="refresh"] *::before, html[data-ui="refresh"] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}