/* =========================================================================
   Flutwell admin theme — Supabase-inspired dark SaaS
   =========================================================================

   Loaded AFTER sleek.css and every plugin stylesheet, and it only overrides.
   No Blade markup was changed to make this work, which is what guarantees the
   old design cannot "leak through" structurally — the same DOM simply gets a
   new skin. If a screen is added later using the existing Bootstrap classes,
   it inherits this theme for free.

   Everything is driven by the custom properties in :root. To reskin the panel,
   change those and nothing else.

   Reading order:
     1. Tokens          6. Cards            11. Alerts & toasts
     2. Base & scrollbar 7. Typography       12. Dropdowns & modals
     3. Sidebar          8. Tables          13. Plugins (DataTables, Select2…)
     4. Header           9. Forms           14. Login screen
     5. Content         10. Buttons & badges 15. Responsive
   ========================================================================= */

/* == 1. Tokens ========================================================== */

:root {
    /* Surfaces — four steps from the canvas up to a hovered row.
       Kept close together on purpose: Supabase's depth comes from hairline
       borders, not from big luminance jumps or shadows. */
    --cl-bg: #0b0b0b;
    --cl-surface: #111111;
    --cl-surface-2: #161616;
    --cl-surface-3: #1c1c1c;

    --cl-border: #232323;
    --cl-border-strong: #2e2e2e;

    /* Text — three weights is enough for a dense UI. */
    --cl-text: #ededed;
    --cl-text-muted: #8f8f8f;
    --cl-text-subtle: #6b6b6b;

    /* Accent */
    --cl-accent: #3ecf8e;
    --cl-accent-hover: #34b87d;
    --cl-accent-fg: #0a0a0a;
    --cl-accent-soft: rgba(62, 207, 142, 0.12);
    --cl-accent-border: rgba(62, 207, 142, 0.28);

    /* Semantic — used for money and status, never for chrome. */
    --cl-success: #3ecf8e;
    --cl-success-soft: rgba(62, 207, 142, 0.12);
    --cl-warning: #f5a524;
    --cl-warning-soft: rgba(245, 165, 36, 0.12);
    --cl-danger: #f75f5f;
    --cl-danger-soft: rgba(247, 95, 95, 0.12);
    --cl-info: #6aa9ff;
    --cl-info-soft: rgba(106, 169, 255, 0.12);

    --cl-radius: 8px;
    --cl-radius-lg: 12px;
    --cl-radius-pill: 999px;

    --cl-sidebar-w: 260px;
    /* Collapsed rail width. sleek hard-codes 4.69rem (75px) in its own
       minified rules; this stays close so the two never fight visibly. */
    --cl-sidebar-mini: 72px;
    --cl-header-h: 56px;

    --cl-ring: 0 0 0 3px rgba(62, 207, 142, 0.18);

    /* Inter if the optional font step was run; a good system stack otherwise,
       so the panel never renders in Times while someone sorts out npm. */
    --cl-font: 'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --cl-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* Tells the browser this document is dark, so the parts it draws itself —
       the <select> option popup, the date-picker panel, spellcheck underlines,
       default scrollbars — are rendered dark too. CSS cannot style those; this
       property is the only lever. Without it a themed <select> still opens a
       white list, which is what makes controls read as "old UI". */
    color-scheme: dark;

    /* Fallback tint for any control not drawn explicitly below (progress,
       range thumbs, indeterminate states). */
    accent-color: var(--cl-accent);
}

/* Self-hosted Inter. Files are optional — see `npm run fonts`. The stack above
   degrades cleanly when they are absent. */
@font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter/InterVariable.woff2') format('woff2');
}

/* == 2. Base & scrollbar ================================================ */

html,
body,
body.sidebar-fixed,
body.header-light,
body.sidebar-dark {
    background: var(--cl-bg) !important;
    color: var(--cl-text) !important;
    font-family: var(--cl-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    letter-spacing: -0.006em;
}

.wrapper,
.page-wrapper,
.content-wrapper,
.content {
    background: var(--cl-bg) !important;
}

/* The template paints several containers white inline. */
.bg-white,
.bg-light,
.card.bg-white {
    background: var(--cl-surface) !important;
    color: var(--cl-text) !important;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--cl-border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--cl-border-strong);
    border: 3px solid var(--cl-bg);
    border-radius: var(--cl-radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
    background: #3d3d3d;
}

::selection {
    background: var(--cl-accent-soft);
    color: var(--cl-text);
}

a {
    color: var(--cl-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--cl-accent-hover);
    text-decoration: none;
}

hr {
    border-color: var(--cl-border) !important;
    opacity: 1;
}

code {
    font-family: var(--cl-font-mono);
    font-size: 0.85em;
    color: var(--cl-accent);
    background: var(--cl-surface-3);
    border: 1px solid var(--cl-border);
    border-radius: 5px;
    padding: 1px 5px;
}

pre {
    font-family: var(--cl-font-mono);
    font-size: 12px;
    color: var(--cl-text-muted);
    background: var(--cl-bg);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    padding: 14px;
}

/* == 3. Sidebar ========================================================= */

.left-sidebar,
.left-sidebar.bg-sidebar,
#sidebar,
.sidebar {
    background: var(--cl-surface) !important;
    border-right: 1px solid var(--cl-border);
    width: var(--cl-sidebar-w) !important;
}

/* Offset handled in section 16 — sleek uses padding-left, not margin. */

.app-brand {
    height: var(--cl-header-h);
    display: flex;
    align-items: center;
    padding: 0 16px !important;
    border-bottom: 1px solid var(--cl-border);
    background: transparent !important;
}

.app-brand .brand-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-text) !important;
    letter-spacing: -0.02em;
}

/* Sidebar logo.
   ------------------------------------------------------------------------
   `logo.svg` is a neutral placeholder, not a brand. It replaced the previous
   product's logo, which is the worse of the two mistakes: a panel wearing
   someone else's identity looks like something nobody has noticed.

   To use your own: drop it in public/backend/assets/images/ and change the
   filename below. PNG works too. Nothing in the Blade markup needs to change.
   ------------------------------------------------------------------------ */
.app-brand a::before {
    content: '';
    width: 26px;
    height: 26px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
    background: url('../images/logo.png') center / contain no-repeat;
}

.app-brand a {
    display: flex;
    align-items: center;
}

.sidebar-scrollbar {
    padding: 10px 10px 24px;
}

.sidebar .nav.sidebar-inner {
    display: block;
}

/* Top-level items */
.sidenav-item-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    margin: 1px 0;
    border-radius: var(--cl-radius);
    color: var(--cl-text-muted) !important;
    font-size: 15px;
    font-weight: 450;
    line-height: 1.25;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidenav-item-link:hover {
    background: var(--cl-surface-2) !important;
    color: var(--cl-text) !important;
}

.sidenav-item-link i {
    font-size: 17px;
    width: 20px;
    text-align: center;
    color: var(--cl-text-subtle);
    transition: color 0.12s ease;
}

.sidenav-item-link:hover i {
    color: var(--cl-text-muted);
}

/* Active page: filled row plus a green marker, matching the reference.
   Deliberately NOT keyed on [aria-expanded='true'] — an open group is a
   disclosure state, not a selection, and shading it reads as "selected". */
.sidebar li.active > .sidenav-item-link,
.sidenav-item-link.active {
    background: var(--cl-surface-3) !important;
    color: var(--cl-text) !important;
    position: relative;
}

.sidebar li.active > .sidenav-item-link i {
    color: var(--cl-accent);
}

.caret {
    margin-left: auto;
    border: 0;
    width: 14px;
    height: 14px;
    position: relative;
    opacity: 0.6;
}

.caret::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s ease;
}

[aria-expanded='true'] .caret::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* Sub-menus: indented, with a hairline rail like the reference. */
.sidebar .sub-menu {
    margin: 2px 0 6px 19px;
    padding-left: 10px;
    border-left: 1px solid var(--cl-border);
}

.sidebar .sub-menu .sidenav-item-link {
    padding: 7px 10px !important;
    font-size: 14px;
    color: var(--cl-text-subtle) !important;
}

.sidebar .sub-menu .sidenav-item-link:hover {
    color: var(--cl-text) !important;
    background: var(--cl-surface-2) !important;
}

/* == 4. Header ========================================================== */

.main-header,
.main-header .navbar,
.navbar-static-top {
    background: var(--cl-bg) !important;
    border-bottom: 1px solid var(--cl-border) !important;
    box-shadow: none !important;
    min-height: var(--cl-header-h);
    height: var(--cl-header-h);
    padding: 0 20px;
}

/* The sidebar's `.app-brand` is pinned to --cl-header-h, but the header had no
   height of its own — it sized to its tallest child. The two bottom borders
   therefore sat on different lines. Both are now the same fixed height, border
   included (Bootstrap sets border-box globally). */
.main-header,
.header-fixed .main-header {
    height: var(--cl-header-h) !important;
    min-height: var(--cl-header-h) !important;
    box-sizing: border-box;
}

.main-header .navbar {
    padding: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* The sidebar toggle is styled in section 17 — it needs a higher specificity
   than sleek's `.navbar .sidebar-toggle` rules, and its `inset: 0` here was
   leaking `right`/`bottom` into that pseudo-element's box. */

.main-header .nav-link,
.navbar-nav > .nav-item > .nav-link {
    color: var(--cl-text-muted) !important;
    font-size: 13.5px;
    padding: 6px 10px;
    border-radius: 6px;
}

.main-header .nav-link:hover {
    color: var(--cl-text) !important;
    background: var(--cl-surface-2);
}

.navbar-right {
    margin-left: auto;
}

.user-menu .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--cl-text-muted) !important;
    padding: 4px 8px !important;
    border-radius: var(--cl-radius);
}

.user-menu .dropdown-toggle:hover {
    background: var(--cl-surface-2) !important;
    color: var(--cl-text) !important;
}

.user-image,
.img-circle {
    border-radius: 50% !important;
    width: 26px;
    height: 26px;
    object-fit: cover;
    border: 1px solid var(--cl-border);
}

.dropdown-header .img-circle {
    width: 38px;
    height: 38px;
}

/* == 5. Content ========================================================= */

.content-wrapper {
    padding: 0;
}

.content {
    padding: 24px 24px 40px !important;
    max-width: 1600px;
}

.footer,
.footer .copyright {
    background: var(--cl-bg) !important;
    border-top: 1px solid var(--cl-border);
    color: var(--cl-text-subtle) !important;
    font-size: 12.5px;
    padding: 14px 24px;
}

.footer p {
    margin: 0;
}

/* == 6. Cards =========================================================== */

.card,
.card-default {
    background: var(--cl-surface) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius-lg) !important;
    box-shadow: none !important;
    margin-bottom: 20px;
}

.card-header,
.card-header-border-bottom {
    background: transparent !important;
    border-bottom: 1px solid var(--cl-border) !important;
    padding: 16px 20px !important;
    color: var(--cl-text);
    font-size: 14px;
    font-weight: 550;
    border-radius: var(--cl-radius-lg) var(--cl-radius-lg) 0 0 !important;
}

.card-header h2 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0;
    letter-spacing: -0.01em;
}

.card-body {
    padding: 20px !important;
}

/* Stat tiles: the metric is the loudest thing, the label the quietest. */
.card-body h6.text-muted {
    font-size: 12px !important;
    font-weight: 500;
    text-transform: none;
    color: var(--cl-text-muted) !important;
    margin-bottom: 6px;
    letter-spacing: 0;
}

.card-body h3 {
    font-size: 26px !important;
    font-weight: 650 !important;
    letter-spacing: -0.03em;
    margin-bottom: 2px;
    color: var(--cl-text);
}

.card-body h3 a {
    color: inherit;
}

.card-body h3 a:hover {
    color: var(--cl-accent);
}

.card-body small,
.card-body .text-muted {
    font-size: 12.5px;
}

.card-mini {
    background: var(--cl-surface) !important;
}

