/* Freshlab Theme: base.
   Loaded in the admin area, the staff login pages and the customer area.
   Switzer, then 1. Tokens  2. Typography  3. Shared components  4. Focus and motion  5. Bridges (fragile)
   One final look: there is no calm/bold switch.

   Technique: every component rule is written flat with a ":root " prefix. That adds one class
   of specificity (0,1,0), so the theme beats Perfex's equal rules without depending on load order,
   and it parses in every browser (no CSS nesting). !important appears only where it has to beat a
   Perfex or plugin !important; each one says which. */

@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-VariableItalic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   1. Tokens. Every colour, size and radius in the theme comes from here.
   ========================================================================== */

:root {
  /* Brand */
  --fl-blue: #2463EB;
  --fl-blue-dark: #1D4ED8;
  --fl-blue-light: #3B83F6;
  --fl-blue-tint: #EEF3FE;
  --fl-ink: #0C0B0B;
  --fl-ink-2: #282828;
  --fl-muted: #6B6A6A;
  --fl-stone: #D5D3CE;
  --fl-line: #E4E2DD;
  --fl-bone: #F1F0ED;
  --fl-paper: #F8F8F7;
  --fl-white: #FFFFFF;

  /* Warm grey ramp anchored on the brand neutrals; replaces Perfex's cool slate greys */
  --fl-grey-50: var(--fl-paper);
  --fl-grey-100: var(--fl-bone);
  --fl-grey-200: var(--fl-line);
  --fl-grey-300: var(--fl-stone);
  --fl-grey-400: #A3A19C;
  --fl-grey-500: var(--fl-muted);
  --fl-grey-600: #52504C;
  --fl-grey-700: #3A3836;
  --fl-grey-800: var(--fl-ink-2);
  --fl-grey-900: var(--fl-ink);
  --fl-border-strong: #BDBAB4;   /* field and button border on hover */
  --fl-placeholder: #767470;     /* 4.6:1 on white */

  /* Status (agreed with the client) */
  --fl-success: #059669;
  --fl-success-text: #047857;    /* also the success button fill: white on #059669 is only 3.8:1 */
  --fl-success-dark: #065F46;
  --fl-success-tint: #ECFDF5;
  --fl-warning: #F59E0B;
  --fl-warning-text: #B45309;
  --fl-warning-dark: #D97706;
  --fl-warning-tint: #FFFBEB;
  --fl-danger: #DC2626;
  --fl-danger-text: #B91C1C;
  --fl-danger-tint: #FEF2F2;
  --fl-info-text: #1D4ED8;

  /* Surfaces */
  --fl-canvas: var(--fl-bone);   /* page background */
  --fl-surface: var(--fl-white); /* cards, modals, menus */

  /* Roles. Components use these, never the brand swatches directly, so a colour mode
     (dark.css) only has to redefine this block. Light values = the brand swatches. */
  --fl-text: var(--fl-ink);              /* headings, body text */
  --fl-text-2: var(--fl-ink-2);          /* secondary strong text */
  --fl-text-muted: var(--fl-muted);      /* hints, captions */
  --fl-on-accent: var(--fl-white);       /* text and icons on blue, green, red fills */
  --fl-on-ink: var(--fl-paper);          /* text on near-black fills (tooltips, counters) */
  --fl-bg-subtle: var(--fl-paper);       /* toolbars, modal footers, quiet tiles */
  --fl-bg-muted: var(--fl-bone);         /* hover, selected rows, segmented fills */
  --fl-bg-accent: var(--fl-blue-tint);   /* blue-tinted selection */
  --fl-fill-ink: var(--fl-ink);          /* near-black fills (tooltips, active chips) */
  --fl-fill-ink-2: var(--fl-ink-2);
  --fl-border: var(--fl-line);           /* hairlines, card and table borders */
  --fl-border-2: var(--fl-stone);        /* field and button borders */
  --fl-link: var(--fl-blue);
  --fl-link-hover: var(--fl-blue-dark);
  --fl-hover-tint: rgba(12, 11, 11, 0.04);
  --fl-on-warning: var(--fl-ink);        /* text on amber fills, in every mode */
  --fl-success-fill: var(--fl-success-text); /* success buttons and counters */
  --fl-danger-fill-hover: var(--fl-danger-text);

  /* Frame: the near-black admin header (and its phone menu) */
  --fl-frame: var(--fl-ink);
  --fl-frame-raised: var(--fl-ink-2);
  --fl-frame-text: var(--fl-stone);
  --fl-frame-muted: #A3A19C;
  --fl-frame-hover: rgba(255, 255, 255, 0.06);
  --fl-frame-selected: rgba(255, 255, 255, 0.1);

  /* Type: Switzer, brand scale mapped to UI sizes (see DESIGN-admin.md) */
  --fl-font: "Switzer", "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fl-text-2xs: 11px;  --fl-track-2xs: 0.02em;    /* uppercase captions only */
  --fl-text-xs: 12px;   --fl-track-xs: 0;          /* labels, badges, tooltips */
  --fl-text-sm: 13px;   --fl-track-sm: 0;          /* secondary text, form labels */
  --fl-text-base: 14px; --fl-track-base: -0.002em; /* body, buttons (brand Secondary / Button) */
  --fl-text-lg: 16px;   --fl-track-lg: 0;          /* card titles (brand Body) */
  --fl-text-xl: 20px;   --fl-track-xl: -0.01em;    /* section and modal titles */
  --fl-text-2xl: 24px;  --fl-track-2xl: -0.015em;  /* record titles (brand H3) */
  --fl-text-3xl: 32px;  --fl-track-3xl: -0.02em;   /* page titles */
  --fl-leading-tight: 1.1;
  --fl-leading-snug: 1.2;
  --fl-leading-body: 1.43;  /* 20px at 14px */

  /* Space: 4px system */
  --fl-space-1: 4px;
  --fl-space-2: 8px;
  --fl-space-3: 12px;
  --fl-space-4: 16px;
  --fl-space-5: 20px;
  --fl-space-6: 24px;
  --fl-space-7: 28px;
  --fl-space-8: 32px;

  /* Radius: controls 4, surfaces 8, frame and dialogs 16, status pills full */
  --fl-radius-sm: 4px;
  --fl-radius: 8px;
  --fl-radius-lg: 16px;
  --fl-radius-pill: 999px;

  /* Controls. Buttons, inputs, selects and add-ons share one radius so joined controls match. */
  --fl-btn-radius: var(--fl-radius-sm);
  --fl-btn-height: 36px;
  --fl-btn-height-sm: 32px;
  --fl-btn-height-xs: 24px;
  --fl-input-height: 36px;
  --fl-input-height-sm: 32px;

  /* Focus: fields get a soft ring, everything else a 2px blue outline */
  --fl-focus-ring: 0 0 0 3px rgba(36, 99, 235, 0.22);
  --fl-focus-outline: 2px solid var(--fl-blue);

  /* Elevation: only floating things cast a shadow */
  --fl-shadow-sm: 0 1px 2px rgba(12, 11, 11, 0.06);
  --fl-shadow-md: 0 1px 2px rgba(12, 11, 11, 0.06), 0 8px 24px -6px rgba(12, 11, 11, 0.16);
  --fl-shadow-lg: 0 2px 6px rgba(12, 11, 11, 0.08), 0 24px 64px -16px rgba(12, 11, 11, 0.32);

  /* Motion */
  --fl-ease: cubic-bezier(0.2, 0, 0, 1);
  --fl-duration: 120ms;
}

