/* The operator admin's look: CompSup's design system, approved by Chris on 7 Nov 2026 as the mock-up showed it. Neutral
   surfaces; density, type and hairlines do the work; the brand only where something is done; a status colour by what it
   means (green done or live, amber needs a person, red stopped or failed, violet scheduled, grey finished - blue is
   never a status).
   One UNLAYERED stylesheet, last in the head (AdminPanelProvider, after phone.css). Filament 5 puts all of its CSS in
   @layer, so any rule here wins whatever its specificity - except Filament's own !important rules and inline styles,
   which are never fought here. Specificity matters only against the other unlayered CSS on the page: phone.css (before
   this file), the inline <style> of .cs-workspace, .cs-viewsite and .rb-np (in the body, so after it) and analytics.css.
   Dark mode is Filament's html.dark class. A rule written only in the --cs-* tokens needs no dark twin, because they
   switch there; a rule with a literal colour has one, since Filament's dark rules are :where(.dark ...) and a light
   rule here would otherwise win in dark too.
   Never touched from here: views, Livewire keys, FilePond's item positioning, the repeater's DOM, input.fi-input's font
   size (Filament's 16px, which keeps iOS from zooming). The greys and the violet "info" are Filament colours
   (CompSupBrand::adminColors), so the badge text shades Filament picks are picked for them. ASCII only. */

/* ---------- 1. tokens ---------- */
html:root{
  --cs-rail:#f7f8fa;--cs-canvas:#ffffff;--cs-surface:#ffffff;--cs-raised:#ffffff;--cs-strip:#f7f8fa;--cs-subtle:#f3f5f8;
  --cs-line:#e2e5ea;--cs-line-strong:#cbd1d9;
  --cs-ink:#0e1726;--cs-ink-2:#3b4658;--cs-ink-3:#667085;--cs-ink-4:#98a2b3;
  --cs-accent-ink:#0648ad;--cs-accent-tint:#eef5ff;--cs-focus:var(--primary-600);
  --cs-pop:0 16px 48px -12px rgba(9,14,24,.35);
}
html.dark:root{
  --cs-rail:#0a0f17;--cs-canvas:#0c121b;--cs-surface:#111824;--cs-raised:#161e2b;--cs-strip:#151d2a;
  --cs-subtle:rgba(255,255,255,.04);--cs-line:#1f2836;--cs-line-strong:#2a3546;
  --cs-ink:#e6eaf0;--cs-ink-2:#b6bfcc;--cs-ink-3:#8792a3;--cs-ink-4:#5b6678;
  --cs-accent-ink:#4d93ff;--cs-accent-tint:rgba(4,110,255,.14);--cs-focus:#3d8bff;
  --cs-pop:0 16px 48px -12px rgba(0,0,0,.6);
}
/* four corner sizes for the whole admin: 8 (containers), 6 (controls), 4 (badges), round (avatars, toggles) */
.fi-body{--radius-xl:.5rem;--radius-lg:.375rem;--radius-md:.25rem;background:var(--cs-canvas);color:var(--cs-ink)}
.fi-ta-table,.fi-wi-stats-overview-stat-value,.fi-in-entry-content{font-variant-numeric:tabular-nums}

/* ---------- 2. frame: topbar and sidebar ---------- */
.fi-topbar{background:var(--cs-canvas);box-shadow:inset 0 -1px 0 var(--cs-line)}
/* the way back to the site is a quiet secondary button, not a second blue one (beats the partial's own <style>) */
.fi-body .fi-topbar .cs-viewsite{height:2rem;padding:0 .75rem;border-color:var(--cs-line-strong);border-radius:.375rem;
  color:var(--cs-ink-2);font-size:.8125rem;font-weight:500;background:var(--cs-surface)}
