/* GreenLoop UI v2 — Bootstrap 5.3 / DataTables compatibility theme.

   About 70 inline scripts in GreenLoop build Bootstrap markup (modals, alerts,
   buttons, badges, spinners, tables, list groups). Rather than rewrite them,
   Bootstrap is re-themed here to the EZ OMS tokens, so everything they render
   takes the new look with no JS change. Wrapped in layer gl-compat (order declared in
   greenloop.css): it beats the vendor layer, loses to page styles. */

@layer gl-compat {

:root {
  --bs-font-sans-serif: var(--gl-font-primary);
  --bs-body-font-family: var(--gl-font-primary);
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.5715;
  --bs-body-color: var(--gl-text-primary);
  --bs-body-color-rgb: 28, 37, 46;
  --bs-body-bg: var(--gl-bg-default);
  --bs-body-bg-rgb: 249, 250, 251;
  --bs-emphasis-color: var(--gl-grey-900);
  --bs-secondary-color: var(--gl-text-secondary);
  --bs-secondary-bg: var(--gl-grey-200);
  --bs-tertiary-color: var(--gl-text-disabled);
  --bs-tertiary-bg: var(--gl-grey-200);
  --bs-heading-color: var(--gl-text-primary);

  /* -rgb drives the .text-*/.bg-* utilities (which carry !important in the vendor
     layer and so cannot be overridden): the darker shades keep their text readable. */
  --bs-primary: #00A76F; --bs-primary-rgb: 0, 120, 103;
  --bs-secondary: #637381; --bs-secondary-rgb: 69, 79, 91;
  --bs-success: #22C55E; --bs-success-rgb: 6, 94, 73;
  --bs-info: #00B8D9; --bs-info-rgb: 0, 108, 156;
  --bs-warning: #FFAB00; --bs-warning-rgb: 255, 171, 0;
  --bs-danger: #FF5630; --bs-danger-rgb: 183, 29, 24;
  --bs-light: #F4F6F8; --bs-light-rgb: 244, 246, 248;
  --bs-dark: #1C252E; --bs-dark-rgb: 28, 37, 46;

  --bs-primary-text-emphasis: var(--gl-primary-darker);
  --bs-success-text-emphasis: var(--gl-success-darker);
  --bs-info-text-emphasis: var(--gl-info-darker);
  --bs-warning-text-emphasis: var(--gl-warning-darker);
  --bs-danger-text-emphasis: var(--gl-error-darker);
  --bs-secondary-text-emphasis: var(--gl-grey-700);
  --bs-primary-bg-subtle: var(--gl-primary-lighter);
  --bs-success-bg-subtle: var(--gl-success-lighter);
  --bs-info-bg-subtle: var(--gl-info-lighter);
  --bs-warning-bg-subtle: var(--gl-warning-lighter);
  --bs-danger-bg-subtle: var(--gl-error-lighter);
  --bs-secondary-bg-subtle: var(--gl-grey-200);
  --bs-light-bg-subtle: var(--gl-grey-100);
  --bs-primary-border-subtle: rgb(var(--gl-primary-channel) / 0.24);
  --bs-success-border-subtle: rgb(var(--gl-success-channel) / 0.24);
  --bs-info-border-subtle: rgb(var(--gl-info-channel) / 0.24);
  --bs-warning-border-subtle: rgb(var(--gl-warning-channel) / 0.24);
  --bs-danger-border-subtle: rgb(var(--gl-error-channel) / 0.24);
  --bs-secondary-border-subtle: rgb(var(--gl-grey-500-channel) / 0.24);

  --bs-link-color: var(--gl-primary-dark);
  --bs-link-color-rgb: 0, 120, 103;
  --bs-link-hover-color: var(--gl-primary-darker);
  --bs-link-hover-color-rgb: 0, 75, 80;
  --bs-border-color: rgb(var(--gl-grey-500-channel) / 0.24);
  --bs-border-color-translucent: rgb(var(--gl-grey-500-channel) / 0.2);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 16px;
  --bs-border-radius-xxl: 20px;
  --bs-box-shadow: var(--gl-shadow-z8);
  --bs-box-shadow-sm: var(--gl-shadow-z1);
  --bs-box-shadow-lg: var(--gl-shadow-z24);
  --bs-focus-ring-color: rgb(var(--gl-primary-channel) / 0.24);
  --bs-form-valid-color: var(--gl-success-dark);
  --bs-form-valid-border-color: var(--gl-success-main);
  --bs-form-invalid-color: var(--gl-error-main);
  --bs-form-invalid-border-color: var(--gl-error-main);
}

body { -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .page-link:hover, .list-group-item-action:hover, .navbar a:hover { text-decoration: none; }
h1, .h1, h2, .h2 { font-family: var(--gl-font-secondary); font-weight: 800; }
h3, .h3 { font-family: var(--gl-font-secondary); font-weight: 700; }
.fw-light { font-weight: 400 !important; }
.text-muted { color: var(--gl-text-secondary) !important; }
hr { border-top-color: var(--gl-divider); opacity: 1; }

/* ── Buttons (button.tsx: radius 8, 700 weight, 36/30/48 px) ── */
.btn {
  --bs-btn-padding-x: 12px;
  --bs-btn-padding-y: 6px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.715;
  --bs-btn-border-radius: 8px;
  --bs-btn-focus-box-shadow: 0 0 0 3px rgb(var(--bs-btn-focus-shadow-rgb) / 0.32);
  transition: background-color 250ms var(--gl-ease), box-shadow 250ms var(--gl-ease), border-color 250ms var(--gl-ease), color 250ms var(--gl-ease);
}
/* Clear interaction feedback on every Bootstrap button. */
.btn:not(:disabled):not(.disabled):hover { box-shadow: var(--gl-shadow-z4); }
.btn:not(:disabled):not(.disabled):active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--gl-primary-main); outline-offset: 2px; box-shadow: none; }
.btn.disabled, .btn:disabled, fieldset:disabled .btn { opacity: 1; cursor: not-allowed; }
.btn-sm { --bs-btn-padding-x: 8px; --bs-btn-padding-y: 3px; --bs-btn-font-size: 0.8125rem; --bs-btn-border-radius: 8px; }
.btn-lg { --bs-btn-padding-x: 22px; --bs-btn-padding-y: 11px; --bs-btn-font-size: 0.9375rem; --bs-btn-border-radius: 8px; }