/* ==========================================================================
   2. Typography. Element selectors stay low so Perfex's own sizes still apply.
   ========================================================================== */

body,
button,
input,
select,
optgroup,
textarea,
.btn,
.form-control,
.tooltip,
.popover,
.dropdown-menu,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fl-font);
}

body {
  color: var(--fl-text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--fl-text);
  letter-spacing: -0.01em;
}

b,
strong {
  font-weight: 600;
}

hr {
  border-top-color: var(--fl-border);
}

::selection {
  background: rgba(36, 99, 235, 0.18);
}

a {
  color: var(--fl-link);
}

a:hover,
a:focus {
  color: var(--fl-link-hover);
}

/* Inter hold-outs in Perfex's plugin styles */
:root .xdsoft_datetimepicker,
:root ul.tagit li.tagit-choice .tagit-label:not(a),
:root .icon-total-indicator {
  font-family: var(--fl-font);
}

/* ==========================================================================
   3. Shared components
   ========================================================================== */

/* ---------- Text colour helpers ---------- */

:root .text-muted { color: var(--fl-text-muted); }
:root .text-primary { color: var(--fl-link); }
:root .text-info { color: var(--fl-info-text); }
:root .text-success { color: var(--fl-success-text); }
:root .text-warning { color: var(--fl-warning-text); }
:root .text-danger { color: var(--fl-danger-text); }

:root a.text-muted:hover,
:root a.text-muted:focus {
  color: var(--fl-text);
}

/* ---------- Buttons: near-square, 36px, Switzer 14/500 ---------- */

:root .btn {
  border-radius: var(--fl-btn-radius);
  box-shadow: none;
  font-family: var(--fl-font);
  font-size: var(--fl-text-base);
  font-weight: 500;
  letter-spacing: var(--fl-track-base);
  line-height: 20px;
}

/* Height comes from the token: (height - 20px line - 2px border) / 2.
   Perfex's compact currency/year pickers (.simple-bootstrap-select) keep their own size. */
:root .btn:not(.simple-bootstrap-select *) {
  padding: calc((var(--fl-btn-height) - 22px) / 2) var(--fl-space-4);
}

:root .btn-sm:not(.simple-bootstrap-select *),
:root .btn-group-sm > .btn:not(.simple-bootstrap-select *) {
  font-size: var(--fl-text-sm);
  padding: calc((var(--fl-btn-height-sm) - 22px) / 2) var(--fl-space-3);
}

:root .btn-xs:not(.simple-bootstrap-select *),
:root .btn-group-xs > .btn:not(.simple-bootstrap-select *) {
  font-size: var(--fl-text-xs);
  padding: calc((var(--fl-btn-height-xs) - 22px) / 2) var(--fl-space-2);
}

:root .btn-lg:not(.simple-bootstrap-select *),
:root .btn-group-lg > .btn:not(.simple-bootstrap-select *) {
  font-size: var(--fl-text-lg);
  line-height: 24px;
  padding: 9px var(--fl-space-5);
}

/* The caret half of a split button stays narrow */
:root .btn-group > .btn + .dropdown-toggle:not(.simple-bootstrap-select *) {
  padding-left: 10px;
  padding-right: 10px;
}

:root .caret {
  border-color: currentColor;
}

/* No pressed shadows, no rings stuck on after a click (keyboard focus: section 4) */
:root .btn:focus,
:root .btn.focus,
:root .btn:active,
:root .btn.active,
:root .btn:active:focus,
:root .btn-group.open .dropdown-toggle,
:root .open > .dropdown-toggle.btn {
  box-shadow: none;
}

:root .btn.disabled,
:root .btn[disabled],
:root fieldset[disabled] .btn {
  opacity: 0.5;
}

/* Default: white, warm border, ink text */
:root .btn-default,
:root .btn-default:focus,
:root .btn-default.focus {
  background-color: var(--fl-surface);
  border-color: var(--fl-border-2);
  color: var(--fl-text);
}

:root .btn-default:hover,
:root .btn-default:active,
:root .btn-default.active,
:root .btn-default:active:hover,
:root .btn-default:active:focus,
:root .btn-default.active:hover,
:root .btn-default.active:focus,
:root .open > .dropdown-toggle.btn-default,
:root .open > .dropdown-toggle.btn-default:hover,
:root .open > .dropdown-toggle.btn-default:focus {
  background-color: var(--fl-bg-subtle);
  border-color: var(--fl-border-strong);
  color: var(--fl-text);
}

/* Primary: the one blue accent on a screen */
:root .btn-primary,
:root .btn-primary:focus,
:root .btn-primary.focus,
:root .btn-primary.disabled,
:root .btn-primary[disabled],
:root .btn-primary.disabled:hover,
:root .btn-primary[disabled]:hover {
  background-color: var(--fl-blue);
  border-color: var(--fl-blue);
  color: var(--fl-on-accent);
}

:root .btn-primary:hover,
:root .btn-primary:active,
:root .btn-primary.active,
:root .btn-primary:active:hover,
:root .btn-primary:active:focus,
:root .btn-primary.active:hover,
:root .btn-primary.active:focus,
:root .open > .dropdown-toggle.btn-primary,
:root .open > .dropdown-toggle.btn-primary:hover,
:root .open > .dropdown-toggle.btn-primary:focus {
  background-color: var(--fl-blue-dark);
  border-color: var(--fl-blue-dark);
  color: var(--fl-on-accent);
}

/* Success: deep emerald so white text passes AA */
:root .btn-success,
:root .btn-success:focus,
:root .btn-success.focus,
:root .btn-success.disabled,
:root .btn-success[disabled] {
  background-color: var(--fl-success-fill);
  border-color: var(--fl-success-fill);
  color: var(--fl-on-accent);
}

:root .btn-success:hover,
:root .btn-success:active,
:root .btn-success.active,
:root .btn-success:active:hover,
:root .btn-success:active:focus,
:root .btn-success.active:hover,
:root .btn-success.active:focus,
:root .open > .dropdown-toggle.btn-success,
:root .open > .dropdown-toggle.btn-success:hover,
:root .open > .dropdown-toggle.btn-success:focus {
  background-color: var(--fl-success-dark);
  border-color: var(--fl-success-dark);
  color: var(--fl-on-accent);
}

:root .btn-danger,
:root .btn-danger:focus,
:root .btn-danger.focus,
:root .btn-danger.disabled,
:root .btn-danger[disabled] {
  background-color: var(--fl-danger);
  border-color: var(--fl-danger);
  color: var(--fl-on-accent);
}

