/* ============================================================
   tacklebox-theme.css
   Makes stock Tabler 1.6 look like Tacklebox. No Sass, no build.

   Load order:
     1. tabler.min.css          stock, never edited
     2. tacklebox-tokens.css    the values
     3. tacklebox-theme.css     this file: points Tabler at the values
     4. tacklebox-extras.css    the few components Tabler lacks

   PART 1  sets Tabler's own variables from Tacklebox tokens.
           Changing a look starts here, and usually ends here.
   PART 2  overrides the values Tabler writes as literals, where
           no variable exists. Recheck this part on every Tabler
           upgrade; it is kept short on purpose.

   Nothing in this file adds a class. New classes live in
   tacklebox-extras.css and start with "tbx-".
   ============================================================ */


/* ============================================================
   PART 1 — VARIABLES
   ============================================================ */

/* ---------- 1.1 Color, type, shape, elevation ------------------------------
   Declared on every theme scope, so the values re-resolve wherever a theme
   attribute sits: the page, or the always-dark sidebar inside a light page. */
:root,
[data-bs-theme],
[data-theme] {
  /* Type */
  --tblr-font-sans-serif: var(--tbx-font);
  --tblr-font-monospace: var(--tbx-font-mono);
  --tblr-body-font-size: var(--tbx-fs);
  --tblr-body-line-height: var(--tbx-lh);
  --tblr-line-height-base: var(--tbx-lh);
  --tblr-font-size-h1: var(--tbx-fs-xl);   --tblr-line-height-h1: 1.2;
  --tblr-font-size-h2: var(--tbx-fs-lg);   --tblr-line-height-h2: 1.25;
  --tblr-font-size-h3: var(--tbx-fs-md);   --tblr-line-height-h3: 1.3;
  --tblr-font-size-h4: var(--tbx-fs);      --tblr-line-height-h4: 1.4;
  --tblr-font-size-h5: var(--tbx-fs-tiny); --tblr-line-height-h5: 1.4;
  --tblr-font-size-h6: var(--tbx-fs-micro); --tblr-line-height-h6: 1.4;

  /* Neutral ramp. Tabler picks a step per theme with light-dark(), so each
     step only has to be right in the theme that uses it. */
  --tblr-gray-50:  var(--tbx-surface);
  --tblr-gray-100: var(--tbx-sunken);
  --tblr-gray-200: var(--tbx-line);
  --tblr-gray-300: var(--tbx-line-strong);
  --tblr-gray-400: var(--tbx-faint);
  --tblr-gray-500: var(--tbx-muted);
  --tblr-gray-600: var(--tbx-muted);
  --tblr-gray-700: var(--tbx-inverse);
  --tblr-gray-800: var(--tbx-inverse);
  --tblr-gray-900: var(--tbx-inverse);
  --tblr-gray-950: var(--tbx-inverse);
  --tblr-dark:  var(--tbx-inverse);
  --tblr-light: var(--tbx-on-inverse);

  /* Text */
  --tblr-body-color: var(--tbx-ink);
  --tblr-heading-color: var(--tbx-ink);
  --tblr-emphasis-color: var(--tbx-ink);
  --tblr-secondary: var(--tbx-muted);
  --tblr-secondary-color: var(--tbx-muted);
  --tblr-muted: var(--tbx-muted);
  --tblr-tertiary: var(--tbx-faint);
  --tblr-tertiary-color: var(--tbx-faint);
  --tblr-icon-color: var(--tbx-muted);
  --tblr-disabled-color: var(--tbx-faint);
  --tblr-code-color: var(--tbx-ink-2);
  --tblr-link-color: var(--tbx-link);
  --tblr-link-hover-color: var(--tbx-link);

  /* Surfaces */
  --tblr-body-bg: var(--tbx-surface);
  --tblr-bg-surface: var(--tbx-raise);
  --tblr-bg-surface-primary: var(--tbx-raise);
  --tblr-bg-surface-secondary: var(--tbx-sunken);
  --tblr-bg-surface-tertiary: var(--tbx-sunken);
  --tblr-bg-surface-dark: var(--tbx-inverse);
  --tblr-bg-surface-inverted: var(--tbx-inverse);   /* tooltips: always the dark slab */
  --tblr-text-inverted: var(--tbx-on-inverse);
  --tblr-bg-forms: var(--tbx-raise);
  --tblr-bg-forms-disabled: var(--tbx-sunken);
  --tblr-secondary-bg: var(--tbx-sunken);
  --tblr-tertiary-bg: var(--tbx-sunken);
  --tblr-code-bg: var(--tbx-sunken);
  --tblr-hover-bg: var(--tbx-hover);
  --tblr-active-bg: var(--tbx-selected);
  --tblr-disabled-bg: var(--tbx-sunken);

  /* Lines */
  --tblr-border-color: var(--tbx-line);
  --tblr-border-color-translucent: var(--tbx-line);
  --tblr-border-dark-color: var(--tbx-line-strong);
  --tblr-border-dark-color-translucent: var(--tbx-line-strong);
  --tblr-border-active-color: var(--tbx-line-strong);
  --tblr-border-active-color-translucent: var(--tbx-line-strong);
  --tblr-border-light-color: var(--tbx-line-faint);
  --tblr-border-light-color-translucent: var(--tbx-line-faint);

  /* Brand and status.
     Tabler's "primary" drives the main button, checked boxes, switches, the
     active page number and progress bars. In Tacklebox that job belongs to
     the solid, not to Ember: Ember is .tbx-btn-ember and the active marks. */
  --tblr-primary: var(--tbx-solid);
  --tblr-primary-fg: var(--tbx-on-solid);
  --tblr-primary-darken: color-mix(in oklab, var(--tbx-solid) 86%, var(--tbx-surface));
  --tblr-success: var(--tbx-ok);       --tblr-success-fg: var(--tbx-on-accent);
  --tblr-warning: var(--tbx-warn);     --tblr-warning-fg: var(--tbx-on-accent);
  --tblr-danger:  var(--tbx-danger);   --tblr-danger-fg:  var(--tbx-on-accent);
  --tblr-info:    var(--tbx-link);     --tblr-info-fg:    var(--tbx-on-accent);
  --tblr-success-lt: var(--tbx-ok-wash);
  --tblr-warning-lt: var(--tbx-warn-wash);
  --tblr-danger-lt:  var(--tbx-danger-wash);
  --tblr-info-lt:    var(--tbx-link-wash);
  --tblr-secondary-lt: var(--tbx-sunken);
  --tblr-form-valid-color: var(--tbx-ok);
  --tblr-form-valid-border-color: var(--tbx-ok);
  --tblr-form-invalid-color: var(--tbx-danger);
  --tblr-form-invalid-border-color: var(--tbx-danger);
  --tblr-focus-ring-color: var(--tbx-link);

  /* Tabler's twelve named colors are the categorical palette. */
  --tblr-red:    var(--tbx-cat-red);    --tblr-red-lt:    var(--tbx-cat-red-wash);
  --tblr-orange: var(--tbx-cat-orange); --tblr-orange-lt: var(--tbx-cat-orange-wash);
  --tblr-yellow: var(--tbx-cat-yellow); --tblr-yellow-lt: var(--tbx-cat-yellow-wash);
  --tblr-lime:   var(--tbx-cat-lime);   --tblr-lime-lt:   var(--tbx-cat-lime-wash);
  --tblr-green:  var(--tbx-cat-green);  --tblr-green-lt:  var(--tbx-cat-green-wash);
  --tblr-teal:   var(--tbx-cat-teal);   --tblr-teal-lt:   var(--tbx-cat-teal-wash);
  --tblr-cyan:   var(--tbx-cat-cyan);   --tblr-cyan-lt:   var(--tbx-cat-cyan-wash);
  --tblr-azure:  var(--tbx-cat-azure);  --tblr-azure-lt:  var(--tbx-cat-azure-wash);
  --tblr-blue:   var(--tbx-cat-blue);   --tblr-blue-lt:   var(--tbx-cat-blue-wash);
  --tblr-indigo: var(--tbx-cat-indigo); --tblr-indigo-lt: var(--tbx-cat-indigo-wash);
  --tblr-purple: var(--tbx-cat-purple); --tblr-purple-lt: var(--tbx-cat-purple-wash);
  --tblr-pink:   var(--tbx-cat-pink);   --tblr-pink-lt:   var(--tbx-cat-pink-wash);
  /* Text on a solid category fill: dark on the four light hues. The tinted
     form (bg-*-lt) is the one Tacklebox uses; see 2.7. */
  --tblr-orange-fg: var(--tbx-inverse);
  --tblr-yellow-fg: var(--tbx-inverse);
  --tblr-lime-fg:   var(--tbx-inverse);
  --tblr-cyan-fg:   var(--tbx-inverse);

  /* Shape */
  --tblr-border-radius-sm: var(--tbx-r-sm);
  --tblr-border-radius-md: var(--tbx-r);
  --tblr-border-radius:    var(--tbx-r);
  --tblr-border-radius-lg: var(--tbx-r-lg);

  /* Elevation: borders before shadows. Only things that float get one. */
  --tblr-shadow-card: none;
  --tblr-shadow-input: none;
  --tblr-shadow-dropdown: 0 0 0 1px var(--tbx-line), var(--tbx-shadow-2);   /* menus: a hairline too, so they hold their edge in dark mode */
  --tblr-box-shadow-sm: var(--tbx-shadow-1);
  --tblr-box-shadow: var(--tbx-shadow-2);
  --tblr-box-shadow-lg: var(--tbx-shadow-pop);
  --tblr-shadow-lg: var(--tbx-shadow-pop);
}