/* == 7. Typography ====================================================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--cl-text);
    font-weight: 600;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 18px;
}

h5 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

h6 {
    font-size: 13px;
}

.text-muted {
    color: var(--cl-text-muted) !important;
}

.text-success { color: var(--cl-success) !important; }
.text-danger  { color: var(--cl-danger) !important; }
.text-warning { color: var(--cl-warning) !important; }
.text-info    { color: var(--cl-info) !important; }
.text-primary { color: var(--cl-accent) !important; }

p {
    color: var(--cl-text-muted);
    line-height: 1.6;
}

dl.row dt {
    color: var(--cl-text-muted);
    font-weight: 500;
    font-size: 13px;
}

dl.row dd {
    color: var(--cl-text);
    font-size: 13px;
}

details summary {
    cursor: pointer;
    color: var(--cl-text-muted);
    font-size: 12.5px;
    user-select: none;
}

details summary:hover {
    color: var(--cl-text);
}

details[open] summary {
    margin-bottom: 8px;
}

/* == 8. Tables ========================================================== */

.table {
    color: var(--cl-text) !important;
    border-color: var(--cl-border) !important;
    margin-bottom: 0;
    font-size: 13.5px;
}

.table > thead > tr > th,
.table thead th {
    background: transparent !important;
    border-bottom: 1px solid var(--cl-border) !important;
    border-top: 0 !important;
    color: var(--cl-text-muted) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 12px;
    white-space: nowrap;
}

.table > tbody > tr > td,
.table tbody td {
    border-top: 0 !important;
    border-bottom: 1px solid var(--cl-border) !important;
    padding: 12px;
    vertical-align: middle;
    color: var(--cl-text);
}

.table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.table tbody tr {
    transition: background 0.12s ease;
}

.table tbody tr:hover {
    background: var(--cl-surface-2) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: transparent;
}

.table a {
    font-weight: 500;
}

/* == 9. Forms =========================================================== */

.form-label,
label {
    color: var(--cl-text) !important;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.form-control,
.form-select,
select.form-control,
textarea.form-control,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='url'],
input[type='date'],
input[type='datetime-local'],
input[type='search'],
textarea,
select {
    background: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    color: var(--cl-text) !important;
    font-size: 13.5px;
    padding: 8px 12px;
    min-height: 36px;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--cl-text-subtle) !important;
}

/* Checkbox and radio are excluded: the blanket `input:focus` background below
   carries `!important`, so focusing a *checked* box would repaint it
   surface-2 and wipe out the green fill. */
.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus,
input:not([type='checkbox']):not([type='radio']):focus {
    background: var(--cl-surface-2) !important;
    border-color: var(--cl-accent-border) !important;
    box-shadow: var(--cl-ring) !important;
    outline: none !important;
    color: var(--cl-text) !important;
}

/* Chrome paints autofilled fields a hard yellow-white via an internal shadow
   that `background` cannot reach; the inset shadow is the usual way round it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--cl-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--cl-surface-2) inset !important;
    caret-color: var(--cl-text);
}

/* The calendar and clock glyphs are browser-drawn in near-black. */
input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator,
input[type='datetime-local']::-webkit-calendar-picker-indicator,
input[type='month']::-webkit-calendar-picker-indicator,
input[type='week']::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.75);
    cursor: pointer;
    opacity: 0.8;
}

input[type='date']::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

input[type='range'] {
    accent-color: var(--cl-accent);
    background: transparent !important;
    border: 0 !important;
    padding: 0;
}

/* --- Number steppers ---------------------------------------------------
   The native spin buttons are hidden and replaced. They cannot be themed:
   `::-webkit-inner-spin-button` accepts opacity and filters but never a
   different glyph, and Firefox exposes no pseudo-element at all — so a light
   OS control was being drawn on a dark field with no way to restyle it.

   `flutwell-ui.js` wraps each number input and injects the two buttons; it
   also fixes the behaviour, since fields like "Min payout (USD)" carry
   step="0.0001" and the native arrows moved by a ten-thousandth per click.
   ---------------------------------------------------------------------- */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.cl-stepper {
    position: relative;
    display: block;
}

/* Room for the buttons, so long values never run underneath them. */
.cl-stepper > input[type='number'] {
    padding-right: 30px !important;
    width: 100%;
}

.cl-stepper-buttons {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 22px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--cl-border);
    border-radius: 0 var(--cl-radius) var(--cl-radius) 0;
    overflow: hidden;
    /* Resting state is quiet; the controls come forward on hover or focus. */
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.cl-stepper:hover .cl-stepper-buttons,
.cl-stepper:focus-within .cl-stepper-buttons {
    opacity: 1;
    pointer-events: auto;
}

/* Touch and keyboard users get no hover, so keep them permanently visible. */
@media (hover: none) {
    .cl-stepper-buttons {
        opacity: 1;
        pointer-events: auto;
    }
}

.cl-stepper-btn {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--cl-surface-3);
    border: 0;
    color: var(--cl-text-muted);
    cursor: pointer;
    min-height: 0;
    transition: background 0.1s ease, color 0.1s ease;
}

.cl-stepper-btn:hover {
    background: var(--cl-accent);
    color: var(--cl-accent-fg);
}

.cl-stepper-btn:active {
    background: var(--cl-accent-hover);
}

.cl-stepper-up {
    border-bottom: 1px solid var(--cl-border);
}

/* Chevrons drawn from borders — no icon font dependency, and they inherit
   the button's colour on hover. */
.cl-stepper-btn::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
}

.cl-stepper-up::before {
    transform: rotate(-135deg) translate(-1px, -1px);
}

.cl-stepper-down::before {
    transform: rotate(45deg) translate(-1px, -1px);
}

.cl-stepper > input[type='number']:disabled ~ .cl-stepper-buttons,
.cl-stepper > input[type='number'][readonly] ~ .cl-stepper-buttons {
    display: none;
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--cl-bg) !important;
    color: var(--cl-text-subtle) !important;
    cursor: not-allowed;
}

/* Native select arrow, drawn light so it is visible on a dark field. */
select.form-control,
.form-select,
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
}

select[multiple],
select[size] {
    background-image: none !important;
    padding-right: 12px !important;
}

select option {
    background: var(--cl-surface-2);
    color: var(--cl-text);
}

input[type='file'].form-control {
    padding: 6px 12px;
    line-height: 1.6;
}

input[type='file']::file-selector-button {
    background: var(--cl-surface-3);
    border: 1px solid var(--cl-border);
    border-radius: 6px;
    color: var(--cl-text);
    font-size: 12.5px;
    padding: 4px 10px;
    margin-right: 10px;
    cursor: pointer;
}

input[type='file']::file-selector-button:hover {
    background: var(--cl-border);
}

.form-group {
    margin-bottom: 16px;
}

small.text-muted,
.form-text {
    font-size: 12px;
    color: var(--cl-text-subtle) !important;
}

/* --- Checkboxes, radios and switches ----------------------------------
   sleek bundles Bootstrap *4*, where `.form-check-input` is a plain native
   checkbox — `position:absolute; margin-left:-1.25rem` and nothing else. It
   never sets `appearance:none`, so the browser painted its own OS widget and
   ignored every background, border and radius declared here. That is why
   these still looked like stock light-mode Bootstrap.

   `.form-switch` has *no* rules in sleek at all, so all eleven switches in
   the admin views were rendering as ordinary checkboxes.

   This layer therefore assumes no framework support and draws all three
   controls from scratch. Bare `input[type=...]` is included so the checkboxes
   that carry no class (cashout-requests, locales, the Jetstream component)
   are covered too, and so any control added later inherits the theme.
   ---------------------------------------------------------------------- */

.form-check-input,
input[type='checkbox'],
input[type='radio'] {
    /* The declaration that actually replaces the OS control. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    background-color: var(--cl-surface-3);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--cl-border-strong);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease,
        background-position 0.15s ease, box-shadow 0.12s ease;
    print-color-adjust: exact;
}

input[type='radio'] {
    border-radius: 50%;
}

.form-check-input:hover,
input[type='checkbox']:hover,
input[type='radio']:hover {
    border-color: var(--cl-text-subtle);
}

/* Tick and dot are drawn as background images rather than pseudo-elements:
   `::after` on a replaced element is not dependable across browsers. */
.form-check-input:checked,
input[type='checkbox']:checked,
input[type='radio']:checked {
    background-color: var(--cl-accent);
    border-color: var(--cl-accent);
}

.form-check-input:checked,
input[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5.5 10 3 3 6-6'/%3E%3C/svg%3E");
}

input[type='radio']:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%230a0a0a'/%3E%3C/svg%3E");
}

.form-check-input:indeterminate,
input[type='checkbox']:indeterminate {
    background-color: var(--cl-accent);
    border-color: var(--cl-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-linecap='round' stroke-width='3' d='M5.5 10h9'/%3E%3C/svg%3E");
}

.form-check-input:focus-visible,
input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
    outline: none;
    border-color: var(--cl-accent-border);
    box-shadow: var(--cl-ring);
}

.form-check-input:disabled,
input[type='checkbox']:disabled,
input[type='radio']:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Bootstrap 4 takes the input out of flow and pulls it back by 1.25rem into
   the row's padding. Laid out as a flex row instead, so the control and its
   label stay aligned whatever the label wraps to. */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: auto;
    padding-left: 0 !important;
    margin-bottom: 6px;
}

.form-check .form-check-input,
.form-check input[type='checkbox'],
.form-check input[type='radio'] {
    position: static !important;
    float: none !important;
    margin: 0 !important;
}

.form-check-label,
.form-check label {
    font-size: 13.5px;
    color: var(--cl-text-muted) !important;
    font-weight: 400;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
}

/* Switches: built here in full, since Bootstrap 4 has no equivalent. The knob
   is a background image slid from one end to the other, which animates
   without needing a wrapper element the markup does not have. */
.form-switch .form-check-input,
.form-switch input[type='checkbox'] {
    width: 38px;
    height: 21px;
    border-radius: var(--cl-radius-pill);
    background-color: var(--cl-surface-3);
    background-position: left center;
    background-size: 17px 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3.2' fill='%238f8f8f'/%3E%3C/svg%3E");
}

.form-switch .form-check-input:checked,
.form-switch input[type='checkbox']:checked {
    background-color: var(--cl-accent);
    border-color: var(--cl-accent);
    background-position: right center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3.2' fill='%230a0a0a'/%3E%3C/svg%3E");
}

/* sleek's own `.control` widget hides the real input behind a drawn
   `.control-indicator` (see section 16). Keep it hidden — the rules above
   would otherwise give it a visible box stacked under the indicator. */
.control input[type='checkbox'],
.control input[type='radio'] {
    position: absolute !important;
    z-index: -1;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    border: 0 !important;
    background: none !important;
}

/* == 10. Buttons & badges =============================================== */

.btn {
    border-radius: var(--cl-radius) !important;
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 14px;
    min-height: 36px;
    border: 1px solid transparent;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    letter-spacing: -0.005em;
}

.btn:focus-visible {
    box-shadow: var(--cl-ring) !important;
}

