/* =========================================================================
   Calorist 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;
}

/* Brand mark — sidebar header and the sign-in card.
   ------------------------------------------------------------------------
   Both surfaces use `.app-brand`, so this rule is the only place the logo is
   set; neither Blade template names an image.

   `novelnest-logo.png` is the app icon downscaled to 96px. The 512px original
   lives at public/app-icon.png and is what the public site and the stores use
   — but it is ~440 KB, and shipping that on every admin page to fill a 26px
   box is most of a second on a slow connection for something the size of a
   thumbnail. 96px is 4× the drawn size, so it stays crisp on a retina display.

   To use a different logo: drop the file in public/backend/assets/images/ and
   change the filename below. The path is relative to this stylesheet.
   ------------------------------------------------------------------------ */
.app-brand a::before {
    content: '';
    width: 26px;
    height: 26px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
    /* Rounded to match the icon's own corner radius, so it does not read as a
       square photo dropped next to the wordmark. */
    border-radius: 6px;
    background: url('../images/novelnest-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;
}

/* Bootstrap 4 paints input-group addons `#e9ecef` — a white block welded to a
   dark field, which is what the `%` beside the revenue-share box looked like.
   It also only styles them inside `.input-group-append`/`-prepend`, so an
   addon written the Bootstrap 5 way (a bare span in the group) loses its
   radius as well as its colour; both spellings are covered here. */
.input-group-text,
.input-group-append .input-group-text,
.input-group-prepend .input-group-text {
    background: var(--cl-surface-3, var(--cl-surface-2)) !important;
    border: 1px solid var(--cl-border) !important;
    color: var(--cl-text-muted, var(--cl-text)) !important;
    font-size: 13px;
    min-height: 36px;
    display: flex;
    align-items: center;
}

/* Both spellings again, for the join. Bootstrap 4 addons are grandchildren of
   the group (`.input-group > .input-group-append > .input-group-text`); the
   Bootstrap 5 spelling used across the economy settings, author earnings and
   author list screens makes them direct children, which Bootstrap 4 leaves
   with two rounded left corners butted against the field's two rounded right
   ones. Thirteen of those in the panel, all reading as a floating box rather
   than a suffix. */
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
}

/* Prefix form: `$` or a currency code sitting before the field. */
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-text:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
}

/* A bare addon is not a flex item Bootstrap 4 knows about, so it stretches to
   fill the row unless told to size to its own text. */
.input-group > .input-group-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !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.

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

/* ═══════════════════════════════════════════════════════════════════════════
   19. READ-ONLY UNTIL EDIT
   ═══════════════════════════════════════════════════════════════════════════

   Which of Edit / Save / Cancel is showing is decided here, off the class
   form-lock.js puts on the <form>, rather than by the script toggling three
   elements itself. One source of truth for the state, and no way for the
   buttons to disagree with the fields.

   The no-JS case is the default case: with neither class present the bar is a
   plain Save button and nothing is dimmed, so a form whose script failed to
   load is the fully-editable form this panel had before the feature. */

.form-lock-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 14px;
    background: var(--cl-surface, #1b1e24);
    border: 1px solid var(--cl-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
}

/* The actions sit hard right — the corner every panel puts Edit in. */
.form-lock-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Pinned below the fixed header so the button that unlocks the page is on
   screen for the whole page, not only for the part of it that happens to be
   scrolled to. */
.form-lock-bar--sticky {
    position: sticky;
    top: calc(var(--cl-header-h) + 8px);
    z-index: 30;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* A form scoped to one table row or one card gets the same bar, smaller and
   with no panel behind it — a row editor already sits in a bordered box, and a
   second box around three buttons reads as a second form. */
.form-lock-bar--inline {
    margin-bottom: 12px;
    padding: 0 0 8px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--cl-border, rgba(255, 255, 255, 0.08));
    border-radius: 0;
}

.form-lock-bar--inline .btn {
    min-height: 30px;
    padding: 4px 12px;
    font-size: 12.5px;
}

.form-lock-badge {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--cl-surface-2, rgba(255, 255, 255, 0.05));
    color: var(--cl-text-muted, rgba(255, 255, 255, 0.62));
}

.form-lock-badge--editing {
    background: rgba(46, 160, 87, 0.16);
    color: #4cc26b;
}

/* No JS: no class on the form, so the badges and the two lock-only buttons
   stay hidden and the bar is a plain Save. The form is fully editable, which
   is exactly what it was before this feature existed. */