/* ---------- 1.2 Layout and density -----------------------------------------
   On the root only. Tabler changes --tblr-sidebar-width on <html> when the
   sidebar folds, so these must not be re-declared further down the tree. */
:root {
  --tblr-page-padding: var(--tbx-6);
  --tblr-page-padding-y: var(--tbx-6);
  --tblr-sidebar-width: 240px;
  /* The folded icon rail: 2 x (list inset 8 + row padding 10) + icon box 20, so an icon sits
     exactly where it does when the sidebar is open (19px from the edge), centered. */
  --tblr-sidebar-folded-width: 56px;

  /* Control sizes. Height = line + 2 x padding + 2 x 1px border. */
  --tblr-btn-input-font-size: var(--tbx-fs-sm);
  --tblr-btn-input-line-height: 18px;
  --tblr-btn-input-padding-x: 10px;
  --tblr-btn-input-padding-y: calc((var(--tbx-control-h) - 18px - 2px) / 2);
  --tblr-btn-input-sm-font-size: var(--tbx-fs-tiny);
  --tblr-btn-input-sm-line-height: 17px;
  --tblr-btn-input-sm-padding-x: 8px;
  --tblr-btn-input-sm-padding-y: calc((var(--tbx-control-h-sm) - 17px - 2px) / 2);
  --tblr-btn-input-lg-font-size: var(--tbx-fs);
  --tblr-btn-input-lg-line-height: 20px;
  --tblr-btn-input-lg-padding-x: 14px;
  --tblr-btn-input-lg-padding-y: calc((var(--tbx-control-h-lg) - 20px - 2px) / 2);
}
html[data-bs-sidebar^=folded] {
  --tblr-sidebar-width: var(--tblr-sidebar-folded-width);
}
/* Touch screens: the control tokens grow, and everything above follows.
   (The rest of the touch sizing is in 1.4, after the component variables.) */