.btn-primary {
    background: var(--cl-accent) !important;
    border-color: var(--cl-accent) !important;
    color: var(--cl-accent-fg) !important;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:active {
    background: var(--cl-accent-hover) !important;
    border-color: var(--cl-accent-hover) !important;
    color: var(--cl-accent-fg) !important;
}

.btn-secondary,
.btn-default,
.btn-light {
    background: var(--cl-surface-2) !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-text) !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-light:hover {
    background: var(--cl-surface-3) !important;
    border-color: var(--cl-border-strong) !important;
    color: var(--cl-text) !important;
}

.btn-danger {
    background: transparent !important;
    border-color: rgba(247, 95, 95, 0.4) !important;
    color: var(--cl-danger) !important;
}

.btn-danger:hover {
    background: var(--cl-danger-soft) !important;
    border-color: var(--cl-danger) !important;
    color: var(--cl-danger) !important;
}

.btn-success {
    background: var(--cl-accent) !important;
    border-color: var(--cl-accent) !important;
    color: var(--cl-accent-fg) !important;
}

.btn-success:hover {
    background: var(--cl-accent-hover) !important;
}

.btn-sm {
    padding: 4px 10px;
    min-height: 28px;
    font-size: 12.5px;
}

.btn-lg {
    padding: 11px 20px;
    min-height: 42px;
    font-size: 15px;
}

/* Badges: pill, tinted fill, hairline border. */
.badge {
    border-radius: var(--cl-radius-pill) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    padding: 3px 9px !important;
    border: 1px solid transparent;
    letter-spacing: 0;
    vertical-align: middle;
}

.badge.bg-success,
.badge-success {
    background: var(--cl-success-soft) !important;
    color: var(--cl-success) !important;
    border-color: rgba(62, 207, 142, 0.25);
}

.badge.bg-warning,
.badge-warning {
    background: var(--cl-warning-soft) !important;
    color: var(--cl-warning) !important;
    border-color: rgba(245, 165, 36, 0.25);
}

.badge.bg-danger,
.badge-danger {
    background: var(--cl-danger-soft) !important;
    color: var(--cl-danger) !important;
    border-color: rgba(247, 95, 95, 0.25);
}

.badge.bg-info,
.badge-info {
    background: var(--cl-info-soft) !important;
    color: var(--cl-info) !important;
    border-color: rgba(106, 169, 255, 0.25);
}

.badge.bg-secondary,
.badge-secondary {
    background: var(--cl-surface-3) !important;
    color: var(--cl-text-muted) !important;
    border-color: var(--cl-border);
}

/* == 11. Alerts & toasts ================================================ */

.alert {
    border-radius: var(--cl-radius) !important;
    border: 1px solid var(--cl-border);
    background: var(--cl-surface-2);
    color: var(--cl-text);
    font-size: 13.5px;
    padding: 12px 16px;
}

.alert-success {
    background: var(--cl-success-soft) !important;
    border-color: rgba(62, 207, 142, 0.28) !important;
    color: var(--cl-success) !important;
}

.alert-danger {
    background: var(--cl-danger-soft) !important;
    border-color: rgba(247, 95, 95, 0.28) !important;
    color: var(--cl-danger) !important;
}

.alert-warning {
    background: var(--cl-warning-soft) !important;
    border-color: rgba(245, 165, 36, 0.28) !important;
    color: var(--cl-warning) !important;
}

.alert-info {
    background: var(--cl-info-soft) !important;
    border-color: rgba(106, 169, 255, 0.28) !important;
    color: var(--cl-info) !important;
}

.alert ul {
    margin: 0;
    padding-left: 18px;
}

.btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
    opacity: 0.5;
}

.btn-close:hover {
    opacity: 0.9;
}

#toast-container > div {
    background-color: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;
    color: var(--cl-text) !important;
    opacity: 1 !important;
}

#toast-container > .toast-success {
    border-left: 3px solid var(--cl-success) !important;
}

#toast-container > .toast-error {
    border-left: 3px solid var(--cl-danger) !important;
}

/* == 12. Dropdowns, modals, pagination ================================== */

.dropdown-menu {
    background: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55) !important;
    padding: 5px;
    font-size: 13.5px;
}

.dropdown-item {
    color: var(--cl-text-muted) !important;
    border-radius: 6px;
    padding: 7px 10px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--cl-surface-3) !important;
    color: var(--cl-text) !important;
}

.dropdown-header {
    color: var(--cl-text-subtle) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dropdown-divider {
    border-color: var(--cl-border);
}

.modal-content {
    background: var(--cl-surface) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius-lg) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--cl-border) !important;
}

/* --- Pagination --------------------------------------------------------
   Every control is the same size regardless of what is inside it. Bootstrap 4
   sizes `.page-link` from `padding: 1rem 1.25rem` plus its content, so
   "Previous", "1" and "Next" each resolved to a different height. A fixed
   `min-width`/`height` with flex centring makes the row uniform, and one-digit
   and three-digit page numbers stay the same width.
   ---------------------------------------------------------------------- */
.cl-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.cl-pagination-summary {
    font-size: 12.5px;
    color: var(--cl-text-subtle);
}

.cl-pagination-summary strong {
    color: var(--cl-text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.page-item {
    display: flex;
}

.page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 34px;
    height: 34px;
    padding: 0 10px !important;
    margin: 0 !important;             /* BS4 pulls each link back by -1px */
    background: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    color: var(--cl-text-muted) !important;
    font-size: 13px;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.page-link:hover {
    background: var(--cl-surface-3) !important;
    border-color: var(--cl-border-strong) !important;
    color: var(--cl-text) !important;
}

.page-link:focus-visible {
    outline: none;
    box-shadow: var(--cl-ring) !important;
    border-color: var(--cl-accent-border) !important;
}

.page-item.active .page-link {
    background: var(--cl-accent) !important;
    border-color: var(--cl-accent) !important;
    color: var(--cl-accent-fg) !important;
    font-weight: 600;
}

.page-item.disabled .page-link {
    background: transparent !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-text-subtle) !important;
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* The "…" separator is a label, not a target. */
.page-link.cl-page-gap {
    background: transparent !important;
    border-color: transparent !important;
    min-width: 22px;
    padding: 0 !important;
}

/* == 13. Plugins ======================================================== */

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    color: var(--cl-text) !important;
    padding: 6px 10px;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
    color: var(--cl-text-muted) !important;
    font-size: 13px;
}

/* DataTables draws its own pager on the screens that use `#basic-data-table`
   (offers, pages, email templates). Held to the same 34px control size as the
   Eloquent paginator so the two never look like different components — which
   they did, since DataTables sizes buttons from `padding` + content just as
   Bootstrap 4 does. Both markup shapes are covered: the plain `.paginate_button`
   anchor, and the Bootstrap integration's `.page-item > .page-link`. */
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 34px;
    height: 34px;
    padding: 0 10px !important;
    margin: 0 !important;
    background: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    color: var(--cl-text-muted) !important;
    font-size: 13px;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
}

/* In the Bootstrap integration the class sits on the <li>, and the sizing has
   to move to the inner link or the button collapses to the text box. */
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item {
    padding: 0 !important;
    min-width: 0;
    height: auto;
    background: transparent !important;
    border: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cl-surface-3) !important;
    border-color: var(--cl-border-strong) !important;
    color: var(--cl-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--cl-accent) !important;
    border-color: var(--cl-accent) !important;
    color: var(--cl-accent-fg) !important;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-text-subtle) !important;
    opacity: 0.5;
    cursor: default;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 12px;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 0.35;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    min-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--cl-text) !important;
    line-height: 34px;
}

.select2-dropdown {
    background: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--cl-surface-3) !important;
    color: var(--cl-text) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--cl-bg) !important;
    border: 1px solid var(--cl-border) !important;
    color: var(--cl-text) !important;
}

/* Trix editor (email templates) */
trix-editor {
    background: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    color: var(--cl-text) !important;
    min-height: 200px;
}

trix-toolbar .trix-button {
    background: var(--cl-surface-3) !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-text) !important;
}

trix-toolbar .trix-button--icon::before {
    filter: invert(1) brightness(1.4);
}

/* NProgress */
#nprogress .bar {
    background: var(--cl-accent) !important;
    height: 2px;
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--cl-accent), 0 0 5px var(--cl-accent);
}

/* == 14. Login & guest screens ========================================== */

/* Utility classes the old light theme relied on. `.text-dark` in particular
   resolved to near-black, which is invisible here — it appears on the sign-in
   heading and in a few older partials. */
.text-dark {
    color: var(--cl-text) !important;
}

body.bg-light-gray,
body.login-page,
body.lockscreen,
.bg-light-gray,
.login-box,
.register-box,
.auth-page,
.login-content,
.min-h-screen {
    background: var(--cl-bg) !important;
}

/* The login card's header is `bg-primary` in the markup — a solid blue block
   in the old theme. Flatten it into the card instead of recolouring it. */
.login-box .card-header.bg-primary,
body.bg-light-gray .card-header.bg-primary {
    background: transparent !important;
    border-bottom: 1px solid var(--cl-border) !important;
    padding: 20px !important;
}

body.bg-light-gray .card {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
}

body.bg-light-gray .app-brand {
    height: auto;
    border-bottom: 0;
    padding: 0 !important;
}

body.bg-light-gray .card-body h4 {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -0.025em;
}

/* --- Test-account panel (local / demo only) ----------------------------
   Rendered by auth/login.blade.php behind an environment check. Styled to
   read as a developer aid rather than part of the sign-in form, so nobody
   mistakes it for a field they are meant to fill in.
   ---------------------------------------------------------------------- */
.cl-testaccount {
    margin-top: 4px;
    padding: 14px;
    background: var(--cl-surface-2);
    border: 1px dashed var(--cl-border-strong);
    border-radius: var(--cl-radius);
}

.cl-testaccount-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.cl-testaccount-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cl-text-subtle);
}

