/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Failproof theme - light default + dark via html[data-theme="dark"]
 * Env badges via html[data-env="alpha"]
 * Path: /vendor/failproof/colors/theme.css
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* - - - - Environment badge - - - - */

.fp-env-badge
{
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.5rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    position: relative;
    top: -0.1em;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

button.fp-env-badge:hover,
button.fp-env-badge:focus
{
    filter: brightness(0.96);
    outline: none;
}

button.fp-env-badge:focus-visible
{
    box-shadow: 0 0 0 0.15rem rgba(18, 102, 241, 0.35);
}

.fp-env-badge-prod,
.fp-env-badge-alpha
{
    display: none;
}

/* Default / prod */
.fp-env-badge,
html[data-env="prod"] .fp-env-badge,
html:not([data-env]) .fp-env-badge
{
    color: #3a5568;
    background-color: #e8eef4;
    border-color: #c5d0dc;
}

html[data-env="prod"] .fp-env-badge-prod,
html:not([data-env]) .fp-env-badge-prod
{
    display: inline;
}

html[data-env="alpha"] .fp-env-badge
{
    color: #7a3d00;
    background-color: #ffe8cc;
    border-color: #ffb74d;
}

html[data-env="alpha"] .fp-env-badge-alpha
{
    display: inline;
}

html[data-theme="dark"] .fp-env-badge,
html[data-theme="dark"][data-env="prod"] .fp-env-badge,
html[data-theme="dark"]:not([data-env]) .fp-env-badge
{
    color: #c5d0dc;
    background-color: #2a3441;
    border-color: #4a5563;
}

html[data-theme="dark"][data-env="alpha"] .fp-env-badge
{
    color: #ffe0b2;
    background-color: rgba(255, 152, 0, 0.18);
    border-color: #ff9800;
}

/* Hide on Prod */
.fp-env-alpha
{
    display: none;
}

/* Show when Alpha */
html[data-env="alpha"] .fp-env-alpha
{
    display: inline;
}

/* Hide on Alpha */
html[data-env="alpha"] .fp-env-prod
{
    display: none !important;
}

/*
 * Simple sun/moon theme toggle for lightweight pages (no Settings drawer).
 * Uses html[data-theme] from FailproofSettings.boot / setTheme.
 * Icon = destination: moon on light ("go dark"), sun on dark ("go light").
 */
.fp-theme-toggle
{
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e4ecf3;
    color: #003c5e;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: none;
    line-height: 1;
}

.fp-theme-toggle:hover,
.fp-theme-toggle:focus
{
    background: #67baea;
    color: #fff;
    box-shadow: none;
    outline: none;
}

.fp-theme-toggle:focus-visible
{
    box-shadow: 0 0 0 0.15rem rgba(18, 102, 241, 0.35);
}

html[data-theme="dark"] .fp-theme-toggle
{
    background: #262f3f;
    color: #c5d0dc;
}

html[data-theme="dark"] .fp-theme-toggle:hover,
html[data-theme="dark"] .fp-theme-toggle:focus
{
    background: #67baea;
    color: #fff;
}

/*
 * Standalone toggle on page chrome (gray page bg) - bordered chip so it
 * reads clearly without a preview-bar surface behind it.
 */
.fp-theme-toggle.fp-theme-toggle-standalone
{
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #c5d0dc;
    background: #fff;
    color: #003c5e;
    box-shadow: 0 1px 3px rgba(0, 60, 94, 0.12);
}

.fp-theme-toggle.fp-theme-toggle-standalone:hover,
.fp-theme-toggle.fp-theme-toggle-standalone:focus
{
    border-color: #67baea;
    background: #67baea;
    color: #fff;
    box-shadow: 0 1px 4px rgba(103, 186, 234, 0.35);
}

html[data-theme="dark"] .fp-theme-toggle.fp-theme-toggle-standalone
{
    border-color: #4a5563;
    background: #1c2430;
    color: #e8eef4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .fp-theme-toggle.fp-theme-toggle-standalone:hover,
html[data-theme="dark"] .fp-theme-toggle.fp-theme-toggle-standalone:focus
{
    border-color: #67baea;
    background: #67baea;
    color: #fff;
}

/*
 * Hero FAB (marketing / product listing pages). Absolute in .intro top-right.
 * Same size as base .fp-theme-toggle; failproof-blue chip on bright heroes.
 */
.fp-theme-toggle.fp-theme-toggle-fab
{
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    background: #003c5e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.fp-theme-toggle.fp-theme-toggle-fab:hover,
.fp-theme-toggle.fp-theme-toggle-fab:focus
{
    background: #002a45;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .fp-theme-toggle.fp-theme-toggle-fab
{
    background: #67baea;
    color: #003c5e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .fp-theme-toggle.fp-theme-toggle-fab:hover,
html[data-theme="dark"] .fp-theme-toggle.fp-theme-toggle-fab:focus
{
    background: #85c8ee;
    color: #003c5e;
}

/* Beat MDB .btn i / .fas display so only one glyph shows.
 * Default / dark → sun; light (and unset) → moon. */
.fp-theme-toggle .fp-theme-icon-moon
{
    display: none !important;
}

.fp-theme-toggle .fp-theme-icon-sun
{
    display: inline-block !important;
}

html[data-theme="light"] .fp-theme-toggle .fp-theme-icon-sun,
html:not([data-theme]) .fp-theme-toggle .fp-theme-icon-sun
{
    display: none !important;
}

html[data-theme="light"] .fp-theme-toggle .fp-theme-icon-moon,
html:not([data-theme]) .fp-theme-toggle .fp-theme-icon-moon
{
    display: inline-block !important;
}

/* - - - - Settings drawer sections - - - - */

.fp-setting-section + .fp-setting-section
{
    margin-top: 2rem;
}

.fp-setting-title
{
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
}

.fp-setting-hint
{
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.35;
    text-align: left;
}

/* Stock MDB form-switch - do not override input size (breaks thumb/track) */
#drawer-settings .form-check.form-switch
{
    margin-top: 0.15rem;
    margin-bottom: 0;
    text-align: left;
}

#drawer-settings .fp-drawer-settings-body
{
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

/* Logout - nav-style row (MDB sidenav-link feel, like api-utility) */
#drawer-settings .fp-setting-logout-wrap
{
    margin-top: auto;
    padding-top: 0;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] #drawer-settings .fp-setting-logout-wrap
{
    border-top-color: rgba(255, 255, 255, 0.1);
}

#drawer-settings .fp-setting-nav
{
    padding-left: 0;
    margin-bottom: 0;
}

#drawer-settings .fp-setting-nav-link
{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 400;
    color: #4f4f4f;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* MDB .ripple-surface forces inline-block - keep full-width nav row */
#drawer-settings .fp-setting-nav-link.ripple-surface
{
    display: flex;
}

#drawer-settings .fp-setting-nav-link:hover,
#drawer-settings .fp-setting-nav-link:focus
{
    background-color: rgba(0, 0, 0, 0.05);
    color: #212529;
    outline: none;
}

#drawer-settings .fp-setting-nav-link .fa-fw
{
    width: 1.25em;
    text-align: center;
    opacity: 0.85;
}

html[data-theme="dark"] #drawer-settings .fp-setting-nav-link
{
    color: #c5d0dc;
}

html[data-theme="dark"] #drawer-settings .fp-setting-nav-link:hover,
html[data-theme="dark"] #drawer-settings .fp-setting-nav-link:focus
{
    background-color: rgba(255, 255, 255, 0.06);
    color: #e8eef4;
}

/* - - - - Light page chrome (explicit for FOUC parity) - - - - */

html[data-theme="light"] body.bg-gray-sc,
html:not([data-theme]) body.bg-gray-sc
{
    background-color: #f0f0f0 !important;
    color: #212529;
}

/* - - - - Dark theme - - - - */

html[data-theme="dark"]
{
    color-scheme: dark;
}

html[data-theme="dark"] body.bg-gray-sc,
html[data-theme="dark"] body.fp-page-fit-body
{
    background-color: #121821 !important;
    color: #e8eef4;
}

html[data-theme="dark"] .fp-page-chrome h2,
html[data-theme="dark"] .fp-page-chrome .fp-page-title
{
    color: #f1f5f9;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .fp-setting-hint
{
    color: #9aa6b2 !important;
}

/* MDB / Bootstrap text utilities - readable on dark surfaces */
html[data-theme="dark"] .text-primary
{
    color: #67BAEA !important;
}

html[data-theme="dark"] .text-secondary
{
    color: #9aa6b2 !important;
}

html[data-theme="dark"] .text-success
{
    color: #a3d9b1 !important;
}

html[data-theme="dark"] .text-danger
{
    color: #f3a8a0 !important;
}

html[data-theme="dark"] .text-warning
{
    color: #ffe08a !important;
}

html[data-theme="dark"] .text-info
{
    color: #9ad0f3 !important;
}

html[data-theme="dark"] .text-dark
{
    color: #e8eef4 !important;
}

html[data-theme="dark"] .text-body
{
    color: #e8eef4 !important;
}

html[data-theme="dark"] .fp-setting-title,
html[data-theme="dark"] #drawer-settings .form-check-label
{
    color: #e8eef4;
}

/* Skip PG mode chips + utilities-rail links - they own their colors */
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.pg-preview-link):not(.sc-util-nav__link):not(.sc-util-nav__home):not(.sc-rail__all)
{
    color: #67BAEA;
}

html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.pg-preview-link):not(.sc-util-nav__link):not(.sc-util-nav__home):not(.sc-rail__all):hover
{
    color: #9ad0f3;
}

/* Buttons */
html[data-theme="dark"] .btn-outline-secondary
{
    color: #c5d0dc;
    border-color: #4a5563;
    background-color: transparent;
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus
{
    color: #fff;
    background-color: #2a3441;
    border-color: #67BAEA;
}

/* Help - keep MDB secondary purple; lighten for dark contrast */
html[data-theme="dark"] .btn-outline-secondary.btn-fp-help
{
    color: #d7b3f3;
    border-color: #c46af7;
    background-color: transparent;
}

html[data-theme="dark"] .btn-outline-secondary.btn-fp-help:hover,
html[data-theme="dark"] .btn-outline-secondary.btn-fp-help:focus
{
    color: #fff;
    background-color: #9a30cb;
    border-color: #9a30cb;
}

/* Outline primary (e.g. Settings cog) - filled hover like Help */
html[data-theme="dark"] .btn-outline-primary
{
    color: #9ad0f3;
    border-color: #67BAEA;
    background-color: transparent;
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus
{
    color: #fff;
    background-color: #1266f1;
    border-color: #1266f1;
}

/* Forms
 * MDB .active = floated label (has value), NOT focus. Only :focus / .focused
 * get the accent border. Never set border-color on .form-notch-middle when
 * floated - that paints over the label gap (border-top must stay transparent).
 */
html[data-theme="dark"]
{
    --fp-form-surface: #1a222d;
    --fp-form-border: #3d4a5a;
    --fp-form-text: #e8eef4;
    --fp-form-label: #c5d0dc;
    --fp-form-label-focus: #9ad0f3;
    --fp-form-focus: #67BAEA;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .select-input,
html[data-theme="dark"] .select-input.active,
html[data-theme="dark"] .form-outline .form-control,
html[data-theme="dark"] .form-outline .form-control.active,
html[data-theme="dark"] .form-outline .select-input,
html[data-theme="dark"] .form-outline .select-input.active
{
    background-color: var(--fp-form-surface);
    color: var(--fp-form-text);
    border-color: var(--fp-form-border);
    -webkit-text-fill-color: var(--fp-form-text);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .select-input.focused,
html[data-theme="dark"] .select-input.active.focused,
html[data-theme="dark"] .form-outline .select-input.focused
{
    background-color: var(--fp-form-surface);
    color: var(--fp-form-text);
    border-color: var(--fp-form-focus);
    box-shadow: none;
    -webkit-text-fill-color: var(--fp-form-text);
}

/* Native <select> caret */
html[data-theme="dark"] .form-select
{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c5d0dc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* MDB Select caret (uses CSS variables) */
html[data-theme="dark"] .select-wrapper
{
    --mdb-form-outline-select-arrow-color: #c5d0dc;
    --mdb-form-outline-select-input-focused-arrow-color: #9ad0f3;
}

html[data-theme="dark"] .select-arrow
{
    color: #c5d0dc;
}

html[data-theme="dark"] .select-input.focused ~ .select-arrow
{
    color: #9ad0f3;
}

/* Resting / floated labels - readable on dark (not primary #1266f1) */
html[data-theme="dark"] .form-outline .form-label,
html[data-theme="dark"] .select-label,
html[data-theme="dark"] .form-check-label
{
    color: var(--fp-form-label);
}

html[data-theme="dark"] .form-outline .form-control.active ~ .form-label,
html[data-theme="dark"] .form-outline .form-control:focus ~ .form-label,
html[data-theme="dark"] .form-outline .form-control.focused ~ .form-label,
html[data-theme="dark"] .select-input.active ~ .select-label,
html[data-theme="dark"] .select-input.focused ~ .select-label,
html[data-theme="dark"] .select-wrapper .select-label
{
    color: var(--fp-form-label);
}

html[data-theme="dark"] .form-outline .form-control:focus ~ .form-label,
html[data-theme="dark"] .select-input.focused ~ .select-label
{
    color: var(--fp-form-label-focus);
}

/* Notch borders - resting (middle keeps top + bottom; sides stay open) */
html[data-theme="dark"] .form-outline .form-control ~ .form-notch .form-notch-leading,
html[data-theme="dark"] .form-outline .form-control ~ .form-notch .form-notch-trailing
{
    border-color: var(--fp-form-border);
}

html[data-theme="dark"] .form-outline .form-control ~ .form-notch .form-notch-middle
{
    border-top: 1px solid var(--fp-form-border);
    border-bottom: 1px solid var(--fp-form-border);
    border-left: none;
    border-right: none;
    box-shadow: none;
}

/*
 * Floated label: cutout on TOP only. Single 1px bottom border - do not also
 * add box-shadow here or the cutout segment looks thicker than the sides.
 */
html[data-theme="dark"] .form-outline .form-control.active ~ .form-notch .form-notch-middle,
html[data-theme="dark"] .form-outline .form-control:focus ~ .form-notch .form-notch-middle,
html[data-theme="dark"] .form-outline .select-input.focused ~ .form-notch .form-notch-middle
{
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid var(--fp-form-border);
    border-left: none;
    border-right: none;
    box-shadow: none !important;
}

/* Focus accent on leading/trailing + middle bottom edge */
html[data-theme="dark"] .form-outline .form-control:focus ~ .form-notch .form-notch-leading,
html[data-theme="dark"] .form-outline .form-control:focus ~ .form-notch .form-notch-trailing,
html[data-theme="dark"] .form-outline .select-input.focused ~ .form-notch .form-notch-leading,
html[data-theme="dark"] .form-outline .select-input.focused ~ .form-notch .form-notch-trailing
{
    border-color: var(--fp-form-focus);
}

html[data-theme="dark"] .form-outline .form-control:focus ~ .form-notch .form-notch-middle,
html[data-theme="dark"] .form-outline .select-input.focused ~ .form-notch .form-notch-middle
{
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid var(--fp-form-focus);
    box-shadow: none !important;
}

html[data-theme="dark"] .form-outline .form-control:focus ~ .form-notch .form-notch-leading
{
    box-shadow: -1px 0 0 0 var(--fp-form-focus);
}

html[data-theme="dark"] .form-outline .form-control:focus ~ .form-notch .form-notch-trailing
{
    box-shadow: 1px 0 0 0 var(--fp-form-focus);
}

/* Checkboxes: solid fill when checked (MDB default pattern). */
html[data-theme="dark"] .form-check-input[type="checkbox"]
{
    background-color: #2a3441;
    border-color: #5a6a7a;
}

html[data-theme="dark"] .form-check-input[type="checkbox"]:checked
{
    background-color: #1266f1;
    border-color: #1266f1;
}

/*
 * Radios (MDB): white/dark outer disc + ::after inner dot.
 * Do not solid-fill the input background on :checked — that erases the ring
 * and makes the control look fully filled (unlike light mode).
 */
html[data-theme="dark"] .form-check-input[type="radio"]
{
    background-color: transparent;
    background-image: none;
    border-color: #5a6a7a;
}

html[data-theme="dark"] .form-check-input[type="radio"]::after
{
    background-color: #2a3441;
}

html[data-theme="dark"] .form-check-input[type="radio"]:checked,
html[data-theme="dark"] .form-check-input[type="radio"]:checked:focus
{
    background-color: #2a3441 !important;
    background-image: none !important;
    border-color: #5a6a7a;
}

html[data-theme="dark"] .form-check-input[type="radio"]:checked::after
{
    background-color: #1266f1;
    border-color: #1266f1;
}

/*
 * MDB Ripple bakes color at init from data-mdb-ripple-color. After a live
 * light→dark swap, "dark" waves disappear on dark surfaces. Force a light
 * wave in dark theme (inline styles need !important).
 */
html[data-theme="dark"] [data-mdb-ripple-color="dark"] .ripple-wave
{
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0) 70%) !important;
    background-color: transparent !important;
}

/* Notes / alerts (MDB note-* variants) */
html[data-theme="dark"] .note.note-primary
{
    background-color: rgba(18, 102, 241, 0.15);
    border-color: rgba(18, 102, 241, 0.45);
    color: #d7e3f4;
}

html[data-theme="dark"] .note.note-secondary
{
    background-color: rgba(178, 60, 253, 0.14);
    border-color: rgba(178, 60, 253, 0.45);
    color: #ead6f8;
}

html[data-theme="dark"] .note.note-success
{
    background-color: rgba(0, 183, 74, 0.14);
    border-color: rgba(0, 183, 74, 0.45);
    color: #c5ebd4;
}

html[data-theme="dark"] .note.note-info
{
    background-color: rgba(57, 192, 237, 0.14);
    border-color: rgba(57, 192, 237, 0.45);
    color: #c8eaf5;
}

html[data-theme="dark"] .note.note-warning
{
    background-color: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.45);
    color: #f0e6c8;
}

html[data-theme="dark"] .note.note-danger
{
    background-color: rgba(244, 67, 54, 0.14);
    border-color: rgba(244, 67, 54, 0.45);
    color: #f3d0cc;
}

html[data-theme="dark"] .note.note-light
{
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(232, 238, 244, 0.35);
    color: #e8eef4;
}

/* Cards (login form, etc.) */
html[data-theme="dark"] .card
{
    background-color: #1a222d;
    color: #e8eef4;
    border-color: #2f3b4a;
}

html[data-theme="dark"] .card .card-body
{
    color: #e8eef4;
}

/* Modals */
html[data-theme="dark"] .modal-content
{
    background-color: #1a222d;
    color: #e8eef4;
    border-color: #2f3b4a;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer
{
    border-color: #2f3b4a;
}

html[data-theme="dark"] .modal-title
{
    color: #f1f5f9;
}

html[data-theme="dark"] .btn-close
{
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Drawers / offcanvas - header/content divider (matches logout wrap on light) */
.offcanvas.fp-drawer .offcanvas-header
{
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .offcanvas.fp-drawer
{
    background-color: #1a222d;
    color: #e8eef4;
}

html[data-theme="dark"] .offcanvas.fp-drawer .offcanvas-header
{
    border-bottom: 1px solid #2f3b4a;
}

html[data-theme="dark"] .offcanvas.fp-drawer .offcanvas-title
{
    color: #f1f5f9;
}

/* Materialize tabs - default soft chrome (skip brand .failproof-* fills) */
html[data-theme="dark"] .tabs:not(.failproof-blue):not(.failproof-gray):not(.failproof-light-blue):not(.failproof-lblue)
{
    background-color: #151c26;
    --tabs-accent: #67BAEA;
}

html[data-theme="dark"] .tabs:not(.failproof-blue):not(.failproof-gray):not(.failproof-light-blue):not(.failproof-lblue) .tab a
{
    color: #9aa6b2;
}

html[data-theme="dark"] .tabs:not(.failproof-blue):not(.failproof-gray):not(.failproof-light-blue):not(.failproof-lblue) .tab a:hover
{
    color: #9ad0f3;
    background-color: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .tabs:not(.failproof-blue):not(.failproof-gray):not(.failproof-light-blue):not(.failproof-lblue) .tab a.active
{
    color: #67BAEA;
    background-color: transparent;
}

html[data-theme="dark"] .tabs:not(.failproof-blue):not(.failproof-gray):not(.failproof-light-blue):not(.failproof-lblue) .indicator
{
    background-color: #67BAEA;
}

/* Brand tabs keep their fill in dark mode */
html[data-theme="dark"] .tabs.failproof-blue
{
    background-color: #003C5E;
}

html[data-theme="dark"] .tabs.failproof-gray
{
    background-color: #333;
}

/* FailproofStepper - override CSS variables */
html[data-theme="dark"] .fp-stepper
{
    --fp-stepper-muted-bg: #5a6570;
    --fp-stepper-disabled-bg: #3a4552;
    --fp-stepper-label-color: #9aa6b2;
    --fp-stepper-label-active-color: #f1f5f9;
    --fp-stepper-connector: rgba(255, 255, 255, 0.12);
    --fp-stepper-head-hover: rgba(255, 255, 255, 0.06);
    --fp-stepper-surface: #1a222d;
    --fp-stepper-chrome: #151c26;
    --fp-stepper-footer: #151c26;
    --fp-stepper-border: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .fp-stepper-panel-body h5,
html[data-theme="dark"] .fp-stepper-panel-body .fp-step-toolbar-title
{
    color: #c5d0dc;
}

/* FailproofTable */
html[data-theme="dark"] .fp-table-root
{
    --fp-table-header-bg: #243040;
    --fp-table-header-color: #e8eef4;
    /* Softer than body/cell borders so the sticky header edge is not a bright seam */
    --fp-table-header-border: rgba(255, 255, 255, 0.08);
    --fp-table-header-hover-bg: #334155;
    --fp-table-group-bg: #1e2836;
    --fp-table-group-divider: rgba(255, 255, 255, 0.18);
    --fp-table-body-bg: #1a222d;
    --fp-table-hover-bg: #243040;
    --fp-table-border: #2f3b4a;
    --fp-table-sort-icon-color: #9aabbc;
    --fp-table-sort-icon-active: #f1f5f9;
}

html[data-theme="dark"] .fp-table thead th
{
    border-bottom-width: 1px;
}

html[data-theme="dark"] .fp-table,
html[data-theme="dark"] .fp-table td,
html[data-theme="dark"] .fp-table th
{
    color: #e8eef4;
}

html[data-theme="dark"] .fp-table-footer,
html[data-theme="dark"] .fp-table-pagination,
html[data-theme="dark"] .fp-table-footer .datatable-pagination-nav,
html[data-theme="dark"] .datatable-pagination-button
{
    color: #c5d0dc;
}

html[data-theme="dark"] .fp-table tbody tr.is-selected td,
html[data-theme="dark"] .fp-table tbody tr.is-selected td.fp-table-sticky::before
{
    background-color: rgba(18, 102, 241, 0.22) !important;
}

/* Skeleton */
html[data-theme="dark"] .fp-skeleton .placeholder,
html[data-theme="dark"] .fp-skeleton .fp-stepper-nav-icon,
html[data-theme="dark"] .fp-skeleton-btn,
html[data-theme="dark"] .fp-skeleton-btn:disabled
{
    background-color: #2a3441 !important;
    border-color: #2a3441 !important;
    color: transparent !important;
}

html[data-theme="dark"] .fp-skeleton .fp-stepper-nav-label::after,
html[data-theme="dark"] .fp-skeleton .fp-stepper-nav-item:not(:first-child) .fp-stepper-nav-btn::before,
html[data-theme="dark"] .fp-skeleton .fp-stepper-nav-item:not(:last-child) .fp-stepper-nav-btn::after
{
    background-color: #2a3441;
}

/* Table footer */
html[data-theme="dark"] .fp-table-footer.datatable-pagination
{
    background-color: #151c26;
    border-color: #2f3b4a;
    color: #c5d0dc;
}

html[data-theme="dark"] .fp-table-footer .fp-table-page-size,
html[data-theme="dark"] .fp-table-footer select
{
    background-color: #1a222d;
    color: #e8eef4;
    border-color: #3d4a5a;
}

html[data-theme="dark"] .fp-table-footer .datatable-select-wrapper .select-input,
html[data-theme="dark"] .fp-table-footer .datatable-select-wrapper .select-input.active
{
    background-color: #1a222d;
    color: #e8eef4;
    border-color: #3d4a5a;
}

html[data-theme="dark"] .fp-table-footer .datatable-select-wrapper .select-arrow
{
    color: #9aabbc;
}

/* MDB select dropdown panel */
html[data-theme="dark"] .select-dropdown-container,
html[data-theme="dark"] .select-dropdown
{
    background-color: #1a222d;
    color: #e8eef4;
}

html[data-theme="dark"] .select-option,
html[data-theme="dark"] .select-option-text
{
    color: #e8eef4;
}

html[data-theme="dark"] .select-option:hover,
html[data-theme="dark"] .select-option.selected
{
    background-color: #243040;
}

/* MDB file-upload plugin (dropzone) */
.file-upload-wrapper
{
    border: 1px dashed #237baf;
    border-radius: 4px;
    background: rgba(55, 189, 248, 0.05);
}

.file-upload-default-message
{
    text-align: center;
}

html[data-theme="dark"] .file-upload-wrapper
{
    border-color: #67BAEA;
    background: rgba(103, 186, 234, 0.08);
}

html[data-theme="dark"] .file-upload-message,
html[data-theme="dark"] .file-upload-default-message,
html[data-theme="dark"] .file-upload-cloud-icon
{
    color: #c5d0dc;
}

html[data-theme="dark"] .file-upload-preview
{
    background-color: #151c26;
}

html[data-theme="dark"] .file-upload-file-icon
{
    color: #9aa6b2;
}

html[data-theme="dark"] .file-upload:not(.has-error):hover .file-upload-mask
{
    opacity: 0.12;
}

/* Bootstrap tables inside steppers / modals (non-FailproofTable) */
html[data-theme="dark"] .table
{
    color: #e8eef4;
    --bs-table-color: #e8eef4;
    --bs-table-bg: transparent;
    --bs-table-border-color: #2f3b4a;
    --bs-table-striped-color: #e8eef4;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: #e8eef4;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .table > :not(caption) > * > *
{
    color: #e8eef4;
    background-color: var(--bs-table-bg);
    border-bottom-color: #2f3b4a;
}

html[data-theme="dark"] .table thead th
{
    color: #c5d0dc;
    border-bottom-color: #3d4a5a;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *
{
    color: #e8eef4;
    background-color: rgba(255, 255, 255, 0.04);
}

/* Search toggle */
html[data-theme="dark"] .fp-search-toggle.is-filtered:not(.is-open) .fp-search-toggle-btn
{
    color: #67BAEA;
    border-color: #67BAEA;
    background-color: rgba(103, 186, 234, 0.1);
}

html[data-theme="dark"] .fp-search-toggle-panel
{
    background: var(--fp-stepper-surface, #1a222d);
}

/* Impersonator review */
html[data-theme="dark"] .imp-review h5
{
    color: #9aa6b2;
}

html[data-theme="dark"] .imp-review h4
{
    color: #e8eef4;
}

/* - - - Accordion (MDB) - - - */
html[data-theme="dark"] .accordion
{
    --mdb-accordion-border-color: #2f3b4a;
    --mdb-accordion-btn-color: #e8eef4;
    --mdb-accordion-btn-bg: #1c2430;
    --mdb-accordion-active-color: #e8eef4;
    --mdb-accordion-active-bg: #262f3f;
    --mdb-accordion-btn-focus-border-color: #4a5563;
    --mdb-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(103, 186, 234, 0.2);
}

html[data-theme="dark"] .accordion-item
{
    background-color: #1c2430;
    color: #e8eef4;
    border-color: #2f3b4a;
}

html[data-theme="dark"] .accordion-item:first-of-type,
html[data-theme="dark"] .accordion-item:first-of-type .accordion-button,
html[data-theme="dark"] .accordion-item:last-of-type,
html[data-theme="dark"] .accordion-item:last-of-type .accordion-button.collapsed
{
    border-color: #2f3b4a;
}

html[data-theme="dark"] .accordion-button
{
    background-color: #1c2430;
    color: #e8eef4;
    box-shadow: inset 0 -1px 0 #2f3b4a;
}

html[data-theme="dark"] .accordion-button:not(.collapsed)
{
    background-color: #262f3f;
    color: #e8eef4;
    box-shadow: inset 0 -1px 0 #2f3b4a;
}

html[data-theme="dark"] .accordion-button:focus
{
    border-color: #4a5563;
    box-shadow: inset 0 -1px 0 #2f3b4a, 0 0 0 0.2rem rgba(103, 186, 234, 0.2);
}

html[data-theme="dark"] .accordion-button::after
{
    /* Light chevron for dark surfaces (replaces default #1266f1 fill) */
    --mdb-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c5d0dc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --mdb-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c5d0dc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-image: var(--mdb-accordion-btn-icon);
}

html[data-theme="dark"] .accordion-button:not(.collapsed)::after
{
    background-image: var(--mdb-accordion-btn-active-icon);
}

html[data-theme="dark"] .accordion-body
{
    background-color: #1c2430;
    color: #c5d0dc;
}