/* TWFE tokens — settings only, on top of stock Tabler 1.4.0.
 *
 * This file may contain three things and nothing else:
 *   1. @font-face for the two brand fonts (vendored woff2)
 *   2. Values for CSS variables that Tabler/Bootstrap document for theming
 *   3. The two load-bearing rules kept from the old system: .num and the
 *      toast container's pointer-events
 *
 * No component CSS. No positioning, edges or z-index. If a look cannot be
 * reached from here, use a different stock Tabler component instead of
 * adding a rule. See DESIGN-GUIDE.md.
 *
 * Load order on every page:
 *   tabler-1.4.0.min.css
 *   tabler-vendors-1.4.0.min.css   (only if the page uses Tom Select,
 *                                   Litepicker, ApexCharts etc)
 *   twfe-tokens.css                (always last)
 */

/* 1. Brand fonts, vendored. Never hotlink a font CDN. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/vendor/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/bebas-neue-400.woff2") format("woff2");
}

/* 2. Tabler variables. Light theme only; dark mode stays off. */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {   /* dark is listed so that a page which forgets
                              data-bs-theme="light" still gets our colours */
  /* Type: Poppins, one size per surface, weight is the only emphasis */
  --tblr-font-sans-serif: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --tblr-body-font-size: 12.5px;
  --tblr-font-weight-bold: 500;
  --tblr-font-weight-medium: 500;
  --tblr-font-weight-headings: 500;

  /* Corners: 2px on controls */
  --tblr-border-radius: 2px;
  --tblr-border-radius-sm: 2px;
  --tblr-border-radius-lg: 2px;

  /* Brand: Deep Blue primary, Aqua Blue hover via links.
     Anything sitting ON the blue is pure white. Tabler's own default here is
     #f9fafb, an off-white that reads as grey text on a dark blue button. */
  --tblr-primary: #0071b1;
  --tblr-primary-rgb: 0, 113, 177;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: #0071b1;
  --tblr-link-color-rgb: 0, 113, 177;
  --tblr-link-hover-color: #008ec8;
  --tblr-link-hover-color-rgb: 0, 142, 200;

  /* Status set: Farm Green, Attention amber, Problem red, Info aqua.
     Tabler derives the pale -lt fills from these itself. */
  --tblr-success: #82ac43;
  --tblr-success-rgb: 130, 172, 67;
  --tblr-warning: #e0a94a;
  --tblr-warning-rgb: 224, 169, 74;
  --tblr-danger: #b5322b;
  --tblr-danger-rgb: 181, 50, 43;
  --tblr-info: #008ec8;
  --tblr-info-rgb: 0, 142, 200;

  /* Text: black for anything that matters, one grey ONLY for secondary.
     Every background is white. There is no dark surface anywhere and dark
     mode is not used.

     The secondary grey is #6b6a6b, NOT the brand's Mid Grey #808285. Mid Grey
     text measures 3.85:1 on white and 3.53:1 on a heading tint, both under the
     4.5:1 floor, which is why grey callouts kept reading as unreadable.
     #6b6a6b measures 5.3:1 on white and 4.8:1 on the tint. Mid Grey stays a
     border and decoration colour, never text. */
  --tblr-body-color: #000000;
  --tblr-body-color-rgb: 0, 0, 0;
  --tblr-body-bg: #ffffff;
  --tblr-bg-surface: #ffffff;
  --tblr-secondary: #6b6a6b;
  --tblr-secondary-rgb: 107, 106, 107;
  --tblr-muted: #6b6a6b;
  --tblr-tertiary: #6b6a6b;   /* input placeholders */
  --tblr-dark: #000000;
  --tblr-dark-rgb: 0, 0, 0;

  /* A card's header and footer keep their faint tint, because the dashboard
     designs use a tinted bar for a section heading. What was wrong was the
     text on it: Tabler greys it, which put headings and legends at 3.7:1. */
  --tblr-card-cap-color: #000000;

  /* Borders: one Tabler variable carries the brief's grey family */
  --tblr-border-color: #dcdedf;
}

/* Mobile reads at arm's length, so it takes the larger of the two sizes.
   Below Bootstrap's md breakpoint, which is where the nav collapses. */
@media (max-width: 767.98px) {
  :root,
  [data-bs-theme="light"],
  [data-bs-theme="dark"] {
    --tblr-body-font-size: 14px;
  }
}

/* 3. Brand corrections.
 *
 * Places where a Tabler default contradicts a locked brand rule. Each one is
 * listed in DESIGN-GUIDE.md with its reason. This list does not grow without a
 * decision.
 */

/* The top nav is the one charcoal thing on a TWFE screen, and the only place
   Rich Charcoal appears as a surface. The wordmark is white, the links are the
   pale grey off the brand guidelines, and the page you are on is white on a
   solid blue block. Every surface below it is still white.

   Tabler sets all of these on .navbar itself, so a :root value never reaches
   them. `--tblr-navbar-active-border-color` is what Tabler draws the underline
   from, on `.nav-item.active:after`, which is why `active` belongs on the
   nav-item here and on the nav-link in a sidebar. `--tblr-navbar-active-bg`
   does not touch that item at all despite the name: the only thing it colours
   is a dropdown item being pressed inside the folded phone menu. It is set to
   the same blue so that menu marks a press the same way the bar marks a page. */
.navbar {
  --tblr-navbar-bg: #434243;
  --tblr-navbar-color: #d7d8d9;
  --tblr-navbar-hover-color: #ffffff;
  --tblr-navbar-active-color: #ffffff;
  --tblr-navbar-active-border-color: #0071b1;
  --tblr-navbar-active-bg: #0071b1;
  --tblr-navbar-brand-color: #ffffff;
  --tblr-navbar-brand-hover-color: #ffffff;
  --tblr-navbar-border-color: #c9cbcc;
}