@media (pointer: coarse) {
  :root {
    --tbx-control-h: 40px;
    --tbx-control-h-sm: 32px;
    --tbx-control-h-lg: 44px;
    --tbx-row-h: 44px;
  }
}

/* ---------- 1.3 Component variables -----------------------------------------
   Tabler declares these on the component, so they are set there.          */
/* Controls take the stronger line; surfaces (cards, tables) the lighter one.
   Redefining the border variable on the control leaves colored variants,
   which set their own border, untouched. */
.btn,
.form-control,
.form-select,
.input-group-text,
.form-check-input,
.form-selectgroup-label { --tblr-border-color: var(--tbx-line-strong); }
.btn-action { --tblr-border-color: transparent; }
.btn {
  --tblr-btn-padding-y: var(--tblr-btn-input-padding-y);
  --tblr-btn-padding-x: var(--tblr-btn-input-padding-x);
  --tblr-btn-font-size: var(--tblr-btn-input-font-size);
  --tblr-btn-line-height: var(--tblr-btn-input-line-height);
  --tblr-btn-box-shadow: none;
  --tblr-btn-icon-size: 15px;
}
/* Icons are 18px unless a size class says otherwise. :where() keeps this at
   Tabler's own specificity and the :not() leaves Tabler's size classes
   (.icon-sm, .icon-md, .icon-lg, .icon-inline) in charge of their icons;
   a bare `.icon` rule here would come later in the cascade and flatten them. */
