@font-face {
  font-display: swap;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/barlow-v13-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/barlow-v13-latin-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/barlow-v13-latin-600.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/barlow-v13-latin-700.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/barlow-semi-condensed-v16-latin-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/barlow-semi-condensed-v16-latin-600.woff2") format("woff2");
}

:root {
  --default-font:
    "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --numeric-font: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --bs-body-font-family: var(--default-font);
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.45;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-heading-color: var(--bs-emphasis-color);
}

:root,
[data-bs-theme="light"] {
  --background-color: #eef0f3;
  --surface-color: #ffffff;
  --accent-color: #c98a00;
  --accent-color-rgb: 201, 138, 0;
  --accent-hover-color: #b67d00;
  --accent-active-color: #a67100;
  --danger-hover-color: #ad352b;
  --overlay-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --bs-body-bg: var(--background-color);
  --bs-body-bg-rgb: 238, 240, 243;
  --bs-body-color: #1d2025;
  --bs-body-color-rgb: 29, 32, 37;
  --bs-emphasis-color: #1d2025;
  --bs-emphasis-color-rgb: 29, 32, 37;
  --bs-secondary-color: #5e6570;
  --bs-secondary-color-rgb: 94, 101, 112;
  --bs-secondary-bg: #eaedf1;
  --bs-secondary-bg-rgb: 234, 237, 241;
  --bs-tertiary-color: #8c929b;
  --bs-tertiary-color-rgb: 140, 146, 155;
  --bs-tertiary-bg: #f4f6f8;
  --bs-tertiary-bg-rgb: 244, 246, 248;
  --bs-border-color: #dcdfe4;
  --bs-border-color-translucent: rgba(29, 32, 37, 0.1);
  --bs-primary: #1f5fc4;
  --bs-primary-rgb: 31, 95, 196;
  --bs-primary-text-emphasis: #16448c;
  --bs-primary-bg-subtle: #e4edfa;
  --bs-primary-border-subtle: #b9cff0;
  --bs-link-color: #1f5fc4;
  --bs-link-color-rgb: 31, 95, 196;
  --bs-link-hover-color: #174a9b;
  --bs-link-hover-color-rgb: 23, 74, 155;
  --bs-danger: #c43d32;
  --bs-danger-rgb: 196, 61, 50;
}

[data-bs-theme="dark"] {
  --background-color: #222428;
  --surface-color: #2a2d32;
  --accent-color: #f0b429;
  --accent-color-rgb: 240, 180, 41;
  --accent-hover-color: #f4bf45;
  --accent-active-color: #e9a81f;
  --danger-hover-color: #f38a82;
  --overlay-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --bs-body-bg: var(--background-color);
  --bs-body-bg-rgb: 34, 36, 40;
  --bs-body-color: #eceef0;
  --bs-body-color-rgb: 236, 238, 240;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #9ba1a9;
  --bs-secondary-color-rgb: 155, 161, 169;
  --bs-secondary-bg: #383c43;
  --bs-secondary-bg-rgb: 56, 60, 67;
  --bs-tertiary-color: #6f757d;
  --bs-tertiary-color-rgb: 111, 117, 125;
  --bs-tertiary-bg: #32363c;
  --bs-tertiary-bg-rgb: 50, 54, 60;
  --bs-border-color: #3c4047;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-primary: #86b4ff;
  --bs-primary-rgb: 134, 180, 255;
  --bs-primary-text-emphasis: #a8c8ff;
  --bs-primary-bg-subtle: #1b2a44;
  --bs-primary-border-subtle: #2e4a7a;
  --bs-link-color: #86b4ff;
  --bs-link-color-rgb: 134, 180, 255;
  --bs-link-hover-color: #a8c8ff;
  --bs-link-hover-color-rgb: 168, 200, 255;
  --bs-danger: #f07167;
  --bs-danger-rgb: 240, 113, 103;
  --bs-table-hover-bg: #32363c;
  --bs-table-active-bg: #2f3d52;
  scrollbar-color: #4a525c #222428;
}

body {
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

.font-numeric {
  font-family: var(--numeric-font);
  font-variant-numeric: tabular-nums;
}

a {
  transition: color 0.15s ease-in-out;
}

.btn {
  --bs-btn-font-size: var(--bs-body-font-size);
  --bs-btn-font-weight: 500;
  --bs-btn-padding-x: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
}

.btn-lg,
.btn-group-lg > .btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
}