.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: #007867; --bs-btn-border-color: #007867;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #004B50; --bs-btn-hover-border-color: #004B50;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #004B50; --bs-btn-active-border-color: #004B50;
  --bs-btn-disabled-color: rgb(var(--gl-grey-500-channel) / 0.8); --bs-btn-disabled-bg: rgb(var(--gl-grey-500-channel) / 0.24); --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 0 167 111;
}
.btn-primary:hover { box-shadow: var(--gl-shadow-primary); }
.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: #118D57; --bs-btn-border-color: #118D57;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #065E49; --bs-btn-hover-border-color: #065E49;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #065E49; --bs-btn-active-border-color: #065E49;
  --bs-btn-disabled-color: rgb(var(--gl-grey-500-channel) / 0.8); --bs-btn-disabled-bg: rgb(var(--gl-grey-500-channel) / 0.24); --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 34 197 94;
}
.btn-success:hover { box-shadow: 0 8px 16px 0 rgb(var(--gl-success-channel) / 0.24); }
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: #B71D18; --bs-btn-border-color: #B71D18;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7A0916; --bs-btn-hover-border-color: #7A0916;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #7A0916; --bs-btn-active-border-color: #7A0916;
  --bs-btn-disabled-color: rgb(var(--gl-grey-500-channel) / 0.8); --bs-btn-disabled-bg: rgb(var(--gl-grey-500-channel) / 0.24); --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 255 86 48;
}
.btn-danger:hover { box-shadow: var(--gl-shadow-error); }
.btn-warning {
  --bs-btn-color: #1C252E; --bs-btn-bg: #FFAB00; --bs-btn-border-color: #FFAB00;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B76E00; --bs-btn-hover-border-color: #B76E00;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #7A4100; --bs-btn-active-border-color: #7A4100;
  --bs-btn-disabled-color: rgb(var(--gl-grey-500-channel) / 0.8); --bs-btn-disabled-bg: rgb(var(--gl-grey-500-channel) / 0.24); --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 255 171 0;
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-bg: #006C9C; --bs-btn-border-color: #006C9C;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #003768; --bs-btn-hover-border-color: #003768;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #003768; --bs-btn-active-border-color: #003768;
  --bs-btn-disabled-color: rgb(var(--gl-grey-500-channel) / 0.8); --bs-btn-disabled-bg: rgb(var(--gl-grey-500-channel) / 0.24); --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 0 184 217;
}
/* MUI "inherit contained": the neutral dark button. */
.btn-secondary, .btn-dark {
  --bs-btn-color: #fff; --bs-btn-bg: #1C252E; --bs-btn-border-color: #1C252E;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #454F5B; --bs-btn-hover-border-color: #454F5B;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #141A21; --bs-btn-active-border-color: #141A21;
  --bs-btn-disabled-color: rgb(var(--gl-grey-500-channel) / 0.8); --bs-btn-disabled-bg: rgb(var(--gl-grey-500-channel) / 0.24); --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 28 37 46;
}
.btn-secondary:hover, .btn-dark:hover { box-shadow: var(--gl-shadow-z8); }
.btn-light {
  --bs-btn-color: #1C252E; --bs-btn-bg: rgb(var(--gl-grey-500-channel) / 0.08); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #1C252E; --bs-btn-hover-bg: rgb(var(--gl-grey-500-channel) / 0.24); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #1C252E; --bs-btn-active-bg: rgb(var(--gl-grey-500-channel) / 0.32); --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 145 158 171;
}

