/* =========================================================================
   AdvanceTutor 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.

   **The dark background is the thing to remember.** Every Bootstrap default
   that was chosen against white — link blue, `.bg-light`, `.text-dark`, the
   filled `.nav-pills` pill — is either invisible or unreadable here, and none
   of it announces itself. Sections 16 and 20-23 exist because those defaults
   reached a screen before anyone looked at it — and §23 because the template's
   own `$primary` (`#5A639C`, an indigo) is derived into eighty rules, so it
   surfaces anywhere this file has not explicitly claimed the component.

   §24 is the rest of that, found by resolving the cascade rather than by
   looking at screens — `DarkThemeCascadeTest` compares every light-theme
   declaration in sleek.css against what this file claims and fails on anything
   sleek still wins. **Claiming a component's background is not claiming the
   component**: §6 set `.card-mini { background }` and the metric inside those
   tiles stayed near-black for months.

   Reading order:
      1. Tokens              9. Forms               17. Sidebar toggle & rail
      2. Base & scrollbar   10. Buttons & badges    18. Grid & inline editors
      3. Sidebar            11. Alerts & toasts     19. List-screen primitives
      4. Header             12. Dropdowns & modals  20. Responsive
      5. Content            13. Plugins             21. Row actions (3-dot menu)
      6. Cards              14. Login & guest       22. Pill & tab navigation
      7. Typography         15. Specificity overrides   23. sleek's purple
      8. Tables             16. High-specificity corrections  24. What sleek still won
                                                         25. The accent in a state
                                                         26. Toasts
   ========================================================================= */

/* == 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,
.card.bg-white {
    background: var(--cl-surface) !important;
    color: var(--cl-text) !important;
}

/* `.bg-light` is not the same job. On the light theme it was a *step away* from
   the surface behind it, and in this panel every single use of it is an inline
   editor drawer opening inside a card — the collapse row under a table row on
   thirteen screens. Mapped to --cl-surface it came out the exact colour of the
   card, so the drawer had no edge and the form appeared to float in the table.
   One step up plus a hairline, which is how the rest of this theme separates
   depth. `.badge-light` is unaffected: it is overridden in section 10. */
.bg-light {
    background: var(--cl-surface-2) !important;
    color: var(--cl-text) !important;
}

/* As a table cell it is a drawer under the row it belongs to, so the line goes
   on the inside rather than around it. */
td.bg-light {
    border-top: 1px solid var(--cl-border) !important;
    box-shadow: inset 0 -1px 0 var(--cl-border);
}