.fi-body .fi-topbar .cs-viewsite svg{color:var(--cs-ink-3)}
@media (hover:hover){.fi-body .fi-topbar .cs-viewsite:hover{background:var(--cs-subtle);color:var(--cs-ink)}}
.fi-body .fi-topbar .cs-viewsite:focus-visible{outline-color:var(--cs-focus)}
@media (max-width:640px){.fi-body .fi-topbar .cs-viewsite{padding:0 .55rem}}
@media (min-width:64rem){
  .fi-main-sidebar{background:var(--cs-rail);box-shadow:inset -1px 0 0 var(--cs-line)}
}
.fi-main-sidebar.fi-sidebar-open{background:var(--cs-rail)}
.fi-sidebar-nav{padding:1rem 1rem 1.5rem;row-gap:1.125rem}
.fi-sidebar-nav-groups{row-gap:1.125rem}
.fi-sidebar-group{row-gap:2px}
.fi-sidebar-group-items{row-gap:1px}
.fi-sidebar-group-btn{padding:.25rem .625rem}
.fi-sidebar-group-label{font-size:.71875rem;line-height:1rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-ink-3)}
.fi-sidebar-group-btn .fi-icon{color:var(--cs-ink-3)}
.fi-sidebar-item-btn{padding:.375rem .625rem;border-radius:.375rem;column-gap:.625rem}
.fi-sidebar-item-btn>.fi-icon{width:1.125rem;height:1.125rem;color:var(--cs-ink-3)}
.fi-sidebar-item-label{font-size:.84375rem;font-weight:500;color:var(--cs-ink-2)}
@media (hover:hover){.fi-sidebar-item-btn:hover{background:var(--cs-subtle)}}
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn{background:var(--cs-accent-tint)}
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-sidebar-item-label,
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-icon{color:var(--cs-accent-ink)}
.fi-sidebar-item-btn:focus-visible{box-shadow:inset 0 0 0 2px var(--cs-focus)}
/* whose admin this is: a quiet heading over the menu, not the loudest box in it (beats the hook's own <style>) */
.fi-body .fi-sidebar .cs-workspace{background:transparent;border:0;border-radius:0;padding:.25rem .625rem .75rem;margin:0 0 .25rem;
  box-shadow:inset 0 -1px 0 var(--cs-line)}
.fi-body .fi-sidebar .cs-workspace__label{color:var(--cs-ink-3);font-size:.6875rem}
.fi-body .fi-sidebar .cs-workspace__name{color:var(--cs-ink);font-size:.875rem;font-weight:600}
/* the folded menu (sidebarCollapsibleOnDesktop) is an icon rail 4.5rem wide: Filament's own inline padding there, which
   centres the icons, and no workspace name */
@media (min-width:64rem){
  .fi-body-has-sidebar-collapsible-on-desktop .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav{padding-inline:1.5rem 0}
  .fi-body-has-sidebar-collapsible-on-desktop .fi-main-sidebar:not(.fi-sidebar-open) .cs-workspace{display:none}
}