/* Outlined (MUI: 48% border, 8% hover fill, text stays coloured). */
.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
  --bs-btn-bg: transparent;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-color: rgb(var(--gl-grey-500-channel) / 0.8);
  --bs-btn-disabled-border-color: rgb(var(--gl-grey-500-channel) / 0.24);
}
.btn-outline-primary { --bs-btn-color: #007867; --bs-btn-border-color: rgb(0 167 111 / 0.48); --bs-btn-hover-color: #007867; --bs-btn-hover-bg: rgb(0 167 111 / 0.08); --bs-btn-hover-border-color: #00A76F; --bs-btn-active-color: #007867; --bs-btn-active-bg: rgb(0 167 111 / 0.16); --bs-btn-active-border-color: #00A76F; --bs-btn-focus-shadow-rgb: 0 167 111; }
.btn-outline-success { --bs-btn-color: #065E49; --bs-btn-border-color: rgb(34 197 94 / 0.48); --bs-btn-hover-color: #118D57; --bs-btn-hover-bg: rgb(34 197 94 / 0.08); --bs-btn-hover-border-color: #22C55E; --bs-btn-active-color: #065E49; --bs-btn-active-bg: rgb(34 197 94 / 0.16); --bs-btn-active-border-color: #22C55E; --bs-btn-focus-shadow-rgb: 34 197 94; }
.btn-outline-danger { --bs-btn-color: #B71D18; --bs-btn-border-color: rgb(255 86 48 / 0.48); --bs-btn-hover-color: #B71D18; --bs-btn-hover-bg: rgb(255 86 48 / 0.08); --bs-btn-hover-border-color: #FF5630; --bs-btn-active-color: #B71D18; --bs-btn-active-bg: rgb(255 86 48 / 0.16); --bs-btn-active-border-color: #FF5630; --bs-btn-focus-shadow-rgb: 255 86 48; }
.btn-outline-warning { --bs-btn-color: #7A4100; --bs-btn-border-color: rgb(255 171 0 / 0.48); --bs-btn-hover-color: #B76E00; --bs-btn-hover-bg: rgb(255 171 0 / 0.08); --bs-btn-hover-border-color: #FFAB00; --bs-btn-active-color: #7A4100; --bs-btn-active-bg: rgb(255 171 0 / 0.16); --bs-btn-active-border-color: #FFAB00; --bs-btn-focus-shadow-rgb: 255 171 0; }
.btn-outline-info { --bs-btn-color: #006C9C; --bs-btn-border-color: rgb(0 184 217 / 0.48); --bs-btn-hover-color: #006C9C; --bs-btn-hover-bg: rgb(0 184 217 / 0.08); --bs-btn-hover-border-color: #00B8D9; --bs-btn-active-color: #003768; --bs-btn-active-bg: rgb(0 184 217 / 0.16); --bs-btn-active-border-color: #00B8D9; --bs-btn-focus-shadow-rgb: 0 184 217; }
.btn-outline-secondary, .btn-outline-dark { --bs-btn-color: #1C252E; --bs-btn-border-color: rgb(145 158 171 / 0.32); --bs-btn-hover-color: #1C252E; --bs-btn-hover-bg: rgb(145 158 171 / 0.08); --bs-btn-hover-border-color: #1C252E; --bs-btn-active-color: #1C252E; --bs-btn-active-bg: rgb(145 158 171 / 0.16); --bs-btn-active-border-color: #1C252E; --bs-btn-focus-shadow-rgb: 145 158 171; }
.btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgb(255 255 255 / 0.48); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgb(255 255 255 / 0.12); --bs-btn-hover-border-color: #fff; }
.btn-check:checked + .btn-outline-secondary, .btn-check:checked + .btn-outline-primary {
  color: var(--gl-text-primary); background: var(--gl-bg-paper); border-color: var(--gl-text-primary); box-shadow: 0 0 0 0.75px currentColor;
}
.btn-link { --bs-btn-color: var(--gl-primary-dark); --bs-btn-hover-color: var(--gl-primary-dark); --bs-btn-active-color: var(--gl-primary-dark); font-weight: 600; text-decoration: none; }
.btn-close:focus { box-shadow: var(--gl-focus-ring); }

/* ── Forms (textfield.tsx) ── */
.form-control, .form-select {
  padding: 10px 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gl-text-primary);
  background-color: var(--gl-bg-paper);
  border: 1px solid rgb(var(--gl-grey-500-channel) / 0.32);
  border-radius: var(--gl-radius-sm);
  transition: border-color var(--gl-duration-fast) var(--gl-ease), box-shadow var(--gl-duration-fast) var(--gl-ease);
}
.form-select { padding-right: 40px; background-position: right 12px center; background-size: 16px 12px; }
.form-control::placeholder { color: var(--gl-text-disabled); opacity: 1; }
.form-control:hover, .form-select:hover { border-color: var(--gl-text-primary); }
.form-control:focus, .form-select:focus { border-color: var(--gl-primary-main); box-shadow: 0 0 0 1px var(--gl-primary-main); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--gl-bg-neutral); color: var(--gl-text-secondary); border-color: rgb(var(--gl-grey-500-channel) / 0.24); }
.form-control-sm, .form-select-sm { padding: 6px 10px; font-size: 0.8125rem; border-radius: var(--gl-radius-sm); }
.form-select-sm { padding-right: 32px; }
.form-control-lg, .form-select-lg { padding: 12px 16px; font-size: 1rem; border-radius: var(--gl-radius-sm); }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border-color: var(--gl-error-main); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 1px var(--gl-error-main); }
.invalid-feedback { color: var(--gl-error-main); font-size: 0.75rem; }
.valid-feedback { color: var(--gl-success-dark); font-size: 0.75rem; }
.form-label { margin-bottom: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--gl-text-secondary); }
.form-text { color: var(--gl-text-secondary); font-size: 0.75rem; }
.form-check-input { border-color: rgb(var(--gl-grey-500-channel) / 0.48); }
.form-check-input:checked { background-color: var(--gl-primary-main); border-color: var(--gl-primary-main); }
.form-check-input:focus { border-color: var(--gl-primary-main); box-shadow: var(--gl-focus-ring); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2300A76F'/%3e%3c/svg%3e"); }
.input-group-text { background: var(--gl-bg-neutral); border-color: rgb(var(--gl-grey-500-channel) / 0.32); color: var(--gl-text-secondary); border-radius: var(--gl-radius-sm); }
.form-range::-webkit-slider-thumb { background: var(--gl-primary-main); }
.form-range::-moz-range-thumb { background: var(--gl-primary-main); }

/* ── Cards (card.tsx) ── */
.card {
  --bs-card-border-width: 0;
  --bs-card-border-radius: var(--gl-radius-lg);
  --bs-card-inner-border-radius: var(--gl-radius-lg);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-y: 20px;
  --bs-card-spacer-x: 24px;
  --bs-card-cap-padding-y: 16px;
  --bs-card-cap-padding-x: 24px;
  --bs-card-bg: var(--gl-bg-paper);
  box-shadow: var(--gl-shadow-card);
}
.card-header { font-weight: 600; border-bottom: 1px dashed var(--gl-divider); }
.card-footer { border-top: 1px dashed var(--gl-divider); }
.card-title { font-weight: 600; }

/* ── Tables (table.tsx) ── */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--gl-text-primary);
  --bs-table-border-color: var(--gl-divider);
  --bs-table-striped-bg: rgb(var(--gl-grey-500-channel) / 0.04);
  --bs-table-hover-bg: var(--gl-action-hover);
  --bs-table-active-bg: var(--gl-action-selected);
  font-size: 0.875rem;
}
.table > :not(caption) > * > * { padding: 12px 16px; border-bottom-style: dashed; }
.table > thead > tr > th, .table > thead > tr > td {
  background: var(--gl-bg-neutral); color: var(--gl-text-secondary); font-weight: 600;
  border-bottom: 0; white-space: nowrap;
}
.table > tfoot > tr > * { font-weight: 600; background: var(--gl-grey-100); }
.table-sm > :not(caption) > * > * { padding: 6px 12px; }
.table-bordered > :not(caption) > * > * { border-style: solid; }
.table-dark { --bs-table-bg: var(--gl-grey-800); }
.table-light { --bs-table-bg: var(--gl-bg-neutral); }

/* ── Alerts (alert.tsx, standard variant) ── */
.alert { --bs-alert-border-radius: var(--gl-radius-sm); --bs-alert-padding-y: 12px; --bs-alert-padding-x: 16px; border: 0; font-size: 0.875rem; }
.alert-primary { --bs-alert-color: var(--gl-primary-darker); --bs-alert-bg: var(--gl-primary-lighter); --bs-alert-link-color: var(--gl-primary-darker); }
.alert-success { --bs-alert-color: var(--gl-success-darker); --bs-alert-bg: var(--gl-success-lighter); --bs-alert-link-color: var(--gl-success-darker); }
.alert-info { --bs-alert-color: var(--gl-info-darker); --bs-alert-bg: var(--gl-info-lighter); --bs-alert-link-color: var(--gl-info-darker); }
.alert-warning { --bs-alert-color: var(--gl-warning-darker); --bs-alert-bg: var(--gl-warning-lighter); --bs-alert-link-color: var(--gl-warning-darker); }
.alert-danger { --bs-alert-color: var(--gl-error-darker); --bs-alert-bg: var(--gl-error-lighter); --bs-alert-link-color: var(--gl-error-darker); }
.alert-secondary, .alert-light { --bs-alert-color: var(--gl-grey-700); --bs-alert-bg: var(--gl-grey-200); }
.alert-dark { --bs-alert-color: #fff; --bs-alert-bg: var(--gl-grey-800); }

/* ── Badges (label.tsx proportions) ── */
.badge { --bs-badge-padding-x: 8px; --bs-badge-padding-y: 5px; --bs-badge-font-size: 0.75rem; --bs-badge-font-weight: 700; --bs-badge-border-radius: 6px; }
.text-bg-warning, .badge.bg-warning { color: var(--gl-warning-contrast) !important; }

/* ── Modals (dialog.tsx) — above the sidebar (1200) and header (1100) ── */
.modal {
  --bs-modal-zindex: 1450;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--gl-radius-lg);
  --bs-modal-inner-border-radius: var(--gl-radius-lg);
  --bs-modal-box-shadow: var(--gl-shadow-dialog);
  --bs-modal-header-padding: 24px 24px 16px;
  --bs-modal-header-border-width: 0;
  --bs-modal-footer-border-width: 0;
  --bs-modal-padding: 0 24px 16px;
  --bs-modal-footer-gap: 12px;
}
.modal-content { box-shadow: var(--gl-shadow-dialog); }
.modal-title { font-size: 1.125rem; font-weight: 700; }
.modal-footer { padding: 16px 24px 24px; }
.modal-backdrop { --bs-backdrop-zindex: 1440; --bs-backdrop-bg: #1C252E; --bs-backdrop-opacity: 0.48; }
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm { --bs-offcanvas-zindex: 1450; }
.offcanvas-backdrop { z-index: 1440; }

/* ── Dropdowns / popovers / tooltips (paperStyles dropdown) ── */
.dropdown-menu {
  --bs-dropdown-zindex: 1300;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: 10px;
  --bs-dropdown-padding-x: 4px;
  --bs-dropdown-padding-y: 4px;
  --bs-dropdown-box-shadow: var(--gl-shadow-dropdown);
  --bs-dropdown-font-size: 0.875rem;
  --bs-dropdown-link-color: var(--gl-text-primary);
  --bs-dropdown-link-hover-bg: var(--gl-action-hover);
  --bs-dropdown-link-active-color: var(--gl-text-primary);
  --bs-dropdown-link-active-bg: var(--gl-action-selected);
  --bs-dropdown-item-padding-x: 8px;
  --bs-dropdown-item-padding-y: 6px;
  --bs-dropdown-item-border-radius: 6px;
  --bs-dropdown-header-color: var(--gl-text-disabled);
  --bs-dropdown-divider-bg: var(--gl-divider);
  box-shadow: var(--gl-shadow-dropdown);
}
.dropdown-header { font-size: 0.6875rem; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.popover { --bs-popover-zindex: 1600; --bs-popover-border-width: 0; --bs-popover-border-radius: 10px; --bs-popover-box-shadow: var(--gl-shadow-dropdown); --bs-popover-font-size: 0.8125rem; box-shadow: var(--gl-shadow-dropdown); }
.tooltip { --bs-tooltip-zindex: 1650; --bs-tooltip-bg: var(--gl-grey-800); --bs-tooltip-font-size: 0.75rem; --bs-tooltip-border-radius: 6px; }
.toast { --bs-toast-border-radius: var(--gl-radius-md); --bs-toast-box-shadow: var(--gl-shadow-z20); --bs-toast-border-width: 0; }
.toast-container { z-index: 1500; }

/* ── Navs / tabs / pagination / list groups / accordion / progress ── */
.nav-tabs { --bs-nav-tabs-border-color: var(--gl-divider); --bs-nav-tabs-border-width: 1px; --bs-nav-tabs-link-active-color: var(--gl-text-primary); --bs-nav-tabs-link-active-bg: transparent; gap: 24px; }
.nav-tabs .nav-link { padding: 12px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--gl-text-secondary); font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--gl-text-primary); border-bottom-color: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { border-bottom-color: currentColor; font-weight: 600; }
.nav-pills { --bs-nav-pills-border-radius: 8px; --bs-nav-pills-link-active-bg: var(--gl-primary-dark); }
.nav-link { color: var(--gl-text-secondary); }
.nav-link:hover, .nav-link:focus { color: var(--gl-text-primary); }
.pagination { --bs-pagination-color: var(--gl-text-primary); --bs-pagination-border-width: 0; --bs-pagination-bg: transparent; --bs-pagination-hover-bg: var(--gl-action-hover); --bs-pagination-hover-color: var(--gl-text-primary); --bs-pagination-active-bg: var(--gl-primary-dark); --bs-pagination-active-border-color: var(--gl-primary-dark); --bs-pagination-focus-box-shadow: var(--gl-focus-ring); --bs-pagination-disabled-bg: transparent; gap: 4px; }
.page-link { border-radius: 16px !important; min-width: 32px; text-align: center; }
.list-group { --bs-list-group-border-color: var(--gl-divider); --bs-list-group-border-radius: var(--gl-radius-sm); --bs-list-group-action-hover-bg: var(--gl-action-hover); --bs-list-group-active-bg: rgb(var(--gl-primary-channel) / 0.08); --bs-list-group-active-color: var(--gl-primary-dark); --bs-list-group-active-border-color: var(--gl-divider); }
.accordion {
  --bs-accordion-border-color: var(--gl-divider);
  --bs-accordion-border-radius: var(--gl-radius-md);
  --bs-accordion-inner-border-radius: var(--gl-radius-md);
  --bs-accordion-btn-padding-x: 16px;
  --bs-accordion-btn-padding-y: 14px;
  --bs-accordion-btn-focus-box-shadow: var(--gl-focus-ring);
  --bs-accordion-active-color: var(--gl-primary-dark);
  --bs-accordion-active-bg: rgb(var(--gl-primary-channel) / 0.08);
  --bs-accordion-btn-bg: var(--gl-bg-paper);
  --bs-accordion-bg: var(--gl-bg-paper);
}
.accordion-button { font-weight: 600; }
.progress { --bs-progress-height: 6px; --bs-progress-border-radius: 4px; --bs-progress-bg: rgb(var(--gl-primary-channel) / 0.24); --bs-progress-bar-bg: var(--gl-primary-main); }
.spinner-border, .spinner-grow { --bs-spinner-animation-speed: 0.8s; }
.img-thumbnail { border-radius: var(--gl-radius-md); border-color: var(--gl-divider); }

/* ── DataTables 1.10 (vendor CSS is in gl-vendor, so no !important needed) ── */
.dataTables_wrapper { font-size: 0.875rem; color: var(--gl-text-primary); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  min-height: 36px; padding: 6px 12px; margin-left: 8px;
  border: 1px solid rgb(var(--gl-grey-500-channel) / 0.32); border-radius: var(--gl-radius-sm);
  background-color: var(--gl-bg-paper); color: var(--gl-text-primary); font: inherit;
}
.dataTables_wrapper .dataTables_length select { padding-right: 28px; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: var(--gl-primary-main); box-shadow: 0 0 0 1px var(--gl-primary-main); }
.dataTables_wrapper .dataTables_info { padding-top: 16px; color: var(--gl-text-secondary); font-size: 0.8125rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: 12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 32px; height: 32px; padding: 0 8px; margin: 0 2px; border: 0; border-radius: 16px;
  color: var(--gl-text-primary) !important; line-height: 32px; background: transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--gl-action-hover); border: 0; color: var(--gl-text-primary) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: rgb(var(--gl-primary-channel) / 0.16); border: 0; font-weight: 700; }
/* DataTables forces color:#333 !important on the current page from the vendor
   layer (an !important in a lower layer beats every later one), so the current
   page gets a light tint that dark text reads well on. */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--gl-text-disabled) !important; background: transparent; }