.icon:where(:not(.icon-sm, .icon-md, .icon-lg, .icon-inline)) { --tblr-icon-size: 18px; }
.btn-action,
.btn-icon { --tblr-btn-icon-size: 18px; }
.btn-sm, .btn-group-sm > .btn {
  --tblr-btn-icon-size: 14px;
  --tblr-btn-padding-y: var(--tblr-btn-input-sm-padding-y);
  --tblr-btn-padding-x: var(--tblr-btn-input-sm-padding-x);
  --tblr-btn-font-size: var(--tblr-btn-input-sm-font-size);
  --tblr-btn-line-height: var(--tblr-btn-input-sm-line-height);
}
.btn-sm.btn-action,
.btn-sm.btn-icon { --tblr-btn-icon-size: 16px; }
.btn-lg, .btn-group-lg > .btn {
  --tblr-btn-padding-y: var(--tblr-btn-input-lg-padding-y);
  --tblr-btn-padding-x: var(--tblr-btn-input-lg-padding-x);
  --tblr-btn-font-size: var(--tblr-btn-input-lg-font-size);
  --tblr-btn-line-height: var(--tblr-btn-input-lg-line-height);
}
.card {
  --tblr-card-spacer-y: var(--tbx-5);
  --tblr-card-spacer-x: var(--tbx-6);
  --tblr-card-cap-padding-y: var(--tbx-4);
  --tblr-card-cap-padding-x: var(--tbx-6);
  --tblr-card-border-radius: var(--tbx-r);
  --tblr-card-inner-border-radius: calc(var(--tbx-r) - 1px);
  --tblr-card-border-color: var(--tbx-line);
  --tblr-card-cap-bg: transparent;
}
.card-title {
  --tblr-card-title-margin-bottom: var(--tbx-4);
  --tblr-card-title-line-height: 1.3;
}
.badge {
  --tblr-badge-font-size: var(--tbx-fs-micro);
  --tblr-badge-font-weight: 600;
  --tblr-badge-border-radius: var(--tbx-r-sm);
  --tblr-badge-padding-y: 3px;
  --tblr-badge-padding-x: 6px;
  --tblr-badge-color: var(--tbx-ink-2);
  --tblr-badge-icon-size: 1.3em;   /* Tabler: 1em. At a badge's 10.5px text a mark that small is unreadable. */
}
.status {
  --tblr-status-height: 20px;
  --tblr-status-padding-x: 8px;
  --tblr-status-padding-y: 0;
  --tblr-status-gap: 6px;
}
.status-secondary { --tblr-status-color: var(--tbx-muted); }
.tag {
  --tblr-tag-height: 20px;
  --tblr-tag-padding-x: 6px;
  --tblr-tag-gap: 4px;
}
.avatar {
  --tblr-avatar-size: 30px;
  --tblr-avatar-font-size: var(--tbx-fs-tiny);
  --tblr-avatar-bg: var(--tbx-sunken);
}
.avatar-xs { --tblr-avatar-size: 20px; --tblr-avatar-font-size: 9px; }
.avatar-sm { --tblr-avatar-size: 25px; --tblr-avatar-font-size: var(--tbx-fs-micro); }
.avatar-lg { --tblr-avatar-size: 44px; --tblr-avatar-font-size: var(--tbx-fs-md); }
.avatar-xl { --tblr-avatar-size: 64px; --tblr-avatar-font-size: var(--tbx-fs-lg); }
.dropdown-menu {
  --tblr-dropdown-font-size: var(--tbx-fs-sm);
  --tblr-dropdown-min-width: 10rem;
  --tblr-dropdown-padding-y: var(--tbx-2);
  --tblr-dropdown-item-padding-y: 5px;
  --tblr-dropdown-item-padding-x: 10px;
  --tblr-dropdown-header-padding-x: 10px;
  --tblr-dropdown-header-color: var(--tbx-muted);
  --tblr-dropdown-border-color: var(--tbx-line);
  --tblr-dropdown-link-active-color: var(--tbx-ink);
  --tblr-dropdown-item-icon-size: 15px;
  --tblr-dropdown-item-icon-color: var(--tbx-muted);
}
.pagination {
  --tblr-pagination-font-size: var(--tbx-fs-sm);
  --tblr-pagination-padding-y: 3px;
  --tblr-pagination-padding-x: 4px;
  --tblr-pagination-border-radius: var(--tbx-r-sm);
  --tblr-pagination-active-color: var(--tbx-on-solid);
  --tblr-pagination-hover-color: var(--tbx-ink);
}
.breadcrumb {
  --tblr-breadcrumb-font-size: var(--tbx-fs-sm);
  --tblr-breadcrumb-item-padding-x: 6px;
  --tblr-breadcrumb-item-active-font-weight: 500;
  --tblr-breadcrumb-divider-color: var(--tbx-faint);
}
.nav {
  --tblr-nav-link-padding-x: 10px;
  --tblr-nav-link-padding-y: 6px;
  --tblr-nav-link-color: var(--tbx-muted);
  --tblr-nav-link-hover-color: var(--tbx-ink);
}
.nav-segmented {
  --tblr-nav-height: var(--tbx-control-h);
  --tblr-nav-radius: var(--tbx-r-sm);
  --tblr-nav-link-padding-x: 10px;
  --tblr-nav-font-size: var(--tbx-fs-sm);
  --tblr-nav-bg: var(--tbx-sunken);
  --tblr-nav-active-bg: var(--tbx-raise);
}
.modal {
  --tblr-modal-padding: var(--tbx-6);
  --tblr-modal-header-padding: var(--tbx-5) var(--tbx-6);
  --tblr-modal-header-padding-x: var(--tbx-6);
  --tblr-modal-header-padding-y: var(--tbx-5);
  --tblr-modal-footer-gap: var(--tbx-4);
  --tblr-modal-footer-bg: var(--tbx-sunken);
  --tblr-modal-border-color: var(--tbx-line);
  --tblr-modal-box-shadow: var(--tbx-shadow-pop);
  --tblr-modal-width: 480px;
}
.modal-backdrop,
.offcanvas-backdrop {
  --tblr-backdrop-bg: var(--tbx-inverse);
}
.offcanvas {
  --tblr-offcanvas-width: 420px;
  --tblr-offcanvas-padding-x: var(--tbx-6);
  --tblr-offcanvas-padding-y: var(--tbx-5);
  --tblr-offcanvas-box-shadow: var(--tbx-shadow-pop);
}
/* Toasts are the always-dark slab, like the sidebar. */
.toast {
  --tblr-toast-bg: var(--tbx-inverse);
  --tblr-toast-color: var(--tbx-on-inverse);
  --tblr-toast-border-color: transparent;
  --tblr-toast-font-size: var(--tbx-fs-sm);
  --tblr-toast-padding-x: var(--tbx-5);
  --tblr-toast-padding-y: var(--tbx-4);
  --tblr-toast-box-shadow: var(--tbx-shadow-pop);
  --tblr-toast-spacing: var(--tbx-4);
  --tblr-toast-max-width: 380px;
}
.alert {
  --tblr-alert-padding-x: var(--tbx-5);
  --tblr-alert-padding-y: var(--tbx-4);
  --tblr-alert-margin-bottom: var(--tbx-5);
  --tblr-alert-icon-size: 16px;
  --tblr-alert-gap: var(--tbx-4);
  --tblr-alert-heading-font-weight: 600;
}
.tooltip {
  --tblr-tooltip-font-size: var(--tbx-fs-tiny);
  --tblr-tooltip-opacity: 1;
  --tblr-tooltip-padding-x: var(--tbx-4);
  --tblr-tooltip-padding-y: var(--tbx-2);
}
.popover {
  --tblr-popover-font-size: var(--tbx-fs-sm);
  --tblr-popover-header-font-size: var(--tbx-fs-sm);
  --tblr-popover-box-shadow: var(--tbx-shadow-2);
}
.list-group {
  --tblr-list-group-item-padding-x: var(--tbx-6);
  --tblr-list-group-item-padding-y: var(--tbx-4);
}
.datagrid {
  --tblr-datagrid-padding: var(--tbx-6);
  --tblr-datagrid-item-width: 12rem;
  --tblr-datagrid-title-margin-bottom: var(--tbx-1);
}
.empty {
  --tblr-empty-padding: var(--tbx-7);
  --tblr-empty-padding-md: var(--tbx-9);
  --tblr-empty-icon-size: 28px;
  --tblr-empty-icon-margin-bottom: var(--tbx-4);
  --tblr-empty-title-margin-bottom: var(--tbx-2);
  --tblr-empty-action-margin-top: var(--tbx-6);
  --tblr-empty-header-font-size: 56px;
}
.progress {
  --tblr-progress-height: 6px;
  --tblr-progress-bg: var(--tbx-line);
  --tblr-progress-box-shadow: none;
  --tblr-progress-bar-color: var(--tbx-on-solid);
}
.steps {
  --tblr-steps-color: var(--tbx-heat);
}
/* The check mark, radio dot and switch knob sit on the solid, which flips
   per theme; Tabler draws them in literal white. */