/* As a standalone block (the guidebook's tip editors) it is a panel. */
.bg-light.rounded,
.bg-light.border {
    border: 1px solid var(--cl-border) !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.
   ------------------------------------------------------------------------
   Drawn by CSS on `.app-brand a`, which is why the sidebar, the login screen
   and the public "Teach" page all show it without any of them mentioning an
   image: they share that one element.

   The file is public/backend/assets/images/logo.png — the mobile app's own
   icon, `assets/images/app_icon.png` in ai-lang-tutor-mobile, scaled to 128px.
   The path here is relative to this stylesheet. Replace the file or change the
   filename below; no Blade change is needed either way.
   ------------------------------------------------------------------------ */
.app-brand a::before {
    content: '';
    width: 26px;
    height: 26px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
    background: url('../images/logo.png') center / contain no-repeat;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.content-wrapper {
    padding: 0;
}

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

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

.footer p {
    margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

h2 {
    font-size: 18px;
}

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

h6 {
    font-size: 13px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.table a {
    font-weight: 500;
}

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

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

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

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

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

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

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

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

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

/* --- Input groups ------------------------------------------------------
   The addon chips — 💎 and ⚡ on quests and the shop, ≥ on badge tiers, the
   currency on a tutor's rate — were the one part of a form this theme never
   reached. sleek.css paints `.input-group-text` #f5f6fa on #e5e9f2 with
   near-black text, so a dark field sat welded to a white chip on five screens.

   The join is broken too, and by this file: section 9 sets
   `border-radius: … !important` on every `.form-control`, which outranks
   Bootstrap's rules for squaring off the inner edge of a grouped field. The
   result is two rounded pills touching rather than one control. Undone below,
   `!important` for `!important`.
   ---------------------------------------------------------------------- */

.input-group-text {
    background: var(--cl-surface-3) !important;
    border: 1px solid var(--cl-border) !important;
    color: var(--cl-text-muted) !important;
    font-size: 13px;
    padding: 8px 12px;
    min-height: 36px;
    border-radius: var(--cl-radius) !important;
}

/* Square off the edges that meet, in both directions, so prepend and append
   read as part of the field rather than beside it. */
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child),
.input-group-prepend > .input-group-text,
.input-group-prepend > .btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child),
.input-group-append > .input-group-text,
.input-group-append > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* A hairline between neighbours instead of two stacked borders. */
.input-group > .form-control + .input-group-text,
.input-group-prepend + .form-control,
.input-group-append > .input-group-text {
    margin-left: -1px;
}

/* The whole group lights up together, not just the field inside it. */
.input-group:focus-within > .input-group-prepend > .input-group-text,
.input-group:focus-within > .input-group-append > .input-group-text,
.input-group:focus-within > .input-group-text {
    border-color: var(--cl-accent-border) !important;
}

/* --- File inputs -------------------------------------------------------
   Excluded from section 9's selector list on purpose — `input[type=file]` is
   two controls in one, and painting the whole element surface-2 leaves the
   browser-drawn button unreadable on top of it. The button is themed
   separately through ::file-selector-button, which every current browser
   supports (`::-webkit-file-upload-button` covers older Safari).
   ---------------------------------------------------------------------- */

input[type='file'],
.form-control-file {
    display: block;
    width: 100%;
    padding: 6px 10px;
    background: var(--cl-surface-2) !important;
    border: 1px dashed var(--cl-border-strong) !important;
    border-radius: var(--cl-radius) !important;
    color: var(--cl-text-muted) !important;
    font-size: 13px;
    min-height: 36px;
    cursor: pointer;
}

input[type='file']:focus,
.form-control-file:focus {
    border-color: var(--cl-accent-border) !important;
    box-shadow: var(--cl-ring) !important;
    outline: none;
}

input[type='file']::file-selector-button,
.form-control-file::file-selector-button {
    margin-right: 10px;
    padding: 5px 12px;
    border: 1px solid var(--cl-border-strong);
    border-radius: var(--cl-radius);
    background: var(--cl-surface-3);
    color: var(--cl-text);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

input[type='file']::file-selector-button:hover,
.form-control-file::file-selector-button:hover {
    background: var(--cl-border);
    color: var(--cl-text);
}

input[type='file']::-webkit-file-upload-button,
.form-control-file::-webkit-file-upload-button {
    margin-right: 10px;
    padding: 5px 12px;
    border: 1px solid var(--cl-border-strong);
    border-radius: var(--cl-radius);
    background: var(--cl-surface-3);
    color: var(--cl-text);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

/* --- 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.

   `advancetutor-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);
}

/* `.badge-light` was the one variant this section never covered, and it was
   the worst one to miss: sleek paints it #f5f6fa with #212529 text, while
   `.text-dark` further down this file repaints that text near-white. Seven
   screens — including the conversation transcript's correction chips — were
   therefore rendering white text on a white pill, which reads as a badge with
   nothing in it. Same neutral treatment as `.badge-secondary`. */
.badge.bg-light,
.badge-light {
    background: var(--cl-surface-3) !important;
    color: var(--cl-text-muted) !important;
    border-color: var(--cl-border) !important;
}

/* == 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` is Bootstrap 5's name for this control and it is styled here —
   but this template is Bootstrap **4**, where the dismiss button is `.close`
   and is drawn as a text "times" glyph at `color: #000; opacity: .5`. So every
   dismissible alert in the panel — seventeen views, including every flash
   message — carried a black cross at half opacity on a dark alert, which is to
   say no visible close button at all. The BS5 rule below was never wrong, it
   just never matched anything.

   `.close` is text, not the BS5 background image, so it takes a colour rather
   than a filter. */
.close,
.close:not(:disabled):not(.disabled) {
    color: var(--cl-text) !important;
    text-shadow: none !important;
    opacity: 0.55;
    transition: opacity .12s ease;
}

.close:hover,
.close:focus,
.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
    color: var(--cl-text) !important;
    opacity: 1;
}

.close:focus-visible {
    outline: 2px solid var(--cl-accent);
    outline-offset: 2px;
    border-radius: var(--cl-radius);
}

/* Inside a tinted alert it should read as that alert's colour, not as a
   neutral, or it becomes the loudest thing in the box. */
.alert-success .close { color: var(--cl-success) !important; }
.alert-warning .close { color: var(--cl-warning) !important; }
.alert-danger .close  { color: var(--cl-danger) !important; }
.alert-info .close    { color: var(--cl-info) !important; }

.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;
    }
}

/* --- Conversation transcript ------------------------------------------
   admin/tutors/session.blade.php. A read-only record of what the product
   actually said, so the two speakers have to be told apart at a glance
   without either one being hard to read.
   ---------------------------------------------------------------------- */

.transcript-bubble {
    max-width: 80%;
    padding: 10px 12px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    background: var(--cl-surface-2);
    color: var(--cl-text);
    font-size: 13.5px;
    line-height: 1.5;
}

/* The learner's own turns, tinted with the accent rather than a second grey:
   on a transcript you are scanning for what the *learner* said. */
.transcript-bubble.is-learner {
    background: var(--cl-accent-soft);
    border-color: var(--cl-accent-border);
}

.transcript-speaker {
    margin-bottom: 2px;
    color: var(--cl-text-subtle);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transcript-translation {
    margin-top: 4px;
    color: var(--cl-text-muted);
    font-size: 12.5px;
    font-style: italic;
}

.transcript-meta {
    margin-top: 4px;
    color: var(--cl-text-subtle);
    font-size: 11.5px;
}

/* == 21. Row actions (the three-dot menu) ================================
   The last column of every table in the panel. See
   resources/views/components/row-actions.blade.php for the markup and
   advancetutor-ui.js for why the open menu is moved to <body>.
   ======================================================================== */

.row-actions-col {
    width: 56px;
    text-align: right !important;
    white-space: nowrap;
}

td.row-actions-col,
.table td.row-actions-col {
    text-align: right !important;
}

.row-actions {
    display: inline-block;
    position: relative;
    line-height: 1;
}

.row-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--cl-radius);
    background: transparent;
    color: var(--cl-text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.row-actions-toggle:hover,
.row-actions-toggle[aria-expanded="true"] {
    background: var(--cl-surface-3);
    border-color: var(--cl-border-strong);
    color: var(--cl-text);
}

.row-actions-toggle:focus {
    outline: none;
    box-shadow: var(--cl-ring);
}

.row-actions-toggle .mdi {
    line-height: 1;
}

/* Closed state. The menu only ever becomes visible after the script has
   moved it to <body> and given it a position, so a page whose JavaScript
   failed shows nothing half-placed. */
.row-actions-menu[hidden] {
    display: none !important;
}

.row-actions-menu {
    position: fixed;
    z-index: 1080; /* above .modal-backdrop (1040) and a fixed header */
    min-width: 190px;
    max-width: 280px;
    padding: 6px;
    border: 1px solid var(--cl-border-strong);
    border-radius: var(--cl-radius-lg);
    background: var(--cl-surface-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}

.row-actions-form {
    margin: 0;
}

.row-actions-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--cl-radius);
    background: transparent;
    color: var(--cl-text);
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.row-actions-item:hover,
.row-actions-item:focus {
    background: var(--cl-surface-3);
    color: var(--cl-text);
    text-decoration: none;
    outline: none;
}

.row-actions-item .mdi {
    width: 16px;
    font-size: 15px;
    color: var(--cl-text-muted);
    text-align: center;
}

.row-actions-item:hover .mdi {
    color: inherit;
}

.row-actions-item.is-danger {
    color: var(--cl-danger);
}

.row-actions-item.is-danger:hover,
.row-actions-item.is-danger:focus {
    background: var(--cl-danger-soft);
    color: var(--cl-danger);
}

.row-actions-item.is-success {
    color: var(--cl-success);
}

.row-actions-item.is-success:hover,
.row-actions-item.is-success:focus {
    background: var(--cl-success-soft);
    color: var(--cl-success);
}

.row-actions-item.is-warning {
    color: var(--cl-warning);
}

.row-actions-item.is-warning:hover,
.row-actions-item.is-warning:focus {
    background: var(--cl-warning-soft);
    color: var(--cl-warning);
}

.row-actions-item[disabled],
.row-actions-item.is-disabled {
    color: var(--cl-text-subtle);
    cursor: not-allowed;
    pointer-events: none;
}

.row-actions-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--cl-border);
}