.cl-testaccount-fill {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cl-accent);
    background: var(--cl-accent-soft);
    border: 1px solid var(--cl-accent-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.cl-testaccount-fill:hover {
    background: rgba(62, 207, 142, 0.2);
}

/* Each row is a button: the whole strip is the copy target, not a small icon. */
.cl-testaccount-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    margin-bottom: 5px;
    text-align: left;
    background: var(--cl-surface-3);
    border: 1px solid var(--cl-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.cl-testaccount-row:hover {
    border-color: var(--cl-accent-border);
    background: var(--cl-surface);
}

.cl-testaccount-row.is-done {
    border-color: var(--cl-accent);
}

.cl-testaccount-label {
    flex: 0 0 62px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cl-text-subtle);
}

.cl-testaccount-value {
    flex: 1 1 auto;
    font-family: var(--cl-font-mono);
    font-size: 12.5px;
    color: var(--cl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-testaccount-hint {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--cl-text-subtle);
}

.cl-testaccount-row:hover .cl-testaccount-hint,
.cl-testaccount-row.is-done .cl-testaccount-hint {
    color: var(--cl-accent);
}

.cl-testaccount-note {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--cl-text-subtle);
}

.cl-testaccount-note code {
    font-size: 11px;
    padding: 0 3px;
}

/* The sign-in form uses `input-lg`, which the old theme sized generously. */
.form-control.input-lg {
    min-height: 42px;
    font-size: 14px;
    padding: 10px 14px;
}

.btn-block {
    width: 100%;
}

body.bg-light-gray .copyright,
body.bg-light-gray .copyright p {
    background: transparent !important;
    color: var(--cl-text-subtle) !important;
    border: 0;
    text-align: center;
    font-size: 12.5px;
}

.auth-card,
.card.login-card {
    background: var(--cl-surface) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius-lg) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

/* == 15. Specificity overrides ==========================================

   sleek.css contains 44 `!important` background rules. An `!important`
   declaration beats any non-important one regardless of specificity, so most
   of this theme wins automatically — but where sleek is *also* `!important`,
   it only loses on a tie by load order, and it wins outright when its selector
   is more specific.

   These are the three that actually collide. Each was verified against
   sleek.css rather than added defensively.
   ======================================================================== */

/* The worst offender: every table cell forced to solid white. Without this,
   all 20+ tables in the panel render as white blocks on the dark canvas.
   Same specificity as sleek's rule, so loading later is what wins it. */
.table td,
.table th {
    background-color: transparent !important;
}

/* DataTables striping is set as a black 5% wash intended for a white table;
   on a dark surface it reads as muddy banding. */
.expendable-data-table .table-striped tbody tr[role]:nth-of-type(odd),
.basic-data-table .table-striped tbody tr[role]:nth-of-type(odd) {
    background-color: transparent !important;
}

.expendable-data-table .table-striped tbody tr[role]:hover,
.basic-data-table .table-striped tbody tr[role]:hover {
    background-color: var(--cl-surface-2) !important;
}

/* sleek's contextual background utilities are `!important` and would repaint
   any non-badge element using them. Redefined here on the same specificity. */
.bg-primary {
    background-color: var(--cl-accent) !important;
    color: var(--cl-accent-fg) !important;
}

.bg-dark {
    background-color: var(--cl-surface-2) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* == 16. High-specificity corrections ===================================

   The rules above use single-class selectors, which sleek.css beats wherever
   it nests. Each fix below was traced to the exact rule causing the symptom,
   and matches or exceeds its specificity.
   ======================================================================== */

/* --- Layout: the page was offset twice -------------------------------- */
/* sleek: `.sidebar-fixed .page-wrapper { padding-left: 15.6rem }` (250px).
   The theme was *also* adding a 260px margin, so content started ~510px in
   and left a dead column beside the sidebar. One offset, one token. */
.sidebar-fixed .page-wrapper,
.sidebar-fixed-offcanvas .page-wrapper,
.sidebar-static .page-wrapper {
    padding-left: var(--cl-sidebar-w) !important;
    margin-left: 0 !important;
}

/* sleek reserves 4.75rem (76px) for a taller header than this theme uses. */
.header-fixed .page-wrapper {
    padding-top: var(--cl-header-h) !important;
}

.header-fixed .main-header,
.sidebar-fixed.header-fixed .page-wrapper .main-header {
    left: var(--cl-sidebar-w) !important;
    padding-left: 20px !important;
}

/* --- Sidebar: uppercase, oversized rows and icons ---------------------- */
/* sleek: `.sidebar .sidebar-inner > li > a` (0,2,3) sets uppercase and
   1.25rem/1.56rem padding — the shouty labels and the loose vertical rhythm. */
.sidebar .sidebar-inner > li > a,
.sidebar .sidebar-inner > li > a.sidenav-item-link {
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 8px 10px !important;
    font-size: 15px !important;
    font-weight: 450 !important;
    line-height: 1.35 !important;
    color: var(--cl-text-muted) !important;
    border-radius: var(--cl-radius);
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.sidebar .sidebar-inner > li > a:hover {
    background: var(--cl-surface-2) !important;
    color: var(--cl-text) !important;
}

.sidebar .sidebar-inner > li.active > a {
    background: var(--cl-surface-3) !important;
    color: var(--cl-text) !important;
}

/* An expanded group is not a selected page. sleek shades `.expand > a` and
   `[aria-expanded='true']`, which made every open group look chosen. Reset it
   to the parent background; hover still responds like any other row. The
   `li.active` rule above (0,3,1) is more specific, so a group that *is* the
   current page keeps its fill. */
.sidebar .sidebar-inner > li > a[aria-expanded='true'],
.sidebar .sidebar-inner > li.expand > a,
.sidebar .nav > li.expand > a,
.sidebar .nav > li > a[aria-expanded='true'] {
    background: transparent !important;
    color: var(--cl-text-muted) !important;
}

.sidebar .sidebar-inner > li > a[aria-expanded='true']:hover,
.sidebar .sidebar-inner > li.expand > a:hover,
.sidebar .nav > li.expand > a:hover {
    background: var(--cl-surface-2) !important;
    color: var(--cl-text) !important;
}

/* The expanded group's own marker rail would otherwise read as "active" too. */
.sidebar .sidebar-inner > li:not(.active) > a[aria-expanded='true']:before,
.sidebar .sidebar-inner > li.expand:not(.active) > a:before {
    display: none !important;
}

/* sleek: `.sidebar .nav > li > a i` (0,2,3) — 1.5rem floated icons. */
.sidebar .nav > li > a i,
.sidebar .sidebar-inner > li > a i {
    float: none !important;
    font-size: 17px !important;
    line-height: 1 !important;
    width: 20px !important;
    margin-right: 0 !important;
    text-align: center;
    color: var(--cl-text-subtle) !important;
    flex: 0 0 20px;
}

.sidebar .sidebar-inner > li > a:hover i {
    color: var(--cl-text-muted) !important;
}

.sidebar .sidebar-inner > li.active > a i {
    color: var(--cl-accent) !important;
}

/* sleek: `.sidebar li > a .caret` (0,2,2) — a 20px glyph slot. The caret here
   is drawn with borders, so the font sizing only added dead space. */
.sidebar li > a .caret {
    width: 14px !important;
    height: 14px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    margin-left: auto !important;
    flex: 0 0 14px;
}

/* sleek paints a purple active marker on the right edge. */
.sidebar .sidebar-inner > li > a:before {
    background: var(--cl-accent) !important;
    right: auto !important;
    left: 0 !important;
    width: 2px !important;
    border-radius: 0 2px 2px 0;
}

.sidebar .sidebar-inner .section-title {
    color: var(--cl-text-subtle) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    padding: 16px 10px 6px !important;
}

/* THE GRAY PANEL behind an open group: `.sidebar-dark .sidebar .sub-menu`
   (0,3,0) fills it with #1E201E. Nothing in this theme set a sub-menu
   background at all, so sleek's won unopposed and every expanded group sat
   on a lighter slab. The rail and indent carry the hierarchy instead. */
.sidebar-dark .sidebar .sub-menu,
.sidebar-dark .sidebar .sub-menu .sub-menu,
.sidebar-dark .sidebar li.has-sub .collapse,
.sidebar-dark .sidebar li.has-sub .collapsing {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* sleek indents sub-menus by 2.81rem and drops the rail. */
.sidebar .sub-menu {
    padding: 2px 0 6px !important;
    margin: 2px 0 4px 19px !important;
    border-left: 1px solid var(--cl-border);
    padding-left: 10px !important;
}

.sidebar .sub-menu > li > a {
    padding: 7px 10px !important;
    font-size: 14px !important;
    color: var(--cl-text-subtle) !important;
    border-radius: 6px;
    text-transform: none !important;
}

.sidebar .sub-menu > li > a:hover {
    color: var(--cl-text) !important;
    background: var(--cl-surface-2) !important;
}

.sidebar .sub-menu > li.active > a {
    color: var(--cl-text) !important;
    background: var(--cl-surface-3) !important;
}

/* Decorative connector lines drawn for the old light sidebar. */
.sidebar .sub-menu > li > a:before,
.sidebar .sub-menu > li > a:after,
.sidebar .sub-menu > li .sub-menu > li > a:after {
    display: none !important;
}

/* --- Cards: navy headings on a dark surface --------------------------- */
/* sleek: `.card .card-header h2` and `.card-default .card-header h2` (0,3,1)
   set `color:#1b223c`, which rendered as unreadable dark blue here. */
.card .card-header h2,
.card-default .card-header h2,
.card-table-border-none .card-header h2 {
    color: var(--cl-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
}

/* sleek: `.card-default .card-header` (0,2,0) — white, with 3rem of top padding. */
.card .card-header,
.card-default .card-header,
.card-table-border-none .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--cl-border) !important;
    padding: 16px 20px !important;
}

.card .card-body,
.card-default .card-body {
    padding: 20px !important;
}

/* --- Tables: Bootstrap's hover uses a CSS variable, not a colour ------- */
.table-hover > tbody > tr:hover > *,
.table > tbody > tr:hover > * {
    --bs-table-accent-bg: transparent;
    --bs-table-hover-bg: transparent;
    background-color: var(--cl-surface-2) !important;
    color: var(--cl-text) !important;
}

/* --- sleek's custom checkbox / radio ---------------------------------- */
/* Used in admin/settings/contact and admin/settings/web. sleek renders a
   #e1e2e5 box with a #1b223c tick — the "old Bootstrap" controls. This is a
   separate component from Bootstrap's `.form-check-input`, which is why
   styling one did not cover the other. */
.control {
    color: var(--cl-text-muted) !important;
    font-size: 13.5px;
    padding-left: 26px;
    cursor: pointer;
}

.control-indicator {
    background: var(--cl-surface-3) !important;
    border: 1px solid var(--cl-border-strong) !important;
    border-radius: 4px !important;
    height: 16px !important;
    width: 16px !important;
    top: 1px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.control:hover input ~ .control-indicator {
    border-color: var(--cl-text-subtle) !important;
}

.control input:checked ~ .control-indicator {
    background: var(--cl-accent) !important;
    border-color: var(--cl-accent) !important;
}

.control input:focus ~ .control-indicator {
    box-shadow: var(--cl-ring) !important;
}

/* The tick itself — sleek draws it with borders, so recolour those. */
.control-checkbox .control-indicator:after {
    left: 5px !important;
    top: 1px !important;
    width: 4px !important;
    height: 9px !important;
    border: solid var(--cl-accent-fg) !important;
    border-width: 0 2px 2px 0 !important;
}

.control-radio .control-indicator {
    border-radius: 50% !important;
}

.control-radio .control-indicator:after {
    background: var(--cl-accent-fg) !important;
}

.control input:disabled ~ .control-indicator {
    background: var(--cl-bg) !important;
    border-color: var(--cl-border) !important;
    opacity: 0.5;
}

/* sleek's switch component, in case a screen uses it. */
.switch-label {
    background: var(--cl-surface-3) !important;
    border-color: var(--cl-border-strong) !important;
}

.switch-primary > .switch-input:checked ~ .switch-label,
.switch-success > .switch-input:checked ~ .switch-label {
    background: var(--cl-accent) !important;
    border-color: var(--cl-accent) !important;
}

/* == 17. Sidebar toggle, collapsed rail, user menu ======================
   The toggle button was both mis-styled and functionally dead:

   * sleek draws the icon with `.navbar .sidebar-toggle:before` (0,2,1) —
     an MDI glyph at 2rem in #1E201E. That out-specified the theme's own
     `:before` (0,1,1), so a near-black 32px glyph rendered on a dark
     header inside a 30px box. Hence "broken".
   * Clicking it adds `sidebar-minified` to <body> (sleek.js:120). sleek then
     narrows `.left-sidebar` to 75px and drops `.page-wrapper` padding to
     4.69rem — but section 16's `.sidebar-fixed .page-wrapper` carries
     `!important`, which beats specificity outright, so the layout never
     moved. Every collapsed-state rule below therefore has to restate
     `!important` at equal-or-higher specificity.
   ====================================================================== */

/* --- The button ------------------------------------------------------- */
/* Both class names are styled: sleek.js swaps `.sidebar-toggle` and
   `.sidebar-offcanvas-toggle` depending on the body layout class. */
.navbar .sidebar-toggle,
.navbar .sidebar-offcanvas-toggle,
#sidebar-toggler {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    padding: 0 !important;
    margin-right: 6px;
    font-size: 0 !important;
    line-height: 1 !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: 8px !important;
    color: var(--cl-text-muted) !important;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.navbar .sidebar-toggle:hover,
.navbar .sidebar-offcanvas-toggle:hover,
#sidebar-toggler:hover {
    background: var(--cl-surface-2) !important;
    border-color: var(--cl-border-strong) !important;
    color: var(--cl-text) !important;
}

.navbar .sidebar-toggle:focus,
.navbar .sidebar-offcanvas-toggle:focus,
#sidebar-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.25) !important;
}

/* Replaces sleek's MDI glyph with a drawn panel icon: outline + left rail. */
.navbar .sidebar-toggle:before,
.navbar .sidebar-offcanvas-toggle:before,
#sidebar-toggler:before {
    content: '' !important;
    font-family: inherit !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 14px;
    margin: 0;
    transform: translate(-50%, -50%);
    border: 1.5px solid currentColor;
    border-radius: 3px;
    box-sizing: border-box;
}

.navbar .sidebar-toggle:after,
.navbar .sidebar-offcanvas-toggle:after,
#sidebar-toggler:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 14px;
    /* The icon box spans −8px…+8px around centre; this sits on its left edge. */
    transform: translate(-8px, -7px);
    background: currentColor;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    transition: transform 0.2s ease;
}

/* Collapsed: the rail flips to the right edge, so the button reads as
   "expand" rather than showing the same state in both directions. */
.sidebar-minified .navbar .sidebar-toggle:after,
.sidebar-minified #sidebar-toggler:after {
    transform: translate(3px, -7px);
    border-radius: 0 2px 2px 0;
}

/* --- Collapsed layout -------------------------------------------------- */
.sidebar-fixed.sidebar-minified .page-wrapper,
.sidebar-static.sidebar-minified .page-wrapper,
.sidebar-fixed-offcanvas.sidebar-minified .page-wrapper {
    padding-left: var(--cl-sidebar-mini) !important;
    transition: padding-left 0.2s ease;
}