.form-lock-bar [data-lock-edit],
.form-lock-bar [data-lock-cancel] {
    display: none;
}

/* Locked: the Read-only badge and Edit. */
form.is-locked .form-lock-badge--locked,
form.is-locked .form-lock-bar [data-lock-edit] {
    display: inline-flex;
}

form.is-locked .form-lock-bar [data-lock-save] {
    display: none;
}

/* Editing: the Editing badge, Cancel and Save. */
form.is-editing .form-lock-badge--editing,
form.is-editing .form-lock-bar [data-lock-cancel] {
    display: inline-flex;
}

/* A locked field should read as *information*, not as a broken input.

   Bootstrap's `:disabled` styling is built for "you cannot use this yet",
   which is the wrong message: the value is real and current, and the operator
   is meant to read it. So the greying is much lighter than the default and the
   cursor stays default rather than `not-allowed` — nothing here is forbidden,
   it is one click away. */
form.is-locked .form-control:disabled,
form.is-locked .form-control[readonly],
form.is-locked .form-select:disabled,
form.is-locked select:disabled,
form.is-locked textarea:disabled,
form.is-locked input:disabled {
    background-color: var(--cl-surface-2, rgba(255, 255, 255, 0.03)) !important;
    border-color: var(--cl-border, rgba(255, 255, 255, 0.08)) !important;
    color: var(--cl-text, inherit) !important;
    opacity: 1 !important;
    cursor: default;
}

form.is-locked .form-check-input:disabled {
    opacity: 0.55;
    cursor: default;
}

form.is-locked .form-check-input:disabled ~ .form-check-label {
    opacity: 0.85;
    cursor: default;
}

/* Buttons inside a locked form — media pickers, "add row", remove links — are
   actions, and an action on a locked form should look unavailable, which is
   the one place the default disabled treatment is right. */
form.is-locked button:disabled:not([data-lock-edit]) {
    opacity: 0.4;
    cursor: default;
}

/* Rich-text surfaces cannot be `disabled`; form-lock.js flips contenteditable
   and adds this instead. */