.form-check-input,
.form-check-input[type=checkbox]:indeterminate { --tblr-form-check-icon-color: var(--tbx-on-solid); }
.form-switch .form-check-input:checked { --tblr-form-switch-color: var(--tbx-on-solid); }
.input-icon {
  --tblr-input-icon-padding-start: 30px;
  --tblr-input-icon-padding-end: 30px;
}
.form-fieldset {
  --tblr-form-fieldset-padding: var(--tbx-6);
  --tblr-form-fieldset-margin-bottom: var(--tbx-6);
}
.table {
  --tblr-table-border-color: var(--tbx-line-faint);
  --tblr-table-striped-bg: color-mix(in oklab, var(--tbx-sunken) 45%, var(--tbx-raise));
  --tblr-table-hover-bg: var(--tbx-hover);
  --tblr-table-active-bg: var(--tbx-selected);
}
.table-sort {
  --tblr-table-sort-icon-size: 14px;
  --tblr-table-sort-icon-margin-start: 2px;
}

/* The top bar in the content column, and navbars in general. */
.navbar {
  --tblr-navbar-padding-y: var(--tbx-3);
  --tblr-navbar-active-border-color: var(--tbx-heat);
  --tblr-navbar-brand-font-size: 16px;
  --tblr-navbar-border-color: var(--tbx-line);
}

/* The sidebar: an always-dark slab. The <aside> carries data-bs-theme="dark",
   so everything inside it re-resolves to the dark tokens by itself; these
   variables only make it the inverse slab instead of the dark page color. */
.navbar-vertical[data-bs-theme=dark],
.navbar-vertical[data-theme=dark] {
  --tblr-navbar-bg: var(--tbx-inverse);
  --tblr-navbar-color: color-mix(in oklab, var(--tbx-on-inverse) 78%, var(--tbx-inverse));
  --tblr-navbar-hover-color: var(--tbx-on-inverse);
  --tblr-navbar-active-color: var(--tbx-on-inverse);
  --tblr-navbar-active-bg: color-mix(in oklab, var(--tbx-on-inverse) 9%, transparent);
  --tblr-navbar-border-color: var(--tbx-line);        /* the floating slab's outline: it keeps the slab's edge in dark mode */
  --tblr-hover-bg: color-mix(in oklab, var(--tbx-on-inverse) 7%, transparent);
  --tblr-bg-surface: var(--tbx-inverse);              /* fly-out menus match the slab */
  --tblr-dropdown-link-active-color: var(--tbx-on-inverse);
}
/* The footer's rows (the user, 2.15) take the menu's padding; Tabler gives them 8px. */
.navbar-vertical[class*=navbar-expand] .navbar-nav,
.navbar-vertical[class*=navbar-expand] .navbar-footer .navbar-nav {
  --tblr-sidebar-inset: var(--tbx-4);
  --tblr-sidebar-nav-padding-y: 7px;
  --tblr-sidebar-nav-padding-x: 10px;
  --tblr-sidebar-nav-indent: 30px;
  --tblr-nav-link-icon-width: 20px;
  --tblr-nav-link-icon-height: 18px;
  --tblr-sidebar-section-title-font-size: var(--tbx-fs-micro);
}
/* Ember marks where you are: the current area's icon. */
.navbar-vertical[class*=navbar-expand] .navbar-nav .nav-item.active > .nav-link {
  --tblr-nav-link-icon-color: var(--tbx-heat-on-inverse);
}
.navbar-vertical:not([data-bs-theme=dark]):not([data-theme=dark])[class*=navbar-expand] .navbar-nav .nav-item.active > .nav-link {
  --tblr-nav-link-icon-color: var(--tbx-heat);
}


/* ---------- 1.4 Touch screens ---------------------------------------------------
   Menu rows, sidebar rows and page links grow to a 40px target or more.     */
@media (pointer: coarse) {
  .dropdown-menu { --tblr-dropdown-item-padding-y: 11px; }
  .pagination { --tblr-pagination-padding-y: 10px; --tblr-pagination-padding-x: 12px; }
  .navbar-vertical[class*=navbar-expand] .navbar-nav,
  .navbar-vertical[class*=navbar-expand] .navbar-footer .navbar-nav { --tblr-sidebar-nav-padding-y: 12px; }
}


/* ============================================================
   PART 2 — WHAT VARIABLES CAN'T REACH
   Tabler writes these values as literals. Each rule overrides
   one of them and says which. Recheck on every Tabler upgrade.
   ============================================================ */