.btn-primary {
  --bs-btn-color: #1a1a1a;
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-hover-bg: var(--accent-hover-color);
  --bs-btn-hover-border-color: var(--accent-hover-color);
  --bs-btn-active-color: #1a1a1a;
  --bs-btn-active-bg: var(--accent-active-color);
  --bs-btn-active-border-color: var(--accent-active-color);
  --bs-btn-disabled-color: #1a1a1a;
  --bs-btn-disabled-bg: var(--accent-color);
  --bs-btn-disabled-border-color: var(--accent-color);
  --bs-btn-focus-shadow-rgb: var(--accent-color-rgb);
  --bs-btn-font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--surface-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-emphasis-color);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-border-color: var(--bs-border-color);
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-bg: var(--surface-color);
  --bs-btn-disabled-border-color: var(--bs-border-color);
  --bs-btn-focus-shadow-rgb: var(--accent-color-rgb);
}

.btn-ghost {
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-emphasis-color);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--bs-tertiary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--accent-color-rgb);
}

.btn-danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--danger-hover-color);
  --bs-btn-hover-border-color: var(--danger-hover-color);
  --bs-btn-active-bg: var(--danger-hover-color);
  --bs-btn-active-border-color: var(--danger-hover-color);
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

.link-primary {
  color: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
}

.link-primary:hover,
.link-primary:focus {
  color: rgba(
    var(--bs-link-hover-color-rgb),
    var(--bs-link-opacity, 1)
  ) !important;
}

.form-control,
.form-select,
.input-group-text {
  font-size: var(--bs-body-font-size);
  border-radius: var(--bs-border-radius-sm);
}

.form-control,
.form-select,
.form-check-input,
.input-group-text {
  background-color: var(--surface-color);
}

.form-control::placeholder {
  color: var(--bs-tertiary-color);
}

.input-group-text {
  color: var(--bs-tertiary-color);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-rgb), 0.25);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-rgb), 0.25);
}

.selectize-input,
.selectize-control.single .selectize-input.input-active {
  background-color: var(--surface-color);
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
}

.selectize-input.focus,
.selectize-control.single .selectize-input.input-active.focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-rgb), 0.25);
}

.nav-underline {
  --bs-nav-underline-gap: 1.5rem;
  --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
}

.nav {
  --bs-nav-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--bs-body-color);
}

.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  border-bottom-color: var(--accent-color);
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.btn:focus-visible,
.nav-link:focus-visible,
.form-check-input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  box-shadow: none;
}

#header {
  background-color: var(--surface-color);
  border-bottom: 1px solid var(--bs-border-color);
}

#header .navbar-brand h1 {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--bs-emphasis-color);
}

.navbar-nav .nav-link {
  font-size: 1rem;
}

.card {
  --bs-card-bg: var(--surface-color);
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-cap-bg: var(--bs-tertiary-bg);
}

.modal {
  --bs-modal-bg: var(--surface-color);
  --bs-modal-border-color: var(--bs-border-color);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--surface-color);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-border-radius: var(--bs-border-radius-sm);
  --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
  --bs-dropdown-link-active-color: var(--bs-emphasis-color);
  --bs-dropdown-link-active-bg: var(--bs-secondary-bg);
  box-shadow: var(--overlay-shadow);
}

.accordion {
  --bs-accordion-bg: var(--surface-color);
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem
    rgba(var(--accent-color-rgb), 0.25);
}

.list-group {
  --bs-list-group-bg: var(--surface-color);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-action-hover-bg: var(--bs-secondary-bg);
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
}

.offcanvas {
  --bs-offcanvas-bg: var(--surface-color);
}

.toast {
  --bs-toast-bg: var(--surface-color);
}

.popover {
  --bs-popover-bg: var(--surface-color);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--bs-secondary-bg);
}

.table > thead {
  --bs-table-bg: var(--bs-tertiary-bg);
}

html[data-bs-theme="light"] .tabulator .tabulator-header,
html[data-bs-theme="light"] .tabulator .tabulator-header .tabulator-col {
  background-color: var(--bs-tertiary-bg);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="light"]
    .tabulator
    .tabulator-row.tabulator-selectable:hover,
  html[data-bs-theme="light"]
    .tabulator
    .tabulator-row.tabulator-selectable:hover
    .tabulator-cell {
    background-color: var(--bs-secondary-bg);
  }
}

.tabulator .tabulator-footer .tabulator-page.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-body-bg);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer.footer {
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  padding-top: 1.5rem;
}

.timesheet-row-pending {
  position: relative;
  border-left: 4px solid #ffc107;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 193, 7, 0.08),
    rgba(255, 193, 7, 0.08) 10px,
    rgba(255, 193, 7, 0.16) 10px,
    rgba(255, 193, 7, 0.16) 20px
  );
}