/* A row whose menu is open stays highlighted, so it is obvious which record
   the floating menu belongs to once it is no longer inside the table. */
.table tbody tr.row-actions-active > td {
    background: var(--cl-surface-3) !important;
}

/* Role preview logins: the same card, repeated once per role. */
.cl-testaccount-multi + .cl-testaccount-multi {
    margin-top: 10px;
}



/* == 22. Pill and tab navigation ========================================
   The tutor portal is the only place in the panel that uses `.nav-pills`,
   which is why this went unnoticed: nothing on the admin side exercised it.
   Bootstrap 4 leaves `.nav-link` at its own link blue (#007bff) and fills the
   active pill with the same blue on white text — a colour that appears nowhere
   else in this theme, on a background it was never measured against. Against
   --cl-surface the inactive labels sit at roughly 3:1, under the 4.5:1 that
   body-sized text needs.

   Treated like the badges above rather than like the sidebar: tinted fill,
   hairline border, accent text. The sidebar's filled-row-plus-marker is the
   louder pattern and belongs to the primary navigation; a filter strip inside
   a card should not compete with it.
   ======================================================================= */

/* `.nav-item` is in the selector because sleek's is
   `.nav-pills .nav-item .nav-link` — three classes, which beats a two-class
   rule no matter which file loads last. The first version of this section used
   `.nav-pills .nav-link` and lost: the labels kept sleek's `#1b223c`, a navy
   that is all but invisible on `#111111`. Specificity, not load order, is what
   decides this. */