table.dataTable { border-collapse: separate; border-spacing: 0; }
table.dataTable thead th, table.dataTable thead td {
  padding: 12px 28px 12px 16px; border-bottom: 0; background-color: var(--gl-bg-neutral);
  color: var(--gl-text-secondary); font-weight: 600; white-space: nowrap;
}
table.dataTable tbody td { padding: 12px 16px; border-top: 0; border-bottom: 1px dashed var(--gl-divider); }
table.dataTable.no-footer { border-bottom: 0; }
table.dataTable tfoot th, table.dataTable tfoot td { padding: 12px 16px; border-top: 1px solid var(--gl-divider); }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background-color: rgb(var(--gl-grey-500-channel) / 0.04); }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.display tbody tr.even > .sorting_1 { background-color: transparent; }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background-color: var(--gl-action-hover); }
table.dataTable tbody tr { background-color: transparent; }
div.dt-buttons { display: inline-flex; flex-wrap: wrap; gap: 8px; }
div.dt-buttons .dt-button, a.dt-button, button.dt-button {
  margin: 0; padding: 4px 10px; border: 1px solid rgb(var(--gl-grey-500-channel) / 0.32); border-radius: var(--gl-radius-sm);
  background: var(--gl-bg-paper); color: var(--gl-text-primary); font-size: 0.8125rem; font-weight: 700; line-height: 22px;
  box-shadow: none;
}
div.dt-buttons .dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), button.dt-button:hover:not(.disabled) {
  background: var(--gl-action-hover); border-color: var(--gl-text-primary); box-shadow: none;
}
div.dt-button-info { border-radius: var(--gl-radius-lg); border: 0; box-shadow: var(--gl-shadow-dialog); }