.sidebar-minified.header-fixed .main-header,
.sidebar-fixed.sidebar-minified.header-fixed .page-wrapper .main-header {
    left: var(--cl-sidebar-mini) !important;
    transition: left 0.2s ease;
}

.sidebar-minified .left-sidebar,
.sidebar-minified #sidebar,
.sidebar-minified .left-sidebar.bg-sidebar {
    width: var(--cl-sidebar-mini) !important;
    transition: width 0.2s ease;
    overflow: visible !important;
}

/* Hovering the rail peeks the full sidebar without changing the layout —
   sleek's behaviour, preserved. */
.sidebar-minified .left-sidebar:hover,
.sidebar-minified .left-sidebar:hover #sidebar {
    width: var(--cl-sidebar-w) !important;
    z-index: 1050;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
}

/* Everything textual hides while collapsed and un-hovered. */
.sidebar-minified .left-sidebar:not(:hover) .nav-text,
.sidebar-minified .left-sidebar:not(:hover) .caret,
.sidebar-minified .left-sidebar:not(:hover) .section-title,
.sidebar-minified .left-sidebar:not(:hover) .app-brand .brand-name,
.sidebar-minified .left-sidebar:not(:hover) .badge {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-minified .left-sidebar:not(:hover) .section-title {
    height: 12px !important;
    padding: 0 !important;
    margin: 8px 0 !important;
}

/* An expanded group left open must not spill icons into the rail. */
.sidebar-minified .left-sidebar:not(:hover) .sub-menu {
    display: none !important;
}

.sidebar-minified .left-sidebar:not(:hover) .sidebar-inner > li > a,
.sidebar-minified .left-sidebar:not(:hover) .sidebar-inner > li > a.sidenav-item-link {
    justify-content: center !important;
    padding: 10px 0 !important;
    gap: 0 !important;
}

.sidebar-minified .left-sidebar:not(:hover) .sidebar-inner > li > a i {
    font-size: 19px !important;
    flex: 0 0 auto !important;
}

/* --- User menu: avatar ------------------------------------------------- */
/* sleek: `.navbar .navbar-right .navbar-nav .user-menu .user-image` (0,5,0)
   sets `width:40px` with no height and a .25rem radius. The theme's 26px
   square lost the width but kept the height, so a 40x26 box was clipped to
   an ellipse — the broken ratio. Matched at (0,5,0) with an explicit box. */
.navbar .navbar-right .navbar-nav .user-menu .user-image,
.navbar .navbar-nav .user-menu .dropdown-toggle .user-image {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 1px solid var(--cl-border) !important;
    background: var(--cl-surface-3);
    vertical-align: middle;
}

/* sleek gives the toggle `line-height: 75px` for its taller header. */
.navbar .navbar-right .navbar-nav .user-menu .dropdown-toggle {
    display: flex !important;
    align-items: center;
    gap: 9px;
    height: var(--cl-header-h);
    line-height: 1 !important;
    padding: 0 8px !important;
    font-size: 13.5px !important;
    border-radius: var(--cl-radius);
}

.navbar .navbar-right .navbar-nav .user-menu .dropdown-toggle > span {
    color: var(--cl-text) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 0 !important;
}

/* --- User menu: the dropdown ------------------------------------------- */
/* The items are bare `<li><a>`, not `.dropdown-item`, so none of section 12
   applied to them. sleek styles them at (0,3,1) with `color:#1E201E` and
   paints the header and footer rows `#ffffff` — dark text on a dark menu
   under two white bands. */
.navbar .navbar-nav .user-menu .dropdown-menu {
    min-width: 234px;
    padding: 6px !important;
    background: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius-lg) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
    margin-top: 6px;
}

.navbar .dropdown-menu > li a {
    display: flex !important;
    align-items: center;
    color: var(--cl-text-muted) !important;
    font-size: 13.5px !important;
    padding: 8px 10px !important;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}

.navbar .dropdown-menu > li a:hover {
    background: var(--cl-surface-3) !important;
    color: var(--cl-text) !important;
}

.navbar .dropdown-menu > li a > i {
    width: 18px;
    margin-right: 10px !important;
    font-size: 16px;
    text-align: center;
    color: var(--cl-text-subtle);
}

.navbar .dropdown-menu > li a:hover > i {
    color: var(--cl-accent);
}

/* The header row carries the avatar, name and email — it is an identity
   block, not a section label, so section 12's uppercase/11px is undone. */
.navbar .dropdown-menu li.dropdown-header {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--cl-border);
    padding: 8px 10px 12px !important;
    margin-bottom: 6px !important;
    color: var(--cl-text) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
}

.navbar .dropdown-menu li.dropdown-header img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    margin-right: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid var(--cl-border);
    vertical-align: middle !important;
}

.navbar .dropdown-menu li.dropdown-header small {
    display: block;
    color: var(--cl-text-subtle) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-top: 2px;
    /* Long addresses would otherwise force the menu wider than the header. */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 168px;
}

.navbar .dropdown-menu li.dropdown-footer {
    background: transparent !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--cl-border);
    margin-top: 6px !important;
    padding-top: 6px !important;
}

.navbar .dropdown-menu li.dropdown-footer > a {
    padding: 8px 10px !important;
    color: var(--cl-danger, #f87171) !important;
}

.navbar .dropdown-menu li.dropdown-footer > a:hover {
    background: rgba(248, 113, 113, 0.12) !important;
    color: #fca5a5 !important;
}

.navbar .dropdown-menu li.dropdown-footer > a > i,
.navbar .dropdown-menu li.dropdown-footer > a:hover > i {
    color: inherit !important;
}

/* == 18. Grid gutters and inline editors ================================
   Twenty rows across thirteen admin views use Bootstrap 5 gutter classes
   (`row g-2`, `row g-3`). sleek is Bootstrap *4*, which has no `g-*` at all,
   so those declarations did nothing.

   Horizontally that is harmless — BS4's columns already carry 15px padding.
   The damage is vertical: BS4 rows have no `row-gap`, so as soon as a row
   wraps (the Add-quest form is eleven columns and wraps to three lines) the
   next line's labels butt straight up against the previous line's inputs.
   That is what made those screens look broken.
   ====================================================================== */

.row[class*='g-'] > * {
    /* Reset before the per-step rules below, so `gy-*` does not inherit BS4's
       15px horizontal padding while claiming to set only vertical spacing. */
    padding-right: var(--cl-gutter-x, 15px);
    padding-left: var(--cl-gutter-x, 15px);
}

.row.g-0 { --cl-gutter-x: 0; margin-right: 0; margin-left: 0; row-gap: 0; }
.row.g-1 { --cl-gutter-x: 0.125rem; margin-right: -0.125rem; margin-left: -0.125rem; row-gap: 0.25rem; }
.row.g-2 { --cl-gutter-x: 0.25rem; margin-right: -0.25rem; margin-left: -0.25rem; row-gap: 0.75rem; }
.row.g-3 { --cl-gutter-x: 0.5rem; margin-right: -0.5rem; margin-left: -0.5rem; row-gap: 1rem; }
.row.g-4 { --cl-gutter-x: 0.75rem; margin-right: -0.75rem; margin-left: -0.75rem; row-gap: 1.5rem; }
.row.g-5 { --cl-gutter-x: 1.5rem; margin-right: -1.5rem; margin-left: -1.5rem; row-gap: 3rem; }

/* Axis-specific variants, for completeness with the Bootstrap 5 API. */
.row.gy-0 { row-gap: 0; }
.row.gy-1 { row-gap: 0.25rem; }
.row.gy-2 { row-gap: 0.5rem; }
.row.gy-3 { row-gap: 1rem; }
.row.gy-4 { row-gap: 1.5rem; }
.row.gy-5 { row-gap: 3rem; }

.row.gx-0 { --cl-gutter-x: 0; margin-right: 0; margin-left: 0; }
.row.gx-1 { --cl-gutter-x: 0.125rem; margin-right: -0.125rem; margin-left: -0.125rem; }
.row.gx-2 { --cl-gutter-x: 0.25rem; margin-right: -0.25rem; margin-left: -0.25rem; }
.row.gx-3 { --cl-gutter-x: 0.5rem; margin-right: -0.5rem; margin-left: -0.5rem; }
.row.gx-4 { --cl-gutter-x: 0.75rem; margin-right: -0.75rem; margin-left: -0.75rem; }
.row.gx-5 { --cl-gutter-x: 1.5rem; margin-right: -1.5rem; margin-left: -1.5rem; }

/* --- Bootstrap 5 utility shim -----------------------------------------
   The admin views were written against Bootstrap 5 but ship on sleek's
   Bootstrap 4 build, so these classes resolved to nothing at all:
   `gap-2` (5 uses), `ms-2`/`ms-3` (5), `me-1`/`me-2` (2), `text-end` (2).
   BS4 uses the ml/mr naming and has no flex `gap` utilities.

   Defined on the Bootstrap spacer scale (1=.25rem … 5=3rem) so they behave
   exactly as the markup expects.
   ---------------------------------------------------------------------- */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }

/* --- Border utilities --------------------------------------------------
   sleek paints all of these `#e5e9f2` — a near-white blue-grey meant for a
   light canvas — with `!important`. There are 69 uses across the admin views
   (55 `border-bottom`, 14 `border-top`), so every hand-rolled row separator
   was drawing a pale line that belongs to the old theme. Retinted to the
   theme's hairline colour.

   Both Bootstrap 4 (`left`/`right`) and 5 (`start`/`end`) names are covered:
   sleek only defines the BS4 pair, so the logical ones were dead as well.
   ---------------------------------------------------------------------- */
.border,
.border-top,
.border-bottom,
.border-left,
.border-right,
.border-start,
.border-end,
.border-x,
.border-y {
    border-color: var(--cl-border) !important;
}

.border-start { border-left: 1px solid var(--cl-border) !important; }
.border-end { border-right: 1px solid var(--cl-border) !important; }

/* The semantic variants keep their meaning, just at this theme's values. */
.border-primary { border-color: var(--cl-accent) !important; }
.border-success { border-color: var(--cl-success) !important; }
.border-danger { border-color: var(--cl-danger) !important; }
.border-warning { border-color: var(--cl-warning) !important; }
.border-info { border-color: var(--cl-info) !important; }
.border-light { border-color: var(--cl-border) !important; }
.border-dark { border-color: var(--cl-border-strong) !important; }
.border-white { border-color: var(--cl-text) !important; }

.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.float-start { float: left !important; }
.float-end { float: right !important; }

/* Lead paragraph under a card heading. These explain how a screen behaves and
   were sitting hard against the controls they describe. */
.card-body > p.text-muted {
    margin-bottom: 20px;
    max-width: 78ch;
    line-height: 1.6;
}

/* --- Inline row editors ------------------------------------------------
   Screens like Levels and the Streak ladder are one <form> per row, because
   each row saves independently — a real <table> cannot wrap rows in separate
   forms. The header below gives them a table's readability without one:
   column names are printed once instead of on every row.
   ---------------------------------------------------------------------- */
.cl-grid-head {
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--cl-border);
}

.cl-grid-head > [class*='col'] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cl-text-subtle);
}

.cl-grid-row {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--cl-border);
}

.cl-grid-row:hover {
    background: var(--cl-surface-2);
}

/* A delete control that reads as an icon button rather than a red pill. */
.cl-row-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0 !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    background: transparent !important;
    color: var(--cl-text-subtle) !important;
    font-size: 15px;
    line-height: 1;
}

.cl-row-delete:hover {
    background: var(--cl-danger-soft) !important;
    border-color: var(--cl-danger) !important;
    color: var(--cl-danger) !important;
}

/* == 19. List-screen primitives =========================================
   Shared by the cashout screens and reusable anywhere a list needs status,
   conditions or a brand mark.
   ====================================================================== */

/* Bootstrap 5 renamed `.sr-only`; sleek only has the old name. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-subtle {
    color: var(--cl-text-subtle) !important;
}

/* Tabular figures, so money and counts align down a column instead of
   jittering with the width of each digit. */
