/* =========================================================================
   CashLoop 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.
   ------------------------------------------------------------------------
   This is a drawn green square, not an image file — a placeholder standing in
   for a real logo. To use your own:

     1. Drop the file in  public/backend/assets/images/logo.svg
        (PNG works too — just change the extension in the url() below.)
     2. Set --cl-logo to that path. The square disappears automatically.

   Nothing in the Blade markup needs to change.
   ------------------------------------------------------------------------ */
/* Sidebar logo. The path is relative to this stylesheet, so `../images/`
   resolves to public/backend/assets/images/. Swap the filename here to change
   it — no Blade change needed. */
.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.

   `cashloop-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;
    }
}