/* Correction 7. The page you are on is a solid blue block, not an underline.
   Zach's decision, 22 August 2026, and it overrides the artboards, which draw
   a Farm Green underline.

   Two reasons it is not just a colour change. Tabler's underline is 2px at
   `bottom:-.25rem`, so it hangs below the charcoal onto the white page and is
   easy to miss on a bar you glance at all day. And Farm Green cannot be the
   marker anyway: it is a state colour everywhere else on a TWFE screen, and
   the page you are on is not a state.

   This is the only correction in this file that writes a property rather than
   assigning a documented variable, because Tabler ships no variable for the
   active item's background.

   Measured: the word on the block is white on #0071b1 at 5.25:1, over the
   4.5:1 floor for text. The block itself against the charcoal is 1.9:1, under
   the 3:1 that WCAG asks of a shape that carries meaning. It reads clearly
   because the hue difference is large, but a person who cannot separate blue
   from grey is relying on nothing else, since the active word is white and the
   rest are near enough. Raised with Zach 22 August 2026; a lighter blue is the
   fix if it is ever wanted, and it would change the blue everywhere. */
.navbar .nav-item.active .nav-link { background: #0071b1; }
.navbar .nav-item.active:after { display: none; }

/* Navigation is not secondary information, so it is black. Tabler greys every
   nav link by default. The page you are on is the one coloured thing: a solid
   blue block in the sidebar, blue text and a blue underline in a tab strip,
   which is what the dashboard designs show. Tabler defines each of these on
   the component itself, so a :root value never reaches them. */
.nav {
  --tblr-nav-link-color: #000000;
  --tblr-nav-link-hover-color: #0071b1;
}
.nav-pills {
  --tblr-nav-pills-link-active-color: #ffffff;
  --tblr-nav-pills-link-active-bg: #0071b1;
}
.nav-tabs {
  --tblr-nav-tabs-link-active-color: #0071b1;
  --tblr-nav-tabs-link-active-border-color: #0071b1;
}

/* A row you are pointing at, a row you have ticked, and the stripe under the
   ones between. Straight off the mockups: the hover and the selected tints are
   the two blues the brief gives for "you are here" and "selected", and the
   stripe is the same near-white every TWFE surface uses.

   Tabler sets all four on `.table` itself, so a `:root` value never reaches
   them. Variables only, and they are what makes a 22px row scannable: without
   the hover the eye loses the line halfway across a screen of twelve columns. */
.table {
  --tblr-table-striped-bg: #fafbfb;
  --tblr-table-hover-bg: #eef7fc;
  --tblr-table-active-bg: #e6f1f9;
  --tblr-table-border-color: #eceeef;
}

/* Table headings are sentence case at the page's one type size. Tabler sets
   them uppercase, letter spaced and smaller, which breaks three brand rules at
   once and disagrees with the AG Grid headers sitting beside them on the same
   screen. */
.table thead th {
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  color: #000000;
}

/* An on switch is Farm Green, because being on is a state and the brand gives
   states green, amber and red. Tabler checks every control in primary blue,
   which the brand reserves for links and the one primary action. Switches
   only: tick boxes stay blue, and so does AG Grid's tick column.

   Pale green is the same correction's second half: it means "on because
   something else implies it", which on the catalogue is an Ascora slider held
   on by Lightspeed. DESIGN-SYSTEM 5.11 names both colours. */
.form-switch .form-check-input:checked {
  background-color: #82ac43;
}
.form-switch .form-check-input:checked[data-implied] {
  background-color: #cddcb4;
}

/* The word in a state pill is black. Tabler draws every `-lt` utility as the
   status colour ON a pale tint of itself, which works with its own darker
   palette and does not work with ours: measured in the browser, Farm Green on
   its tint is 2.44:1, the amber 1.91:1 and the aqua 3.27:1, against the 4.5:1
   floor. Farm Green cannot pass as text at all, not even on pure white, which
   is 2.65:1, so darkening the tint does not rescue it and darkening the green
   would change the brand everywhere it appears.

   The fill still carries the state and is untouched. Only the word changes, to
   19:1. Approved 20 August 2026 as the sixth sanctioned correction.

   `bg-danger-lt` and `bg-secondary-lt` are deliberately not listed: they
   measure 5.34:1 and 4.85:1 and already pass. Tabler sets the colour with
   `!important`, so this has to as well. */
.bg-success-lt,
.bg-warning-lt,
.bg-info-lt {
  color: #000000 !important;
}

/* Same correction, same reason, one control further on: an amber outline
   filter button is amber text on white, which is 2.11:1. The border and the
   hover fill still carry the amber. Tabler builds the button from
   `--tblr-btn-color` on the class itself, so this is a variable assignment
   like the navbar and the nav above it, not a rule aimed at a component.
   `.btn-outline-danger` is 6.08:1 and is left alone. */
.btn-outline-warning,
.btn-outline.btn-warning {
  --tblr-btn-color: #000000;
}

/* 4. The two rules kept from the old system, verbatim. */

/* Money and counts: right aligned, fixed width digits, header cell too.
   A ledger whose digits wander cannot be scanned. */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The toast container must ignore the pointer. A full width invisible
   layer over the page ate clicks on receivables for weeks. */
.toast-container {
  pointer-events: none;
}
.toast-container .toast {
  pointer-events: auto;
}