:root .btn-danger:hover,
:root .btn-danger:active,
:root .btn-danger.active,
:root .btn-danger:active:hover,
:root .btn-danger:active:focus,
:root .btn-danger.active:hover,
:root .btn-danger.active:focus,
:root .open > .dropdown-toggle.btn-danger,
:root .open > .dropdown-toggle.btn-danger:hover,
:root .open > .dropdown-toggle.btn-danger:focus {
  background-color: var(--fl-danger-fill-hover);
  border-color: var(--fl-danger-fill-hover);
  color: var(--fl-on-accent);
}

/* Amber carries near-black text */
:root .btn-warning,
:root .btn-warning:focus,
:root .btn-warning.focus,
:root .btn-warning.disabled,
:root .btn-warning[disabled] {
  background-color: var(--fl-warning);
  border-color: var(--fl-warning);
  color: var(--fl-on-warning);
}

:root .btn-warning:hover,
:root .btn-warning:active,
:root .btn-warning.active,
:root .btn-warning:active:hover,
:root .btn-warning:active:focus,
:root .btn-warning.active:hover,
:root .btn-warning.active:focus,
:root .open > .dropdown-toggle.btn-warning,
:root .open > .dropdown-toggle.btn-warning:hover,
:root .open > .dropdown-toggle.btn-warning:focus {
  background-color: var(--fl-warning-dark);
  border-color: var(--fl-warning-dark);
  color: var(--fl-on-warning);
}

/* Info: a soft blue, never a second loud colour (and no longer amber) */
:root .btn-info,
:root .btn-info:focus,
:root .btn-info.focus,
:root .btn-info.disabled,
:root .btn-info[disabled] {
  background-color: var(--fl-bg-accent);
  border-color: var(--fl-bg-accent);
  color: var(--fl-link-hover);
}

:root .btn-info:hover,
:root .btn-info:active,
:root .btn-info.active,
:root .btn-info:active:hover,
:root .btn-info:active:focus,
:root .btn-info.active:hover,
:root .btn-info.active:focus,
:root .open > .dropdown-toggle.btn-info,
:root .open > .dropdown-toggle.btn-info:hover,
:root .open > .dropdown-toggle.btn-info:focus {
  background-color: #DCE7FD;
  border-color: #DCE7FD;
  color: var(--fl-link-hover);
}

:root .btn-secondary,
:root .btn-secondary:focus {
  background-color: var(--fl-bg-muted);
  border-color: var(--fl-bg-muted);
  color: var(--fl-text);
}

:root .btn-secondary:hover,
:root .btn-secondary:active,
:root .btn-secondary.active,
:root .open > .dropdown-toggle.btn-secondary {
  background-color: var(--fl-border);
  border-color: var(--fl-border);
  color: var(--fl-text);
}

:root .btn-link {
  color: var(--fl-link);
}

:root .btn-link:hover,
:root .btn-link:focus {
  color: var(--fl-link-hover);
  text-decoration: none;
}

/* ---------- Button groups: joined, one outer radius ---------- */
/* Bootstrap's join rules (0,4,0)/(0,5,0) square the inner corners and outrank the radius above,
   which is exactly what a 4px system wants. Only the divider on filled groups needs help. */

:root .btn-group > .btn-primary + .btn-primary,
:root .btn-group > .btn-success + .btn-success,
:root .btn-group > .btn-danger + .btn-danger {
  border-inline-start-color: rgba(255, 255, 255, 0.28);
}

/* ---------- Forms ---------- */

:root .form-group {
  margin-bottom: var(--fl-space-4);
}

/* No height or padding here: .form-control is also the bootstrap-select wrapper */
:root .form-control {
  background-color: var(--fl-surface);
  border-color: var(--fl-border-2);
  border-radius: var(--fl-radius-sm);
  box-shadow: none;
  color: var(--fl-text);
  font-size: var(--fl-text-base);
  letter-spacing: var(--fl-track-base);
}

:root input.form-control,
:root select.form-control:not([multiple]):not([size]) {
  height: var(--fl-input-height);
  line-height: 20px;
  padding: calc((var(--fl-input-height) - 22px) / 2) var(--fl-space-3);
}

:root textarea.form-control {
  line-height: 1.5;
  padding: var(--fl-space-2) var(--fl-space-3);
}

/* File inputs (Settings > logo, favicon): room for the browser's button */
:root input.form-control[type="file"] {
  line-height: 24px;
  padding-bottom: 5px;
  padding-top: 5px;
}

:root input.form-control[type="file"]::file-selector-button {
  background-color: var(--fl-bg-muted);
  border: 0;
  border-radius: var(--fl-radius-sm);
  color: var(--fl-text);
  font: 500 var(--fl-text-sm) / 20px var(--fl-font);
  margin-inline-end: var(--fl-space-3);
  padding: 2px 10px;
}

:root input.form-control.input-sm,
:root select.form-control.input-sm,
:root .input-group-sm > .form-control {
  font-size: var(--fl-text-sm);
  height: var(--fl-input-height-sm);
  padding: calc((var(--fl-input-height-sm) - 22px) / 2) 10px;
}

:root .form-control::placeholder {
  color: var(--fl-placeholder);
  opacity: 1;
}

/* :where() keeps hover weaker than the focus, disabled and error states */
:root .form-control:where(:hover) {
  border-color: var(--fl-border-strong);
}

:root .form-control:focus {
  border-color: var(--fl-blue);
  box-shadow: var(--fl-focus-ring);
  outline: 0;
}

:root .form-control[disabled],
:root .form-control[readonly],
:root fieldset[disabled] .form-control {
  background-color: var(--fl-bg-muted);
  border-color: var(--fl-border);
  color: var(--fl-text-muted);
}

:root label,
:root .control-label {
  color: var(--fl-text-2);
  font-size: var(--fl-text-sm);
  font-weight: 500;
  margin-bottom: 6px;
}

/* Checkbox and radio labels read as body text and keep Bootstrap's spacing */
:root .checkbox label,
:root .radio label {
  font-size: var(--fl-text-base);
  font-weight: 400;
  margin-bottom: 0;
}

/* Hints only: the injected <small class="req text-danger"> asterisk keeps its red */
:root .help-block,
:root .form-group small:not([class*="text-"]) {
  color: var(--fl-text-muted);
  font-size: var(--fl-text-sm);
}

:root .has-error .form-control,
:root .has-error .form-control:hover {
  border-color: var(--fl-danger);
}