.nav-pills .nav-link,
.nav-pills .nav-item .nav-link,
.nav-tabs .nav-link,
.nav-tabs .nav-item .nav-link {
    color: var(--cl-text-muted);
    border-radius: var(--cl-radius-pill);
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus,
.nav-pills .nav-item .nav-link:hover,
.nav-pills .nav-item .nav-link:focus,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-item .nav-link:hover,
.nav-tabs .nav-item .nav-link:focus {
    color: var(--cl-text);
    background: var(--cl-surface-3);
    border-color: var(--cl-border);
    text-decoration: none;
}

/* `!important` only here: Bootstrap ships `.nav-pills .nav-link.active` with
   `background-color: #007bff` under `.show > .nav-link` too, and the theme is
   loaded before some of the template's own overrides. */
.nav-pills .nav-link.active,
.nav-pills .nav-item .nav-link.active,
.nav-pills .show > .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item .nav-link.active {
    color: var(--cl-accent) !important;
    background: var(--cl-accent-soft) !important;
    border-color: var(--cl-accent-border) !important;
}

/* Keyboard focus has to stay visible on the active pill, where the hover
   treatment and the active treatment would otherwise be the same colour. */
.nav-pills .nav-link:focus-visible,
.nav-tabs .nav-link:focus-visible {
    outline: 2px solid var(--cl-accent);
    outline-offset: 2px;
}

.nav-pills .nav-link.disabled,
.nav-pills .nav-item .nav-link.disabled,
.nav-tabs .nav-link.disabled,
.nav-tabs .nav-item .nav-link.disabled {
    color: var(--cl-text-subtle);
    background: transparent;
    border-color: transparent;
}

/* The tab strip's own rail, so tabs do not float unattached. */
.nav-tabs {
    border-bottom: 1px solid var(--cl-border);
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
}

/* The tutor's tab strip wraps on a narrow window; without this the rows touch. */
.nav-pills {
    gap: 4px;
}


/* == 23. sleek's purple ==================================================
   `#5A639C` is the template's `$primary`, and Bootstrap derives an enormous
   amount from that one variable: buttons, links, pagination, progress bars,
   checkbox ticks, list-group rows, breadcrumbs, Select2 tags and the text
   selection highlight. Eighty rules in sleek.css carry it, plus `#896def` for
   the `.btn-purple` family.

   It was chosen against a white page and it is wrong twice over here — it is
   not this product's accent, and a mid-tone indigo on a near-black background
   reads as muddy rather than as a colour. The sections above caught it wherever
   a screen had already been looked at; everything below is the rest, mapped to
   the accent this theme actually uses.

   Whole components, not single properties: overriding a colour and leaving the
   border behind is how a control ends up half-repainted.
   ======================================================================= */

/* The selection highlight is the panel-wide one — every drag across any text. */
::selection {
    background-color: var(--cl-accent);
    color: var(--cl-accent-fg);
}

::-moz-selection {
    background-color: var(--cl-accent);
    color: var(--cl-accent-fg);
}

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

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

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--cl-text-subtle);
    border-color: var(--cl-border);
    background-color: transparent;
}