.cl-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* Status dot: carries "is this live" without spending a whole column. */
.cl-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
}

.cl-dot-on { background: var(--cl-accent); }
.cl-dot-off { background: var(--cl-text-subtle); }

/* Condition chips — each gate stays separately readable. */
.cl-chip {
    display: inline-block;
    padding: 2px 7px;
    margin: 1px 3px 1px 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cl-text-muted);
    background: var(--cl-surface-3);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-pill);
    white-space: nowrap;
}

/* Inactive rows and cards recede without becoming unreadable. */
.cl-row-muted > td {
    opacity: 0.55;
}

.cl-card-muted {
    opacity: 0.75;
}

.cl-card-muted:hover {
    opacity: 1;
}

.cl-empty {
    padding: 22px;
    text-align: center;
    color: var(--cl-text-muted);
    background: var(--cl-surface-2);
    border: 1px dashed var(--cl-border-strong);
    border-radius: var(--cl-radius);
}

.cl-empty p {
    color: var(--cl-text-muted);
}

/* Brand mark in a card header. */
.cl-brand-thumb {
    width: 38px;
    height: 38px;
    border-radius: var(--cl-radius);
    object-fit: contain;
    border: 1px solid var(--cl-border);
    flex: 0 0 38px;
}

.cl-brand-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--cl-text);
    letter-spacing: 0.02em;
}

/* Click-the-logo-to-replace control on the brands editor. */
.cl-thumb-picker {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
    cursor: pointer;
    position: relative;
}

.cl-thumb-picker img,
.cl-thumb-picker .cl-thumb-empty {
    width: 40px;
    height: 40px;
    border-radius: var(--cl-radius);
    object-fit: contain;
    border: 1px solid var(--cl-border);
    transition: border-color 0.12s ease;
}

.cl-thumb-picker .cl-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--cl-text);
}

.cl-thumb-picker:hover img,
.cl-thumb-picker:hover .cl-thumb-empty {
    border-color: var(--cl-accent);
}

/* Marks the row as having a pending upload — otherwise choosing a file gives
   no feedback at all, since the hidden input shows nothing. */
.cl-thumb-picker:focus-within img,
.cl-thumb-picker:focus-within .cl-thumb-empty {
    border-color: var(--cl-accent);
    box-shadow: var(--cl-ring);
}

/* Locale flags. A fixed box keeps the column aligned whatever aspect ratio
   was uploaded — these were rendering at their natural width. */
.cl-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--cl-border);
    background: var(--cl-surface-3);
}

.cl-flag-empty {
    font-size: 10px;
    font-weight: 600;
    color: var(--cl-text-subtle);
    letter-spacing: 0.04em;
}

/* Placeholder tile on the "add" row of the brands grid. */
.cl-thumb-picker .cl-thumb-add {
    border-style: dashed;
    border-color: var(--cl-border-strong);
    color: var(--cl-text-subtle);
    background: transparent !important;
    font-size: 18px;
    font-weight: 400;
}

/* Language picker, now sitting beside the account menu. Sized to read as a
   peer of the avatar button rather than a stray nav link. */
.navbar .navbar-right .navbar-nav .nav-item .cl-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px !important;
    margin-right: 4px;
    font-size: 12.5px !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1 !important;
    color: var(--cl-text-muted) !important;
    background: transparent;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
}

.navbar .navbar-right .navbar-nav .nav-item .cl-lang-toggle:hover {
    background: var(--cl-surface-2);
    border-color: var(--cl-border-strong);
    color: var(--cl-text) !important;
}

/* Bootstrap's caret is a bordered triangle that renders as a dark blob here. */
.cl-lang-toggle::after {
    border-top-color: currentColor;
    margin-left: 1px;
}

/* Marks the locale currently in use — the list gave no indication of it. */
.dropdown-menu .dropdown-item.active {
    background: var(--cl-accent-soft) !important;
    color: var(--cl-accent) !important;
    font-weight: 500;
}

/* Hex field with a live swatch. */
.cl-colour-field {
    position: relative;
}

.cl-colour-field .form-control {
    padding-left: 32px !important;
}

.cl-swatch {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid var(--cl-border-strong);
    pointer-events: none;
    z-index: 2;
}

/* == 20. Responsive ===================================================== */

/* Tablet keeps the collapsed rail from section 17 — sleek.js applies
   `sidebar-minified` itself between 768px and 991px (sleek.js:132). */

/* Phone: the rail is too narrow to be useful, so the sidebar becomes a
   drawer. `sidebar-minified` is the only class the toggle sets while <body>
   is `sidebar-fixed`, so it doubles as the open state here.

   The previous rule keyed on `body.sidebar-toggled`, a class nothing in
   sleek.js ever sets — the sidebar was translated off-screen with no way
   to bring it back, which is why the button appeared dead on mobile. */
@media (max-width: 767.98px) {
    .sidebar-fixed .page-wrapper,
    .sidebar-fixed-offcanvas .page-wrapper,
    .sidebar-static .page-wrapper,
    .sidebar-fixed.sidebar-minified .page-wrapper,
    .sidebar-static.sidebar-minified .page-wrapper {
        padding-left: 0 !important;
    }

    .header-fixed .main-header,
    .sidebar-fixed.header-fixed .page-wrapper .main-header,
    .sidebar-minified.header-fixed .main-header,
    .sidebar-fixed.sidebar-minified.header-fixed .page-wrapper .main-header {
        left: 0 !important;
    }

    .left-sidebar,
    #sidebar,
    .sidebar-minified .left-sidebar,
    .sidebar-minified #sidebar,
    .sidebar-minified .left-sidebar:hover {
        width: var(--cl-sidebar-w) !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 1050;
    }

    body.sidebar-minified .left-sidebar,
    body.sidebar-minified #sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.6);
    }

    /* Labels stay visible in the drawer — section 17 hides them for the rail. */
    .sidebar-minified .left-sidebar .nav-text,
    .sidebar-minified .left-sidebar .caret,
    .sidebar-minified .left-sidebar .section-title,
    .sidebar-minified .left-sidebar .app-brand .brand-name {
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
    }

    .sidebar-minified .left-sidebar .section-title {
        height: auto !important;
        padding: 16px 10px 6px !important;
        margin: 0 !important;
    }

    .sidebar-minified .left-sidebar .sidebar-inner > li > a,
    .sidebar-minified .left-sidebar .sidebar-inner > li > a.sidenav-item-link {
        justify-content: flex-start !important;
        padding: 8px 10px !important;
        gap: 10px !important;
    }

    .sidebar-minified .left-sidebar .sub-menu {
        display: block;
    }

    .content {
        padding: 16px !important;
    }
}

/* Print: drop the dark canvas so exported pages are readable on paper. */
@media print {
    body,
    .content,
    .card {
        background: #fff !important;
        color: #000 !important;
    }

    .left-sidebar,
    .main-header,
    .footer {
        display: none !important;
    }
}

/* == 20. App builder ====================================================
   The config editor. Everything here is prefixed `cl-` and used only by the
   Apps screens, so it can be read as one unit rather than hunted for among the
   template overrides above.
   ======================================================================= */

/* --- Editing shell ----------------------------------------------------- */

.cl-editor {
    display: grid;
    /* Nav, form, preview. The form is the only elastic column: the nav is a
       list of fixed labels and the preview is a phone, and neither reads
       better for being wider. */
    grid-template-columns: 232px minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.cl-editor.is-preview-hidden {
    grid-template-columns: 232px minmax(0, 1fr);
}

/* Hiding the preview has to hide the preview.

   Dropping the third track on its own does not: the element is still a grid
   child, so it auto-places into the next row — under the navigation, at the
   left, at whatever width is left over. That is what "the preview slid to the
   bottom" was. It was never a layout that needed tuning; the panel was simply
   still there.

   Unconditional, and after every `grid-template-columns` rule, so no breakpoint
   can reintroduce it. */
.cl-editor.is-preview-hidden .cl-preview-col {
    display: none;
}

/* The preview narrows before it goes anywhere.

   It used to vanish outright below a 1500px *viewport* — but the editor is
   ~300px narrower than the viewport, so on a 1440 or 1512 laptop the phone was
   simply never there, on any tab, with nothing on screen to say why. A control
   that disappears without explanation reads as a bug, and it was reported as
   one. */
@media (max-width: 1600px) {
    .cl-editor {
        grid-template-columns: 200px minmax(0, 1fr) 300px;
        gap: 16px;
    }

    .cl-editor.is-preview-hidden {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}

/* Below this a phone beside a form genuinely does not fit, so it goes under the
   form — announced, rather than silently relocated. */
@media (max-width: 1180px) {
    .cl-editor,
    .cl-editor.is-preview-hidden {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .cl-editor .cl-preview-col {
        grid-column: 1 / -1;
        position: static;
        max-width: 420px;
    }

    .cl-preview-col::before {
        content: attr(data-stacked-label);
        display: block;
        margin-bottom: 8px;
        color: var(--cl-text-muted);
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    .cl-editor,
    .cl-editor.is-preview-hidden {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Sticky so the section list survives a long form. `--cl-header-h` plus the
   content padding, or it slides under the fixed header. */
/* Both follow the form down a long page.

   This depends on `.cl-editor { align-items: start }` above: a stretched grid
   item fills its row and then has nowhere to stick to. Removing that line looks
   harmless and quietly breaks both of these. */
.cl-editor-nav,
.cl-preview-col {
    position: sticky;
    align-self: start;
    top: calc(var(--cl-header-h) + 16px);
    max-height: calc(100vh - var(--cl-header-h) - 32px);
    overflow-y: auto;
}

/* The phone is the point; the scrollbar beside it is not. */
.cl-preview-col::-webkit-scrollbar { width: 0; }

.cl-editor-nav {
    background: var(--cl-surface);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    padding: 8px;
    max-height: calc(100vh - var(--cl-header-h) - 32px);
    overflow-y: auto;
}

.cl-nav-group {
    padding: 12px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cl-text-subtle);
}

.cl-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--cl-radius);
    color: var(--cl-text-muted);
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
}

.cl-nav-item:hover {
    background: var(--cl-surface-2);
    color: var(--cl-text);
    text-decoration: none;
}

.cl-nav-item.is-active {
    background: var(--cl-accent-soft);
    color: var(--cl-text);
    box-shadow: inset 2px 0 0 var(--cl-accent);
}

.cl-nav-item .mdi {
    font-size: 16px;
    opacity: .8;
}

/* --- Page head --------------------------------------------------------- */

.cl-pagehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.cl-pagehead h1 {
    font-size: 20px;
    margin: 0 0 4px;
}

.cl-pagehead p {
    margin: 0;
    color: var(--cl-text-muted);
    font-size: 13px;
}

.cl-crumbs {
    font-size: 12px;
    color: var(--cl-text-subtle);
    margin-bottom: 6px;
}

.cl-crumbs a {
    color: var(--cl-text-muted);
}

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

.cl-card {
    margin-bottom: 16px;
}

.cl-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cl-card-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cl-card-icon {
    color: var(--cl-text-subtle);
    margin-right: 6px;
}

.cl-card-note {
    margin: -4px 0 18px;
    color: var(--cl-text-muted);
    font-size: 13px;
    max-width: 68ch;
}

.cl-card-compact .card-body {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* --- Fields ------------------------------------------------------------ */

.cl-field {
    margin-bottom: 16px;
}

.cl-field .form-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cl-text-muted);
    margin-bottom: 6px;
}

.cl-req {
    color: var(--cl-danger);
}

.cl-hint {
    display: block;
    margin-top: 6px;
    color: var(--cl-text-subtle);
    font-size: 12px;
    line-height: 1.45;
}

.cl-error {
    display: block;
    margin-top: 6px;
    color: var(--cl-danger);
    font-size: 12px;
}

.cl-mono {
    font-family: var(--cl-font-mono);
    font-size: 12.5px;
    line-height: 1.6;
}

.cl-help {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cl-text-subtle);
    cursor: help;
    line-height: 1;
}

.cl-help:hover,
.cl-help:focus {
    color: var(--cl-accent);
    outline: none;
}

/* --- Toggle ------------------------------------------------------------ */

.cl-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.cl-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cl-toggle-track {
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    border-radius: var(--cl-radius-pill);
    background: var(--cl-surface-3);
    border: 1px solid var(--cl-border-strong);
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

.cl-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cl-text-subtle);
    transition: transform .15s ease, background .15s ease;
}