:root .has-error .form-control:focus {
  border-color: var(--fl-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

:root .has-error .control-label,
:root .has-error .help-block,
:root p.text-danger {
  color: var(--fl-danger-text);
}

/* ---------- Inputs with add-ons and buttons ---------- */
/* Bootstrap squares the inner corners; the theme only sets the outer ones (logical, so RTL holds). */

:root .input-group {
  box-shadow: none;
}

:root .input-group-addon {
  background-color: var(--fl-bg-subtle);
  border-color: var(--fl-border-2);
  color: var(--fl-text-muted);
  font-size: var(--fl-text-base);
  padding-left: var(--fl-space-3);
  padding-right: var(--fl-space-3);
}

:root .input-group-addon:first-child {
  border-end-start-radius: var(--fl-radius-sm);
  border-start-start-radius: var(--fl-radius-sm);
}

:root .input-group-addon:last-child {
  border-end-end-radius: var(--fl-radius-sm);
  border-start-end-radius: var(--fl-radius-sm);
}

/* beats Perfex's .input-group-btn:first-child>select+.btn{….375rem!important} */
:root .input-group-btn:first-child > select + .btn {
  border-end-start-radius: var(--fl-radius-sm) !important;
  border-start-start-radius: var(--fl-radius-sm) !important;
}

/* beats Perfex's .input-group input{box-shadow:…!important}, which hides the focus ring on dates, search, number prefix */
:root .input-group .form-control:focus {
  box-shadow: var(--fl-focus-ring) !important;
}

:root .has-error .input-group-addon {
  background-color: var(--fl-danger-tint);
  border-color: var(--fl-danger);
  color: var(--fl-danger-text);
}

/* ---------- Select boxes (bootstrap-select): the same field as an input ---------- */

:root .bootstrap-select > .dropdown-toggle,
:root .bootstrap-select > .dropdown-toggle.btn-default {
  background-color: var(--fl-surface);
  border-color: var(--fl-border-2);
  color: var(--fl-text);
  font-weight: 400;
}

:root .bootstrap-select:not(.simple-bootstrap-select *) > .dropdown-toggle {
  height: var(--fl-input-height);
  padding: calc((var(--fl-input-height) - 22px) / 2) var(--fl-space-3);
}

:root .bootstrap-select > .dropdown-toggle:hover {
  border-color: var(--fl-border-strong);
}

:root .bootstrap-select > .dropdown-toggle:focus,
:root .bootstrap-select.open > .dropdown-toggle,
:root .bootstrap-select.open > .dropdown-toggle:hover {
  border-color: var(--fl-blue);
  box-shadow: var(--fl-focus-ring);
}

/* beats Perfex's .input-group button{box-shadow:…!important} for selects inside input groups */
:root .input-group .bootstrap-select > .dropdown-toggle:focus,
:root .input-group .bootstrap-select.open > .dropdown-toggle {
  border-color: var(--fl-blue);
  box-shadow: var(--fl-focus-ring) !important;
}

:root .bootstrap-select > .dropdown-toggle.bs-placeholder,
:root .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
:root .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
:root .bootstrap-select.btn-group .bs-placeholder .filter-option {
  color: var(--fl-placeholder);
}

:root .bootstrap-select.disabled > .dropdown-toggle,
:root .bootstrap-select > .dropdown-toggle.disabled {
  background-color: var(--fl-bg-muted);
  border-color: var(--fl-border);
  color: var(--fl-text-muted);
  opacity: 1;
}

/* The open menu floats like every other menu instead of fusing to the field */
:root .bootstrap-select:not(.dropup) > .dropdown-menu {
  border-radius: var(--fl-radius);
  border-top-width: 1px;
  margin-top: var(--fl-space-1);
}

:root .bootstrap-select:not(.dropup):not(.input-group *) .dropdown-toggle[aria-expanded="true"] {
  border-end-end-radius: var(--fl-btn-radius);
  border-end-start-radius: var(--fl-btn-radius);
}

:root .bootstrap-select .dropdown-menu li.selected > a,
:root .bootstrap-select .dropdown-menu li.selected > a:hover {
  background-color: var(--fl-bg-accent);
  color: var(--fl-link-hover);
}

:root .bootstrap-select.show-tick .dropdown-menu li.selected a span.check-mark {
  color: var(--fl-link);
}

/* beats Perfex's .bs-searchbox .form-control{border-radius:.375rem!important} */
:root .bs-searchbox .form-control {
  border-radius: var(--fl-radius-sm) !important;
  height: var(--fl-input-height-sm);
}

:root .bootstrap-select .status {
  background-color: var(--fl-bg-subtle);
  color: var(--fl-text-muted);
}

/* ---------- Checkboxes, radios, switches ---------- */
/* Perfex hides the real input (opacity 0) and draws label::before, so styling goes there. */

:root .checkbox label::before,
:root .radio label::before {
  border-color: var(--fl-border-strong);
  box-shadow: none;
}

:root .checkbox label::before {
  border-radius: var(--fl-radius-sm);
}

:root .checkbox input[type="checkbox"]:focus-visible + label::before,
:root .checkbox input[type="radio"]:focus-visible + label::before,
:root .radio input[type="radio"]:focus-visible + label::before {
  border-color: var(--fl-blue);
  box-shadow: var(--fl-focus-ring);
}

:root .checkbox-primary input[type="checkbox"]:checked + label::before,
:root .checkbox-primary input[type="radio"]:checked + label::before {
  background-color: var(--fl-blue);
  border-color: var(--fl-blue);
}

:root .radio-primary input[type="radio"]:checked + label::before {
  border-color: var(--fl-blue);
}

:root .radio-primary input[type="radio"]:checked + label::after {
  background-color: var(--fl-blue);
}

:root .onoffswitch-label,
:root .onoffswitch-label::before {
  border-color: var(--fl-border-2);
}

:root .onoffswitch-label {
  background-color: var(--fl-border-2);
}

:root .onoffswitch-checkbox:checked + .onoffswitch-label,
:root .onoffswitch-checkbox:checked + .onoffswitch-label::before {
  border-color: var(--fl-blue);
}

:root .onoffswitch-checkbox:checked + .onoffswitch-label {
  background-color: var(--fl-blue);
}

/* ---------- Tags input: looks like every other field ---------- */
/* !important here beats Perfex's ul.tagit{border-width:0!important} and the 2px left bar on its input */

:root ul.tagit {
  align-items: center;
  background-color: var(--fl-surface);
  border-color: var(--fl-border-2) !important;
  border-radius: var(--fl-radius-sm);
  border-style: solid !important;
  border-width: 1px !important;
  min-height: var(--fl-input-height);
  padding: 5px var(--fl-space-1);
}

:root ul.tagit:focus-within {
  border-color: var(--fl-blue) !important;
  box-shadow: var(--fl-focus-ring);
}

:root ul.tagit input[type="text"] {
  border-inline-start-width: 0 !important;
  border-left-width: 0 !important;
  box-shadow: none;
  padding-inline-start: var(--fl-space-2);
}

:root ul.tagit input[type="text"]::placeholder {
  color: var(--fl-placeholder);
}

:root ul.tagit li.tagit-choice {
  background-color: var(--fl-bg-muted);
  border-radius: var(--fl-radius-pill);
  font-size: var(--fl-text-sm);
  line-height: 20px;
  padding: 2px 26px 2px 10px;
}

:root ul.tagit li.tagit-choice:hover {
  background-color: var(--fl-border);
}

:root ul.tagit li.tagit-choice .tagit-label:not(a) {
  color: var(--fl-text);
}

:root ul.tagit li.tagit-choice .tagit-close {
  right: var(--fl-space-2);
  top: 50%;
}

:root ul.tagit-autocomplete {
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius);
  box-shadow: var(--fl-shadow-md);
  padding: var(--fl-space-1);
}

/* beats Perfex's font-family:Inter!important on the suggestions */
:root ul.tagit-autocomplete .ui-menu-item-wrapper {
  border-radius: var(--fl-radius-sm);
  color: var(--fl-text);
  font-family: var(--fl-font) !important;
  font-weight: 400;
}

/* beats Perfex's color:…!important on the active suggestion */
:root ul.tagit-autocomplete .ui-menu-item-wrapper.ui-state-active,
:root ul.tagit-autocomplete .ui-menu-item-wrapper.ui-state-hover {
  background-color: var(--fl-bg-muted);
  color: var(--fl-text) !important;
}

/* ---------- Labels (status pills) ---------- */
/* Pill = something you read. Rectangle = something you press or type in.
   Shape applies to every label; colours only to the class-based ones (inline-coloured statuses keep their data colours). */

:root .label {
  border-radius: var(--fl-radius-pill);
  font-size: var(--fl-text-xs);
  font-weight: 500;
  letter-spacing: var(--fl-track-xs);
  line-height: 16px;
  padding: 2px var(--fl-space-2);
}

:root .label-default {
  background-color: var(--fl-bg-subtle);
  box-shadow: inset 0 0 0 1px rgba(12, 11, 11, 0.1);
  color: var(--fl-text-2);
}

:root .label-primary,
:root .label-info {
  background-color: var(--fl-bg-accent);
  box-shadow: inset 0 0 0 1px rgba(36, 99, 235, 0.2);
  color: var(--fl-info-text);
}

:root .label-success {
  background-color: var(--fl-success-tint);
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.22);
  color: var(--fl-success-text);
}

