:root {
  --hz-surface: #faf0dc;
  --hz-card: #ffffff;
  --hz-input: #ffffff;
  --hz-text: #696969;
  --hz-border: #f5cd82;
  --hz-active-bg: #f5cd82;
  --hz-active-fg: #ffffff;
  --hz-navbar: #f5cd82;
  --hz-navbar2: #f5cd82;
  --hz-footer-fg: #696969;
  --hz-thead-bg: #f5cd82;
  --hz-table-border: #696969;
  --hz-primary: #dc5032;
  --hz-navbar-fg: #000000;
  --hz-navbar2-fg: #000000;
  --hz-navbar-toggler: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --hz-primary-h: #b44229;
  --hz-muted: #a6a299;
  --hz-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --hz-chevron-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] {
  --hz-surface: #696969;
  --hz-card: #858585;
  --hz-input: #454545;
  --hz-text: #ffffff;
  --hz-border: #f5cd82;
  --hz-active-bg: #f5cd82;
  --hz-active-fg: #ffffff;
  --hz-navbar: #dc5032;
  --hz-navbar2: #dc5032;
  --hz-footer-fg: #696969;
  --hz-thead-bg: #dc5032;
  --hz-table-border: #f5cd82;
  --hz-primary: #dc5032;
  --hz-navbar-fg: #ffffff;
  --hz-navbar2-fg: #ffffff;
  --hz-navbar-toggler: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --hz-primary-h: #e27057;
  --hz-muted: #c0c0c0;
  --hz-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --hz-chevron-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --hz-surface: #696969;
  --hz-card: #858585;
  --hz-input: #454545;
  --hz-text: #ffffff;
  --hz-border: #f5cd82;
  --hz-active-bg: #f5cd82;
  --hz-active-fg: #ffffff;
  --hz-navbar: #dc5032;
  --hz-navbar2: #dc5032;
  --hz-footer-fg: #696969;
  --hz-thead-bg: #dc5032;
  --hz-table-border: #f5cd82;
  --hz-primary: #dc5032;
  --hz-navbar-fg: #ffffff;
  --hz-navbar2-fg: #ffffff;
  --hz-navbar-toggler: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --hz-primary-h: #e27057;
  --hz-muted: #c0c0c0;
  --hz-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --hz-chevron-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }
}

/* ---- Component mapping (mirrors the reference app's custom.css) ---- */
html, body { min-height: 100%; }
body {
  background-color: var(--hz-surface) !important;
  color: var(--hz-text);
}
/* Card and form-input backgrounds are independent of the page background (split
   out from the former single "surface" colour). They follow the palette in every
   theme state; dark text/border are applied in the dark block below. */
.card { background-color: var(--hz-card); }
.form-control, .form-select { background-color: var(--hz-input); color: var(--hz-text); }
.navbarbg            { background-color: var(--hz-navbar);  font-size: large; --hz-nav-fg: var(--hz-navbar-fg); }
.navbarbg-secondary  { background-color: var(--hz-navbar2); font-size: large; --hz-nav-fg: var(--hz-navbar2-fg); }

/* Navbar foreground. Bootstrap 5.3 removed .navbar-light/.navbar-dark, so the
   navbar text keeps Bootstrap's near-black default whatever colour the admin
   picks (unreadable on a dark navbar). Feed Bootstrap's navbar variables from a
   foreground derived from the navbar colour itself, so any palette stays legible. */
.navbarbg, .navbarbg-secondary {
  color: var(--hz-nav-fg);
  --bs-navbar-color: var(--hz-nav-fg);
  --bs-navbar-hover-color: var(--hz-nav-fg);
  --bs-navbar-active-color: var(--hz-nav-fg);
  --bs-navbar-brand-color: var(--hz-nav-fg);
  --bs-navbar-brand-hover-color: var(--hz-nav-fg);
}
.navbarbg .navbar-toggler-icon { --bs-navbar-toggler-icon-bg: var(--hz-navbar-toggler); }

/* Primary accent. Plain links and .text-primary follow the palette; Bootstrap's
   own link colour is a fixed blue that is hard to read on a dark surface.
   Buttons, nav links, dropdown items and pagination carry their own classes
   (higher specificity), so they are unaffected by the bare "a" rule. */
a { color: var(--hz-primary); }
a:hover, a:focus { color: var(--hz-primary-h); }
.text-primary { color: var(--hz-primary) !important; }

/* Secondary text. Bootstrap's .text-muted / .form-text resolve to a fixed dark
   grey, which vanishes on a dark surface; blend the palette's own text colour
   toward the background instead so hints stay legible in every theme. */
.text-muted, .form-text { color: var(--hz-muted) !important; }