.cl-toggle input:checked + .cl-toggle-track {
    background: var(--cl-accent);
    border-color: var(--cl-accent);
}

.cl-toggle input:checked + .cl-toggle-track .cl-toggle-thumb {
    transform: translateX(16px);
    background: var(--cl-accent-fg);
}

.cl-toggle input:focus-visible + .cl-toggle-track {
    box-shadow: var(--cl-ring);
}

.cl-toggle-label {
    font-size: 13px;
    color: var(--cl-text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cl-toggle-hint {
    margin-left: 46px;
}

/* --- Colour ------------------------------------------------------------ */

.cl-color {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-color-swatch {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--cl-border-strong);
    border-radius: var(--cl-radius);
    background: none;
    cursor: pointer;
}

.cl-color-swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.cl-color-swatch::-webkit-color-swatch { border: 0; border-radius: 5px; }
.cl-color-swatch::-moz-color-swatch { border: 0; border-radius: 5px; }

.cl-color-hex {
    font-family: var(--cl-font-mono);
    text-transform: lowercase;
}

.cl-contrast strong { color: var(--cl-text); }
.cl-contrast.is-fail { color: var(--cl-danger); }
.cl-contrast.is-warn { color: var(--cl-warning); }
.cl-contrast.is-pass { color: var(--cl-success); }

/* --- Icon picker ------------------------------------------------------- */

.cl-icon-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-icon-preview {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    background: var(--cl-surface-2);
    color: var(--cl-text-muted);
    font-size: 18px;
    overflow: hidden;
}

.cl-icon-preview img {
    max-width: 100%;
    max-height: 100%;
}

.cl-icon-preview .material-icons { font-size: 20px; }

.cl-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
    max-height: 46vh;
    overflow-y: auto;
    padding: 4px;
}

.cl-icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border: 1px solid transparent;
    border-radius: var(--cl-radius);
    background: none;
    color: var(--cl-text-muted);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    word-break: break-all;
    cursor: pointer;
}

.cl-icon-cell .material-icons { font-size: 20px; }

.cl-icon-cell:hover {
    background: var(--cl-surface-2);
    border-color: var(--cl-border);
    color: var(--cl-text);
}

/* --- Image ------------------------------------------------------------- */

.cl-image-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    margin-bottom: 8px;
    border: 1px dashed var(--cl-border-strong);
    border-radius: var(--cl-radius);
    background: var(--cl-surface-2);
    color: var(--cl-text-subtle);
    cursor: pointer;
    overflow: hidden;
}

.cl-image-drop:hover,
.cl-image-drop.is-over {
    border-color: var(--cl-accent);
    color: var(--cl-text-muted);
}

.cl-image-drop:focus-visible {
    outline: none;
    box-shadow: var(--cl-ring);
}

.cl-image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.cl-image-empty .mdi { font-size: 26px; }

.cl-image-thumb {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
}

/* --- Sortable ---------------------------------------------------------- */

.cl-sortable-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    background: var(--cl-surface-2);
}

.cl-sortable-row.is-dragging {
    opacity: .4;
}

.cl-sortable-row.is-over {
    border-color: var(--cl-accent);
}

.cl-grip {
    flex: 0 0 auto;
    color: var(--cl-text-subtle);
    cursor: grab;
    font-size: 18px;
    line-height: 1;
}

.cl-grip:active { cursor: grabbing; }

.cl-sortable-row .cl-order {
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    font-family: var(--cl-font-mono);
    font-size: 11px;
    color: var(--cl-text-subtle);
}

/* --- Empty state ------------------------------------------------------- */

.cl-empty {
    padding: 44px 20px;
    text-align: center;
    color: var(--cl-text-muted);
}

.cl-empty .mdi {
    font-size: 40px;
    color: var(--cl-text-subtle);
}

.cl-empty h4 {
    margin: 12px 0 6px;
    font-size: 15px;
    color: var(--cl-text);
}

.cl-empty p {
    margin: 0 auto;
    max-width: 46ch;
    font-size: 13px;
}

.cl-empty-action { margin-top: 18px; }

/* --- Save bar ---------------------------------------------------------- */

/* ── The save control, in a card header ─────────────────────────────────────
   A section saves as one thing, so it has one button, and it is always in the
   same place: the top right of the section's first card, beside the title.

   It used to be a bar pinned to the bottom of the form, which put it in the gap
   between two cards — styled like both and belonging to neither. On the Drawer
   screen "Save drawer" appeared to sit on top of the Entries list, and "which
   fields does this save?" had no answer on screen. */
.cl-savebar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.cl-savebar-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--cl-text-muted);
    white-space: nowrap;
}

/* The card header is a tight row; on a narrow screen the status drops away
   rather than pushing the button off the end of it. */
@media (max-width: 900px) {
    .cl-savebar-status { display: none; }
}

.cl-savebar-dirty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--cl-warning);
}

.cl-savebar-clean { color: var(--cl-text-subtle); }
.cl-savebar-note { color: var(--cl-text-subtle); }
.cl-savebar-actions { display: flex; align-items: center; gap: 8px; }

/* --- Preview ----------------------------------------------------------- */

.cl-preview {
    background: var(--cl-surface);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    padding: 14px;
}

.cl-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--cl-text-muted);
}

.cl-phone {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    aspect-ratio: 9 / 19.5;
    border: 8px solid #1a1a1a;
    border-radius: 34px;
    box-shadow: 0 0 0 1px var(--cl-border-strong), 0 18px 40px rgba(0, 0, 0, .5);
    overflow: hidden;
    background: #000;
}

.cl-phone iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* --- App list ---------------------------------------------------------- */

.cl-appgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.cl-appcard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    background: var(--cl-surface);
}

.cl-appcard:hover { border-color: var(--cl-border-strong); }

.cl-appcard h3 {
    margin: 0;
    font-size: 15px;
}

.cl-appcard h3 a { color: var(--cl-text); }

.cl-appcard-url {
    font-size: 12px;
    color: var(--cl-text-muted);
    word-break: break-all;
}

.cl-appcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 11.5px;
    color: var(--cl-text-subtle);
}

.cl-appcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--cl-border);
}

.cl-key {
    font-family: var(--cl-font-mono);
    font-size: 11px;
    color: var(--cl-text-subtle);
    word-break: break-all;
}

/* --- Badges ------------------------------------------------------------ */

.cl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--cl-radius-pill);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}

.cl-badge-active { background: var(--cl-success-soft); color: var(--cl-success); }
.cl-badge-draft { background: var(--cl-info-soft); color: var(--cl-info); }
.cl-badge-suspended { background: var(--cl-danger-soft); color: var(--cl-danger); }
.cl-badge-unpublished { background: var(--cl-warning-soft); color: var(--cl-warning); }

/* --- Confirm dialog ---------------------------------------------------- */

.cl-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .6);
}

.cl-modal {
    width: 100%;
    max-width: 440px;
    padding: 22px;
    border: 1px solid var(--cl-border-strong);
    border-radius: var(--cl-radius-lg);
    background: var(--cl-surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.cl-modal-lg { max-width: 680px; }

.cl-modal h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.cl-modal p {
    margin: 0 0 20px;
    color: var(--cl-text-muted);
    font-size: 13px;
}

.cl-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cl-modal-search { margin-bottom: 12px; }

/* --- List rows --------------------------------------------------------- */

.cl-row { align-items: flex-start; }

.cl-row-body { flex: 1 1 auto; min-width: 0; }

.cl-row-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cl-text);
    font-size: 13px;
    text-align: left;
}

.cl-row-summary:hover { color: var(--cl-accent); }

.cl-row-summary .cl-row-caret {
    margin-left: auto;
    color: var(--cl-text-subtle);
    transition: transform .15s ease;
}

.cl-row-summary[aria-expanded='true'] .cl-row-caret { transform: rotate(180deg); }

.cl-row-summary code {
    font-family: var(--cl-font-mono);
    font-size: 11.5px;
    color: var(--cl-text-muted);
}

.cl-row-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cl-border);
}

.cl-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.cl-row-actions .cl-confirm-form { margin-left: auto; }

.cl-row-muted { opacity: .5; }

.cl-add {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--cl-border-strong);
}

.cl-add-title {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cl-text-subtle);
}

/* --- Rule tester ------------------------------------------------------- */

.cl-tester-result {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    background: var(--cl-surface-2);
    font-size: 13px;
}

.cl-tester-verdict { display: flex; align-items: center; gap: 8px; }
.cl-tester-verdict strong { color: var(--cl-accent); }

.cl-tester-trace {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--cl-text-muted);
}

.cl-tester-trace li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

.cl-tester-trace .mdi { font-size: 14px; }
.cl-tester-trace .is-hit { color: var(--cl-success); }
.cl-tester-trace .is-miss { color: var(--cl-text-subtle); }
.cl-tester-trace .is-error { color: var(--cl-danger); }

/* --- Diff -------------------------------------------------------------- */

.cl-diff-section {
    margin-bottom: 14px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    overflow: hidden;
}

.cl-diff-head {
    padding: 8px 12px;
    background: var(--cl-surface-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--cl-text);
}

.cl-diff-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 12px;
    border-top: 1px solid var(--cl-border);
    font-size: 12px;
    align-items: baseline;
}

.cl-diff-path {
    font-family: var(--cl-font-mono);
    font-size: 11.5px;
    color: var(--cl-text-muted);
    word-break: break-all;
}

.cl-diff-before { color: var(--cl-text-subtle); text-decoration: line-through; }
.cl-diff-after { color: var(--cl-text); }
.cl-diff-row.is-added .cl-diff-after { color: var(--cl-success); }
.cl-diff-row.is-removed .cl-diff-after { color: var(--cl-danger); }

.cl-snippet {
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    background: var(--cl-surface-2);
    overflow-x: auto;
}

/* sleek: `pre code` (0,0,2) sets `color:#1b223c` — the light theme's navy,
   which on this surface is dark blue on near-black and simply cannot be read.
   Inline `code` elsewhere is fine because the rule above it wins there; only
   the ones inside a `<pre>` lose. Specificity is enough, so no !important.

   The border, background and padding go too: they belong to inline code, and
   inside a block they draw a second box around the first one. */
.cl-snippet code {
    color: var(--cl-text);
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
}

.cl-image-drop.is-uploading { opacity: .6; }

/* ═══════════════════════════════════════════════════════════════════════════
   Theme Studio
   ═══════════════════════════════════════════════════════════════════════════
   The one section that is eight forms rather than one. Everything below reuses
   the panel's own custom properties — the studio shows an app's colours, and
   the surest way to make those unreadable is to draw them on a surface that
   drifted from the rest of the panel.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-studio-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--cl-border);
    margin-bottom: 18px;
}

.cl-studio-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    color: var(--cl-text-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}

.cl-studio-tab:hover { color: var(--cl-text); text-decoration: none; }

.cl-studio-tab.is-active {
    color: var(--cl-text);
    border-bottom-color: var(--cl-accent);
}

/* Carried across tabs on purpose: whoever broke the palette is usually
   somewhere else by the time it matters. */
.cl-studio-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    color: var(--cl-warning);
    background: var(--cl-warning-soft);
    border-radius: 50%;
}

.cl-studio-note { color: var(--cl-text-muted); margin: 0 0 14px; }

.cl-studio-editing {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 16px;
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
}

/* ── the theme list ──────────────────────────────────────────────────────── */

.cl-theme-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    margin-bottom: 8px;
}

.cl-theme-row.is-active { border-color: var(--cl-accent-border); background: var(--cl-accent-soft); }

.cl-theme-swatch { display: flex; gap: 3px; }
.cl-theme-swatch-half { display: flex; flex-direction: column; gap: 2px; }
.cl-theme-swatch-half i {
    display: block;
    width: 18px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid var(--cl-border);
}