/* ── daterangepicker 3.x (pages load it themselves; this themes it when present) ── */
.daterangepicker { font-family: var(--gl-font-primary); border: 0; border-radius: 12px; box-shadow: var(--gl-shadow-dropdown); }
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--gl-primary-main); }
.daterangepicker td.in-range { background-color: rgb(var(--gl-primary-channel) / 0.08); color: var(--gl-text-primary); }
.daterangepicker .ranges li.active { background-color: var(--gl-primary-main); }
.daterangepicker .drp-buttons .btn { font-weight: 700; }

/* ── Select2 4.0 (EZ Return) ── */
.select2-container--default .select2-selection--single { height: 44px; border: 1px solid rgb(var(--gl-grey-500-channel) / 0.32); border-radius: var(--gl-radius-sm); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 14px; color: var(--gl-text-primary); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 8px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--gl-primary-main); }
.select2-dropdown { border: 0; border-radius: 10px; box-shadow: var(--gl-shadow-dropdown); overflow: hidden; z-index: 1460; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: rgb(var(--gl-primary-channel) / 0.08); color: var(--gl-text-primary); }
.select2-container--default .select2-search--dropdown .select2-search__field { border-color: rgb(var(--gl-grey-500-channel) / 0.32); border-radius: 6px; }

} /* @layer gl-compat */