/* ============================================================================
 * oto-skin.css — OtoWash design-system skin over the Argon Dashboard theme
 * ----------------------------------------------------------------------------
 * Loaded IMMEDIATELY AFTER `argon.css` in `resources/views/layouts/app.blade.php`.
 * It re-points Argon's baked-in semantic palette at the OtoWash design tokens
 * declared in that layout's `:root` / `html.dark` block.
 *
 * ── WHY THIS FILE EXISTS (read before "fixing" the theme properly) ──────────
 *
 * `public/argon/css/argon.css` is a HAND-PATCHED COMPILED ARTIFACT. It is NOT
 * reproducible from the SCSS tree that sits next to it:
 *
 *   - `public/argon/scss/argon-dashboard/custom/_variables.scss:102` declares
 *     `$primary: #5e72e4`, but the string `5e72e4` appears ZERO times in the
 *     shipped `argon.css`.
 *   - The shipped file instead declares `--primary: #00a2ff` in its own `:root`
 *     and substitutes `var(--primary)` at 75 call sites. A stock Argon build
 *     emits a literal there, never a custom property.
 *   - `webpack.mix.js` compiles ONLY `resources/sass/app.scss`. The Argon SCSS
 *     tree is not in the build at all, so nothing has ever round-tripped.
 *
 * CONSEQUENCE: adding a `mix.sass('public/argon/scss/argon-dashboard.scss', …)`
 * step — the textbook "clean" fix — REGENERATES `argon.css` and SILENTLY
 * DESTROYS the `var(--primary)` plumbing that the layout's token block, this
 * file, and the sidebar all depend on. The theme would snap back to Argon
 * indigo with no build error and no failing test.
 *
 * DO NOT RECOMPILE THE ARGON SCSS. If someone insists, the first deliverable
 * is a trial-recompile diffed against the shipped `argon.css`, reviewed before
 * anything is committed.
 *
 * The override-stylesheet route below touches no compiled artifact and is
 * reversible by deleting one <link>.
 *
 * ── WHAT ARGON ACTUALLY READS ───────────────────────────────────────────────
 * `var(--primary)` × 75 is the ONLY custom property `argon.css` consumes.
 * `--secondary`, `--success`, `--info`, `--warning`, `--danger` are declared in
 * its `:root` and never referenced — every one of those families is a baked
 * literal (`.btn-success` → `#2dce89`, `.btn-danger` → `#f5365c`, …). That is
 * why overriding the custom properties alone left every approve/reject button
 * in the money-approval flows rendering Argon mint and Argon pink. This file
 * closes that gap by restating the rules against the tokens.
 *
 * ── CONVENTIONS ─────────────────────────────────────────────────────────────
 * - No literal colours below. Every value is `var(--token)`; the tokens live in
 *   `layouts/app.blade.php` so light and dark are declared in one place.
 * - Selectors mirror Argon's own specificity exactly (including the
 *   `:not(:disabled):not(.disabled)` chains) so overrides land without
 *   `!important` on the button families. `!important` is used only where Argon
 *   itself used it (`.bg-*`, `.text-*`, `.border-*`).
 * - Hover keeps the base fill on purpose: Argon's button hover affordance is
 *   `transform: translateY(-1px)` + shadow (argon.css:15535), not a colour
 *   change. The pressed state uses `filter: brightness()` so no shade has to be
 *   invented for tokens that ship no darker variant.
 * - `info` has no OtoWash token. It is mapped to the `statusActive` pair, which
 *   is the design system's "in flight / verified" slot — this keeps `btn-info`
 *   ("Verify") visually distinct from both `btn-success` ("Verify & Credit")
 *   and `btn-danger` ("Reject") in the wallet-load queue.
 * - Bootstrap `secondary` means "neutral surface/button", NOT the OtoWash
 *   `--secondary` token (which is body slate ink). Mapping `.bg-secondary` to
 *   `var(--secondary)` would turn 18 light surface tints dark-slate. The
 *   neutral families are mapped to `--surface` / `--surface-alt` / `--body`.
 * ========================================================================== */


/* ==========================================================================
 * 1. SOLID BUTTONS
 * ========================================================================== */

/* --- primary -------------------------------------------------------------
 * Base fill already resolves through `var(--primary)` in argon.css, so only
 * the states Argon hardcoded need restating. The `:active` fill was a literal
 * `#324cdd` (Argon indigo) — the brand button flashed indigo when pressed. */
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    border-color: var(--primary-dark);
    background-color: var(--primary-dark);
}