#offline-status-banner .badge {
  min-width: 40px;
}

#offline-status-banner .btn {
  white-space: nowrap;
}

@keyframes ww-spin {
  to {
    transform: rotate(360deg);
  }
}

.sync-spinning {
  display: inline-block;
  animation: ww-spin 0.75s linear infinite;
}

/* -------------------------------------------------------------
 * timesheet inline save toast
 * -----------------------------------------------------------*/
.ts-toast {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ts-toast.ts-visible {
  display: inline-flex;
}

.ts-toast.ts-show {
  opacity: 1;
}

.ts-toast.ts-success {
  background: #e7f8ed;
  color: #1f6f3c;
  border: 1px solid #bce7c8;
}

.ts-toast.ts-error {
  background: #fdecec;
  color: #a12a2a;
  border: 1px solid #f7c0c0;
}

.ts-toast-close {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.15rem;
  cursor: pointer;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  font-size: 0.95rem;
}

.ts-toast-close:hover {
  opacity: 1;
}

[data-bs-theme="dark"] .ts-toast.ts-success {
  background: #0d2818;
  color: #6ee7a0;
  border-color: #1a4731;
}

[data-bs-theme="dark"] .ts-toast.ts-error {
  background: #2d0f0f;
  color: #f88;
  border-color: #5c1a1a;
}

/* -------------------------------------------------------------
 * approval page sticky alerts
 * -----------------------------------------------------------*/
#approval-message {
  position: sticky;
  top: 70px;
  /* adjust based on navbar height */
  z-index: 1020;
}

#approval-message:empty {
  display: none;
}

/* -------------------------------------------------------------
 * htmx button loading state
 * -----------------------------------------------------------*/
.htmx-btn .loading-indicator {
  display: none;
}

.htmx-btn.htmx-request {
  pointer-events: none;
  opacity: 0.65;
}

.htmx-btn.htmx-request .label {
  display: none;
}

.htmx-btn.htmx-request .loading-indicator {
  display: flex;
}

/* -------------------------------------------------------------
 * generic htmx loading indicator
 * -----------------------------------------------------------*/
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 200ms ease-in;
}

/* -------------------------------------------------------------
 * bootstrap tables
 * -----------------------------------------------------------*/
.h-400 {
  max-height: 400px;
}

/* =============================================================
 * DARK MODE OVERRIDES
 * Bootstrap 5.3+ handles most component colours automatically
 * via data-bs-theme="dark". The rules below only cover custom
 * variables and hardcoded colours used elsewhere in this file.
 * ============================================================*/
[data-bs-theme="dark"] .text-bg-primary {
  color: var(--surface-color) !important;
  background-color: var(--bs-primary) !important;
}

/* --- timesheet pending row --- */
[data-bs-theme="dark"] .timesheet-row-pending {
  border-left-color: #ffc107;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 193, 7, 0.06),
    rgba(255, 193, 7, 0.06) 10px,
    rgba(255, 193, 7, 0.12) 10px,
    rgba(255, 193, 7, 0.12) 20px
  );
}

/* --- btn-outline-dark: swap to light tones in dark mode --- */
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-light);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: var(--bs-light);
  --bs-btn-active-border-color: var(--bs-light);
  --bs-btn-disabled-color: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
}

/* --- theme toggle button --- */
#theme-toggle-btn {
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
}

#theme-toggle-btn:hover {
  opacity: 0.75;
}

#theme-toggle-btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-rgb), 0.45);
}

