:root {
  --hz-surface: #FAF0DC;
  --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: #b1b1b1;
  --hz-table-border: #696969;
  --hz-primary: #DC5032;
}
:root[data-theme="dark"] {
  --hz-surface: #FAF0DC;
  --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: #b1b1b1;
  --hz-table-border: #696969;
  --hz-primary: #DC5032;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --hz-surface: #FAF0DC;
  --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: #b1b1b1;
  --hz-table-border: #696969;
  --hz-primary: #DC5032;
  }
}

/* ---- 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);
}
.navbarbg            { background-color: var(--hz-navbar); font-size: large; }
.navbarbg-secondary  { background-color: var(--hz-navbar2); font-size: large; }

/* 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;
}
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,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background-color: var(--hz-surface);
  color: var(--hz-text);
  border-color: var(--hz-border);
}

/* 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;}