.cl-theme-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1; min-width: 0; }

/* Without this the badge is a full-width bar: it is the only child of a
   stretch-aligned flex column. */
.cl-theme-name .cl-badge { align-self: flex-start; }
.cl-theme-actions { display: flex; align-items: center; gap: 6px; }
.cl-theme-actions form { margin: 0; }
.cl-rename { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cl-border); }

/* ── the catalogue gallery ───────────────────────────────────────────────── */

.cl-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.cl-gallery-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    margin: 0;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
}

.cl-gallery-card:hover { border-color: var(--cl-border-strong); }

/* Both modes, because half the appeal of a theme is what it does in the dark
   and a light-only swatch hides exactly that. */
.cl-gallery-preview { display: flex; gap: 6px; }

.cl-gallery-phone {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 92px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--cl-border);
    overflow: hidden;
}

.cl-gallery-bar { height: 12px; border-radius: 3px; }
.cl-gallery-card-fill { flex: 1; border-radius: 5px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cl-gallery-card-fill i { display: block; height: 4px; width: 85%; border-radius: 2px; opacity: 0.75; }
.cl-gallery-cta { height: 14px; border-radius: 999px; }

.cl-gallery-meta { display: flex; flex-direction: column; gap: 1px; min-height: 52px; }
.cl-gallery-vertical { font-size: 11px; opacity: 0.7; }

/* ── the token grid ──────────────────────────────────────────────────────── */

.cl-tokens { width: 100%; border-collapse: collapse; }

.cl-tokens th,
.cl-tokens td { padding: 7px 8px; border-bottom: 1px solid var(--cl-border); vertical-align: middle; }

.cl-tokens thead th { color: var(--cl-text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.cl-tokens tbody th { font-weight: 500; width: 26%; }
.cl-tokens tbody th code { display: block; font-size: 11px; background: none; padding: 0; }

/* The flex lives in a wrapper, never on the cell: a `td` with `display:flex`
   drops out of the table layout, and the two modes stop being columns. */
.cl-tokens td.cl-token-cell { width: 37%; }

.cl-token { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.cl-token.is-broken .cl-token-hex { border-color: var(--cl-warning); }

.cl-token-name {
    display: block;
    font-size: 11px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--cl-text-subtle);
}

.cl-token-chip {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 5px;
    border: 1px solid var(--cl-border-strong);
}

.cl-token-hex { width: 108px; font-family: var(--cl-mono, monospace); font-size: 12px; }

/* An empty field is not blank — it is "work this out for me". */
.cl-token-auto {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--cl-text-subtle);
    border: 1px dashed var(--cl-border-strong);
    border-radius: 4px;
    padding: 1px 5px;
}

.cl-token-ratio { font-size: 11px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.cl-token-ratio.is-ok { color: var(--cl-success); background: var(--cl-success-soft); }
.cl-token-ratio.is-bad { color: var(--cl-warning); background: var(--cl-warning-soft); }

.cl-contrast-summary ul { margin: 8px 0 0; padding-left: 18px; }
.cl-contrast-summary li { margin-bottom: 3px; }

/* ── previews on the other tabs ──────────────────────────────────────────── */

.cl-type-sample {
    margin-top: 14px;
    padding: 16px;
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
}

.cl-shape-preview { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.cl-shape-preview span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 44px;
    font-size: 11px;
    color: var(--cl-text-muted);
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-border-strong);
}

.cl-level-label { color: var(--cl-text-muted); padding-top: 30px; }
.cl-gradient-row { align-items: flex-start; }
.cl-gradient-preview { height: 38px; margin-top: 28px; border-radius: var(--cl-radius); border: 1px solid var(--cl-border); }

/* A duration is a number until you have watched it. */
.cl-motion-demo { display: flex; align-items: center; gap: 14px; margin-top: 10px; }

.cl-motion-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cl-accent);
    transform: translateX(0);
}

.cl-motion-dot.is-playing { transform: translateX(220px); }

@media (max-width: 900px) {
    .cl-tokens tbody th { width: auto; }
    .cl-token-hex { width: 92px; }
}

/* ── Preview controls ────────────────────────────────────────────────────
   Above the phone rather than inside it: they change what is being looked at,
   not what the app is configured to be, and mixing the two in one surface is
   how an operator ends up shipping the mode they were only previewing.
   ──────────────────────────────────────────────────────────────────────── */

.cl-preview-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.cl-preview-controls .form-control { flex: 1; min-width: 0; height: 30px; font-size: 12px; padding: 2px 8px; }

.cl-preview-modes {
    display: flex;
    flex: none;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    overflow: hidden;
}

.cl-preview-modes button {
    border: 0;
    background: transparent;
    color: var(--cl-text-muted);
    padding: 4px 9px;
    line-height: 1;
    font-size: 14px;
}

.cl-preview-modes button.is-active { background: var(--cl-accent-soft); color: var(--cl-accent); }

.cl-preview-scale {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--cl-text-muted);
}

.cl-preview-scale input { flex: 1; min-width: 0; }
.cl-preview-scale output { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }

/* ── The theme editor's breadcrumb ───────────────────────────────────────
   Two scopes needed telling apart: the app's own tabs across the top, and a
   theme you enter from the list. This bar is the thing that says which one you
   are in, and whose colours are on screen.
   ──────────────────────────────────────────────────────────────────────── */

.cl-studio-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
}

.cl-studio-crumb a { display: inline-flex; align-items: center; gap: 5px; color: var(--cl-text-muted); }
.cl-studio-crumb a:hover { color: var(--cl-text); text-decoration: none; }
.cl-studio-crumb-sep { color: var(--cl-text-subtle); }
.cl-studio-crumb strong { font-size: 15px; }
.cl-studio-switch { margin-left: auto; width: auto; min-width: 160px; height: 30px; font-size: 12px; padding: 2px 8px; }

.cl-badge-active { background: var(--cl-accent-soft); color: var(--cl-accent); }

/* The toggle lives in the page head now, so it has to show its own state —
   nothing beside it does. */
[data-preview-toggle].is-active { background: var(--cl-accent-soft); color: var(--cl-accent); }

/* ── Setting an app up from its website ─────────────────────────────────────
   Every colour here comes from the tokens at the top of this file. An earlier
   version of this block invented names — `--cl-surface-alt`, `--cl-primary` —
   which resolve to nothing, so each one fell through to the light-mode literal
   written beside it as a fallback. On the dark panel that painted a white
   strip under the buttons and a white box behind two headings that were still
   being drawn in white. Fallbacks are not a safety net when the variable is
   simply misspelt; they are a second design nobody asked for. */

/* The action row at the foot of a card. No background: the card already has
   one, and a second surface behind a button reads as a toolbar. */
.cl-card-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.cl-card-action .btn[disabled] { opacity: .75; cursor: default; }

/* The waiting lives on the button, not in place of the form. */
.cl-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 7px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cl-spin .7s linear infinite;
}

.cl-spinner[hidden] { display: none; }

@keyframes cl-spin { to { transform: rotate(360deg); } }

/* The hint and the character count, sharing a line under a textarea. */
.cl-card-meta {
    display: flex;
    justify-content: flex-end;
    margin: -10px 0 18px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cl-text-muted);
}

.cl-card-meta span:last-child { flex: none; font-variant-numeric: tabular-nums; }

/* ── The progress list ──────────────────────────────────────────────────────
   Steps appear one at a time as the server reports each finished. A plain
   ordered list would renumber itself as items arrive, which reads as the list
   changing rather than as it growing — so the marker is a tick instead. */
.cl-ai-steps {
    list-style: none;
    margin: 0 0 18px;
    padding: 14px 16px;
    display: grid;
    gap: 10px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    background: var(--cl-surface-2);
}

.cl-ai-steps[hidden] { display: none; }

.cl-ai-step {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-left: 26px;
    position: relative;
    font-size: 14px;
}

.cl-ai-step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--cl-border-strong);
}

.cl-ai-step.is-done::before {
    border-color: var(--cl-accent);
    background: var(--cl-accent);
    /* The tick, drawn rather than fetched: one more request for sixteen
       pixels is not worth an asset. Stroked in the accent's foreground so it
       stays legible if the accent is ever re-themed. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a0a0a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

/* A step announced but not yet superseded is still running, and the longest
   one — asking the model — would otherwise read as "finished, and now nothing
   is happening". Which step that is, is something only the stream knows, so
   the class comes from the script rather than from a selector guessing at
   document order. */
.cl-ai-step.is-running::before {
    background: none;
    border-color: var(--cl-accent);
    animation: cl-ai-pulse 1.2s ease-in-out infinite;
}

.cl-ai-step span { color: var(--cl-text-muted); font-size: 13px; }

@keyframes cl-ai-pulse {
    50% { opacity: 0.4; }
}

/* ── "Not checked yet" ──────────────────────────────────────────────────────
   A field the AI wrote and a field the operator wrote look identical on
   screen, and they are not equally trustworthy. These say which is which,
   until somebody saves the section. */
.cl-nav-ai {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cl-warning);
    margin-left: auto;
    flex: none;
}

.cl-badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--cl-warning);
    background: var(--cl-warning-soft);
    border: 1px solid color-mix(in srgb, var(--cl-warning) 32%, transparent);
    text-decoration: none;
}

.cl-badge-ai:hover { color: var(--cl-warning); border-color: var(--cl-warning); }

.cl-ai-sections {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.cl-ai-sections li {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: capitalize;
}

.cl-ai-sections li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--cl-warning);
}

/* Reviewed keeps the slot so the list stays aligned; it just goes quiet. */
.cl-ai-sections li.is-reviewed::before { background: var(--cl-border-strong); }

/* ── The run record ─────────────────────────────────────────────────────── */
/* Same sleek leak as `.cl-snippet code`: a bare `<pre>` here holds the raw
   model output, and anything wrapped in `<code>` inside it would arrive navy. */
.cl-pre code {
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
}

.cl-pre {
    max-height: 420px;
    overflow: auto;
    font-size: 12px;
    line-height: 1.5;
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    background: var(--cl-surface-2);
    color: var(--cl-text);
}

.cl-facts { margin: 0; }

.cl-facts dt {
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cl-text-subtle);
}

.cl-facts dd { margin: 3px 0 14px; word-break: break-word; }
.cl-facts dd:last-child { margin-bottom: 0; }

/* ── The site chat ──────────────────────────────────────────────────────────
   Three lights rather than one switch. A visitor gets an answer only when the
   section is on, a model can be reached and the site has been read — and an
   operator can get any of those wrong on its own. Saying which one is missing
   costs a strip and saves somebody shipping a chat that never read anything. */
.cl-ready {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 14px;
    font-size: 13px;
}

.cl-ready-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cl-text-muted);
}

.cl-ready-item.is-ok { color: var(--cl-accent); }
.cl-ready-item.is-missing { color: var(--cl-warning); }

/* A transcript entry. Read-only, so a plain `<details>` rather than the
   sortable row the editable lists use — those carry a drag handle and a form,
   and neither means anything here. */
.cl-log {
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    background: var(--cl-surface-2);
    margin-bottom: 8px;
}

.cl-log-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 14px;
    list-style: none;
}

.cl-log-head::-webkit-details-marker { display: none; }
.cl-log-head:hover { background: var(--cl-surface-3); }
.cl-log[open] .cl-log-head { border-bottom: 1px solid var(--cl-border); }

.cl-log-body { padding: 14px; font-size: 14px; line-height: 1.6; }
.cl-log-body > p:first-child { margin: 0; }

/* The chat's usage figures. A row of numbers, sized so the ones that need
   noticing are the ones that are wrong. */
.cl-usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 18px;
}

.cl-usage > div { display: flex; flex-direction: column; gap: 2px; }

.cl-usage strong {
    font-size: 22px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.cl-usage span {
    font-size: 12px;
    color: var(--cl-text-muted);
}

/* Only when it is worth looking at. A zero failure rate in orange would teach
   the eye to ignore the colour. */
.cl-usage > div.is-warning strong { color: var(--cl-warning); }