/* --- selectize overrides for dark mode --- */
[data-bs-theme="dark"] .selectize-input,
[data-bs-theme="dark"] .selectize-control.single .selectize-input.input-active {
  background-color: var(--surface-color);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .selectize-input.full {
  background-color: var(--surface-color);
}

[data-bs-theme="dark"] .selectize-input.dropdown-active::before {
  background: var(--bs-border-color);
}

[data-bs-theme="dark"] .selectize-input > input {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown,
[data-bs-theme="dark"] .selectize-dropdown.form-control {
  background: var(--surface-color);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown .active:not(.selected) {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown .active,
[data-bs-theme="dark"] .selectize-dropdown .selected {
  background-color: var(--bs-primary);
  color: var(--surface-color);
}

[data-bs-theme="dark"] .selectize-dropdown .option {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown .optgroup-header {
  color: var(--bs-secondary-color);
  background: var(--surface-color);
}

[data-bs-theme="dark"] .selectize-dropdown .create {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .selectize-control.multi .selectize-input > div {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .selectize-control.multi .selectize-input.disabled > div,
[data-bs-theme="dark"]
  .selectize-control.multi
  .selectize-input.disabled
  > div.active {
  color: var(--bs-secondary-color);
  background: var(--bs-secondary-bg);
  border-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .selectize-control .selectize-input.disabled {
  background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"]
  .selectize-control.single
  .selectize-input:not(.no-arrow):after {
  border-color: var(--bs-body-color) transparent transparent transparent;
}

[data-bs-theme="dark"]
  .selectize-control.single
  .selectize-input:not(.no-arrow).dropdown-active:after {
  border-color: transparent transparent var(--bs-body-color) transparent;
}

[data-bs-theme="dark"]
  .selectize-dropdown.plugin-dropdown_header
  .selectize-dropdown-header {
  background: var(--bs-tertiary-bg);
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"]
  .selectize-dropdown.plugin-dropdown_header
  .selectize-dropdown-header-close {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-control.plugin-clear_button .clear {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-control.plugin-remove_button .item .remove {
  border-left-color: var(--bs-border-color);
}

/* --- tabulator: softer dark mode ---
 * Tabulator's bootstrap5 theme hardcodes #212529 bg, #fff text,
 * and #4d5154 borders (many with !important) so the --bs-*
 * variable overrides above can't reach them.  We must override
 * every rule explicitly using the same values from our palette.
 * -----------------------------------------------------------*/
html[data-bs-theme="dark"] .tabulator {
  background-color: var(--surface-color);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-header,
html[data-bs-theme="dark"] .tabulator:not(.thead-light) .tabulator-header {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col,
html[data-bs-theme="dark"]
  .tabulator:not(.thead-light)
  .tabulator-header
  .tabulator-col {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* table-bordered variant: vertical column/cell separators */
html[data-bs-theme="dark"]
  .tabulator.table-bordered
  .tabulator-header
  .tabulator-col,
html[data-bs-theme="dark"]
  .tabulator.table-bordered
  .tabulator-tableholder
  .tabulator-table
  .tabulator-row
  .tabulator-cell {
  border-right-color: var(--bs-border-color);
}

/* frozen column edges */
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-frozen.tabulator-frozen-left,
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-row
  .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
  border-right-color: var(--bs-border-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-frozen.tabulator-frozen-right,
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-row
  .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
  border-left-color: var(--bs-border-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-col-content
  .tabulator-col-sorter
  .tabulator-arrow {
  border-bottom-color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col.tabulator-sortable[aria-sort="ascending"]
  .tabulator-col-content
  .tabulator-col-sorter
  .tabulator-arrow {
  border-bottom-color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col.tabulator-sortable[aria-sort="descending"]
  .tabulator-col-content
  .tabulator-col-sorter
  .tabulator-arrow {
  border-top-color: var(--bs-body-color);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"]
    .tabulator
    .tabulator-header
    .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
    background-color: var(--bs-table-hover-bg);
  }
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-header-filter
  input {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-header-filter
  input:focus {
  background-color: var(--bs-secondary-bg);
  border-color: var(--accent-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder,
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-calcs-holder
  .tabulator-row {
  background: var(--bs-tertiary-bg) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-tableholder {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table {
  background-color: var(--surface-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-row,
html[data-bs-theme="dark"] .tabulator .tabulator-cell {
  background-color: var(--surface-color);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* remove striped rows from all tabulator tables */
.tabulator .tabulator-row.tabulator-row-even {
  background-color: inherit !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"] .tabulator .tabulator-row:hover {
    background-color: var(--bs-table-hover-bg);
  }

  html[data-bs-theme="dark"] .tabulator .tabulator-row:hover .tabulator-cell {
    background-color: var(--bs-table-hover-bg);
  }
}

html[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-selected {
  background-color: var(--bs-table-active-bg);
}

html[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-calcs {
  background: var(--bs-tertiary-bg) !important;
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-row
  .tabulator-cell.tabulator-row-header {
  background: var(--bs-tertiary-bg);
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-footer
  .tabulator-calcs-holder {
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-footer
  .tabulator-calcs-holder
  .tabulator-row {
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-paginator {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-footer
  .tabulator-page:disabled {
  background: transparent;
  color: var(--bs-secondary-color);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"]
    .tabulator
    .tabulator-footer
    .tabulator-page:not(.disabled):hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--bs-emphasis-color);
  }
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page-size {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-tableholder
  .tabulator-placeholder
  .tabulator-placeholder-contents {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .tabulator input {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-alert .tabulator-alert-msg {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-alert
  .tabulator-alert-msg.tabulator-alert-state-error {
  border-color: #f85149;
  color: #f85149;
}

html[data-bs-theme="dark"] .tabulator-popup-container {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator-edit-list {
  background: var(--bs-secondary-bg);
}

html[data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-group {
  color: var(--bs-secondary-color);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator-row.tabulator-group {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator-row.tabulator-group span {
  color: var(--bs-secondary-color);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"]
    .tabulator-menu
    .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
    background: var(--bs-table-hover-bg);
  }
}

html[data-bs-theme="dark"] .tabulator-menu .tabulator-menu-separator {
  border-color: var(--bs-border-color);
}

/* -------------------------------------------------------------
 * tabulator row highlights (theme-aware)
 * -----------------------------------------------------------*/
.tabulator .tabulator-row.tabulator-row-submitted,
.tabulator .tabulator-row.tabulator-row-submitted .tabulator-cell {
  background-color: #e8f5e9 !important;
}

.tabulator .tabulator-row.tabulator-row-total,
.tabulator .tabulator-row.tabulator-row-total .tabulator-cell {
  background-color: #f8f9fa !important;
}

[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-submitted,
[data-bs-theme="dark"]
  .tabulator
  .tabulator-row.tabulator-row-submitted
  .tabulator-cell {
  background-color: #1a3a2a !important;
}

[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-total,
[data-bs-theme="dark"]
  .tabulator
  .tabulator-row.tabulator-row-total
  .tabulator-cell {
  background-color: var(--bs-tertiary-bg) !important;
}

.tabulator .tabulator-row.tabulator-row-shared,
.tabulator .tabulator-row.tabulator-row-shared .tabulator-cell {
  background-color: #e3f2fd !important;
  font-style: italic !important;
}

[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-shared,
[data-bs-theme="dark"]
  .tabulator
  .tabulator-row.tabulator-row-shared
  .tabulator-cell {
  background-color: #0d2a45 !important;
}

.eq-search {
  width: 300px;
  max-width: 100%;
}

.eq-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.eq-groups {
  position: sticky;
  top: 4.5rem;
  overflow: hidden;
  background-color: var(--surface-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.eq-group-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem 0.8125rem 0.8125rem;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--bs-border-color);
  background: none;
  color: inherit;
  text-align: left;
}

.eq-group-btn:last-child {
  border-bottom: 0;
}

.eq-group-btn:hover {
  background-color: var(--bs-secondary-bg);
}

.eq-group-btn[aria-current="true"] {
  background-color: var(--bs-tertiary-bg);
  border-left-color: var(--accent-color);
}

.eq-group-name {
  font-weight: 600;
  font-size: 0.96875rem;
}

.eq-group-match {
  color: var(--bs-link-color);
}

.eq-detail {
  min-width: 0;
  background-color: var(--surface-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.eq-detail.htmx-request {
  opacity: 0.6;
}

.eq-options {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: calc(100% - 0.75rem);
  z-index: 5;
  max-height: 300px;
  overflow: auto;
  margin: 0;
  padding: 0.25rem 0;
  background-color: var(--surface-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  box-shadow: var(--overlay-shadow);
}

.eq-option {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: baseline;
  padding: 0.4375rem 0.75rem;
  cursor: pointer;
}

.eq-option:hover,
.eq-option[aria-selected="true"] {
  background-color: var(--bs-secondary-bg);
}

.eq-unit {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr) 2rem;
  gap: 0.75rem;
  align-items: center;
  min-height: 42px;
  padding: 0.4375rem 1.5rem;
}

.eq-unit:hover {
  background-color: var(--bs-tertiary-bg);
}

.eq-unit-remove {
  --bs-btn-color: var(--bs-tertiary-color);
  --bs-btn-hover-color: var(--bs-danger);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  line-height: 1;
  opacity: 0;
}

.eq-unit-remove .bi::before {
  vertical-align: 0;
}

.eq-unit:hover .eq-unit-remove,
.eq-unit-remove:focus-visible {
  opacity: 1;
}

.eq-delete {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-hover-color: var(--bs-danger);
}

@media (hover: none) {
  .eq-unit-remove {
    opacity: 1;
  }
}

@media (max-width: 991.98px) {
  .eq-layout {
    grid-template-columns: 1fr;
  }

  .eq-groups {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .eq-unit {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .eq-options {
    left: 1rem;
    right: 1rem;
  }
}