/* 2.1 Form controls: padding, type size and line height are literals. */
.form-control,
.form-select,
.input-group-text,
.form-selectgroup-label {
  padding-block: var(--tblr-btn-input-padding-y);
  font-size: var(--tblr-btn-input-font-size);
  line-height: var(--tblr-btn-input-line-height);
}
.form-control,
.input-group-text,
.form-selectgroup-label { padding-inline: var(--tblr-btn-input-padding-x); }
.form-select { padding-inline: var(--tblr-btn-input-padding-x) 28px; background-position: right 8px center; background-size: 12px 10px; }
.form-control-sm,
.form-select-sm {
  padding-block: var(--tblr-btn-input-sm-padding-y);
  font-size: var(--tblr-btn-input-sm-font-size);
  line-height: var(--tblr-btn-input-sm-line-height);
}
.form-control-lg,
.form-select-lg {
  padding-block: var(--tblr-btn-input-lg-padding-y);
  font-size: var(--tblr-btn-input-lg-font-size);
  line-height: var(--tblr-btn-input-lg-line-height);
}
textarea.form-control { line-height: var(--tbx-lh); }
.input-icon-addon { --tblr-input-icon-addon-width: 30px; height: var(--tbx-control-h); }
.form-control::placeholder { color: var(--tbx-muted); }
.input-group-text { color: var(--tbx-muted); }
.form-label { margin-bottom: var(--tbx-2); font-size: var(--tbx-fs-tiny); font-weight: 600; color: var(--tbx-ink-2); }
.form-text,
.form-hint { font-size: var(--tbx-fs-tiny); color: var(--tbx-muted); }
.invalid-feedback,
.valid-feedback { font-size: var(--tbx-fs-tiny); }

/* 2.2 Checkboxes, radios, switches: sizes are literal 1.25rem / 2rem. */
.form-check { min-height: 18px; padding-inline-start: 23px; margin-bottom: var(--tbx-3); }
.form-check .form-check-input { margin-inline-start: -23px; }
.form-check-input { width: 15px; height: 15px; margin-top: 2px; }
.form-check-label { font-size: var(--tbx-fs-sm); }
.form-switch { padding-inline-start: 36px; }
.form-switch .form-check-input {
  --tblr-form-switch-knob-size: 12px;
  --tblr-form-switch-knob-offset: 2px;
  width: 28px; height: 16px; margin-inline-start: -36px; margin-top: 1px;
}
.form-check-input:checked { border-color: var(--tbx-solid); }

/* 2.2b Touch screens: anything tappable is at least 40px. */
@media (pointer: coarse) {
  .btn-action,
  .btn-icon,
  .navbar-toggler { min-width: 40px; min-height: 40px; }
  .form-check { min-height: 24px; padding-inline-start: 30px; }
  .form-check .form-check-input { margin-inline-start: -30px; }
  .form-check-input { width: 20px; height: 20px; margin-top: 1px; }
  .form-switch { padding-inline-start: 46px; }
  .form-switch .form-check-input {
    --tblr-form-switch-knob-size: 16px;
    width: 36px; height: 20px; margin-inline-start: -46px;
  }
}

/* 2.3 Tables: cell padding and header type are literals. */
.table > :not(caption) > * > * { height: var(--tbx-row-h); padding: 3px 10px; font-size: var(--tbx-fs-sm); }
.table thead th {
  padding-block: 3px;
  font-size: var(--tbx-fs-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--tbx-muted);
  border-bottom-color: var(--tbx-line);
}
.table-sort { padding: 3px 10px; margin: -3px -10px; }
.table-sort.asc, .table-sort.desc { color: var(--tbx-ink); }
/* Tabler rests the arrow on the bottom of the line, which leaves it sitting
   below small capitals. Center it on the capitals instead (Inter's cap
   height is 0.727em), and scale the drawing to the icon size: Tabler's
   arrows are drawn at 16px and would otherwise be cropped, not shrunk. */