.btn-link {
    color: var(--cl-accent);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--cl-accent-hover);
}

/* Matches the tinted-fill treatment the other badges get in section 10. */
.badge.bg-primary,
.badge-primary {
    background: var(--cl-accent-soft) !important;
    color: var(--cl-accent) !important;
    border-color: var(--cl-accent-border) !important;
}

.progress {
    background-color: var(--cl-surface-3);
}

.progress-bar {
    background-color: var(--cl-accent);
    color: var(--cl-accent-fg);
}

/* The curriculum drill-down's trail. `--cl-surface` rather than sleek's pale
   blue wash, which was a light-theme tint that never made sense here. */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb .breadcrumb-item,
.breadcrumb.breadcrumb-inverse .breadcrumb-item {
    color: var(--cl-text-muted);
}

.breadcrumb .breadcrumb-item a,
.breadcrumb.breadcrumb-inverse .breadcrumb-item a {
    color: var(--cl-accent);
}

.breadcrumb .breadcrumb-item.active {
    color: var(--cl-text);
}

.breadcrumb.breadcrumb-inverse,
.breadcrumb.breadcrumb-primary {
    background-color: var(--cl-surface-2);
    border-color: var(--cl-border);
}

/* Select2 multi-select tags. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-color: var(--cl-accent-border);
    background-color: var(--cl-accent-soft);
    color: var(--cl-accent);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--cl-accent);
    border-right-color: var(--cl-accent-border);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--cl-danger);
}

/* `list-group` and the range slider are unused today, but they are one
   `$primary` away from appearing purple the moment a screen uses them. */
.list-group-item.active {
    background-color: var(--cl-accent-soft);
    border-color: var(--cl-accent-border);
    color: var(--cl-accent);
}

.custom-range::-webkit-slider-thumb { background-color: var(--cl-accent); }
.custom-range::-moz-range-thumb { background-color: var(--cl-accent); }
.custom-range::-ms-thumb { background-color: var(--cl-accent); }

/* `#896def` — sleek's second purple, behind the `.btn-purple` family. Nothing
   in this panel uses it; mapped so that adding a screen that does cannot
   reintroduce a colour from another product's palette. */
.btn-purple {
    color: var(--cl-accent-fg);
    background-color: var(--cl-accent);
    border-color: var(--cl-accent);
}

.btn-outline-purple {
    color: var(--cl-accent);
    border-color: var(--cl-accent-border);
}