:root .label-warning {
  background-color: var(--fl-warning-tint);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.32);
  color: var(--fl-warning-text);
}

:root .label-danger {
  background-color: var(--fl-danger-tint);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.18);
  color: var(--fl-danger-text);
}

:root .label-tag {
  background-color: var(--fl-bg-muted);
  border-radius: var(--fl-radius-pill);
  color: var(--fl-text-2);
  font-size: var(--fl-text-xs);
  padding: 2px var(--fl-space-2);
}

/* ---------- Badges (counts) ---------- */
/* Neutral counts (no class, or Perfex's default bg-info) are small near-black pills.
   Perfex's semantic bg-* badges map to the status colours. Inline-coloured badges are left alone. */

:root .badge {
  border-radius: var(--fl-radius-pill);
  font-size: var(--fl-text-2xs);
  font-weight: 600;
  line-height: 16px;
  min-width: 18px;
  padding: 1px 6px;
}

:root .badge:not([style]):not(.bg-success, .bg-warning, .bg-danger, .bg-primary) {
  background-color: var(--fl-fill-ink-2);
  color: var(--fl-on-ink);
}

/* Counts in tabs: beats Perfex's grey .panel-full-width-tabs .nav li a .badge (0,4,2) so all tab counts match */
:root .nav-tabs > li > a .badge:not([style]):not(.bg-success, .bg-warning, .bg-danger, .bg-primary) {
  background-color: var(--fl-fill-ink-2);
  color: var(--fl-on-ink);
  margin-inline-start: 6px;
}

:root .badge.bg-primary:not([style]) { background-color: var(--fl-blue); color: var(--fl-on-accent); }
:root .badge.bg-success:not([style]) { background-color: var(--fl-success-fill); color: var(--fl-on-accent); }
:root .badge.bg-warning:not([style]) { background-color: var(--fl-warning); color: var(--fl-on-warning); }
:root .badge.bg-danger:not([style]) { background-color: var(--fl-danger); color: var(--fl-on-accent); }

/* ---------- Alerts: tinted card, hairline border, no side bar ---------- */

:root .alert {
  border-radius: var(--fl-radius);
  border-style: solid;
  border-width: 1px;
  font-size: var(--fl-text-base);
  padding: var(--fl-space-3) var(--fl-space-4);
}

:root .alert h4 {
  color: inherit;
  font-size: var(--fl-text-base);
  font-weight: 600;
  letter-spacing: var(--fl-track-base);
}

:root .alert .alert-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

:root .alert-info {
  background-color: var(--fl-bg-accent);
  border-color: rgba(36, 99, 235, 0.2);
  color: var(--fl-info-text);
}

:root .alert-success {
  background-color: var(--fl-success-tint);
  border-color: rgba(5, 150, 105, 0.22);
  color: var(--fl-success-text);
}

:root .alert-warning {
  background-color: var(--fl-warning-tint);
  border-color: rgba(245, 158, 11, 0.32);
  color: var(--fl-warning-text);
}

:root .alert-danger {
  background-color: var(--fl-danger-tint);
  border-color: rgba(220, 38, 38, 0.18);
  color: var(--fl-danger-text);
}

/* Toasts ("Saved") float, so they get the menu shadow */
:root .alert.float-alert {
  box-shadow: var(--fl-shadow-md);
}

/* ---------- Progress bars ---------- */

:root .progress {
  background-color: var(--fl-bg-muted);
  border-radius: var(--fl-radius-pill);
  box-shadow: none;
}

:root .progress-bar,
:root .progress-bar-primary,
:root .progress-bar-info {
  background-color: var(--fl-blue);
  box-shadow: none;
}

:root .progress-bar-success { background-color: var(--fl-success); }
:root .progress-bar-warning { background-color: var(--fl-warning); }
:root .progress-bar-danger { background-color: var(--fl-danger); }
:root .progress-bar-default { background-color: var(--fl-grey-400); }

/* ---------- Tabs: one underline strip everywhere ---------- */
/* State changes colour only, never weight or size, so nothing shifts on hover. */

:root .nav-tabs {
  background: transparent;
  border-bottom: 1px solid var(--fl-border);
}

/* Perfex's segmented (grey capsule) tabs join the same strip; beats its (0,4,0) container rule */
:root .nav-tabs-segmented.nav-tabs,
:root .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal.nav-tabs-segmented {
  background: transparent;
  border-bottom: 1px solid var(--fl-border);
  border-radius: 0;
  padding: 0;
}

/* "~" not "+": Perfex inserts tooltips between tabs on hover; spacing must not change when it does */
:root .nav-tabs > li ~ li {
  margin-inline-start: var(--fl-space-6);
}

:root .nav-tabs > li > a,
:root .nav-tabs > li > a:hover,
:root .nav-tabs > li > a:focus {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--fl-text-muted);
  font-size: var(--fl-text-base);
  font-weight: 500;
  letter-spacing: var(--fl-track-base);
  line-height: 20px;
  margin-inline-end: 0;
  padding: var(--fl-space-3) 0 10px;
}