/* Brand logo: one image per view mode. Default = light shown; dark shown under
   an explicit dark theme or the OS preference (unless the manual toggle forced
   light). Mirrors the palette selection above so the logo matches the theme.
   !important is required so Bootstrap display utilities (e.g. .d-inline-block)
   cannot leave both logos visible at once. */
.hz-logo            { max-height: 38px; width: auto; }
.hz-logo-dark       { display: none !important; }
:root[data-theme="dark"] .hz-logo-light { display: none !important; }
:root[data-theme="dark"] .hz-logo-dark  { display: inline-block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hz-logo-light { display: none !important; }
  :root:not([data-theme="light"]) .hz-logo-dark  { display: inline-block !important; }
}
.footer-bs {
  width: 100%;
  color: var(--hz-footer-fg) !important;
  padding: 10px 0;
}
.page-link {
  color: var(--hz-text) !important;
  background-color: var(--hz-surface) !important;
  border-color: var(--hz-border) !important;
}
.page-item.active .page-link {
  color: var(--hz-active-fg) !important;
  background-color: var(--hz-active-bg) !important;
  border-color: var(--hz-active-bg) !important;
}
/* Tables. Bootstrap 5.3 gives .table its own colour tokens - a fixed near-black
   text on a white background - which the palette never reached: only DataTables
   *cells* were patched, and only in dark mode. So a plain table stayed a white
   block on a dark page, and the admin-configured table head showed near-black
   labels on it. Point the tokens at the palette and every table (plain,
   bordered, striped, hovered, DataTables) follows the theme in both modes. */
.table {
  --bs-table-color: var(--hz-text);
  --bs-table-striped-color: var(--hz-text);
  --bs-table-active-color: var(--hz-text);
  --bs-table-hover-color: var(--hz-text);
  --bs-table-bg: var(--hz-card);
  --bs-table-border-color: var(--hz-table-border);
}
/* Accordion (the weekly-totals panel on ts_list): same story - it kept
   Bootstrap's white panel, which now hosts a themed table. Its chevron is an
   SVG data URI with a baked-in colour, so it is redrawn per palette. */
.accordion {
  --bs-accordion-color: var(--hz-text);
  --bs-accordion-bg: var(--hz-card);
  --bs-accordion-border-color: var(--hz-border);
  --bs-accordion-btn-color: var(--hz-text);
  --bs-accordion-btn-bg: var(--hz-card);
  --bs-accordion-btn-icon: var(--hz-chevron);
  --bs-accordion-btn-active-icon: var(--hz-chevron-active);
  --bs-accordion-active-color: var(--hz-text);
  --bs-accordion-active-bg: var(--hz-surface);
}
table.table-bordered { border: 1px solid var(--hz-table-border); margin-top: 20px; }
table.table-bordered > thead > tr > th,
table.table-bordered > tbody > tr > td { border: 1px solid var(--hz-table-border); }
table.dataTable > thead > tr > th { vertical-align: middle; background-color: var(--hz-thead-bg) !important; }
table.dataTable > tbody > tr > td { vertical-align: middle; }
input.largerCheckbox { transform: scale(1.6); }
.largerfont { font-size: 150%; }

/* DataTables selection / hover / stripe use their own tokens */
:root { --dt-row-selected: 13, 110, 253; }
:root[data-theme="dark"] table.dataTable > tbody > tr > td {
  background-color: var(--hz-card);
  color: var(--hz-text);
  border-color: var(--hz-border);
}
/* Card/input backgrounds come from the general rules above (--hz-card / --hz-input);
   here we only add the dark-mode text + border. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  border-color: var(--hz-border);
}
/* Disabled controls: Bootstrap sets only a (light) background on :disabled and no
   colour, and the app themes via data-theme (not data-bs-theme) - so in dark mode a
   disabled input would otherwise show light --hz-text on Bootstrap's light disabled
   background (unreadable). Re-theme disabled controls for both dark triggers. */
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-select:disabled {
  background-color: var(--hz-input);
  color: var(--hz-text);
  opacity: .7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-control:disabled,
  :root:not([data-theme="light"]) .form-select:disabled {
    background-color: var(--hz-input);
    color: var(--hz-text);
    opacity: .7;
  }
}

/* jQuery-UI datepicker: render visible prev/next chevrons without depending on
   the jQuery-UI sprite images (which aren't shipped). */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  text-align: center;
}
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  display: none !important;
}
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
  font-size: 1.25rem;
  line-height: 1.6em;
  color: var(--hz-text);
}
.ui-datepicker .ui-datepicker-prev::after { content: "\2039"; }  /* ‹ */
.ui-datepicker .ui-datepicker-next::after { content: "\203A"; }  /* › */