/* --- secondary (neutral) ------------------------------------------------- */
.btn-secondary {
    color: var(--ink);
    border-color: var(--hairline);
    background-color: var(--surface-alt);
}

.btn-secondary:hover {
    color: var(--ink);
    border-color: var(--hairline);
    background-color: var(--surface-alt);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    color: var(--ink);
    border-color: var(--hairline);
    background-color: var(--surface-alt);
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    color: var(--ink);
    border-color: var(--hairline);
    background-color: var(--surface-alt);
    filter: brightness(0.95);
}

/* --- success (approve / credit / verify-and-credit) ---------------------- */
.btn-success {
    color: #fff;
    border-color: var(--success);
    background-color: var(--success);
}

.btn-success:hover {
    color: #fff;
    border-color: var(--success);
    background-color: var(--success);
}

.btn-success.disabled,
.btn-success:disabled {
    color: #fff;
    border-color: var(--success);
    background-color: var(--success);
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
    color: #fff;
    border-color: var(--success);
    background-color: var(--success);
    filter: brightness(0.9);
}

/* --- info (verify / in-flight) → statusActive ---------------------------- */
.btn-info {
    color: #fff;
    border-color: var(--status-active);
    background-color: var(--status-active);
}

.btn-info:hover {
    color: #fff;
    border-color: var(--status-active);
    background-color: var(--status-active);
}

.btn-info.disabled,
.btn-info:disabled {
    color: #fff;
    border-color: var(--status-active);
    background-color: var(--status-active);
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
    color: #fff;
    border-color: var(--status-active);
    background-color: var(--status-active);
    filter: brightness(0.9);
}

/* --- warning ------------------------------------------------------------
 * Ink label rather than white: `#fff` on `--warning` measures 3.19:1, `--ink`
 * measures 5.60:1. Amber-with-dark-label is also the conventional pairing. */
.btn-warning {
    color: var(--ink);
    border-color: var(--warning);
    background-color: var(--warning);
}

.btn-warning:hover {
    color: var(--ink);
    border-color: var(--warning);
    background-color: var(--warning);
}

.btn-warning.disabled,
.btn-warning:disabled {
    color: var(--ink);
    border-color: var(--warning);
    background-color: var(--warning);
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
    color: var(--ink);
    border-color: var(--warning);
    background-color: var(--warning);
    filter: brightness(0.9);
}

/* --- danger (reject / refund / debit) ------------------------------------ */
.btn-danger {
    color: #fff;
    border-color: var(--danger);
    background-color: var(--danger);
}

.btn-danger:hover {
    color: #fff;
    border-color: var(--danger);
    background-color: var(--danger);
}

.btn-danger.disabled,
.btn-danger:disabled {
    color: #fff;
    border-color: var(--danger);
    background-color: var(--danger);
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
    color: #fff;
    border-color: var(--danger);
    background-color: var(--danger);
    filter: brightness(0.9);
}


/* ==========================================================================
 * 2. OUTLINE BUTTONS
 * ========================================================================== */

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    border-color: var(--primary);
    background-color: var(--primary);
}

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

/* `.btn-outline-secondary` is restated at argon.css:15576 (`color: #4385b1`),
 * which out-cascades the earlier block — both are superseded here. */
.btn-outline-secondary {
    color: var(--body);
    border-color: var(--hairline);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
    color: var(--ink);
    border-color: var(--hairline);
    background-color: var(--surface-alt);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: var(--body);
    background-color: transparent;
}

.btn-outline-success {
    color: var(--success);
    border-color: var(--success);
}

.btn-outline-success:hover,
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
    color: #fff;
    border-color: var(--success);
    background-color: var(--success);
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
    color: var(--success);
    background-color: transparent;
}

.btn-outline-info {
    color: var(--status-active);
    border-color: var(--status-active);
}

.btn-outline-info:hover,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
    color: #fff;
    border-color: var(--status-active);
    background-color: var(--status-active);
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
    color: var(--status-active);
    background-color: transparent;
}

.btn-outline-warning {
    color: var(--warning);
    border-color: var(--warning);
}

.btn-outline-warning:hover,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
    color: var(--ink);
    border-color: var(--warning);
    background-color: var(--warning);
}

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
    color: var(--warning);
    background-color: transparent;
}