/* ---------- 3. the page: its header, then 24px between its blocks and 20px inside them ---------- */
.fi-page-header-main-ctn{padding-block:1.25rem 1.75rem;row-gap:1.25rem}
.fi-header{align-items:flex-start}
.fi-header-heading{font-size:1.375rem;line-height:1.875rem;font-weight:600;letter-spacing:-.01em;color:var(--cs-ink)}
.fi-header-subheading{margin-top:.25rem;max-width:72ch;font-size:.875rem;line-height:1.375rem;color:var(--cs-ink-3)}
.fi-breadcrumbs-item-label{font-size:.78125rem;color:var(--cs-ink-3)}
.fi-header-actions-ctn .fi-ac,.fi-header .fi-ac{gap:.5rem}
@media (max-width:639px){
  .fi-header-heading{font-size:1.125rem;line-height:1.5rem}
  .fi-page-header-main-ctn{padding-block:1rem 1.25rem}
}
/* the Competitions subtitle shows only while the DCMS code 1.10 is broken (ListCompetitions::getSubheading): a warning */
.fi-resource-list-records-page.fi-resource-competitions .fi-header-subheading{max-width:46rem;padding:.625rem .875rem;
  border-radius:.375rem;font-weight:500;background:#fffbeb;color:#92400e;box-shadow:inset 2px 0 0 #f59e0b}
html.dark .fi-resource-list-records-page.fi-resource-competitions .fi-header-subheading{background:rgba(245,194,107,.07);
  color:#f5c26b;box-shadow:inset 2px 0 0 #f5c26b}
.fi-page-content{row-gap:1.5rem}
.fi-sc.fi-sc-has-gap{gap:1.25rem}

/* ---------- 4. containers: one hairline, no shadow, and nothing nested inside a card is a card again ---------- */
:is(.fi-section:not(.fi-section-not-contained):not(.fi-aside),.fi-section:not(.fi-section-not-contained).fi-aside>.fi-section-content-ctn,
  .fi-ta-ctn,.fi-fo-repeater-item,.fi-callout,.fi-empty-state){background-color:var(--cs-surface);--tw-ring-color:var(--cs-line);--tw-shadow:0 0 #0000}
.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-secondary{background-color:var(--cs-strip)}
.fi-section:not(.fi-section-not-contained):not(.fi-aside)>.fi-section-header{padding:.875rem 1.25rem}
.fi-section:not(.fi-section-not-contained):not(.fi-divided)>.fi-section-content-ctn>.fi-section-content{padding:1.25rem}
.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed)>.fi-section-content-ctn,
.fi-section:not(.fi-section-not-contained)>.fi-section-content-ctn>.fi-section-footer{border-color:var(--cs-line)}
.fi-section:not(.fi-section-not-contained)>.fi-section-content-ctn>.fi-section-footer{padding:.75rem 1.25rem}
.fi-section-header-heading{font-size:.90625rem;line-height:1.375rem;font-weight:600;color:var(--cs-ink)}
.fi-section-header-description{font-size:.8125rem;line-height:1.25rem;color:var(--cs-ink-3)}
/* a section inside a section's content is a titled group under a rule, not a box in a box */
.fi-section-content .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section-content .fi-section:not(.fi-section-not-contained).fi-aside>.fi-section-content-ctn{
  background:transparent;--tw-ring-color:transparent;border-radius:0;box-shadow:inset 0 1px 0 var(--cs-line)}
.fi-section-content .fi-section:not(.fi-section-not-contained):not(.fi-aside)>.fi-section-header{padding:.875rem 0 .625rem}
.fi-section-content .fi-section:not(.fi-section-not-contained):not(.fi-divided)>.fi-section-content-ctn>.fi-section-content{padding:.25rem 0 0}
.fi-section-content .fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed)>.fi-section-content-ctn{border-top:0}
.fi-fieldset:not(.fi-fieldset-not-contained){border-color:var(--cs-line);border-radius:.375rem;padding:1rem}
.fi-fieldset>legend{font-size:.78125rem;font-weight:600;color:var(--cs-ink-2)}
/* a menu or a dialog floats: a raised surface on a stronger edge, and a menu a shadow of its own */
:is(.fi-dropdown-panel,.fi-modal-window){background-color:var(--cs-raised);--tw-ring-color:var(--cs-line-strong)}
.fi-dropdown-panel{box-shadow:0 0 0 1px var(--cs-line-strong),var(--cs-pop)}

/* ---------- 5. tabs: an underline strip, never a card around the cards ---------- */
.fi-sc-tabs.fi-contained{background:transparent;--tw-ring-color:transparent;--tw-shadow:0 0 #0000;border-radius:0}
.fi-tabs.fi-contained,.fi-tabs:not(.fi-contained){border-bottom:0;padding:0;border-radius:0;background:transparent;
  --tw-ring-color:transparent;--tw-shadow:0 0 #0000;box-shadow:inset 0 -1px 0 var(--cs-line);column-gap:.25rem;margin-inline:0}
/* a tab that has moved under the "..." menu keeps Filament's own box: hidden it is 1px with no padding, and open it
   is a menu row sized by the tabs script - padding from here would give the hidden one a box with clipped words */
.fi-tabs-item:not(.fi-sc-tabs-header-overflow){border-radius:0;padding:.625rem .75rem}
.fi-tabs-item .fi-tabs-item-label{font-size:.84375rem;font-weight:500;color:var(--cs-ink-3)}
.fi-tabs-item>.fi-icon{color:var(--cs-ink-3)}
.fi-tabs-item.fi-active:not(.fi-sc-tabs-header-overflow){background:transparent;box-shadow:inset 0 -2px 0 var(--cs-focus)}
.fi-tabs-item.fi-active .fi-tabs-item-label{color:var(--cs-ink)}
.fi-tabs-item.fi-active>.fi-icon{color:var(--cs-accent-ink)}
@media (hover:hover){.fi-tabs-item:not(.fi-active):hover .fi-tabs-item-label{color:var(--cs-ink)}}
.fi-tabs-item:focus-visible{box-shadow:inset 0 0 0 2px var(--cs-focus)}
.fi-sc-tabs.fi-contained .fi-sc-tabs-tab.fi-active{padding:1.25rem 0 0}
.fi-sc-tabs .fi-sc-tabs-tab.fi-active{margin-top:1.25rem}
.fi-sc-tabs.fi-contained .fi-sc-tabs-tab.fi-active{margin-top:0}

/* ---------- 6. forms ---------- */
.fi-input-wrp{background-color:var(--cs-surface);--tw-ring-color:var(--cs-line-strong);--tw-shadow:0 0 #0000}
html.dark .fi-input-wrp{background-color:rgba(255,255,255,.025)}
.fi-input-wrp.fi-disabled{background-color:var(--cs-subtle)}
html.dark .fi-input-wrp.fi-disabled{background-color:transparent}
.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within{--tw-ring-color:var(--cs-focus)}
.fi-input-wrp.fi-invalid,.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)).fi-invalid:focus-within{--tw-ring-color:var(--danger-600)}
html.dark .fi-input-wrp.fi-invalid,html.dark .fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)).fi-invalid:focus-within{--tw-ring-color:var(--danger-500)}
.fi-fo-field-label-content{font-size:.8125rem;font-weight:500;color:var(--cs-ink-2)}
.fi-fo-field-content-col .fi-sc-text,.fi-fo-field-label-col .fi-sc-text{font-size:.78125rem;line-height:1.25rem}
.fi-fo-field-wrp-error-message{font-size:.78125rem}
.fi-in-entry-label{font-size:.78125rem;font-weight:500;color:var(--cs-ink-3)}
.fi-checkbox-input{--tw-ring-color:var(--cs-line-strong)}
/* placeholder words - an empty field's hint, an empty value's "-" or "none" in a list or a record - at the muted ink
   (4.98:1 light, 5.6:1 dark), where Filament gives its 400 and 500 greys (2.6:1, 3.5-3.7:1): they are text, so 4.5:1. A
   disabled field keeps Filament's own, as WCAG leaves it out. The pseudo-elements get a rule of their own, so a browser
   that refuses one selector there cannot take the rest down with it */