/* ---- Configurable button colours: left->right gradient (start + end) ---- */
.btn-primary{background-image:linear-gradient(to right, #dc5032, #f5cd82);border-color:#dc5032;color:#ffffff;--bs-btn-color:#ffffff;--bs-btn-border-color:#dc5032;}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active{background-image:linear-gradient(to right, #c6482d, #ddb975) !important;border-color:#c2462c !important;color:#ffffff !important;}
.btn-primary:disabled,.btn-primary.disabled{background-image:linear-gradient(to right, #dc5032, #f5cd82);border-color:#dc5032;color:#ffffff;opacity:.65;}
.btn-outline-primary{color:#dc5032;border-color:#dc5032;--bs-btn-color:#dc5032;--bs-btn-border-color:#dc5032;}
.btn-outline-primary:hover,.btn-outline-primary:active,.btn-outline-primary.active{background-image:linear-gradient(to right, #dc5032, #f5cd82) !important;color:#ffffff !important;border-color:#dc5032 !important;}
.btn-secondary{background-image:linear-gradient(to right, #6c757d, #6c757d);border-color:#6c757d;color:#ffffff;--bs-btn-color:#ffffff;--bs-btn-border-color:#6c757d;}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active,.btn-secondary.active{background-image:linear-gradient(to right, #616971, #616971) !important;border-color:#5f676e !important;color:#ffffff !important;}
.btn-secondary:disabled,.btn-secondary.disabled{background-image:linear-gradient(to right, #6c757d, #6c757d);border-color:#6c757d;color:#ffffff;opacity:.65;}
.btn-outline-secondary{color:#6c757d;border-color:#6c757d;--bs-btn-color:#6c757d;--bs-btn-border-color:#6c757d;}
.btn-outline-secondary:hover,.btn-outline-secondary:active,.btn-outline-secondary.active{background-image:linear-gradient(to right, #6c757d, #6c757d) !important;color:#ffffff !important;border-color:#6c757d !important;}
.btn-success{background-image:linear-gradient(to right, #dc5032, #f5cd82);border-color:#dc5032;color:#ffffff;--bs-btn-color:#ffffff;--bs-btn-border-color:#dc5032;}
.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active{background-image:linear-gradient(to right, #c6482d, #ddb975) !important;border-color:#c2462c !important;color:#ffffff !important;}
.btn-success:disabled,.btn-success.disabled{background-image:linear-gradient(to right, #dc5032, #f5cd82);border-color:#dc5032;color:#ffffff;opacity:.65;}
.btn-outline-success{color:#dc5032;border-color:#dc5032;--bs-btn-color:#dc5032;--bs-btn-border-color:#dc5032;}
.btn-outline-success:hover,.btn-outline-success:active,.btn-outline-success.active{background-image:linear-gradient(to right, #dc5032, #f5cd82) !important;color:#ffffff !important;border-color:#dc5032 !important;}
.btn-danger{background-image:linear-gradient(to right, #dc3545, #dc3545);border-color:#dc3545;color:#ffffff;--bs-btn-color:#ffffff;--bs-btn-border-color:#dc3545;}
.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active{background-image:linear-gradient(to right, #c6303e, #c6303e) !important;border-color:#c22f3d !important;color:#ffffff !important;}
.btn-danger:disabled,.btn-danger.disabled{background-image:linear-gradient(to right, #dc3545, #dc3545);border-color:#dc3545;color:#ffffff;opacity:.65;}
.btn-outline-danger{color:#dc3545;border-color:#dc3545;--bs-btn-color:#dc3545;--bs-btn-border-color:#dc3545;}
.btn-outline-danger:hover,.btn-outline-danger:active,.btn-outline-danger.active{background-image:linear-gradient(to right, #dc3545, #dc3545) !important;color:#ffffff !important;border-color:#dc3545 !important;}
.btn-warning{background-image:linear-gradient(to right, #ffc107, #ffc107);border-color:#ffc107;color:#000000;--bs-btn-color:#000000;--bs-btn-border-color:#ffc107;}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active{background-image:linear-gradient(to right, #e6ae06, #e6ae06) !important;border-color:#e0aa06 !important;color:#000000 !important;}
.btn-warning:disabled,.btn-warning.disabled{background-image:linear-gradient(to right, #ffc107, #ffc107);border-color:#ffc107;color:#000000;opacity:.65;}
.btn-outline-warning{color:#ffc107;border-color:#ffc107;--bs-btn-color:#ffc107;--bs-btn-border-color:#ffc107;}
.btn-outline-warning:hover,.btn-outline-warning:active,.btn-outline-warning.active{background-image:linear-gradient(to right, #ffc107, #ffc107) !important;color:#000000 !important;border-color:#ffc107 !important;}
.btn-info{background-image:linear-gradient(to right, #dc5032, #f5cd82);border-color:#dc5032;color:#ffffff;--bs-btn-color:#ffffff;--bs-btn-border-color:#dc5032;}
.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active{background-image:linear-gradient(to right, #c6482d, #ddb975) !important;border-color:#c2462c !important;color:#ffffff !important;}
.btn-info:disabled,.btn-info.disabled{background-image:linear-gradient(to right, #dc5032, #f5cd82);border-color:#dc5032;color:#ffffff;opacity:.65;}
.btn-outline-info{color:#dc5032;border-color:#dc5032;--bs-btn-color:#dc5032;--bs-btn-border-color:#dc5032;}
.btn-outline-info:hover,.btn-outline-info:active,.btn-outline-info.active{background-image:linear-gradient(to right, #dc5032, #f5cd82) !important;color:#ffffff !important;border-color:#dc5032 !important;}
.btn-dark{background-image:linear-gradient(to right, #212529, #212529);border-color:#212529;color:#ffffff;--bs-btn-color:#ffffff;--bs-btn-border-color:#212529;}
.btn-dark:hover,.btn-dark:focus,.btn-dark:active,.btn-dark.active{background-image:linear-gradient(to right, #1e2125, #1e2125) !important;border-color:#1d2124 !important;color:#ffffff !important;}
.btn-dark:disabled,.btn-dark.disabled{background-image:linear-gradient(to right, #212529, #212529);border-color:#212529;color:#ffffff;opacity:.65;}
.btn-outline-dark{color:#212529;border-color:#212529;--bs-btn-color:#212529;--bs-btn-border-color:#212529;}
.btn-outline-dark:hover,.btn-outline-dark:active,.btn-outline-dark.active{background-image:linear-gradient(to right, #212529, #212529) !important;color:#ffffff !important;border-color:#212529 !important;}
.btn-light{background-image:linear-gradient(to right, #f8f9fa, #f8f9fa);border-color:#f8f9fa;color:#000000;--bs-btn-color:#000000;--bs-btn-border-color:#f8f9fa;}
.btn-light:hover,.btn-light:focus,.btn-light:active,.btn-light.active{background-image:linear-gradient(to right, #dfe0e1, #dfe0e1) !important;border-color:#dadbdc !important;color:#000000 !important;}
.btn-light:disabled,.btn-light.disabled{background-image:linear-gradient(to right, #f8f9fa, #f8f9fa);border-color:#f8f9fa;color:#000000;opacity:.65;}
.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa;--bs-btn-color:#f8f9fa;--bs-btn-border-color:#f8f9fa;}
.btn-outline-light:hover,.btn-outline-light:active,.btn-outline-light.active{background-image:linear-gradient(to right, #f8f9fa, #f8f9fa) !important;color:#000000 !important;border-color:#f8f9fa !important;}
.jconfirm .btn-red{background-image:linear-gradient(to right, #dc3545, #dc3545) !important;color:#ffffff !important;border-color:#dc3545 !important;}
.jconfirm .btn-blue{background-image:linear-gradient(to right, #dc5032, #f5cd82) !important;color:#ffffff !important;border-color:#dc5032 !important;}
.jconfirm .btn-green{background-image:linear-gradient(to right, #dc5032, #f5cd82) !important;color:#ffffff !important;border-color:#dc5032 !important;}
.jconfirm .btn-dark{background-image:linear-gradient(to right, #212529, #212529) !important;color:#ffffff !important;border-color:#212529 !important;}

/* ==========================================================================
   Live theme preview (admin_theme.php)
   --------------------------------------------------------------------------
   .hz-preview re-declares the whole --hz-* palette on itself, so every rule
   above resolves against the PREVIEWED palette for everything inside it - the
   admin can look at the dark theme while the page itself stays light. The
   defaults below come from the saved config; admin_theme.php overwrites them
   as inline custom properties on every keystroke, which is the whole live
   preview mechanism (custom properties inherit, inline wins).

   Two things cannot ride on inherited variables and are restated here:
     1. rules the app keys off the ROOT theme state (the dark-only tweaks) -
        they would leak the PAGE's mode into the preview, so they are
        neutralised and re-applied per [data-pv];
     2. button gradients, which are compiled to literal colours above - the
        preview reads them from --pvb-* variables instead so JS can rewrite them.
   The ":root " prefix on the overrides exists purely to out-specify the
   ":root[data-theme=...]" rules above; it matches the same elements.
   ========================================================================== */
.hz-preview {
  background-color: var(--hz-surface);
  color: var(--hz-text);
  overflow: hidden;
}
.hz-preview[data-pv="light"] {
  --hz-surface: #faf0dc;
  --hz-card: #ffffff;
  --hz-input: #ffffff;
  --hz-text: #696969;
  --hz-border: #f5cd82;
  --hz-active-bg: #f5cd82;
  --hz-active-fg: #ffffff;
  --hz-navbar: #f5cd82;
  --hz-navbar2: #f5cd82;
  --hz-footer-fg: #696969;
  --hz-thead-bg: #f5cd82;
  --hz-table-border: #696969;
  --hz-primary: #dc5032;
  --hz-navbar-fg: #000000;
  --hz-navbar2-fg: #000000;
  --hz-navbar-toggler: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --hz-primary-h: #b44229;
  --hz-muted: #a6a299;
  --hz-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --hz-chevron-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.hz-preview[data-pv="dark"] {
  --hz-surface: #696969;
  --hz-card: #858585;
  --hz-input: #454545;
  --hz-text: #ffffff;
  --hz-border: #f5cd82;
  --hz-active-bg: #f5cd82;
  --hz-active-fg: #ffffff;
  --hz-navbar: #dc5032;
  --hz-navbar2: #dc5032;
  --hz-footer-fg: #696969;
  --hz-thead-bg: #dc5032;
  --hz-table-border: #f5cd82;
  --hz-primary: #dc5032;
  --hz-navbar-fg: #ffffff;
  --hz-navbar2-fg: #ffffff;
  --hz-navbar-toggler: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --hz-primary-h: #e27057;
  --hz-muted: #c0c0c0;
  --hz-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --hz-chevron-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/* The preview shows one logo at a time by swapping src, so the display rules
   that hide the "other" logo must not reach into it. */
.hz-preview .hz-pv-logo { max-height: 38px; width: auto; display: inline-block !important; }
/* 1. Root-state-driven rules, restated per previewed mode. */
:root .hz-preview[data-pv] table.dataTable > tbody > tr > td {
  background-color: transparent;
  color: var(--hz-text);
  border-color: var(--hz-table-border);
}
:root .hz-preview[data-pv="dark"] table.dataTable > tbody > tr > td {
  background-color: var(--hz-card);
  color: var(--hz-text);
  border-color: var(--hz-border);
}
:root .hz-preview[data-pv] .card { border-color: var(--bs-card-border-color); }
:root .hz-preview[data-pv] .form-control,
:root .hz-preview[data-pv] .form-select { border-color: var(--bs-border-color); }
:root .hz-preview[data-pv="dark"] .card,
:root .hz-preview[data-pv="dark"] .form-control,
:root .hz-preview[data-pv="dark"] .form-select { border-color: var(--hz-border); }
:root .hz-preview[data-pv] .form-control:disabled,
:root .hz-preview[data-pv] .form-select:disabled {
  background-color: var(--bs-secondary-bg);
  color: var(--hz-text);
  opacity: 1;
}
:root .hz-preview[data-pv="dark"] .form-control:disabled,
:root .hz-preview[data-pv="dark"] .form-select:disabled {
  background-color: var(--hz-input);
  color: var(--hz-text);
  opacity: .7;
}
/* 2. Buttons, driven by --pvb-* so the preview can recolour them without a reload. */
.hz-preview {
  --pvb-primary-g: linear-gradient(to right, #dc5032, #f5cd82);
  --pvb-primary-gh: linear-gradient(to right, #c6482d, #ddb975);
  --pvb-primary-s: #dc5032;
  --pvb-primary-sh: #c2462c;
  --pvb-primary-fg: #ffffff;
  --pvb-secondary-g: linear-gradient(to right, #6c757d, #6c757d);
  --pvb-secondary-gh: linear-gradient(to right, #616971, #616971);
  --pvb-secondary-s: #6c757d;
  --pvb-secondary-sh: #5f676e;
  --pvb-secondary-fg: #ffffff;
  --pvb-success-g: linear-gradient(to right, #dc5032, #f5cd82);
  --pvb-success-gh: linear-gradient(to right, #c6482d, #ddb975);
  --pvb-success-s: #dc5032;
  --pvb-success-sh: #c2462c;
  --pvb-success-fg: #ffffff;
  --pvb-danger-g: linear-gradient(to right, #dc3545, #dc3545);
  --pvb-danger-gh: linear-gradient(to right, #c6303e, #c6303e);
  --pvb-danger-s: #dc3545;
  --pvb-danger-sh: #c22f3d;
  --pvb-danger-fg: #ffffff;
  --pvb-warning-g: linear-gradient(to right, #ffc107, #ffc107);
  --pvb-warning-gh: linear-gradient(to right, #e6ae06, #e6ae06);
  --pvb-warning-s: #ffc107;
  --pvb-warning-sh: #e0aa06;
  --pvb-warning-fg: #000000;
  --pvb-info-g: linear-gradient(to right, #dc5032, #f5cd82);
  --pvb-info-gh: linear-gradient(to right, #c6482d, #ddb975);
  --pvb-info-s: #dc5032;
  --pvb-info-sh: #c2462c;
  --pvb-info-fg: #ffffff;
  --pvb-dark-g: linear-gradient(to right, #212529, #212529);
  --pvb-dark-gh: linear-gradient(to right, #1e2125, #1e2125);
  --pvb-dark-s: #212529;
  --pvb-dark-sh: #1d2124;
  --pvb-dark-fg: #ffffff;
  --pvb-light-g: linear-gradient(to right, #f8f9fa, #f8f9fa);
  --pvb-light-gh: linear-gradient(to right, #dfe0e1, #dfe0e1);
  --pvb-light-s: #f8f9fa;
  --pvb-light-sh: #dadbdc;
  --pvb-light-fg: #000000;
}
:root .hz-preview[data-pv] .btn-primary{background-image:var(--pvb-primary-g);border-color:var(--pvb-primary-s);color:var(--pvb-primary-fg);--bs-btn-color:var(--pvb-primary-fg);--bs-btn-border-color:var(--pvb-primary-s);}
:root .hz-preview[data-pv] .btn-primary:hover,:root .hz-preview[data-pv] .btn-primary:focus,:root .hz-preview[data-pv] .btn-primary:active,:root .hz-preview[data-pv] .btn-primary.active{background-image:var(--pvb-primary-gh) !important;border-color:var(--pvb-primary-sh) !important;color:var(--pvb-primary-fg) !important;}
:root .hz-preview[data-pv] .btn-primary:disabled,:root .hz-preview[data-pv] .btn-primary.disabled{background-image:var(--pvb-primary-g);border-color:var(--pvb-primary-s);color:var(--pvb-primary-fg);opacity:.65;}
:root .hz-preview[data-pv] .btn-outline-primary{color:var(--pvb-primary-s);border-color:var(--pvb-primary-s);--bs-btn-color:var(--pvb-primary-s);--bs-btn-border-color:var(--pvb-primary-s);}
:root .hz-preview[data-pv] .btn-outline-primary:hover,:root .hz-preview[data-pv] .btn-outline-primary:active,:root .hz-preview[data-pv] .btn-outline-primary.active{background-image:var(--pvb-primary-g) !important;color:var(--pvb-primary-fg) !important;border-color:var(--pvb-primary-s) !important;}
:root .hz-preview[data-pv] .btn-secondary{background-image:var(--pvb-secondary-g);border-color:var(--pvb-secondary-s);color:var(--pvb-secondary-fg);--bs-btn-color:var(--pvb-secondary-fg);--bs-btn-border-color:var(--pvb-secondary-s);}
:root .hz-preview[data-pv] .btn-secondary:hover,:root .hz-preview[data-pv] .btn-secondary:focus,:root .hz-preview[data-pv] .btn-secondary:active,:root .hz-preview[data-pv] .btn-secondary.active{background-image:var(--pvb-secondary-gh) !important;border-color:var(--pvb-secondary-sh) !important;color:var(--pvb-secondary-fg) !important;}
:root .hz-preview[data-pv] .btn-secondary:disabled,:root .hz-preview[data-pv] .btn-secondary.disabled{background-image:var(--pvb-secondary-g);border-color:var(--pvb-secondary-s);color:var(--pvb-secondary-fg);opacity:.65;}
:root .hz-preview[data-pv] .btn-outline-secondary{color:var(--pvb-secondary-s);border-color:var(--pvb-secondary-s);--bs-btn-color:var(--pvb-secondary-s);--bs-btn-border-color:var(--pvb-secondary-s);}
:root .hz-preview[data-pv] .btn-outline-secondary:hover,:root .hz-preview[data-pv] .btn-outline-secondary:active,:root .hz-preview[data-pv] .btn-outline-secondary.active{background-image:var(--pvb-secondary-g) !important;color:var(--pvb-secondary-fg) !important;border-color:var(--pvb-secondary-s) !important;}
:root .hz-preview[data-pv] .btn-success{background-image:var(--pvb-success-g);border-color:var(--pvb-success-s);color:var(--pvb-success-fg);--bs-btn-color:var(--pvb-success-fg);--bs-btn-border-color:var(--pvb-success-s);}
:root .hz-preview[data-pv] .btn-success:hover,:root .hz-preview[data-pv] .btn-success:focus,:root .hz-preview[data-pv] .btn-success:active,:root .hz-preview[data-pv] .btn-success.active{background-image:var(--pvb-success-gh) !important;border-color:var(--pvb-success-sh) !important;color:var(--pvb-success-fg) !important;}
:root .hz-preview[data-pv] .btn-success:disabled,:root .hz-preview[data-pv] .btn-success.disabled{background-image:var(--pvb-success-g);border-color:var(--pvb-success-s);color:var(--pvb-success-fg);opacity:.65;}
:root .hz-preview[data-pv] .btn-outline-success{color:var(--pvb-success-s);border-color:var(--pvb-success-s);--bs-btn-color:var(--pvb-success-s);--bs-btn-border-color:var(--pvb-success-s);}
:root .hz-preview[data-pv] .btn-outline-success:hover,:root .hz-preview[data-pv] .btn-outline-success:active,:root .hz-preview[data-pv] .btn-outline-success.active{background-image:var(--pvb-success-g) !important;color:var(--pvb-success-fg) !important;border-color:var(--pvb-success-s) !important;}
:root .hz-preview[data-pv] .btn-danger{background-image:var(--pvb-danger-g);border-color:var(--pvb-danger-s);color:var(--pvb-danger-fg);--bs-btn-color:var(--pvb-danger-fg);--bs-btn-border-color:var(--pvb-danger-s);}
:root .hz-preview[data-pv] .btn-danger:hover,:root .hz-preview[data-pv] .btn-danger:focus,:root .hz-preview[data-pv] .btn-danger:active,:root .hz-preview[data-pv] .btn-danger.active{background-image:var(--pvb-danger-gh) !important;border-color:var(--pvb-danger-sh) !important;color:var(--pvb-danger-fg) !important;}
:root .hz-preview[data-pv] .btn-danger:disabled,:root .hz-preview[data-pv] .btn-danger.disabled{background-image:var(--pvb-danger-g);border-color:var(--pvb-danger-s);color:var(--pvb-danger-fg);opacity:.65;}
:root .hz-preview[data-pv] .btn-outline-danger{color:var(--pvb-danger-s);border-color:var(--pvb-danger-s);--bs-btn-color:var(--pvb-danger-s);--bs-btn-border-color:var(--pvb-danger-s);}
:root .hz-preview[data-pv] .btn-outline-danger:hover,:root .hz-preview[data-pv] .btn-outline-danger:active,:root .hz-preview[data-pv] .btn-outline-danger.active{background-image:var(--pvb-danger-g) !important;color:var(--pvb-danger-fg) !important;border-color:var(--pvb-danger-s) !important;}
:root .hz-preview[data-pv] .btn-warning{background-image:var(--pvb-warning-g);border-color:var(--pvb-warning-s);color:var(--pvb-warning-fg);--bs-btn-color:var(--pvb-warning-fg);--bs-btn-border-color:var(--pvb-warning-s);}
:root .hz-preview[data-pv] .btn-warning:hover,:root .hz-preview[data-pv] .btn-warning:focus,:root .hz-preview[data-pv] .btn-warning:active,:root .hz-preview[data-pv] .btn-warning.active{background-image:var(--pvb-warning-gh) !important;border-color:var(--pvb-warning-sh) !important;color:var(--pvb-warning-fg) !important;}
:root .hz-preview[data-pv] .btn-warning:disabled,:root .hz-preview[data-pv] .btn-warning.disabled{background-image:var(--pvb-warning-g);border-color:var(--pvb-warning-s);color:var(--pvb-warning-fg);opacity:.65;}
:root .hz-preview[data-pv] .btn-outline-warning{color:var(--pvb-warning-s);border-color:var(--pvb-warning-s);--bs-btn-color:var(--pvb-warning-s);--bs-btn-border-color:var(--pvb-warning-s);}
:root .hz-preview[data-pv] .btn-outline-warning:hover,:root .hz-preview[data-pv] .btn-outline-warning:active,:root .hz-preview[data-pv] .btn-outline-warning.active{background-image:var(--pvb-warning-g) !important;color:var(--pvb-warning-fg) !important;border-color:var(--pvb-warning-s) !important;}
:root .hz-preview[data-pv] .btn-info{background-image:var(--pvb-info-g);border-color:var(--pvb-info-s);color:var(--pvb-info-fg);--bs-btn-color:var(--pvb-info-fg);--bs-btn-border-color:var(--pvb-info-s);}
:root .hz-preview[data-pv] .btn-info:hover,:root .hz-preview[data-pv] .btn-info:focus,:root .hz-preview[data-pv] .btn-info:active,:root .hz-preview[data-pv] .btn-info.active{background-image:var(--pvb-info-gh) !important;border-color:var(--pvb-info-sh) !important;color:var(--pvb-info-fg) !important;}
:root .hz-preview[data-pv] .btn-info:disabled,:root .hz-preview[data-pv] .btn-info.disabled{background-image:var(--pvb-info-g);border-color:var(--pvb-info-s);color:var(--pvb-info-fg);opacity:.65;}
:root .hz-preview[data-pv] .btn-outline-info{color:var(--pvb-info-s);border-color:var(--pvb-info-s);--bs-btn-color:var(--pvb-info-s);--bs-btn-border-color:var(--pvb-info-s);}
:root .hz-preview[data-pv] .btn-outline-info:hover,:root .hz-preview[data-pv] .btn-outline-info:active,:root .hz-preview[data-pv] .btn-outline-info.active{background-image:var(--pvb-info-g) !important;color:var(--pvb-info-fg) !important;border-color:var(--pvb-info-s) !important;}
:root .hz-preview[data-pv] .btn-dark{background-image:var(--pvb-dark-g);border-color:var(--pvb-dark-s);color:var(--pvb-dark-fg);--bs-btn-color:var(--pvb-dark-fg);--bs-btn-border-color:var(--pvb-dark-s);}
:root .hz-preview[data-pv] .btn-dark:hover,:root .hz-preview[data-pv] .btn-dark:focus,:root .hz-preview[data-pv] .btn-dark:active,:root .hz-preview[data-pv] .btn-dark.active{background-image:var(--pvb-dark-gh) !important;border-color:var(--pvb-dark-sh) !important;color:var(--pvb-dark-fg) !important;}
:root .hz-preview[data-pv] .btn-dark:disabled,:root .hz-preview[data-pv] .btn-dark.disabled{background-image:var(--pvb-dark-g);border-color:var(--pvb-dark-s);color:var(--pvb-dark-fg);opacity:.65;}
:root .hz-preview[data-pv] .btn-outline-dark{color:var(--pvb-dark-s);border-color:var(--pvb-dark-s);--bs-btn-color:var(--pvb-dark-s);--bs-btn-border-color:var(--pvb-dark-s);}
:root .hz-preview[data-pv] .btn-outline-dark:hover,:root .hz-preview[data-pv] .btn-outline-dark:active,:root .hz-preview[data-pv] .btn-outline-dark.active{background-image:var(--pvb-dark-g) !important;color:var(--pvb-dark-fg) !important;border-color:var(--pvb-dark-s) !important;}
:root .hz-preview[data-pv] .btn-light{background-image:var(--pvb-light-g);border-color:var(--pvb-light-s);color:var(--pvb-light-fg);--bs-btn-color:var(--pvb-light-fg);--bs-btn-border-color:var(--pvb-light-s);}
:root .hz-preview[data-pv] .btn-light:hover,:root .hz-preview[data-pv] .btn-light:focus,:root .hz-preview[data-pv] .btn-light:active,:root .hz-preview[data-pv] .btn-light.active{background-image:var(--pvb-light-gh) !important;border-color:var(--pvb-light-sh) !important;color:var(--pvb-light-fg) !important;}
:root .hz-preview[data-pv] .btn-light:disabled,:root .hz-preview[data-pv] .btn-light.disabled{background-image:var(--pvb-light-g);border-color:var(--pvb-light-s);color:var(--pvb-light-fg);opacity:.65;}
:root .hz-preview[data-pv] .btn-outline-light{color:var(--pvb-light-s);border-color:var(--pvb-light-s);--bs-btn-color:var(--pvb-light-s);--bs-btn-border-color:var(--pvb-light-s);}
:root .hz-preview[data-pv] .btn-outline-light:hover,:root .hz-preview[data-pv] .btn-outline-light:active,:root .hz-preview[data-pv] .btn-outline-light.active{background-image:var(--pvb-light-g) !important;color:var(--pvb-light-fg) !important;border-color:var(--pvb-light-s) !important;}
:root .hz-preview[data-pv] .hz-pv-jc .btn-red{background-image:var(--pvb-danger-g) !important;color:var(--pvb-danger-fg) !important;border-color:var(--pvb-danger-s) !important;}
:root .hz-preview[data-pv] .hz-pv-jc .btn-blue{background-image:var(--pvb-primary-g) !important;color:var(--pvb-primary-fg) !important;border-color:var(--pvb-primary-s) !important;}
:root .hz-preview[data-pv] .hz-pv-jc .btn-green{background-image:var(--pvb-success-g) !important;color:var(--pvb-success-fg) !important;border-color:var(--pvb-success-s) !important;}
:root .hz-preview[data-pv] .hz-pv-jc .btn-dark{background-image:var(--pvb-dark-g) !important;color:var(--pvb-dark-fg) !important;border-color:var(--pvb-dark-s) !important;}