.badge-purple {
    background: var(--cl-accent-soft) !important;
    color: var(--cl-accent) !important;
    border-color: var(--cl-accent-border) !important;
}

.text-purple { color: var(--cl-accent) !important; }
.bg-purple { background-color: var(--cl-accent-soft) !important; }
.border-purple { border-color: var(--cl-accent-border) !important; }


/* == 24. What sleek still won ============================================
   Found by comparing every sleek.css declaration that paints a light-theme
   colour against what this file claims, selector by selector, and keeping only
   the ones sleek still wins on specificity — see `DarkThemeCoverageTest`.

   The stat tiles are the example worth remembering. Section 6 claimed
   `.card-mini { background }` and stopped there, which looked complete; sleek
   also writes `.card-mini .card-body h2 { color: #1b223c }` and `.card-mini
   { border: 1px solid #e5e9f2 }`. So the tile went dark, the metric inside it
   stayed near-black navy, and the border stayed near-white. Claiming a
   component's background is not claiming the component.
   ======================================================================= */

/* --- Stat tiles ------------------------------------------------------- */

.card-mini {
    border: 1px solid var(--cl-border) !important;
}

/* The number is the loudest thing on the tile, so it takes the brightest ink.
   Two classes and an element, to out-specify sleek's `.card-mini .card-body h2`
   — the plain `h1…h6` rule in section 7 is one element and loses. */
.card-mini .card-body h2,
.card-mini .card-body h1,
.card-mini .card-body h3 {
    color: var(--cl-text);
}

.card-mini .card-footer {
    border-top: 1px solid var(--cl-border);
}

/* --- Buttons ---------------------------------------------------------- */

/* sleek sets a near-black on the base `.btn`. Every variant overrides it, so
   this only shows on a button with no variant class — which is exactly the
   plain `.btn.btn-sm` used in a few inline editors. */
.btn,
.btn:hover {
    color: var(--cl-text);
}

.btn-outline-secondary,
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: var(--cl-text-muted);
    border-color: var(--cl-border-strong);
}

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

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: var(--cl-text-subtle);
    border-color: var(--cl-border);
}

/* --- Menus and trails -------------------------------------------------- */

.dropdown-menu {
    color: var(--cl-text);
}

/* The "/" between breadcrumb items, drawn as generated content. */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--cl-text-subtle);
}

/* --- Header ------------------------------------------------------------ */

/* Section 4 styles `.main-header`; these are the `.navbar` inside it, which
   sleek paints white with a pale rule under it. */
.navbar,
.header-light .navbar {
    background-color: var(--cl-surface) !important;
    border-bottom-color: var(--cl-border);
}

.navbar .sidebar-toggle {
    border-right-color: var(--cl-border);
}

.navbar .search-form .btn,
.header-light .navbar .search-form .btn {
    color: var(--cl-text-muted);
}

/* --- DataTables -------------------------------------------------------- */

/* Section 13 themes the plugin's controls but not the table's own ink. */
.basic-data-table thead th,
.basic-data-table tbody tr td:first-child {
    color: var(--cl-text);
}


/* == 25. The template's accent in a state ===============================
   Section 23 claimed these components at rest. These are the states that
   replace the resting colour when you touch them, and they were written with
   their own copy of the colour.

   Two details worth keeping:

   `.btn { box-shadow: none !important }` in section 10 already kills the focus
   glow on most buttons — but only on selectors it out-ranks. `.page-link:focus`
   and `.btn-outline-primary:focus` are more specific than a bare `.btn`, so
   they survived it.

   These are set to `none`, not to this theme's ring. Section 10 draws the ring
   on `:focus-visible`, which is the keyboard only; putting one back on `:focus`
   would ring every button the mouse touches, which is the behaviour the
   `:focus-visible` split was chosen to avoid.

   The ring here is stock Bootstrap blue, `rgba(76, 132, 255, …)`, not sleek's
   own `#5A639C`: the template rebranded its solid colours and left the derived
   shadows alone.
   ======================================================================= */