:root .nav-tabs > li > a:hover,
:root .nav-tabs > li > a:focus {
  border-bottom-color: var(--fl-border-2);
  color: var(--fl-text);
}

:root .nav-tabs > li.active > a,
:root .nav-tabs > li.active > a:hover,
:root .nav-tabs > li.active > a:focus {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--fl-blue);
  border-radius: 0;
  box-shadow: none;
  color: var(--fl-text);
  margin-bottom: 0;
}

/* Perfex's divided tabs (invoice, estimate and proposal previews: Notes + the icon tabs).
   Kept as Perfex draws them: each one a cell with a hairline on its right, the icon centred,
   cells touching. "~" so a hover tooltip inserted between cells changes nothing. */
:root .nav-tabs > li.tab-separator {
  border-left: 0;
  border-right: 1px solid var(--fl-border);
}

:root .nav-tabs > li.tab-separator ~ li.tab-separator {
  margin-inline-start: 0;
}

:root .nav-tabs > li.tab-separator > a,
:root .nav-tabs > li.tab-separator > a:hover,
:root .nav-tabs > li.tab-separator > a:focus {
  padding-inline: var(--fl-space-4);
  text-align: center;
}

/* The first divided tab is a word tab (Notes): it keeps the strip's left alignment */
:root .nav-tabs > li:not(.tab-separator) + li.tab-separator > a {
  padding-inline-start: 0;
}

/* Tab icons stay quiet so the words lead */
:root .nav-tabs > li > a i.menu-icon {
  color: var(--fl-grey-400);
  font-size: var(--fl-text-base);
  margin-inline-end: 6px;
}

:root .nav-tabs > li > a:hover i.menu-icon,
:root .nav-tabs > li > a:focus i.menu-icon,
:root .nav-tabs > li.active > a i.menu-icon {
  color: var(--fl-text);
}

/* Scrollable strips: no scrollbar, no grey bars, no grey arrow blocks.
   scrollbar-width also covers Chrome 121+, where Perfex's ::-webkit-scrollbar hiding can be switched off. */
:root .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal {
  background-color: transparent;
  scrollbar-width: none;
}

:root .horizontal-scrollable-tabs .scroller {
  background-color: transparent;
  border-bottom-color: var(--fl-border);
  color: var(--fl-text-muted);
}

:root .horizontal-scrollable-tabs .scroller:hover {
  color: var(--fl-text);
}

:root .panel-full-width-tabs .nav li a,
:root .panel-full-width-tabs.horizontal-scrollable-tabs .scroller {
  background-color: transparent;
}

/* ---------- Dropdown menus ---------- */

:root .dropdown-menu {
  background-color: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  box-shadow: var(--fl-shadow-md);
  font-size: var(--fl-text-base);
  padding: var(--fl-space-1);
}

:root .dropdown-menu > li > a {
  border-radius: var(--fl-radius-sm);
  color: var(--fl-text);
  font-weight: 400;
  line-height: 20px;
  padding: 6px var(--fl-space-3);
}

:root .dropdown-menu > li > a:hover,
:root .dropdown-menu > li > a:focus {
  background-color: var(--fl-bg-muted);
  color: var(--fl-text);
}

:root .dropdown-menu > .active > a,
:root .dropdown-menu > .active > a:hover,
:root .dropdown-menu > .active > a:focus {
  background-color: var(--fl-bg-accent);
  color: var(--fl-link-hover);
}

:root .dropdown-menu > .disabled > a,
:root .dropdown-menu > .disabled > a:hover {
  color: var(--fl-grey-400);
}

:root .dropdown-menu .divider {
  background-color: var(--fl-border);
  margin: var(--fl-space-1) calc(var(--fl-space-1) * -1);
}

:root .dropdown-header {
  color: var(--fl-text-muted);
  font-size: var(--fl-text-2xs);
  font-weight: 600;
  letter-spacing: var(--fl-track-2xs);
  padding: var(--fl-space-2) var(--fl-space-3) var(--fl-space-1);
  text-transform: uppercase;
}

:root .dropdown-menu li > a > i {
  color: var(--fl-text-muted);
}

:root .nav-tabs .dropdown-menu {
  border-radius: var(--fl-radius);
  margin-top: var(--fl-space-1);
}

/* ---------- Modals ---------- */

:root .modal-content {
  border: 0;
  border-radius: var(--fl-radius-lg);
  box-shadow: var(--fl-shadow-lg);
}

:root .modal-header {
  background-color: var(--fl-surface);
  border-bottom: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg) var(--fl-radius-lg) 0 0;
  padding: var(--fl-space-5) var(--fl-space-6);
}

:root .modal-header .modal-title {
  color: var(--fl-text);
  font-size: var(--fl-text-xl);
  font-weight: 600;
  letter-spacing: var(--fl-track-xl);
  line-height: var(--fl-leading-snug);
}

:root .modal-header .close {
  border-radius: var(--fl-radius-sm);
  color: var(--fl-text-muted);
  opacity: 1;
}

:root .modal-header .close:hover,
:root .modal-header .close:focus {
  background-color: var(--fl-bg-muted);
  color: var(--fl-text);
}

:root .modal-body {
  padding: var(--fl-space-6);
}

/* Actions sit in a quiet tray */
:root .modal-footer {
  background-color: var(--fl-bg-subtle);
  border-radius: 0 0 var(--fl-radius-lg) var(--fl-radius-lg);
  border-top: 1px solid var(--fl-border);
  padding: var(--fl-space-4) var(--fl-space-6);
}

:root .modal-backdrop {
  background-color: var(--fl-fill-ink);
}

:root .modal-backdrop.in {
  opacity: 0.55;
}

/* ---------- Tooltips and popovers ---------- */

:root .tooltip-inner {
  background-color: var(--fl-fill-ink);
  border-radius: var(--fl-radius-sm);
  color: var(--fl-on-ink);
  font-size: var(--fl-text-xs);
  font-weight: 500;
  line-height: 16px;
  padding: var(--fl-space-1) var(--fl-space-2);
}

:root .tooltip.top .tooltip-arrow { border-top-color: var(--fl-text); }
:root .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--fl-text); }
:root .tooltip.left .tooltip-arrow { border-left-color: var(--fl-text); }
:root .tooltip.right .tooltip-arrow { border-right-color: var(--fl-text); }

:root .popover {
  border-color: var(--fl-border);
  border-radius: var(--fl-radius);
  box-shadow: var(--fl-shadow-md);
}

:root .popover.top > .arrow { border-top-color: var(--fl-border); }
:root .popover.bottom > .arrow { border-bottom-color: var(--fl-border); }
:root .popover.left > .arrow { border-left-color: var(--fl-border); }
:root .popover.right > .arrow { border-right-color: var(--fl-border); }