.table-sort::after {
  vertical-align: calc(0.364em - var(--tblr-table-sort-icon-size) / 2);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
/* The active sort arrow is Ember, and drawn heavier than Tabler's 1px. */
.table-sort.asc::after, .table-sort.desc::after { background: var(--tbx-heat); }
.table-sort.asc::after  { mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M4.5 10l3.5 -3.5l3.5 3.5'/></svg>"); }
.table-sort.desc::after { mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M4.5 6.5l3.5 3.5l3.5 -3.5'/></svg>"); }
.card-table tr > :first-child { padding-inline-start: var(--tbx-6); }
.card-table tr > :last-child  { padding-inline-end: var(--tbx-6); }
/* Identifiers, dates and column headings never break across lines. When a
   table runs out of room, names wrap first; after that the table scrolls
   sideways inside its .table-responsive. */
.table thead th,
.table .font-monospace,
.table code,
.table time { white-space: nowrap; }
/* Screen-reader-only text in a scrolled-off column (.visually-hidden is
   absolutely positioned) would otherwise widen the page itself. */
.table-responsive { position: relative; }

/* 2.3b Stacked tables on phones (.table-mobile-md). Tabler stacks each cell
        as label-over-value with 12px padding all round; Tacklebox sets the
        label beside the value, so a record takes half the height. */
@media (max-width: 767.98px) {
  .table-mobile-md tr { position: relative; padding: var(--tbx-3) 0; }
  .table-mobile-md td {
    height: auto;
    padding: 2px var(--tbx-6) !important;
    text-align: start !important;
  }
  .table-mobile-md td[data-label] { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--tbx-4); align-items: baseline; justify-items: start; }
  .table-mobile-md td[data-label]::before { font-size: var(--tbx-fs-micro); letter-spacing: 0.05em; }
  .table-mobile-md td.w-1:last-child { position: absolute; inset-block-start: var(--tbx-2); inset-inline-end: var(--tbx-4); width: auto !important; padding: 0 !important; }
  .table-mobile-md td.w-1:first-child { padding-bottom: var(--tbx-2) !important; }
}

/* 2.4 Titles and small type that Tabler sizes in rem. */
.card-title { font-size: var(--tbx-fs); font-weight: 600; }
.modal-title,
.offcanvas-title { font-size: var(--tbx-fs-md); font-weight: 600; }
.page-pretitle,
.subheader,
.datagrid-title,
.hr-text { font-size: var(--tbx-fs-micro); letter-spacing: 0.06em; }
/* A menu's group heading reads as the fly-out title above it (extras 2). Tabler
   sets .75rem and medium weight, and colors it --tblr-secondary rather than the
   header color set in 1.3. */
.dropdown-header { font-size: var(--tbx-fs-micro); font-weight: 600; letter-spacing: 0.06em; color: var(--tbx-muted); }
.page-title { font-size: var(--tbx-fs-xl); line-height: 1.2; }
.badge { text-transform: uppercase; letter-spacing: 0.05em; }   /* as on slides: small capitals for states */
/* An icon in a badge is drawn at about half its grid size, where the 2px
   stroke thins to under a pixel. A heavier stroke keeps an X, a clock or a
   check as legible as the capitals beside it. */
.badge .icon { stroke-width: 2.75; }
/* Status pills: Tabler colors the word with the status color on a tint of
   itself (about 4:1). The dot carries the color; the word is ink. */
.status { font-size: var(--tbx-fs-tiny); color: var(--tbx-ink-2); border-radius: var(--tbx-r-sm); }
.tag { font-size: var(--tbx-fs-tiny); border-radius: var(--tbx-r-sm); }
kbd, .kbd { padding: 1px 5px; font-size: var(--tbx-fs-tiny); border-radius: var(--tbx-r-sm); }
.empty-title { font-size: var(--tbx-fs-md); font-weight: 600; }
.nav-segmented { box-shadow: inset 0 0 0 1px var(--tbx-line); }

/* 2.5 The Ember hairline, the system's signature: along the bottom edge of
       the always-dark sidebar. Tabler has no variable for an edge accent. */
.navbar-vertical[data-bs-theme=dark],
.navbar-vertical[data-theme=dark] { box-shadow: inset 0 -2px 0 var(--tbx-heat); }

/* 2.6 Tabs: Tabler's own (folder tabs on the header's strip; the current
       one opens into the content), with the current tab marked by an Ember
       line along its top and set semibold (Matt 2026-10-05; Tabler marks it
       by its box alone). They never wrap: on a narrow screen the row scrolls
       sideways (Bootstrap's .nav sets flex-wrap: wrap). A scrolling row clips
       whatever hangs below it, so instead of Tabler's -1px margin on each tab
       the row itself reaches 1px further down, over the header's bottom
       border, which the current tab's bottom edge then covers. The other tabs
       lose the box Tabler draws on hover. */
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.card-header-tabs { margin-bottom: calc(-1 * var(--tblr-card-cap-padding-y) - 1px); }
.nav-tabs .nav-link { margin-bottom: 0; white-space: nowrap; }
.nav-tabs .nav-link:not(.active) { border-color: transparent; background: transparent; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { box-shadow: inset 0 2px 0 var(--tbx-heat); font-weight: 600; }

/* 2.7 Tinted category badges: Tabler colors the text with the fill color,
       which reads at 2.5-4:1 on its own tint. Each hue has an ink for text. */
.bg-red-lt    { color: var(--tbx-cat-red-ink) !important; }
.bg-orange-lt { color: var(--tbx-cat-orange-ink) !important; }
.bg-yellow-lt { color: var(--tbx-cat-yellow-ink) !important; }
.bg-lime-lt   { color: var(--tbx-cat-lime-ink) !important; }
.bg-green-lt  { color: var(--tbx-cat-green-ink) !important; }
.bg-teal-lt   { color: var(--tbx-cat-teal-ink) !important; }
.bg-cyan-lt   { color: var(--tbx-cat-cyan-ink) !important; }
.bg-azure-lt  { color: var(--tbx-cat-azure-ink) !important; }
.bg-blue-lt   { color: var(--tbx-cat-blue-ink) !important; }
.bg-indigo-lt { color: var(--tbx-cat-indigo-ink) !important; }
.bg-purple-lt { color: var(--tbx-cat-purple-ink) !important; }
.bg-pink-lt   { color: var(--tbx-cat-pink-ink) !important; }
.bg-secondary-lt { color: var(--tbx-ink-2) !important; }

/* 2.8 The searchable select (Tom Select, styled in tabler-vendors.css):
       sized with the same literals as the form controls above. Only matters
       on pages that load it. */
.ts-wrapper.form-control,
.ts-wrapper.form-select { padding: 0; }
.ts-wrapper.form-control .ts-control,
.ts-wrapper.form-select .ts-control {
  padding: var(--tblr-btn-input-padding-y) 28px var(--tblr-btn-input-padding-y) var(--tblr-btn-input-padding-x);
  font-size: var(--tblr-btn-input-font-size);
  line-height: var(--tblr-btn-input-line-height);
}
.ts-wrapper.form-control.multi.has-items .ts-control,
.ts-wrapper.form-select.multi.has-items .ts-control {
  padding-top: calc(var(--tblr-btn-input-padding-y) - 2px) !important;
  padding-bottom: 0;
}
.ts-wrapper.multi .ts-control > div { padding: 0 6px; border-radius: var(--tbx-r-sm); }
.ts-control input { font-size: inherit; }
.ts-control input::placeholder { color: var(--tbx-muted); }
.ts-dropdown { font-size: var(--tbx-fs-sm); border-color: var(--tbx-line); border-radius: var(--tbx-r); }
.ts-dropdown .option { padding: 5px 10px; }

/* 2.9 Link buttons: Tabler derives their color from "primary", which here
       is the solid. Links are blue. */
.btn-link,
.btn-link:hover { color: var(--tbx-link); }

/* 2.9b Fieldsets: Bootstrap's reboot floats a <legend> (float: left; width:
        100%) and clears only the element right after it (legend + *). When
        that element is hidden (an option a form hides, see [data-tbx-when]),
        the next one doesn't clear, and a floated checkbox or radio slides up
        beside the legend, to the far right. Every sibling clears instead. */
legend ~ * { clear: left; }

/* 2.10 Icons: Tabler draws them at a 1.5 stroke; Tacklebox uses 2. */
.icon { stroke-width: 2; }

/* 2.11 Global type details.
       Tabler switches on three of Inter's alternate letterforms for body
       text (cv11 single-story "a", cv03 and cv04 open "6" and "9") and
       switches ligatures off. Form controls and <button> elements don't
       inherit that, so a page ends up with two versions of Inter side by
       side, and neither matches the decks. Tacklebox uses Inter's default
       letterforms everywhere. */
body { font-feature-settings: normal; font-variant-numeric: tabular-nums; }

/* 2.12 Titles: Inter's display cut and tight tracking, as on slides.
       Left alone, a 15px title gets Inter's text cut and Tabler's zero
       tracking, which reads wider and softer than the same words on a
       slide. Everything that is a title asks for the display cut; reading
       text, labels, buttons and table cells keep the text cut, which is
       drawn for small sizes. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.empty-title,
.empty-header,
.navbar-brand {
  font-variation-settings: var(--tbx-font-title);
  letter-spacing: -0.011em;
}
.h1, .h2,
.page-title,
.modal-title,
.offcanvas-title,
.empty-title,
.navbar-brand { letter-spacing: var(--tbx-track-title); }
/* The big figure on an error page: Tabler sets it light (300). Tacklebox has
   no light weight; big figures are 600, as on slides. */
.empty-header { font-weight: 600; letter-spacing: -0.035em; }
/* Small labels that happen to sit in, or be, a heading element keep the
   text cut. */
.subheader,
.badge,
.status,
.tag { font-variation-settings: normal; }
/* Inside a title: an identifier is never tracked, and a regular-weight
   aside ("19 of 24") goes back to reading text. */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) :is(.font-monospace, code) { letter-spacing: 0; }
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) .fw-normal { font-variation-settings: normal; letter-spacing: 0; }
.footer { padding: var(--tbx-5) 0; font-size: var(--tbx-fs-tiny); color: var(--tbx-muted); }

/* 2.13 The brand at the top of the sidebar. Tabler draws the mark 2rem
        tall; Tacklebox sets it at 1.5rem, with the name beside it in
        lowercase. The template still says "Tacklebox", so the accessible
        name and anything that copies the text keep the capital. */
.navbar-brand-image { height: 1.5rem; }
.navbar-brand .nav-link-title { text-transform: lowercase; }

/* 2.14 The folded sidebar (the 56px icon rail, 1.2). Tabler folds by shrinking each
        title to zero width and lays the rest out from the start; the rail is sized
        so the icons are centered there, and centering the rows keeps them so if a
        size changes. The brand's title leaves (display: none), taking its gap-2 with
        it. Each 18px icon is centered in Tabler's 20px icon box, folded or not. */
.navbar-vertical .nav-link-icon { display: inline-flex; align-items: center; justify-content: center; }
html[data-bs-sidebar^=folded] .navbar-vertical :is(.navbar-brand, .navbar-nav .nav-link) { justify-content: center; }
html[data-bs-sidebar^=folded] .navbar-vertical .navbar-brand .nav-link-title { display: none; }

/* 2.15 The user, at the foot of the sidebar (Tabler's .navbar-footer). Tabler
        opens its menu upward, over the sidebar; ours opens beside the sidebar,
        open or folded, level with the row's bottom, the way an area's fly-out
        opens beside the folded rail. Below 992px the footer sits in the phone
        bar and the menu drops down, as Tabler has it; the unfolded menu goes
        after the footer there, so the avatar stays in the bar. */
@media (min-width: 992px) {
  .navbar-vertical .navbar-footer .dropup .dropdown-menu {
    inset-inline-start: calc(100% + var(--tblr-sidebar-inset) + var(--tbx-2));
    top: auto;
    bottom: 0;
    margin: 0;
  }
}
@media (max-width: 991.98px) {
  .navbar-vertical .navbar-collapse { order: 1; }
}