.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus,
.page-link:focus,
a.badge-primary:focus,
a.badge-primary.focus {
    box-shadow: none !important;
}

/* The selected item in a dropdown, and the instant one is pressed. Every
   three-dot row menu in the panel is a `.dropdown-menu`, so this one reached
   forty-odd screens. */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--cl-accent-soft);
    color: var(--cl-accent);
}

/* An open dropdown whose toggle is `.btn-outline-primary`: section 23 claimed
   the button, not the `.show >` state that replaces its fill while the menu is
   open. */
.show > .btn-outline-primary.dropdown-toggle {
    color: var(--cl-accent-fg);
    background-color: var(--cl-accent);
    border-color: var(--cl-accent);
}


/* == 26. Toasts =========================================================
   `toast-top-center` is toastr's own position class — it already places the
   container across the top; everything here is skin, plus the width and the
   offset that keeps it clear of the fixed header.

   Top, not the middle of the screen: a notice in the centre covers the thing
   you just clicked and has to be dismissed before you can carry on.
   ======================================================================= */

#toast-container.toast-top-center {
    top: calc(var(--cl-header-h, 60px) + 12px);
    width: min(440px, calc(100vw - 32px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* Above modals (1050) and their backdrop: an action refused from inside a
       modal must not put its explanation behind one. */
    z-index: 1080;
    pointer-events: none;
}

#toast-container.toast-top-center > div {
    pointer-events: auto;
    width: 100%;
    max-width: none;
    margin: 0 0 10px;
    padding: 14px 16px 14px 48px;
    opacity: 1;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    background-color: var(--cl-surface-2);
    background-position: 16px center;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
    font-size: 14px;
    line-height: 1.45;
}

/* The tone is carried by a left edge and the text, not by a flooded panel —
   white-on-red at this size is a shout. */
#toast-container.toast-top-center > .toast-error {
    border-left: 3px solid var(--cl-danger);
    color: var(--cl-text);
}

#toast-container.toast-top-center > .toast-success {
    border-left: 3px solid var(--cl-success);
    color: var(--cl-text);
}

#toast-container.toast-top-center > .toast-warning {
    border-left: 3px solid var(--cl-warning);
    color: var(--cl-text);
}

#toast-container.toast-top-center > .toast-info {
    border-left: 3px solid var(--cl-info);
    color: var(--cl-text);
}

#toast-container.toast-top-center .toast-message {
    color: var(--cl-text);
}

#toast-container.toast-top-center .toast-close-button {
    color: var(--cl-text-muted);
    text-shadow: none;
    opacity: 1;
    font-size: 18px;
    font-weight: 400;
}

#toast-container.toast-top-center .toast-close-button:hover {
    color: var(--cl-text);
}

#toast-container.toast-top-center .toast-progress {
    background-color: var(--cl-accent);
    opacity: 0.5;
}

@media (max-width: 480px) {
    #toast-container.toast-top-center {
        width: calc(100vw - 24px);
    }
}

/* ==========================================================================
   Edit drawer

   Editing a row used to expand a hidden <tr> underneath it. That pushes every
   row below down the page, gives the form the width of whatever column it
   happens to sit under, and leaves the table unreadable while the form is
   open. A drawer slides in over the right-hand side instead: the table stays
   still, the form gets a fixed comfortable width, and the thing being edited
   is still visible beside it.
   ========================================================================== */
.cl-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 1040;
}

.cl-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.cl-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--cl-surface);
    border-left: 1px solid var(--cl-border);
    box-shadow: -18px 0 48px rgba(0, 0, 0, .45);
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.32, .72, 0, 1);
    z-index: 1050;
    visibility: hidden;
}

.cl-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.cl-drawer--wide { width: min(760px, 100vw); }

.cl-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cl-border);
}

.cl-drawer__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cl-text);
}

.cl-drawer__sub {
    margin: 4px 0 0;
    font-size: .8rem;
    color: var(--cl-text-muted);
}