.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
    color: #fff;
    border-color: var(--danger);
    background-color: var(--danger);
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
    color: var(--danger);
    background-color: transparent;
}


/* ==========================================================================
 * 3. BACKGROUND UTILITIES  (Argon uses !important here, so we must too)
 * ========================================================================== */

.bg-secondary {
    background-color: var(--surface) !important;
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-info {
    background-color: var(--status-active) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
}

.bg-danger {
    background-color: var(--danger) !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: var(--primary-dark) !important;
}

a.bg-success:hover,
a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
    background-color: var(--success) !important;
    filter: brightness(0.9);
}

a.bg-danger:hover,
a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
    background-color: var(--danger) !important;
    filter: brightness(0.9);
}


/* ==========================================================================
 * 4. TEXT UTILITIES
 * ========================================================================== */

/* Argon shipped `.text-secondary { color: #f7fafc }` — near-white text on a
 * white card, effectively invisible. Body slate is the intended slot. */
.text-secondary {
    color: var(--body) !important;
}

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

.text-info {
    color: var(--status-active) !important;
}

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

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

a.text-success:hover,
a.text-success:focus {
    color: var(--success) !important;
    filter: brightness(0.85);
}

a.text-warning:hover,
a.text-warning:focus {
    color: var(--warning) !important;
    filter: brightness(0.85);
}

a.text-danger:hover,
a.text-danger:focus {
    color: var(--danger) !important;
    filter: brightness(0.85);
}

a.text-info:hover,
a.text-info:focus {
    color: var(--status-active) !important;
    filter: brightness(0.85);
}


/* ==========================================================================
 * 5. BORDER UTILITIES
 * ========================================================================== */

.border-secondary {
    border-color: var(--hairline) !important;
}

.border-success {
    border-color: var(--success) !important;
}

.border-info {
    border-color: var(--status-active) !important;
}

.border-warning {
    border-color: var(--warning-border) !important;
}

.border-danger {
    border-color: var(--danger-border) !important;
}


/* ==========================================================================
 * 6. BADGES  (soft fill + semantic ink — mirrors OtoStatusChip in the apps)
 * ========================================================================== */

.badge-primary {
    color: var(--primary);
    background-color: var(--primary-soft);
}

.badge-secondary {
    color: var(--body);
    background-color: var(--surface-alt);
}

.badge-success {
    color: var(--success);
    background-color: var(--success-soft);
}

.badge-info {
    color: var(--status-active);
    background-color: var(--status-active-soft);
}

.badge-warning {
    color: var(--warning);
    background-color: var(--warning-soft);
}

.badge-danger {
    color: var(--danger);
    background-color: var(--danger-soft);
}

.badge-primary[href]:hover,
.badge-primary[href]:focus {
    color: #fff;
    background-color: var(--primary);
    text-decoration: none;
}

.badge-success[href]:hover,
.badge-success[href]:focus {
    color: #fff;
    background-color: var(--success);
    text-decoration: none;
}

.badge-info[href]:hover,
.badge-info[href]:focus {
    color: #fff;
    background-color: var(--status-active);
    text-decoration: none;
}

.badge-warning[href]:hover,
.badge-warning[href]:focus {
    color: var(--ink);
    background-color: var(--warning);
    text-decoration: none;
}

.badge-danger[href]:hover,
.badge-danger[href]:focus {
    color: #fff;
    background-color: var(--danger);
    text-decoration: none;
}


/* ==========================================================================
 * 7. ALERTS
 * ========================================================================== */

.alert-secondary {
    color: var(--ink);
    border-color: var(--hairline);
    background-color: var(--surface);
}

.alert-success {
    color: #fff;
    border-color: var(--success);
    background-color: var(--success);
}

.alert-info {
    color: #fff;
    border-color: var(--status-active);
    background-color: var(--status-active);
}

.alert-warning {
    color: var(--ink);
    border-color: var(--warning);
    background-color: var(--warning);
}

.alert-danger {
    color: #fff;
    border-color: var(--danger);
    background-color: var(--danger);
}

.alert-secondary hr { border-top-color: var(--hairline); }
.alert-success hr   { border-top-color: var(--success); }
.alert-info hr      { border-top-color: var(--status-active); }
.alert-warning hr   { border-top-color: var(--warning-border); }
.alert-danger hr    { border-top-color: var(--danger); }