.is-locked trix-editor,
trix-editor.is-locked,
.chapter-editor__surface.is-locked {
    background-color: var(--cl-surface-2, rgba(255, 255, 255, 0.03));
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════

   The sidebar drawer is handled in section 18. This is everything else: the
   tables, the forms and the cards, which were built at desktop width and had
   almost no breakpoint work behind them.

   Ordered widest-first so each block narrows what the one above it set. */

/* ── Every table scrolls inside its own box ─────────────────────────────────

   The wrapper is added in the Blade views. This makes it behave: the page
   itself must never scroll sideways, because a horizontal scrollbar on <body>
   moves the sidebar and the header too and the whole panel feels broken. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.card-body > .table-responsive:last-child {
    margin-bottom: 0;
}

/* A scrollable table gives no hint that there is more to the right until you
   try. This fades the right edge while there is overflow to reach. */
@supports (animation-timeline: scroll(x)) {
    .table-responsive {
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        animation: cl-unmask linear;
        animation-timeline: scroll(self x);
        animation-range: contain;
    }

    @keyframes cl-unmask {
        to {
            mask-image: linear-gradient(to right, #000 100%, #000 100%);
        }
    }
}

@media (max-width: 1199.98px) {
    /* Dashboard stat rows: four across stops fitting well before the sidebar
       collapses, and three 33%-wide cards read better than four cramped ones. */
    .content {
        padding: 20px;
    }

    .card-body {
        padding: 18px;
    }
}

@media (max-width: 991.98px) {
    .content {
        padding: 16px;
    }

    .card-body {
        padding: 16px;
    }

    .card-header h2,
    .card-header-border-bottom h2 {
        font-size: 1.05rem;
    }

    /* A card header with a button on the right stacks rather than squeezing
       the title to two characters. */
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Forms laid out as a row of columns become a single column. Bootstrap
       already does this at `md`; these are the ones written as bare `col-md-*`
       with no small-screen partner, which collapse to full width anyway — the
       gap below keeps them from touching. */
    form .row > [class*='col-'] {
        margin-bottom: 4px;
    }
}

@media (max-width: 767.98px) {
    /* Tables are the main event on a phone. Tighten them hard: the alternative
       is a 12-column table scrolled two columns at a time. */
    .table th,
    .table td {
        padding: 8px 10px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .table-sm th,
    .table-sm td {
        padding: 6px 8px;
    }

    /* Wrap the one column that carries prose, or every row is a mile wide. */
    .table td.cl-wrap,
    .table th.cl-wrap {
        white-space: normal;
        min-width: 180px;
    }

    /* Header search is dead weight at this width; the account menu is not. */
    .main-header .search-form {
        display: none !important;
    }

    /* Pagination wraps rather than overflowing the card. */
    .pagination {
        flex-wrap: wrap;
        gap: 2px;
    }

    /* Buttons in a row of actions become a wrapping group with real hit
       targets — 44px is the size a thumb actually lands on. */
    .btn {
        min-height: 38px;
    }

    .btn-sm {
        min-height: 32px;
    }

    .form-lock-bar__actions {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .form-lock-bar__actions .btn {
        flex: 1 1 auto;
    }

    /* The chapter editor toolbar wrapped off the right edge of its box. */
    .chapter-editor__toolbar {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Charts: without an explicit height a canvas in a flex card grows without
       bound on resize, and the page ends up several screens tall with one
       chart on it. */
    .cl-chart-wrap,
    .card-body > canvas {
        max-height: 260px;
    }
}

@media (max-width: 575.98px) {
    .content {
        padding: 12px;
    }

    .card {
        border-radius: 10px;
    }

    .card-body {
        padding: 14px;
    }

    /* Stat tiles go one-up rather than two-up: two 50% tiles at 360px leaves
       each of them too narrow for the number it exists to show. */
    .cl-stat,
    .card .col-6.cl-stat {
        flex: 0 0 100%;
        max-width: 100%;
    }

    h1 {
        font-size: 1.35rem;
    }

    h2 {
        font-size: 1.15rem;
    }
}

/* == 21. Inline action bars ============================================= */

/*
 * A row of mixed controls — a badge, a label, a field, a button — put on one
 * baseline.
 *
 * Flexbox alone cannot do this. `align-items: center` centres boxes of
 * different heights, which still reads as ragged, and the heights here are
 * genuinely different: this theme gives `.btn-sm` a 28px min-height and every
 * `.form-control` a 36px one, while a `.badge` is only as tall as its own
 * padding. Three different heights on one line is what "not aligned" looks
 * like, and no amount of alignment utility fixes it — the sizes have to agree.
 *
 * So this sets one height for everything in the bar and lets each control
 * centre its own contents inside it. Put the class on the row; nested forms
 * and input groups are matched too, so a form can stay a form.
 */
.cl-inline-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.cl-inline-actions form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.cl-inline-actions .btn,
.cl-inline-actions .badge,
.cl-inline-actions .form-control,
.cl-inline-actions .form-control-sm,
.cl-inline-actions .input-group,
.cl-inline-actions .input-group-text,
.cl-inline-actions select {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0 !important;
}

.cl-inline-actions .btn,
.cl-inline-actions .badge {
    justify-content: center;
}

/* Labels sit on the same centre line rather than keeping the 6px bottom
   margin every other label in the panel needs. */
.cl-inline-actions label {
    margin-bottom: 0 !important;
    line-height: 32px;
    white-space: nowrap;
}

/* The number spinner's arrows are drawn against the field's own height; with
   the padding removed they crowd the digits. */
.cl-inline-actions input[type='number'] {
    padding-left: 10px !important;
}

/* == 22. Outline buttons ================================================ */

/*
 * The theme had no `.btn-outline-*` rules at all, so those buttons fell all
 * the way through to Sleek's Bootstrap 4 build — which paints
 * `.btn-outline-secondary` in `#1E201E`. That is near-black text and a
 * near-black border on a `#111` panel: the "Applications" button in the
 * Authors header, every status filter chip, and eight more besides were
 * effectively invisible until you moused over them. Hover then flipped to
 * white on `#1E201E`, a fill so dark it read as a rendering glitch rather
 * than a hover.
 *
 * Outline here means: transparent at rest, readable text, a hairline that
 * belongs to the panel, and a hover that *fills* — the same gesture
 * `.btn-secondary` already makes, one step lighter.
 *
 * `!important` on the interactive states is not decoration: Sleek writes them
 * as `.btn-outline-x:not(:disabled):not(.disabled):active`, which outranks a
 * plain class selector no matter which stylesheet loads last.
 */

.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light {
    background: transparent !important;
    border-color: var(--cl-border-strong) !important;
    color: var(--cl-text) !important;
    font-weight: 500;
}

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

.btn-outline-primary,
.btn-outline-success {
    background: transparent !important;
    border-color: var(--cl-accent-border) !important;
    color: var(--cl-accent) !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled):active {
    background: var(--cl-accent-soft) !important;
    border-color: var(--cl-accent) !important;
    color: var(--cl-accent) !important;
}

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

.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    background: var(--cl-danger-soft) !important;
    border-color: var(--cl-danger) !important;
    color: var(--cl-danger) !important;
}

.btn-outline-warning {
    background: transparent !important;
    border-color: rgba(245, 165, 36, 0.4) !important;
    color: var(--cl-warning) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:not(:disabled):not(.disabled):active {
    background: var(--cl-warning-soft) !important;
    border-color: var(--cl-warning) !important;
    color: var(--cl-warning) !important;
}

.btn-outline-info {
    background: transparent !important;
    border-color: rgba(106, 169, 255, 0.4) !important;
    color: var(--cl-info) !important;
}

.btn-outline-info:hover,
.btn-outline-info:not(:disabled):not(.disabled):active {
    background: var(--cl-info-soft) !important;
    border-color: var(--cl-info) !important;
    color: var(--cl-info) !important;
}

/* Sleek's focus ring is a 0.2rem halo in the *Bootstrap* palette — grey, blue,
   whatever the variant was — which lands next to this theme's green ring on
   the same screen. One ring. */
.btn-outline-secondary:focus,
.btn-outline-primary:focus,
.btn-outline-success:focus,
.btn-outline-danger:focus,
.btn-outline-warning:focus,
.btn-outline-info:focus,
.btn-outline-dark:focus,
.btn-outline-light:focus {
    box-shadow: none !important;
}

.btn-outline-secondary:focus-visible,
.btn-outline-primary:focus-visible,
.btn-outline-success:focus-visible,
.btn-outline-danger:focus-visible,
.btn-outline-warning:focus-visible,
.btn-outline-info:focus-visible,
.btn-outline-dark:focus-visible,
.btn-outline-light:focus-visible {
    box-shadow: var(--cl-ring) !important;
}

/* An outline button marked active is the selected state of a chip group. */
.btn-outline-secondary.active,
.btn-outline-primary.active,
.btn-outline-success.active {
    background: var(--cl-surface-3) !important;
    border-color: var(--cl-border-strong) !important;
    color: var(--cl-text) !important;
}

/* == 23. Small controls agree on one height ============================= */

/*
 * `.btn-sm` was 28px and `.form-control-sm` was 36px — Bootstrap sizes the
 * small field at ~29px, but §9's blanket `min-height: 36px` on every
 * `.form-control` outranks it and wins. So every search box sat 8px taller
 * than the Search button beside it, on every list screen in the panel. That
 * is the same defect as the Authors application row, only repeated about
 * twenty times.
 *
 * 32px for all of them: tall enough to hit, short enough to stay "small", and
 * the one number that makes a field, a button and a select line up without
 * per-page nudging.
 */
.btn-sm,
.btn-group-sm > .btn {
    min-height: 32px;
}

.form-control-sm,
select.form-control-sm,
.custom-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-prepend > .btn {
    min-height: 32px !important;
    height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 12.5px !important;
}

/* A small textarea is small in font, not in rows — pinning it to 32px would
   hide everything past the first line. */
textarea.form-control-sm {
    height: auto !important;
    min-height: 64px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* == 24. Bootstrap 5 spellings the panel actually uses =================== */

/*
 * `.btn-close` — fourteen of them, including the one in
 * `admin/partials/flash.blade.php` that appears on every screen with a flash
 * message.
 *
 * Bootstrap 5 draws the × as a background SVG on an otherwise empty button.
 * Bootstrap 4 has no such class, so all fourteen rendered as an invisible
 * zero-content box: the close control was there, focusable, and showed
 * nothing. Drawn here as an SVG data URI in the theme's text colour.
 */
.btn-close {
    box-sizing: content-box;
    width: 12px;
    height: 12px;
    padding: 6px;
    margin: 0;
    background: transparent
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ededed'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
        center / 12px auto no-repeat;
    border: 0;
    border-radius: var(--cl-radius);
    opacity: 0.55;
    cursor: pointer;
    min-height: 0;
    transition: opacity 0.12s ease, background-color 0.12s ease;
}

.btn-close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.06);
}

.btn-close:focus-visible {
    opacity: 1;
    box-shadow: var(--cl-ring);
    outline: none;
}

/* Alerts are `alert-dismissible`, which reserves space on the right for a
   close button Bootstrap 4 expects to be absolutely positioned. */
.alert-dismissible .btn-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

/* `.fs-*` — Bootstrap 5 font sizes, one use on the coin balance badge. */
.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }

/*
 * `.badge.bg-light` — nine of them, in the reports filter counts, the series
 * language chip, the user plan chip and the billing channel chip. §5 already
 * repaints `.bg-light` to the panel surface, which stops it being a white
 * block, but leaves an untinted pill with a transparent border that is hard to
 * pick out from the row behind it. A neutral chip needs its own hairline.
 */
.badge.bg-light,
.badge.bg-white,
.badge-light {
    background: var(--cl-surface-3) !important;
    color: var(--cl-text-muted) !important;
    border-color: var(--cl-border) !important;
}

/*
 * A count badge sitting *inside* a button — the reports and moderation filter
 * groups, the pending counter on the Authors status chips — cannot use a
 * surface colour, because the surface is the button. On the selected chip that
 * button is filled with the accent, and an amber or grey pill on green is
 * mud.
 *
 * Punch it out of the fill with a near-opaque dark pill and leave the *text*
 * colour to whichever badge variant is in use, so a pending count stays amber
 * and a plain count stays grey — both of which are light colours and read on
 * the dark pill whichever chip they land on.
 */
.btn > .badge {
    background: rgba(10, 10, 10, 0.72) !important;
    border-color: transparent !important;
}

/* == 25. Number steppers inside groups and bars ========================== */

/*
 * `novelnest-ui.js` wraps every `input[type=number]` in a `.cl-stepper` span so
 * it can draw its own spin buttons. That wrapper becomes the flex child of any
 * `.input-group` the field sits in, which pushes the input itself down to a
 * *grandchild* — so every `.input-group > .form-control` rule in Bootstrap and
 * in §9 silently stops matching. The visible result was the revenue-share box:
 * a 36px field welded to a 32px `%` addon with four rounded corners between
 * them, because none of the sizing or joining rules could see the input.
 *
 * The fix is to let the wrapper stand in for the field wherever a rule expects
 * a direct child, and to pass sizing through it to the input.
 */
.input-group > .cl-stepper {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0;
}

.input-group > .cl-stepper:not(:last-child) > .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .cl-stepper:not(:first-child) > .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group-sm > .cl-stepper > .form-control,
.cl-inline-actions .cl-stepper > .form-control {
    min-height: 32px !important;
    height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 12.5px !important;
}

.cl-inline-actions .cl-stepper,
.cl-inline-actions .input-group > .cl-stepper {
    height: 32px !important;
    display: block;
}

/* == 26. Sticky sidebars beside long lists ============================== */

/*
 * Twelve screens are a long list in `col-lg-8` with a short "Add X" form in
 * `col-lg-4` beside it. The form is a few hundred pixels tall; the list is not
 * — Tags runs to 10,300px, Currencies 4,500, Packages 3,900 — and a Bootstrap
 * column stretches to the row's height, so all of that is an empty column
 * scrolling past on the right. To add a tag after scrolling the list you had
 * to scroll 10,000px back up to reach the form.
 *
 * The form now travels with the list. `align-self: flex-start` is the part
 * that makes it work: without it the column is stretched to the full row
 * height by the flex row, leaving `position: sticky` no distance to move
 * within, and nothing happens.
 *
 * Only from `lg` up. Below that Bootstrap stacks the columns, the form sits
 * under the list, and pinning it would cover the list on a phone.
 */
@media (min-width: 992px) {
    .cl-aside-sticky {
        position: sticky;
        /* Clear of the fixed header, plus the gap cards use between them. */
        top: calc(var(--cl-header-h, 56px) + 20px);
        align-self: flex-start;
    }
}

/* A sidebar taller than the window cannot stick — there is nowhere for it to
   go — so let it scroll inside itself rather than clipping its own footer. */
@media (min-width: 992px) {
    .cl-aside-sticky {
        max-height: calc(100vh - var(--cl-header-h, 56px) - 40px);
        overflow-y: auto;
        /* The scrollbar sits outside the card's border rather than over it. */
        padding-right: 12px;
        margin-right: -12px;
    }
}