:root .popover-title {
  background-color: var(--fl-bg-subtle);
  border-bottom-color: var(--fl-border);
  border-radius: var(--fl-radius) var(--fl-radius) 0 0;
  color: var(--fl-text);
  font-size: var(--fl-text-base);
  font-weight: 600;
}

/* ---------- Cards ---------- */

:root .panel_s {
  background-color: var(--fl-surface);
  border-color: transparent;
  border-radius: var(--fl-radius);
  box-shadow: none;
}

/* Shape for every first heading (kanban columns included), so no corner sticks out */
:root .panel_s > .panel-heading:first-child {
  border-radius: var(--fl-radius) var(--fl-radius) 0 0;
}

/* Colour only where Perfex does not colour it: kanban headings carry inline or white-on-dark colours */
:root .panel_s > .panel-heading:not([style]):not(.kan-ban-col *) {
  background-color: transparent;
  border-bottom-color: var(--fl-border);
  color: var(--fl-text);
}

:root .panel-title {
  font-size: var(--fl-text-lg);
  font-weight: 600;
  letter-spacing: var(--fl-track-lg);
}

:root .panel_s > .panel-footer {
  background-color: var(--fl-bg-subtle);
  border-radius: 0 0 var(--fl-radius) var(--fl-radius);
  border-top-color: var(--fl-border);
}

:root .panel_s .hr-panel-separator,
:root .panel_s .hr-panel-heading {
  border-color: var(--fl-border);
}

/* ---------- Tables ---------- */
/* Brand-board style: small uppercase captions over a hairline. No fills, no vertical rules. */

:root .table > thead > tr > th,
:root .table > tbody > tr > td,
:root .table > tbody > tr > th,
:root .table > tfoot > tr > td,
:root .table > tfoot > tr > th {
  border-color: var(--fl-border);
}

:root .table > tbody > tr > td,
:root .table > tfoot > tr > td {
  color: var(--fl-grey-700);
  font-variant-numeric: tabular-nums;
}

:root .table > thead > tr > th,
:root table.dataTable thead > tr > th,
:root .table.dataTable > thead:first-child > tr:first-child > th,
:root .table.items thead th {
  background-color: transparent;
  color: var(--fl-text-muted);
  font-size: var(--fl-text-2xs);
  font-weight: 600;
  letter-spacing: var(--fl-track-2xs);
  text-transform: uppercase;
}

:root table.dataTable thead > tr > th,
:root .table.dataTable > thead:first-child > tr:first-child > th,
:root .table.dataTable > thead:first-child > tr:first-child > th:first-child,
:root .table.dataTable > thead:first-child > tr:first-child > th:last-child,
:root .table.items thead th,
:root .table.items thead th:first-child,
:root .table.items > thead:first-child > tr:first-child > th {
  border-bottom-color: var(--fl-border);
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: var(--fl-border);
}

:root .table.items thead {
  background: transparent;
}

:root table.dataTable thead > tr > th {
  padding: 10px var(--fl-space-3);
}

/* Denser data rows */
:root table.dataTable > tbody > tr > td {
  border-color: var(--fl-border);
  line-height: 20px;
  padding: var(--fl-space-2) var(--fl-space-3);
}

/* Sorted column: ink caption and a quiet chip behind the arrow, no column fill */
:root table.dataTable thead > tr > th.sorting_asc,
:root table.dataTable thead > tr > th.sorting_desc,
:root .table.dataTable > thead:first-child > tr:first-child > th.sorting_asc,
:root .table.dataTable > thead:first-child > tr:first-child > th.sorting_desc {
  background-color: transparent;
  color: var(--fl-text);
}

:root table.dataTable thead th.sorting_asc::after,
:root table.dataTable thead th.sorting_desc::after {
  background-color: var(--fl-bg-muted);
  border-radius: var(--fl-radius-sm);
}

:root .table-hover > tbody > tr:hover,
:root table.dataTable.table-hover > tbody > tr:hover,
:root table.dataTable tbody tr:hover {
  background-color: var(--fl-bg-subtle);
}

:root table.dataTable tbody tr.selected > td,
:root .table > tbody > tr.active > td {
  background-color: var(--fl-bg-accent);
}

:root .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--fl-bg-subtle);
}

/* Highlighted rows (for example active modules in Setup > Modules) */
:root .table > tbody > tr.info > td,
:root .table > tbody > tr.info > th,
:root .table > tbody > tr > td.info {
  background-color: var(--fl-bg-accent);
}

:root .table > tbody > tr.info > td,
:root .table > tbody > tr.info > td p,
:root .table > tbody > tr.info > td a:not(.text-danger) {
  color: var(--fl-link-hover);
}

/* Links in data rows read as text; blue appears on hover */
:root .dataTables_wrapper table tbody a:not(.text-muted, .text-primary, .text-danger, .text-warning, .text-success, .text-info) {
  color: var(--fl-text-2);
  font-weight: 500;
}

:root .dataTables_wrapper table tbody a:not(.text-muted, .text-primary, .text-danger, .text-warning, .text-success, .text-info):hover,
:root .dataTables_wrapper table tbody a:not(.text-muted, .text-primary, .text-danger, .text-warning, .text-success, .text-info):focus {
  color: var(--fl-link);
}

/* Hover actions under the first cell (View | Edit | Delete) */
:root table .row-options {
  color: var(--fl-grey-400);
  font-size: var(--fl-text-xs);
  line-height: 16px;
}

:root table tbody .row-options a:not(.text-danger),
:root .dataTables_wrapper table tbody .row-options a:not(.text-danger) {
  color: var(--fl-text-muted);
  font-weight: 400;
}

:root table tbody .row-options a:not(.text-danger):hover,
:root .dataTables_wrapper table tbody .row-options a:not(.text-danger):hover {
  color: var(--fl-text);
}

/* ---------- Table toolbar: rows per page, export group, search. All 32px. ---------- */

:root .dataTables_length {
  margin-inline-end: var(--fl-space-2);
}

:root .dataTables_length select,
:root .dataTables_filter input {
  font-size: var(--fl-text-sm);
}

:root .dataTables_filter .input-group-addon {
  background-color: var(--fl-surface);
  color: var(--fl-grey-400);
  padding-left: 10px;
  padding-right: 10px;
}

:root div.dataTables_wrapper div.dataTables_info {
  color: var(--fl-text-muted);
  font-size: var(--fl-text-sm);
}

/* ---------- Pagination: separate 32px squares, ink for the current page ---------- */

:root .pagination > li > a,
:root .pagination > li > span {
  background-color: transparent;
  border-radius: var(--fl-radius-sm);
  color: var(--fl-text-2);
  font-weight: 500;
  line-height: 20px;
  min-width: 32px;
  padding: 6px 10px;
  text-align: center;
}

:root .pagination > li > a:hover,
:root .pagination > li > a:focus,
:root .pagination > li > span:hover {
  background-color: var(--fl-bg-muted);
  border-radius: var(--fl-radius-sm);
  color: var(--fl-text);
}