.alert-secondary .alert-link { color: var(--ink); }
.alert-success .alert-link,
.alert-info .alert-link,
.alert-danger .alert-link    { color: #fff; text-decoration: underline; }
.alert-warning .alert-link   { color: var(--ink); text-decoration: underline; }


/* ==========================================================================
 * 8. STATUS BADGES  (`.badge-status-*`)
 * --------------------------------------------------------------------------
 * Extracted here from twelve `@push('css')` blocks that had drifted apart:
 *   admin/{appuser/index, appuser/customer, booking/index, categories/index,
 *          coupon/index, coupon/show, shopOwner/index, shopOwner/shop,
 *          shopOwner/singleShop, vehicleBrand/index, vehicleType/index,
 *          voucher/index}.blade.php
 *
 * Hue families are preserved exactly as the majority of those copies had them;
 * only the hex values move onto tokens. Three states in `singleShop` were the
 * lone outliers (approved indigo, completed teal, rejected grey) and converge
 * onto the majority reading here — that is the point of de-duplicating.
 * ========================================================================== */

.badge-status {
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1;

    display: inline-block;

    min-width: 80px;
    padding: 5px 14px;

    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;

    border-radius: 8px;
}

/* positive / healthy */
.badge-status-active,
.badge-status-approved,
.badge-status-completed,
.badge-status-paid {
    color: var(--status-complete);
    background: var(--status-complete-soft);
}

/* destructive / refused */
.badge-status-block,
.badge-status-waiting,
.badge-status-canceled,
.badge-status-rejected {
    color: var(--status-reject);
    background: var(--status-reject-soft);
}

/* awaiting action */
.badge-status-pending {
    color: var(--status-pending);
    background: var(--status-pending-soft);
}

/* neutral / not-applicable */
.badge-status-unpaid,
.badge-status-rescheduled,
.badge-status-voided,
.badge-status-unknown {
    color: var(--body);
    background: var(--surface-alt);
}

/* --- booking TYPE tags ---------------------------------------------------
 * `regular` / `slot` / `walkin` / `size` classify a booking, they are not
 * lifecycle states, and the OtoWash design system ships no token for them.
 * Rather than invent three hexes, the existing values are carried forward
 * verbatim as named variables (declared in layouts/app.blade.php) so a future
 * design decision has one place to land. See CHANGELOG. */
.badge-type,
.badge-regular,
.badge-slot,
.badge-walkin,
.badge-size {
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1;

    display: inline-block;

    padding: 5px 14px;

    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;

    border-radius: 8px;
}

.badge-type,
.badge-regular {
    color: var(--badge-type-regular-ink);
    background: var(--badge-type-regular-soft);
}

.badge-slot {
    color: var(--badge-type-slot-ink);
    background: var(--badge-type-slot-soft);
}

.badge-walkin {
    color: var(--badge-type-walkin-ink);
    background: var(--badge-type-walkin-soft);
}

.badge-size {
    color: var(--status-active);
    background: var(--status-active-soft);
}


/* ==========================================================================
 * 8b. LIVE THEME SWAP
 * --------------------------------------------------------------------------
 * Paired with `applyTheme()` in layouts/app.blade.php. Chromium does not
 * re-resolve a transitioned property when the change originates purely from an
 * inherited custom property, so Argon's `.btn` transition (background-color,
 * color, border-color — argon.css:2682) pinned every button to the outgoing
 * palette on a live light↔dark toggle. The toggle adds this class, forces a
 * reflow, and removes it again.
 * ========================================================================== */

html.oto-theme-switching * {
    transition: none !important;
}


/* ==========================================================================
 * 9. DARK THEME  (html.dark)
 * --------------------------------------------------------------------------
 * The token block in layouts/app.blade.php redefines the tokens themselves
 * under `html.dark`, so every rule above follows automatically — including all
 * 75 `var(--primary)` sites inside argon.css. Only the label colours on solid
 * fills need restating: the dark palette's fills are bright, so a white label
 * drops to 2.1–2.8:1. A dark label on the same fill measures 6.4–8.3:1.
 * ========================================================================== */

html.dark .btn-primary,
html.dark .btn-primary:hover,
html.dark .btn-primary.disabled,
html.dark .btn-primary:disabled,
html.dark .btn-primary:not(:disabled):not(.disabled):active,
html.dark .btn-primary:not(:disabled):not(.disabled).active,
html.dark .btn-outline-primary:hover,
html.dark .btn-outline-primary:not(:disabled):not(.disabled):active {
    color: var(--primary-ink);
}

html.dark .btn-success,
html.dark .btn-success:hover,
html.dark .btn-success.disabled,
html.dark .btn-success:disabled,
html.dark .btn-success:not(:disabled):not(.disabled):active,
html.dark .btn-success:not(:disabled):not(.disabled).active,
html.dark .btn-outline-success:hover,
html.dark .btn-outline-success:not(:disabled):not(.disabled):active,
html.dark .btn-info,
html.dark .btn-info:hover,
html.dark .btn-info.disabled,
html.dark .btn-info:disabled,
html.dark .btn-info:not(:disabled):not(.disabled):active,
html.dark .btn-info:not(:disabled):not(.disabled).active,
html.dark .btn-outline-info:hover,
html.dark .btn-outline-info:not(:disabled):not(.disabled):active,
html.dark .btn-danger,
html.dark .btn-danger:hover,
html.dark .btn-danger.disabled,
html.dark .btn-danger:disabled,
html.dark .btn-danger:not(:disabled):not(.disabled):active,
html.dark .btn-danger:not(:disabled):not(.disabled).active,
html.dark .btn-outline-danger:hover,
html.dark .btn-outline-danger:not(:disabled):not(.disabled):active,
html.dark .btn-warning,
html.dark .btn-warning:hover,
html.dark .btn-warning.disabled,
html.dark .btn-warning:disabled,
html.dark .btn-warning:not(:disabled):not(.disabled):active,
html.dark .btn-warning:not(:disabled):not(.disabled).active,
html.dark .btn-outline-warning:hover,
html.dark .btn-outline-warning:not(:disabled):not(.disabled):active {
    color: var(--bg);
}

/* Neutral button + alert surfaces sit on the slate ramp in dark. */
html.dark .btn-secondary,
html.dark .btn-secondary:hover,
html.dark .btn-secondary.disabled,
html.dark .btn-secondary:disabled,
html.dark .btn-secondary:not(:disabled):not(.disabled):active,
html.dark .btn-secondary:not(:disabled):not(.disabled).active {
    color: var(--ink);
    border-color: var(--hairline);
    background-color: var(--surface-alt);
}

html.dark .btn-outline-secondary {
    color: var(--body);
    border-color: var(--hairline);
}

html.dark .alert-success,
html.dark .alert-info,
html.dark .alert-danger,
html.dark .alert-warning {
    color: var(--bg);
}

html.dark .alert-success .alert-link,
html.dark .alert-info .alert-link,
html.dark .alert-danger .alert-link,
html.dark .alert-warning .alert-link {
    color: var(--bg);
}

html.dark .alert-secondary {
    color: var(--ink);
    border-color: var(--hairline);
    background-color: var(--surface);
}

/* The layout's dark block carries `html.dark small, html.dark .text-sm
 * { color: … !important }` at specificity (0,1,2), which out-specifies a bare
 * `.text-danger` (0,1,0). Several money flows render their reason strings as
 * `<small class="text-danger">` / `<small class="text-warning">`, so the
 * semantic text utilities have to be restated at (0,2,0) to survive dark mode.
 * Specificity — not source order — is what wins here. */
html.dark .text-secondary { color: var(--body) !important; }
html.dark .text-success   { color: var(--success) !important; }
html.dark .text-info      { color: var(--status-active) !important; }
html.dark .text-warning   { color: var(--warning) !important; }
html.dark .text-danger    { color: var(--danger) !important; }

/* Badge softs are translucent in the dark palette, so the ink token stays the
 * bright semantic colour and reads correctly on any card elevation. */
html.dark .badge-secondary,
html.dark .badge-status-unpaid,
html.dark .badge-status-rescheduled,
html.dark .badge-status-voided,
html.dark .badge-status-unknown {
    color: var(--body);
    background-color: var(--surface-alt);
}

/* `--primary-ink` (#003049) is the label colour for SOLID primary fills and is
 * deliberately identical in both palettes. Two chrome elements use it as a
 * foreground on a light surface, which inverts in dark — restate those against
 * the brand accent. Specificity (0,1,2)/(0,3,0) clears the base rules, which
 * live in inline <style> blocks later in the document. */
html.dark #sidenav-collapse-toggle:hover,
html.dark #sidenav-collapse-toggle:focus {
    color: var(--primary);
}

html.dark .ph-card .ph-section {
    color: var(--primary);
}