.cl-drawer__close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: var(--cl-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

.cl-drawer__close:hover { color: var(--cl-text); }

/* The only scrolling region: the head and the footer stay put, so Save is
   reachable without scrolling back up a long form. */
.cl-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 22px;
}

.cl-drawer__foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--cl-border);
    background: var(--cl-surface-2);
}

.cl-drawer__section {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--cl-border);
}

.cl-drawer__section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.cl-drawer__section-title {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cl-text-subtle);
    margin-bottom: 10px;
}

body.cl-drawer-open { overflow: hidden; }

/* ==========================================================================
   Toasts

   For actions that talk to somebody else's server. A full page reload told you
   nothing until it was over — and "nothing" for two seconds while six HTTP
   calls happen reads as a dead button, so the click is acknowledged first and
   the answer replaces it.
   ========================================================================== */
/* Top centre: a message about what just happened belongs where the eye
   already is after a save, not in a corner it has to be hunted for. */
.cl-toast-stack {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.cl-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 260px;
    max-width: 380px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--cl-border-strong);
    background: var(--cl-surface-2);
    color: var(--cl-text);
    font-size: .84rem;
    line-height: 1.45;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
}

.cl-toast.is-in { opacity: 1; transform: translateY(0); }

.cl-toast.is-warn .cl-toast__dot { background: var(--cl-warning); }

.cl-toast__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--cl-text-subtle);
}

.cl-toast.is-busy .cl-toast__dot {
    border: 2px solid var(--cl-accent-border);
    border-top-color: var(--cl-accent);
    background: none;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    animation: cl-spin .7s linear infinite;
}

.cl-toast.is-ok .cl-toast__dot { background: var(--cl-success); }
.cl-toast.is-bad .cl-toast__dot { background: var(--cl-danger, #f5535f); }

.cl-toast__body { flex: 1 1 auto; }
.cl-toast__title { font-weight: 600; }
.cl-toast__detail { color: var(--cl-text-muted); margin-top: 2px; }

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

/* The sync log inside a drawer: one line per product, in the order they were
   attempted. */
.cl-log { font-size: .82rem; }

.cl-log__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--cl-border);
}

.cl-log__row:last-child { border-bottom: 0; }

.cl-log__tag {
    flex: 0 0 auto;
    min-width: 62px;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cl-text-subtle);
}

.cl-log__row.is-created .cl-log__tag { color: var(--cl-success); }
.cl-log__row.is-failed .cl-log__tag { color: var(--cl-danger, #f5535f); }

.cl-log__what { flex: 1 1 auto; }
.cl-log__detail { color: var(--cl-text-subtle); word-break: break-all; }


/* ==========================================================================
   Layout stability

   Two things used to move the page sideways: a scrollbar appearing when
   content grew past the fold, and the drawer locking body scroll, which takes
   the scrollbar away again. Both shift every column by its width, which reads
   as the table jumping.

   `scrollbar-gutter: stable` reserves the space permanently, so neither event
   changes the width of anything. The drawer also pads the body by whatever the
   scrollbar was, for engines that do not honour the gutter.
   ========================================================================== */
html {
    scrollbar-gutter: stable;
}

/* One cell per provider whose content is replaced in place after a test. Both
   states are two lines tall, so the answer arriving cannot change the row
   height — and a long failure message wraps instead of widening the column. */
.cl-result {
    min-height: 38px;
}

.cl-result__meta {
    color: var(--cl-text-subtle);
    min-height: 16px;

    /*
     | `anywhere`, not `break-word`.
     |
     | Only `anywhere` reduces the element's min-content width, and min-content
     | is what an auto-layout table sizes a column by — with `break-word` a
     | cURL error containing a URL widened the column to 278px and squeezed
     | every other column to make room.
     */
    overflow-wrap: anywhere;

    /*
     | Three lines at most. A cURL timeout runs to two sentences and would make
     | one row three times the height of its neighbours; the full text is in
     | the toast, and in the title below.
     */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The column itself is fixed, so no message can resize it. */
.cl-result-col {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}