.fi-select-input-placeholder:not(.fi-disabled *),.fi-in-entry .fi-in-placeholder,.fi-ta-cell .fi-ta-placeholder,
.fi-fo-markdown-editor-placeholder,.fi-fo-modal-table-select-placeholder{color:var(--cs-ink-3)}
:is(input.fi-input,.fi-fo-textarea textarea,.fi-fo-date-time-picker-display-text-input):not(:disabled)::placeholder{color:var(--cs-ink-3)}
.fi-fo-rich-editor .tiptap p.is-editor-empty:first-child::before{color:var(--cs-ink-3)}

/* uploads: an empty box is a dashed drop area, a filled one a solid frame; colours only - FilePond's layout is its own */
.fi-fo-file-upload .filepond--root{--tw-shadow:0 0 #0000;--tw-ring-color:transparent;background-color:var(--cs-strip);
  outline:1px dashed var(--cs-line-strong);outline-offset:-1px}
.fi-fo-file-upload .filepond--root:has(.filepond--item){outline-style:solid;background-color:var(--cs-surface)}
.fi-fo-file-upload .filepond--root[data-hopper-state=drag-over]{outline:2px dashed var(--cs-focus);background-color:var(--cs-accent-tint)}
@media (hover:hover){.fi-fo-file-upload .filepond--root:not([data-disabled]):hover{outline-color:var(--cs-focus)}}
.fi-fo-file-upload .filepond--drop-label,.fi-fo-file-upload .filepond--drop-label label{font-size:.8125rem}
.fi-fo-file-upload .filepond--item-panel{background-color:#1f2734}
.fi-fo-file-upload [data-filepond-item-state=processing-complete] .filepond--item-panel{background-color:#15803d}
.fi-fo-file-upload :is([data-filepond-item-state*=error],[data-filepond-item-state*=invalid]) .filepond--item-panel{background-color:#b91c1c}

/* repeaters: a prize row is a ruled row with a strip for its handle and buttons */
.fi-fo-repeater-item{border-radius:.375rem}
html.dark .fi-fo-repeater-item{background-color:rgba(255,255,255,.02)}
.fi-fo-repeater-item-header{background:var(--cs-strip);padding:.375rem .75rem;border-radius:.375rem .375rem 0 0}
.fi-fo-repeater-item.fi-collapsed .fi-fo-repeater-item-header{border-radius:.375rem}
.fi-fo-repeater-item-header-label{font-size:.8125rem;font-weight:600;color:var(--cs-ink)}
.fi-fo-repeater-item-has-header>.fi-fo-repeater-item-content{border-top-color:var(--cs-line)}
.fi-fo-repeater-item-content{padding:1rem}

/* ---------- 7. buttons: one filled action, the rest drawn quietly in their own colour ---------- */
.fi-btn{font-weight:500}
.fi-btn.fi-color-primary:not(.fi-outlined):not(label):not([aria-pressed]){--bg:var(--primary-600);--hover-bg:var(--primary-700);
  --text:#fff;--hover-text:#fff;--dark-bg:var(--primary-600);--dark-hover-bg:#0b63e5;--dark-text:#fff;--dark-hover-text:#fff}
/* secondary: no colour, or gray */
.fi-btn:not(.fi-color):not(.fi-outlined),.fi-btn.fi-color-gray:not(.fi-outlined):not(label):not([aria-pressed]){
  background-color:var(--cs-surface);color:var(--cs-ink);--tw-ring-color:var(--cs-line-strong);--tw-shadow:0 0 #0000;
  --bg:var(--cs-surface);--text:var(--cs-ink);--dark-bg:var(--cs-surface);--dark-text:var(--cs-ink)}
.fi-btn.fi-color-gray:not(.fi-outlined):not(label):not([aria-pressed]){outline:1px solid var(--cs-line-strong);outline-offset:-1px}
.fi-btn:not(.fi-color)>.fi-icon,.fi-btn.fi-color-gray>.fi-icon{color:var(--cs-ink-3)}
@media (hover:hover){
  .fi-btn:not(.fi-color):not(.fi-outlined):not(.fi-disabled):not([disabled]):hover,
  .fi-btn.fi-color-gray:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover{background-color:var(--cs-subtle);--hover-bg:var(--cs-subtle);--dark-hover-bg:var(--cs-subtle)}
}
/* success, warning, danger, info: a tint with an edge, so a page of actions is not a wall of solid colour */
.fi-btn.fi-color:not(.fi-outlined):not(.fi-color-primary):not(.fi-color-gray):not(label):not([aria-pressed]):not(.fi-modal-footer *){
  --bg:var(--color-50);--hover-bg:var(--color-100);--text:var(--color-700);--hover-text:var(--color-800);
  --dark-bg:color-mix(in oklab,var(--color-500) 14%,transparent);--dark-hover-bg:color-mix(in oklab,var(--color-500) 22%,transparent);
  --dark-text:var(--color-300);--dark-hover-text:var(--color-200);
  outline:1px solid color-mix(in oklab,var(--color-600) 24%,transparent);outline-offset:-1px}
html.dark .fi-btn.fi-color:not(.fi-outlined):not(.fi-color-primary):not(.fi-color-gray):not(label):not([aria-pressed]):not(.fi-modal-footer *){
  outline-color:color-mix(in oklab,var(--color-400) 35%,transparent)}
.fi-btn.fi-color:not(.fi-outlined):not(.fi-color-primary):not(.fi-color-gray):not(.fi-modal-footer *)>.fi-icon{color:currentColor}
.fi-btn.fi-outlined{--tw-shadow:0 0 #0000}
/* one focus colour: light is the primary button's own blue (6.2:1 on white), dark a lighter blue (5:1 and up) */
.fi-body .fi-btn:focus-visible,.fi-body .fi-icon-btn:focus-visible,.fi-body .fi-toggle:focus-visible{--tw-ring-color:var(--cs-focus)}
/* tertiary: a row's actions are words in ink, blue when pointed at; Delete keeps its red */
.fi-ta-actions .fi-link:not(.fi-color-danger),.fi-ta-actions .fi-link:not(.fi-color-danger) .fi-link-label{color:var(--cs-ink-2);font-weight:500}
.fi-ta-actions .fi-link:not(.fi-color-danger)>.fi-icon{color:var(--cs-ink-3)}
@media (hover:hover){.fi-ta-actions .fi-link:not(.fi-color-danger):hover,.fi-ta-actions .fi-link:not(.fi-color-danger):hover .fi-link-label{color:var(--cs-accent-ink)}}
.fi-icon-btn:not(.fi-color){color:var(--cs-ink-3)}

/* ---------- 8. status: one shape, the colour by meaning (the colours themselves are set per column in the build) ---------- */
.fi-badge{border-radius:.25rem;--tw-ring-color:transparent;font-weight:600;background-color:var(--cs-subtle);color:var(--cs-ink-2)}
.fi-badge.fi-color{background-color:var(--color-50);color:var(--text)}
html.dark .fi-badge.fi-color{background-color:color-mix(in oklab,var(--color-500) 16%,transparent);color:var(--dark-text)}
html.dark .fi-badge:not(.fi-color){background-color:rgba(255,255,255,.06)}
.fi-ta-cell-status .fi-badge-label::first-letter{text-transform:uppercase}

/* ---------- 9. tables ---------- */
.fi-ta-ctn{border-radius:.5rem}
.fi-ta-ctn :is(.fi-ta-header,.fi-ta-header-toolbar,.fi-pagination,.fi-ta-empty-state),.fi-ta-ctn :is(table,thead,tbody,tfoot,tr,th,td){border-color:var(--cs-line)}
.fi-ta-ctn .fi-ta-header-toolbar{padding-block:.625rem}
.fi-ta-ctn .fi-ta-header{padding-block:.875rem}
.fi-ta-ctn .fi-ta-header .fi-ta-header-heading{font-size:.90625rem;font-weight:600}
.fi-ta-ctn .fi-ta-header .fi-ta-header-description{font-size:.8125rem;color:var(--cs-ink-3)}
.fi-ta-table>thead>tr{background:var(--cs-strip)}
.fi-ta-header-cell{padding-block:.5625rem;font-size:.75rem;line-height:1rem;font-weight:600;color:var(--cs-ink-3)}
.fi-ta-header-cell-sorted .fi-icon,.fi-ta-header-cell-sort-btn{color:inherit}
.fi-ta-header-cell-sorted{color:var(--cs-ink)}
.fi-ta-text-item:not(.fi-color){color:var(--cs-ink)}
.fi-ta-cell .fi-ta-text-item:not(.fi-size-lg){font-size:.8125rem;line-height:1.25rem}
.fi-ta-cell .fi-ta-text-item.fi-color-gray{color:var(--cs-ink-3)}
.fi-ta-text>.fi-ta-text-description{font-size:.75rem;line-height:1.125rem;color:var(--cs-ink-3)}
:is(.fi-ta-text,.fi-ta-icon,.fi-ta-image,.fi-ta-color,.fi-ta-checkbox,.fi-ta-toggle,.fi-ta-select,.fi-ta-text-input):not(.fi-inline){padding-block:.625rem}
.fi-ta-cell:has(.fi-ta-actions){padding-block:.5rem}
@media (hover:hover){.fi-ta-row.fi-clickable:hover{background:var(--cs-subtle)}}
.fi-ta-row.fi-selected,.fi-ta-row.fi-striped{background:var(--cs-subtle)}
.fi-ta-ctn .fi-pagination{padding-block:.5rem}
.fi-pagination-items{--tw-ring-color:var(--cs-line-strong);--tw-shadow:0 0 #0000}
/* the page you are on: in dark its number sits on two 5% white layers (the strip's and its own), where the 400 blue is
   4.45:1, so the 300 (6.5:1); light keeps Filament's 700 on its grey (7.8:1) */
html.dark .fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-label{color:var(--primary-300)}
/* an empty list says so on the left, in the row's own size, with its button under the words */
.fi-ta-empty-state{padding:1.5rem}
.fi-ta-empty-state-content{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;justify-items:start;text-align:start;max-width:none;margin-inline:0}
.fi-ta-empty-state-content>:not(.fi-ta-empty-state-icon-bg){grid-column:2}
.fi-ta-empty-state-icon-bg{grid-row:1/span 3;align-self:start;border-radius:.375rem;background:var(--cs-strip);padding:.5rem;margin:0}
.fi-ta-empty-state-heading{font-size:.90625rem;font-weight:600;margin:0}
.fi-ta-empty-state-description{font-size:.8125rem;color:var(--cs-ink-3);margin-top:.125rem}
.fi-ta-empty-state .fi-ta-actions{margin-top:.75rem}

/* ---------- 10. figures: one strip of cells, not a wall of cards ---------- */
.fi-wi-stats-overview .fi-section-content.fi-grid{gap:0;overflow:hidden;border-radius:.5rem;
  box-shadow:0 0 0 1px var(--cs-line);background:var(--cs-surface)}
.fi-wi-stats-overview-stat{background:transparent;border-radius:0;--tw-ring-color:transparent;--tw-shadow:0 0 #0000;
  box-shadow:-1px 0 0 0 var(--cs-line),0 -1px 0 0 var(--cs-line);padding:1rem 1.25rem}
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-content{row-gap:.375rem}
.fi-wi-stats-overview-stat-label{font-size:.78125rem;font-weight:500;color:var(--cs-ink-3)}
.fi-wi-stats-overview-stat-value{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.01em;color:var(--cs-ink)}
.fi-wi-stats-overview-stat-description{font-size:.78125rem}
/* a short last row: its last figure takes the rest of the row, so no empty cell is left in the strip. Keyed to the same
   container switch as Filament's own columns (.fi-grid-ctn at 36rem), so a span never meets a grid of another width. */
@container (min-width:36rem){
  .fi-wi-stats-overview .fi-section-content.fi-grid[style*="repeat(3,"]>.fi-grid-col:last-child:nth-child(3n+1){grid-column:span 3}
  .fi-wi-stats-overview .fi-section-content.fi-grid[style*="repeat(3,"]>.fi-grid-col:last-child:nth-child(3n+2){grid-column:span 2}
  .fi-wi-stats-overview .fi-section-content.fi-grid[style*="repeat(4,"]>.fi-grid-col:last-child:nth-child(4n+1){grid-column:span 4}
  .fi-wi-stats-overview .fi-section-content.fi-grid[style*="repeat(4,"]>.fi-grid-col:last-child:nth-child(4n+2){grid-column:span 3}
  .fi-wi-stats-overview .fi-section-content.fi-grid[style*="repeat(4,"]>.fi-grid-col:last-child:nth-child(4n+3){grid-column:span 2}
}
.fi-account-widget .fi-section-content{padding:.75rem 1rem}
.fi-account-widget-heading{font-size:.875rem}
.fi-account-widget-user-name{font-size:.8125rem;color:var(--cs-ink-3)}
/* the admin's hand-built HTML (the Prize budget, the retention tables, a note under a field) writes its colours inline
   through App\Filament\Support\AdminInk, each a variable with its light colour as the fallback, so light is drawn as before;
   the dark ones here: Filament's 400 shades for red, amber and green (5.3:1 or more, on their own tint too) and the inks,
   where the light ones read 1.7-3.7:1 on a dark page */
html.dark .fi-body{--cs-inline-danger:var(--danger-400);--cs-inline-warning:var(--warning-400);--cs-inline-success:var(--success-400);
  --cs-inline-muted:var(--cs-ink-3);--cs-inline-soft:var(--cs-ink-2);--cs-inline-line:var(--cs-line)}

/* ---------- 11. dialogs, toasts, tooltips ---------- */
.fi-modal-window{border-radius:.5rem;box-shadow:0 0 0 1px var(--cs-line-strong),var(--cs-pop)}
.fi-modal-window.fi-align-center .fi-modal-header{text-align:start;flex-direction:row;align-items:flex-start;column-gap:1rem}
.fi-modal-window.fi-align-center .fi-modal-icon-ctn{margin-bottom:0}
.fi-modal-icon-bg{padding:.5rem;border-radius:.375rem}
.fi-modal-heading{font-size:1rem;line-height:1.5rem;font-weight:600}
.fi-modal-description{font-size:.84375rem;color:var(--cs-ink-3)}
/* Filament stacks a centred footer (column-reverse), then grids it into equal columns: one row, Cancel then the action, on the right */
.fi-modal-footer.fi-align-center .fi-modal-footer-actions{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}
.fi-modal-footer.fi-align-center .fi-modal-footer-actions>*{width:auto}
.fi-no-notification{border-radius:.5rem;background-color:var(--cs-raised);--tw-ring-color:var(--cs-line-strong);box-shadow:0 0 0 1px var(--cs-line-strong),var(--cs-pop)}
.fi-no-notification.fi-color{box-shadow:inset 3px 0 0 var(--color-500),0 0 0 1px var(--cs-line-strong),var(--cs-pop)}
.tippy-box,.tippy-box[data-theme~=light]{--tippy-background-color:#111826;background-color:var(--tippy-background-color);color:#f1f4f8;
  font-size:.78125rem;line-height:1.45;border-radius:.375rem;box-shadow:var(--cs-pop)}
html.dark .tippy-box,html.dark .tippy-box[data-theme~=light]{--tippy-background-color:#1c2533;box-shadow:0 0 0 1px #2a3546,var(--cs-pop)}

/* ---------- 12. the two panels that came from the Boost Dashboard wear the admin's colours ---------- */
/* Needs a push: its colours are variables in its own <style>, printed in the body after this file; these set them. html in
   front outranks the panel's own dark rule (.dark .rb-np), so the tokens, which switch with the mode, serve both modes. */
html .fi-body .rb-np{--np-surface:var(--cs-surface);--np-edge:var(--cs-line);--np-shadow:none;--np-muted:var(--cs-ink-3);
  --np-line:var(--cs-line);--np-line-soft:var(--cs-line);--np-control:var(--cs-line-strong);--np-count-bg:#eef0f3;
  --np-count-ink:#3d4656;--np-on:#0459d6;--np-hover:var(--cs-focus);border-radius:.5rem}
html.dark .fi-body .rb-np{--np-count-bg:rgba(255,255,255,.06);--np-count-ink:#b6bfcc;--np-red:#f87171}
.fi-body .rb-np summary{padding:.75rem 1.25rem;color:var(--cs-ink)}
.fi-body .rb-np .np-count{border-radius:.25rem}
.fi-body .rb-np .np-body{padding:0 1.25rem 1rem}
.fi-body .rb-np .np-chip{border-radius:.375rem;font-weight:600}
/* the chip that is on keeps the panel's own rule, which now reads --np-on */
.fi-body .rb-np .np-chip:not(.on){color:var(--cs-ink-2);background:transparent}
.fi-body .rb-np th{font-size:.75rem;font-weight:600;text-transform:none;letter-spacing:0}
.fi-body .rb-np .np-go{border-radius:.375rem;color:var(--cs-ink-2)}
@media (hover:hover){.fi-body .rb-np .np-go:hover{color:var(--cs-accent-ink)}}

/* Sales & orders and Customer analytics (analytics.css): the tokens, and the rules the admin's look changes */
html:not(.dark) .fi-body .rb-an{--bg:#ffffff;--s1:#ffffff;--s2:#f7f8fa;--s3:#eef0f3;--line:#e2e5ea;--line2:#cbd1d9;
  --ink:#0e1726;--ink2:#3b4658;--ink3:#667085;--gold:#0459d6;--ruby:#0459d6;--r:8px;--rs:6px;
  --sans:var(--font-family),ui-sans-serif,system-ui,sans-serif;background:transparent;background-image:none;border-radius:0;padding:0}
html.dark .fi-body .rb-an{--bg:#0c121b;--s1:#111824;--s2:#151d2a;--s3:#1c2533;--line:#1f2836;--line2:#2a3546;
  --ink:#e6eaf0;--ink2:#b6bfcc;--ink3:#8792a3;--gold:#4d93ff;--ruby:#4d93ff;--r:8px;--rs:6px;
  --sans:var(--font-family),ui-sans-serif,system-ui,sans-serif;background:transparent;background-image:none;border-radius:0;padding:0}
.fi-body .rb-an :is(.toolbar .lbl,.stat-card .label,.panel h3,.mini-stat .k,table.main thead th,table.mini th){font-weight:600;letter-spacing:.04em}
.fi-body .rb-an :is(.tag,.tier-tag,.ml-tag){font-weight:600}
.fi-body .rb-an :is(.toggle,.btn,select.tb){font-weight:500}
.fi-body .rb-an :is(.delta,.recent .amt,.bi-title,.ml-ov){font-weight:600}
.fi-body .rb-an .stat-card.hero{background:var(--s1)}
.fi-body .rb-an .stat-card.hero:before{display:none}
.fi-body .rb-an .stat-card.hero .value{font-size:32px;font-weight:600;letter-spacing:-.02em}
.fi-body .rb-an .chip{border-radius:.25rem}
/* a column not sorted shows its arrow at the heading's own ink, not half of it (2:1): a character, read as text */
.fi-body .rb-an .sort-ind{opacity:1}
/* the tooltip hangs off <body>, outside .rb-an, with variables of its own */
body .rb-an-tip{--tip-bg:#111826;--tip-line:#2a3546;border-radius:.375rem}

/* ---------- 13. phone ---------- */
@container (max-width:35.99rem){
  .fi-wi-stats-overview .fi-section-content.fi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fi-wi-stats-overview .fi-section-content.fi-grid>.fi-grid-col:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:639px){
  .fi-wi-stats-overview-stat{padding:.75rem .875rem}
  .fi-wi-stats-overview-stat-value{font-size:1.25rem;line-height:1.625rem;overflow-wrap:anywhere}
  .fi-wi-stats-overview-stat-label,.fi-wi-stats-overview-stat-description{font-size:.6875rem;line-height:1rem}
}
@media (max-width:767px){
  .fi-ta-cell .fi-ta-text-item{font-size:.8125rem;line-height:1.25rem}
  .fi-ta-cell .fi-badge{font-size:.6875rem}
  :is(.fi-ta-text,.fi-ta-icon,.fi-ta-image,.fi-ta-color):not(.fi-inline){padding-inline:.5rem}
  .fi-ta-header-cell{padding-inline-start:.875rem}
  .fi-ta-header-cell:first-of-type{padding-inline-start:1.25rem}
}