:root .pagination > .active > a,
:root .pagination > .active > a:hover,
:root .pagination > .active > a:focus,
:root .pagination > .active > span,
:root .pagination > .active > span:hover {
  background-color: var(--fl-fill-ink);
  border-color: var(--fl-text);
  border-radius: var(--fl-radius-sm);
  color: var(--fl-on-accent);
}

:root .pagination > .disabled > a,
:root .pagination > .disabled > a:hover,
:root .pagination > .disabled > span {
  background-color: transparent;
  color: var(--fl-grey-400);
}

/* ---------- Date picker ---------- */

:root .xdsoft_datetimepicker {
  border-color: var(--fl-border);
  border-radius: var(--fl-radius);
  box-shadow: var(--fl-shadow-md);
}

:root .xdsoft_datetimepicker .xdsoft_calendar td,
:root .xdsoft_datetimepicker .xdsoft_calendar th {
  border-radius: var(--fl-radius-sm);
}

:root .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
  color: var(--fl-link);
}

:root .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
:root .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
:root .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: var(--fl-blue);
  box-shadow: none;
  color: var(--fl-on-accent);
}

/* beats the datepicker's hover colours, which are !important */
:root .xdsoft_datetimepicker .xdsoft_calendar td:hover,
:root .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  background: var(--fl-bg-muted) !important;
  color: var(--fl-text) !important;
}

/* ---------- Calendar (FullCalendar): through its own variables, not its !important button rules ---------- */

:root .fc {
  --fc-border-color: var(--fl-line);
  --fc-highlight-color: var(--fl-blue-tint);
  --fc-neutral-bg-color: var(--fl-paper);
  --fc-neutral-text-color: var(--fl-muted);
  --fc-now-indicator-color: var(--fl-blue);
}

/* ==========================================================================
   4. Focus and motion
   ========================================================================== */

/* Keyboard focus is always visible, in the brand blue.
   !important beats Perfex's outline:2px solid transparent (!important on selects and the modal close).
   Fields are excluded: they show the ring from section 3. */
:root :is(a, button, .btn, .dropdown-menu > li > a, [tabindex]):not(.bootstrap-select > .dropdown-toggle):focus-visible {
  outline: var(--fl-focus-outline) !important;
  outline-offset: 2px;
}

:root .btn,
:root .form-control,
:root .label,
:root .nav-tabs > li > a,
:root .dropdown-menu > li > a,
:root .bootstrap-select > .dropdown-toggle,
:root .pagination > li > a {
  transition:
    background-color var(--fl-duration) var(--fl-ease),
    border-color var(--fl-duration) var(--fl-ease),
    color var(--fl-duration) var(--fl-ease),
    box-shadow var(--fl-duration) var(--fl-ease);
}

@media (max-width: 767px) {
  /* beats Perfex's phone padding (6.5px !important) so the table toolbar stays 32px */
  :root .dt-buttons.btn-group .btn {
    padding-bottom: 5px !important;
    padding-top: 5px !important;
  }

  :root .modal-header,
  :root .modal-body,
  :root .modal-footer {
    padding-left: var(--fl-space-4);
    padding-right: var(--fl-space-4);
  }
}

/* People who ask their system for less motion get none */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   5. Bridges (fragile by nature)
   Rules keyed on Perfex's Tailwind utility names (verified on Perfex 3.4.0, assets/builds/tailwind.css).
   If Perfex renames them, these rules stop matching and the element shows stock Perfex colours.
   ========================================================================== */

/* Warm grey remap. Plain single-class selectors on purpose: loaded after Tailwind they beat the
   plain utility, while Perfex's own hover/focus variants still win when active. */
.tw-text-neutral-300 { color: var(--fl-grey-300); }
.tw-text-neutral-400 { color: var(--fl-grey-400); }
.tw-text-neutral-500 { color: var(--fl-grey-500); }
.tw-text-neutral-600 { color: var(--fl-grey-600); }
.tw-text-neutral-700 { color: var(--fl-grey-700); }
.tw-text-neutral-800 { color: var(--fl-grey-800); }
.tw-text-neutral-900 { color: var(--fl-grey-900); }

.hover\:tw-text-neutral-500:hover { color: var(--fl-grey-500); }
.hover\:tw-text-neutral-600:hover,
.focus\:tw-text-neutral-600:focus { color: var(--fl-grey-600); }
.hover\:tw-text-neutral-700:hover,
.focus\:tw-text-neutral-700:focus { color: var(--fl-grey-700); }
.hover\:tw-text-neutral-800:hover,
.focus\:tw-text-neutral-800:focus,
.tw-group:hover .group-hover\:tw-text-neutral-800 { color: var(--fl-grey-800); }
.hover\:tw-text-neutral-900:hover { color: var(--fl-grey-900); }

.tw-bg-neutral-50 { background-color: var(--fl-grey-50); }
.tw-bg-neutral-100 { background-color: var(--fl-grey-100); }
.tw-bg-neutral-200 { background-color: var(--fl-grey-200); }
.tw-bg-neutral-300 { background-color: var(--fl-grey-300); }
.tw-bg-neutral-700 { background-color: var(--fl-grey-700); }
.hover\:tw-bg-neutral-50:hover { background-color: var(--fl-grey-50); }
.hover\:tw-bg-neutral-100:hover { background-color: var(--fl-grey-100); }
.hover\:tw-bg-neutral-200:hover { background-color: var(--fl-grey-200); }

.tw-border-neutral-100 { border-color: var(--fl-grey-100); }
.tw-border-neutral-200 { border-color: var(--fl-grey-200); }
.tw-border-neutral-300 { border-color: var(--fl-grey-300); }
.tw-border-neutral-300\/80 { border-color: rgba(213, 211, 206, 0.8); }
.tw-divide-neutral-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--fl-grey-100); }
.tw-divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--fl-grey-200); }
.tw-divide-neutral-300 > :not([hidden]) ~ :not([hidden]) { border-color: var(--fl-grey-300); }

/* Switzer Bold is heavy at UI sizes; Perfex's "bold" utility becomes semibold */
.tw-font-bold { font-weight: 600; }

/* Perfex's "primary" utilities follow the brand blue (Perfex's own #2563eb is a near match if these stop matching) */
:root .tw-text-primary-500,
:root .tw-text-primary-600,
:root .tw-text-primary-700,
:root .hover\:tw-text-primary-600:hover,
:root .hover\:tw-text-primary-700:hover {
  color: var(--fl-link);
}

:root .tw-bg-primary-500,
:root .tw-bg-primary-600 {
  background-color: var(--fl-blue);
}

:root .tw-bg-primary-700,
:root .hover\:tw-bg-primary-600:hover,
:root .hover\:tw-bg-primary-700:hover {
  background-color: var(--fl-blue-dark);
}

:root .tw-border-primary-500,
:root .tw-border-primary-600,
:root .tw-border-primary-700 {
  border-color: var(--fl-blue);
}