/* ============================================================
   FlexHR Modern Overlay
   Layers on top of the Vyzor (Spruko) template.
   - Emerald / teal / lime brand palette (matches landing)
   - Refined polish for light + dark modes
   - Modernized auth/login experience
   - Do not edit /assets/css/styles.css - put all our tweaks here
   ============================================================ */

/* ============================================================
   Brand palette - override Vyzor's --primary-rgb
   ============================================================ */

:root {
    /* Emerald brand - replaces Vyzor's curious-blue (25, 160, 209) */
    --primary-rgb: 16, 185, 129;
    --primary-color: rgb(16, 185, 129);

    /* Accent helpers (used by our custom rules) */
    --fhm-accent: #10b981;            /* emerald-500 */
    --fhm-accent-rgb: 16, 185, 129;
    --fhm-accent-dark: #047857;       /* emerald-700 */
    --fhm-accent-light: #6ee7b7;      /* emerald-300 */
    --fhm-accent-2: #2dd4bf;          /* teal-400 */
    --fhm-accent-3: #84cc16;          /* lime-500 */
    --fhm-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --fhm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fhm-radius-lg: 14px;
    --fhm-radius-md: 10px;
    --fhm-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --fhm-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --fhm-shadow-glow: 0 6px 20px rgba(16, 185, 129, 0.18);
}

/* Dark-mode canvas - deeper slate to match the landing site */
[data-theme-mode="dark"] {
    --body-bg-rgb: 15, 23, 42;           /* slate-900 */
    --body-bg-rgb2: 30, 41, 59;          /* slate-800 */
    --light-rgb: 30, 41, 59;
    --form-control-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(255, 255, 255, 0.08);
    --custom-white: 30, 41, 59;
    --custom-black: 226, 232, 240;
    --default-text-color: #e2e8f0;
    --default-border: rgba(255, 255, 255, 0.08);
    --menu-bg: 12, 20, 34;               /* deep slate */
    --header-bg: rgba(15, 23, 42, 0.72);
    --card-bg: 30, 41, 59;
    --fhm-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
    --fhm-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   Smooth theme transitions
   ============================================================ */

html,
.app-header,
.app-sidebar,
.card,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.table,
.modal-content {
    transition: background-color var(--fhm-transition),
                color var(--fhm-transition),
                border-color var(--fhm-transition),
                box-shadow var(--fhm-transition);
}

/* ============================================================
   Header - glass morphism + subtle bottom glow
   ============================================================ */

.app-header {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(var(--fhm-accent-rgb), 0.08);
    box-shadow: 0 1px 0 rgba(var(--fhm-accent-rgb), 0.04),
                0 4px 24px rgba(15, 23, 42, 0.04);
}

[data-theme-mode="dark"] .app-header {
    background: rgba(15, 23, 42, 0.72) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(var(--fhm-accent-rgb), 0.12),
                0 4px 30px rgba(0, 0, 0, 0.35);
}

[data-theme-mode="light"] .app-header {
    background: rgba(255, 255, 255, 0.82) !important;
}

/* Header icon buttons - nicer hover */
.header-link {
    border-radius: var(--fhm-radius-md) !important;
    transition: background-color var(--fhm-transition),
                color var(--fhm-transition),
                transform var(--fhm-transition);
}

.header-link:hover {
    background-color: rgba(var(--fhm-accent-rgb), 0.1);
    color: var(--fhm-accent) !important;
    transform: translateY(-1px);
}

.header-link-icon {
    width: 22px;
    height: 22px;
    transition: transform var(--fhm-transition);
}

.header-theme-mode .header-link:hover .header-link-icon {
    transform: rotate(20deg);
}

/* ============================================================
   Sidebar - active-item emerald accent + smoother nav
   ============================================================ */

.app-sidebar {
    border-right: 1px solid rgba(var(--fhm-accent-rgb), 0.06);
}

[data-theme-mode="dark"] .app-sidebar {
    background: rgba(12, 20, 34, 0.94) !important;
    border-right-color: rgba(255, 255, 255, 0.05);
}

.side-menu__item {
    border-radius: var(--fhm-radius-md) !important;
    margin: 2px 10px !important;
    transition: background-color var(--fhm-transition),
                color var(--fhm-transition),
                padding var(--fhm-transition);
    position: relative;
    overflow: hidden;
}

.side-menu__item:hover {
    background-color: rgba(var(--fhm-accent-rgb), 0.08) !important;
    color: var(--fhm-accent) !important;
}

.side-menu__item.active,
.side-menu__item[aria-expanded="true"] {
    background: linear-gradient(90deg,
        rgba(var(--fhm-accent-rgb), 0.18),
        rgba(var(--fhm-accent-rgb), 0.06)) !important;
    color: var(--fhm-accent) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--fhm-accent-rgb), 0.15);
}

.side-menu__item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: linear-gradient(180deg, var(--fhm-accent), var(--fhm-accent-2));
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 12px rgba(var(--fhm-accent-rgb), 0.6);
}

.side-menu__icon {
    transition: transform var(--fhm-transition);
}

.side-menu__item:hover .side-menu__icon {
    transform: scale(1.1);
}

/* ============================================================
   Buttons - gradient primary + refined hover lift
   ============================================================ */

.btn-primary {
    background: linear-gradient(135deg, rgb(var(--fhm-accent-rgb)) 0%, var(--fhm-accent-dark) 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(var(--fhm-accent-rgb), 0.25);
    transition: transform var(--fhm-transition),
                box-shadow var(--fhm-transition),
                background var(--fhm-transition);
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--fhm-accent-dark) 0%, rgb(var(--fhm-accent-rgb)) 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--fhm-accent-rgb), 0.35);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary {
    border-color: rgba(var(--fhm-accent-rgb), 0.5);
    color: var(--fhm-accent);
    transition: all var(--fhm-transition);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: rgba(var(--fhm-accent-rgb), 0.1);
    border-color: var(--fhm-accent);
    color: var(--fhm-accent);
    transform: translateY(-1px);
}

/* ============================================================
   Cards - refined radius, subtle hover lift
   ============================================================ */

.card,
.custom-card {
    border-radius: var(--fhm-radius-lg) !important;
    border: 1px solid rgba(var(--fhm-accent-rgb), 0.05);
    box-shadow: var(--fhm-shadow-sm);
    transition: box-shadow var(--fhm-transition),
                border-color var(--fhm-transition),
                transform var(--fhm-transition);
}

[data-theme-mode="dark"] .card,
[data-theme-mode="dark"] .custom-card {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgb(30, 41, 59);
}

.card:hover {
    box-shadow: var(--fhm-shadow-md);
    border-color: rgba(var(--fhm-accent-rgb), 0.15);
}

/* ============================================================
   Form controls - emerald focus ring
   ============================================================ */

.form-control,
.form-select {
    border-radius: var(--fhm-radius-md) !important;
    border-color: rgba(var(--fhm-accent-rgb), 0.12);
    transition: border-color var(--fhm-transition), box-shadow var(--fhm-transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fhm-accent) !important;
    box-shadow: 0 0 0 4px rgba(var(--fhm-accent-rgb), 0.15) !important;
}

[data-theme-mode="dark"] .form-control,
[data-theme-mode="dark"] .form-select {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

[data-theme-mode="dark"] .form-control::placeholder {
    color: rgba(226, 232, 240, 0.5);
}

/* ============================================================
   Dropdowns / modals - softer + emerald accent divider
   ============================================================ */

.dropdown-menu {
    border-radius: var(--fhm-radius-lg);
    border: 1px solid rgba(var(--fhm-accent-rgb), 0.08);
    box-shadow: var(--fhm-shadow-md);
    overflow: hidden;
}

[data-theme-mode="dark"] .dropdown-menu {
    background: rgb(30, 41, 59);
    border-color: rgba(255, 255, 255, 0.08);
}

.dropdown-item {
    transition: background-color var(--fhm-transition), color var(--fhm-transition);
    border-radius: 6px;
    margin: 2px 4px;
    padding: 8px 12px;
    width: calc(100% - 8px);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--fhm-accent-rgb), 0.1);
    color: var(--fhm-accent);
}

.dropdown-menu .bg-primary {
    background: linear-gradient(135deg, rgb(var(--fhm-accent-rgb)) 0%, var(--fhm-accent-dark) 100%) !important;
}

.modal-content {
    border-radius: var(--fhm-radius-lg);
    border: 1px solid rgba(var(--fhm-accent-rgb), 0.08);
    box-shadow: var(--fhm-shadow-md);
    overflow: hidden;
}

/* ============================================================
   Tables - cleaner hover state
   ============================================================ */

.table > :not(caption) > * > * {
    border-bottom-color: rgba(var(--fhm-accent-rgb), 0.06) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--fhm-accent-rgb), 0.05) !important;
    color: inherit;
}

/* ============================================================
   Scrollbar polish
   ============================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--fhm-accent-rgb), 0.3) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(var(--fhm-accent-rgb), 0.25);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--fhm-accent-rgb), 0.45);
}

/* ============================================================
   Theme toggle - more discoverable, smooth rotation
   ============================================================ */

.header-theme-mode .layout-setting {
    position: relative;
}

.header-theme-mode .layout-setting::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(var(--fhm-accent-rgb), 0.15),
        rgba(45, 212, 191, 0.15));
    opacity: 0;
    transition: opacity var(--fhm-transition);
    z-index: -1;
}

.header-theme-mode .layout-setting:hover::before {
    opacity: 1;
}

/* Light / dark icon visibility (Vyzor's default logic - keep explicit) */
[data-theme-mode="light"] .header-theme-mode .dark-layout { display: none; }
[data-theme-mode="light"] .header-theme-mode .light-layout { display: inline-flex; }
[data-theme-mode="dark"] .header-theme-mode .light-layout { display: none; }
[data-theme-mode="dark"] .header-theme-mode .dark-layout { display: inline-flex; }

/* ============================================================
   Login / Auth page - modern aurora canvas
   ============================================================ */

.login-page,
.register-page {
    background: none !important;
    background-color: #0a1422 !important;
    min-height: 100vh;
    height: auto !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden;
}

.authentication-basic-background {
    display: none !important;
}

/* Aurora mesh behind the login card */
.login-page::before,
.register-page::before {
    content: '';
    position: fixed;
    inset: -20%;
    background:
        radial-gradient(ellipse 50% 40% at 20% 30%, rgba(16, 185, 129, 0.35), transparent 65%),
        radial-gradient(ellipse 45% 40% at 80% 70%, rgba(45, 212, 191, 0.25), transparent 65%),
        radial-gradient(ellipse 40% 35% at 60% 20%, rgba(132, 204, 22, 0.18), transparent 65%);
    filter: blur(60px);
    z-index: 0;
    animation: fhmAurora 20s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Subtle grid overlay */
.login-page::after,
.register-page::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

@keyframes fhmAurora {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(40px, -30px) scale(1.08); }
    100% { transform: translate(-30px, 40px) scale(0.95); }
}

.login-page .container,
.register-page .container {
    position: relative;
    z-index: 1;
}

.login-card {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(30, 41, 59, 0.72) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
        0 0 0 1px rgba(var(--fhm-accent-rgb), 0.15),
        0 20px 60px rgba(0, 0, 0, 0.35),
        0 0 80px rgba(var(--fhm-accent-rgb), 0.15);
    color: #e2e8f0;
    animation: fhmCardIn 0.8s var(--fhm-ease-out) both;
}

@keyframes fhmCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login-card h1,
.login-card h2,
.login-card h3,
.login-card h4,
.login-card h5,
.login-card h6 {
    color: #fff;
}

.login-card .text-muted,
.login-card p.text-muted {
    color: #cbd5e1 !important;
}

.login-card .form-label,
.login-card .text-default {
    color: #e2e8f0 !important;
}

.login-card .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

.login-card .form-control:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--fhm-accent) !important;
    box-shadow: 0 0 0 4px rgba(var(--fhm-accent-rgb), 0.2) !important;
}

.login-card .form-control::placeholder {
    color: rgba(226, 232, 240, 0.5) !important;
}

.login-card .show-password-button {
    color: rgba(226, 232, 240, 0.7) !important;
}

.login-card .btn-primary {
    padding: 12px 28px;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

/* ============================================================
   Floating theme toggle (login page - no header exists)
   ============================================================ */

.fhm-auth-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(30, 41, 59, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--fhm-transition);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.fhm-auth-theme-toggle:hover {
    background: rgba(var(--fhm-accent-rgb), 0.15);
    border-color: rgba(var(--fhm-accent-rgb), 0.4);
    color: var(--fhm-accent);
    transform: translateY(-1px) rotate(12deg);
    box-shadow: 0 6px 20px rgba(var(--fhm-accent-rgb), 0.25);
}

.fhm-auth-theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* ============================================================
   Badges / pills - brand accents
   ============================================================ */

.bg-primary-transparent,
.bg-secondary-transparent {
    background: rgba(var(--fhm-accent-rgb), 0.12) !important;
    color: var(--fhm-accent) !important;
}

.text-primary {
    color: var(--fhm-accent) !important;
}

/* ============================================================
   Progress top bar - brand gradient
   ============================================================ */

.progress-top-bar {
    background: linear-gradient(90deg, var(--fhm-accent-2), var(--fhm-accent), var(--fhm-accent-3));
    height: 3px;
}

/* ============================================================
   Readable contrast (WCAG 2.x AA: 4.5:1 text, 3:1 large text)
   Measured page by page in light and dark mode (2026-09-26). The brand
   palette's mid tones (emerald-500, teal-green success, sky info, orange,
   Bootstrap red/pink) fall below AA both as text on the canvas and as the
   background behind white button/badge text. Backgrounds move one or two
   shades darker in the same family; where a colour is used AS TEXT in dark
   mode it moves lighter instead, because dark mode needs the opposite.
   ============================================================ */

:root {
    --primary-rgb: 4, 120, 87;            /* emerald-700: white text 5.5:1 */
    --primary-color: rgb(4, 120, 87);
    --secondary-rgb: 180, 58, 14;         /* deep orange: white text 5.7:1 */
    --success-rgb: 21, 128, 61;           /* green-700 */
    --info-rgb: 14, 116, 144;             /* cyan-700 */
    --danger-rgb: 185, 28, 28;            /* red-700 */
    --warning-rgb: 245, 166, 35;          /* unchanged: carries dark text */
    --bs-primary: rgb(4, 120, 87);
    --bs-primary-rgb: 4, 120, 87;
    --bs-secondary-rgb: 180, 58, 14;
    --bs-success-rgb: 21, 128, 61;
    --bs-info-rgb: 14, 116, 144;
    --bs-danger-rgb: 185, 28, 28;
    --bs-link-color: rgb(4, 120, 87);
    --bs-link-color-rgb: 4, 120, 87;
    --bs-link-hover-color: rgb(6, 95, 70);
    --bs-code-color: #a3195b;
    --fhm-accent: #047857;
    --fhm-text-primary: #047857;
    --fhm-text-secondary: #b43a0e;
    --fhm-text-success: #15803d;
    --fhm-text-info: #0e7490;
    --fhm-text-danger: #b91c1c;
    --fhm-text-warning: #92400e;
    --fhm-text-muted: #5d6576;
}

[data-theme-mode="dark"] {
    --fhm-accent: #34d399;
    --fhm-text-primary: #34d399;          /* emerald-400 on slate-900: 9.6:1 */
    --fhm-text-secondary: #fb923c;
    --fhm-text-success: #4ade80;
    --fhm-text-info: #22d3ee;
    --fhm-text-danger: #f87171;
    --fhm-text-warning: #fbbf24;
    --fhm-text-muted: #94a3b8;
    --bs-link-color: #34d399;
    --bs-link-color-rgb: 52, 211, 153;
    --bs-link-hover-color: #6ee7b7;
    --bs-code-color: #f472b6;
    /* Bootstrap's own defaults (#212529) leak through labels and card titles
       that the template never re-coloured - near-black on slate. */
    --bs-body-color: var(--default-text-color);
    --bs-body-color-rgb: 226, 232, 240;
    --bs-heading-color: var(--default-text-color);
    --bs-emphasis-color: #f1f5f9;
    --bs-secondary-color: #94a3b8;
}

/* Colour-as-text utilities and controls follow the mode-aware text colours. */
.text-primary { color: var(--fhm-text-primary) !important; }
.text-secondary { color: var(--fhm-text-secondary) !important; }
.text-success { color: var(--fhm-text-success) !important; }
.text-info { color: var(--fhm-text-info) !important; }
.text-danger { color: var(--fhm-text-danger) !important; }
.text-warning { color: var(--fhm-text-warning) !important; }
code { color: var(--bs-code-color); }

.btn-outline-primary { --bs-btn-color: var(--fhm-text-primary); color: var(--fhm-text-primary); }
.btn-outline-secondary { --bs-btn-color: var(--fhm-text-secondary); color: var(--fhm-text-secondary); }
.btn-outline-success { --bs-btn-color: var(--fhm-text-success); color: var(--fhm-text-success); }
.btn-outline-info { --bs-btn-color: var(--fhm-text-info); color: var(--fhm-text-info); }
.btn-outline-danger { --bs-btn-color: var(--fhm-text-danger); color: var(--fhm-text-danger); }
.btn-outline-warning { --bs-btn-color: var(--fhm-text-warning); color: var(--fhm-text-warning); }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
.btn-outline-info:hover, .btn-outline-danger:hover { color: #fff; }
.btn-link, a:not(.btn):not(.side-menu__item):not(.nav-link):not(.dropdown-item):not(.page-link):not(.header-link) {
    color: var(--bs-link-color);
}
.breadcrumb-item a, .breadcrumb-item.text-secondary { color: var(--fhm-text-primary) !important; }

/* Solid fills carry white text; warning is the one bright fill and carries dark text. */
.btn-primary { --bs-btn-bg: rgb(var(--primary-rgb)); --bs-btn-border-color: rgb(var(--primary-rgb)); --bs-btn-hover-bg: rgb(6, 95, 70); --bs-btn-hover-border-color: rgb(6, 95, 70); }
.btn-warning, .bg-warning, .badge.bg-warning { color: #1f2937 !important; }
.bg-info.text-dark, .btn-info.text-dark { color: #fff !important; }
[data-theme-mode="dark"] .bg-warning.text-dark { color: #1f2937 !important; }

/* Alerts: the template tints the text with the alert's own light colour. */
.alert-warning { color: var(--fhm-text-warning); }
.alert-info { color: var(--fhm-text-info); }
.alert-success { color: var(--fhm-text-success); }
.alert-danger { color: var(--fhm-text-danger); }
.alert-primary { color: var(--fhm-text-primary); }
.alert-secondary { color: var(--fhm-text-secondary); }
.alert-warning li, .alert-info li, .alert-warning p, .alert-info p { color: inherit; }

/* Dark mode: form labels and card titles the template left on Bootstrap black. */
[data-theme-mode="dark"] label,
[data-theme-mode="dark"] .form-label,
[data-theme-mode="dark"] .col-form-label,
[data-theme-mode="dark"] .card-title,
[data-theme-mode="dark"] h1, [data-theme-mode="dark"] h2, [data-theme-mode="dark"] h3,
[data-theme-mode="dark"] h4, [data-theme-mode="dark"] h5, [data-theme-mode="dark"] h6,
[data-theme-mode="dark"] .table,
[data-theme-mode="dark"] .list-group-item { color: var(--default-text-color); }

/* Table pager: disabled arrows were near-invisible (1.3:1) in dark mode. */
.dt-paging-button.disabled, .page-item.disabled .page-link { color: var(--fhm-text-muted) !important; }

/* Correspondence wizard step labels. */
.step-indicator .step-label { color: var(--fhm-text-muted); }
.step-indicator .step-circle:not(.active) { color: #334155; }

/* Second pass (same audit): the last few pairs under AA. */
.alert-info { color: #155e75; }                                  /* cyan-800 on the info tint */
[data-theme-mode="dark"] .alert-info { color: var(--fhm-text-info); }
[data-theme-mode="dark"] .side-menu__item.active,
[data-theme-mode="dark"] .side-menu__item.active .side-menu__label,
[data-theme-mode="dark"] .side-menu__item.active .side-menu__angle { color: var(--fhm-text-primary) !important; }
[data-theme-mode="dark"] .side-menu__item.active .side-menu__icon { fill: var(--fhm-text-primary) !important; }
[data-theme-mode="dark"] .badge.bg-dark { background-color: #334155 !important; color: #f8fafc !important; }

/* Disabled controls keep Bootstrap's own disabled colour unless told otherwise. */
.btn-outline-primary { --bs-btn-disabled-color: var(--fhm-text-primary); }
.btn-outline-secondary { --bs-btn-disabled-color: var(--fhm-text-secondary); }
.btn-outline-success { --bs-btn-disabled-color: var(--fhm-text-success); }
.btn-outline-info { --bs-btn-disabled-color: var(--fhm-text-info); }
.btn-outline-danger { --bs-btn-disabled-color: var(--fhm-text-danger); }
.btn-outline-warning { --bs-btn-disabled-color: var(--fhm-text-warning); }
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active { color: var(--fhm-text-muted) !important; }

/* ============================================================
   Form controls: readable in both modes (input audit 2026-09-26)
   ============================================================ */

/* Native pickers (date, the plain select popup, scrollbars) follow the theme. */
[data-theme-mode="dark"] { color-scheme: dark; }
:root:not([data-theme-mode="dark"]) { color-scheme: light; }

.form-control, .form-select { color: var(--default-text-color); }
.form-control::placeholder, .choices__input::placeholder { color: #5d6576; opacity: 1; }
[data-theme-mode="dark"] .form-control::placeholder,
[data-theme-mode="dark"] .choices__input::placeholder { color: #a3aec2; opacity: 1; }

/* Plain selects that opt out of search: the popup options stay readable. */
.form-select option { color: var(--default-text-color); }
.form-select option:checked { color: var(--fhm-text-primary); }
[data-theme-mode="dark"] select option { background-color: #1e293b; color: #e2e8f0; }
[data-theme-mode="dark"] select option:checked { background-color: #334155; color: #f8fafc; }

/* Searchable dropdowns (flexhr-selects.js) look like .form-select. */
.fhm-choices { margin-bottom: 0; font-size: inherit; }
.fhm-choices .choices__inner {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    background-color: var(--form-control-bg, var(--custom-white));
    border: 1px solid var(--input-border, var(--default-border));
    border-radius: var(--bs-border-radius, 0.375rem);
    color: var(--default-text-color);
    font-size: 0.875rem;
}
.fhm-choices.fhm-choices-sm .choices__inner { min-height: calc(1.5em + 0.5rem + 2px); padding-top: 0.1rem; padding-bottom: 0.1rem; }
.fhm-choices.is-focused .choices__inner, .fhm-choices.is-open .choices__inner {
    border-color: rgb(var(--primary-rgb));
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.18);
}
.fhm-choices.is-invalid .choices__inner { border-color: var(--fhm-text-danger); }
.fhm-choices.is-disabled .choices__inner { opacity: 0.65; cursor: not-allowed; }
.fhm-choices .choices__list--single { padding: 0.25rem 0.25rem; }
.fhm-choices .choices__list--single .choices__item { color: var(--default-text-color); }
.fhm-choices .choices__placeholder { color: #5d6576; opacity: 1; }
[data-theme-mode="dark"] .fhm-choices .choices__placeholder { color: #a3aec2; }
.fhm-choices[data-type*="select-one"]::after { border-color: var(--default-text-color) transparent transparent; }
.fhm-choices[data-type*="select-one"].is-open::after { border-color: transparent transparent var(--default-text-color); }

.fhm-choices .choices__list--dropdown, .fhm-choices .choices__list[aria-expanded] {
    background-color: #ffffff;
    border: 1px solid var(--default-border);
    border-radius: var(--bs-border-radius, 0.375rem);
    color: #111827;
    z-index: 1060;
}
[data-theme-mode="dark"] .fhm-choices .choices__list--dropdown,
[data-theme-mode="dark"] .fhm-choices .choices__list[aria-expanded] {
    background-color: #1e293b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}
.fhm-choices .choices__list--dropdown .choices__item,
.fhm-choices .choices__list[aria-expanded] .choices__item { color: inherit; font-size: 0.875rem; }
.fhm-choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.fhm-choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: rgba(var(--primary-rgb), 0.12);
    color: #064e3b;
}
[data-theme-mode="dark"] .fhm-choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-theme-mode="dark"] .fhm-choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #334155;
    color: #f8fafc;
}
.fhm-choices .choices__item--disabled { color: #6b7280; opacity: 1; }
[data-theme-mode="dark"] .fhm-choices .choices__item--disabled { color: #94a3b8; }
.fhm-choices .choices__input {
    background-color: transparent;
    color: var(--default-text-color);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--default-border);
}
.fhm-choices .choices__list--dropdown .choices__input { background-color: inherit; color: inherit; }
.fhm-choices .choices__list--multiple .choices__item {
    background-color: rgb(var(--primary-rgb));
    border-color: rgb(var(--primary-rgb));
    color: #ffffff;
}
.fhm-choices .choices__notice { color: #5d6576; }
[data-theme-mode="dark"] .fhm-choices .choices__notice { color: #a3aec2; }
/* input groups: the wrapper takes the select's place */
.input-group > .fhm-choices { flex: 1 1 auto; width: 1%; min-width: 0; }

/* The page's real <select> behind a searchable dropdown: still in the form, still posts and
   still takes `required` validation focus - just not visible. */
select.fhm-choices-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px 0 0 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
}

/* Tinted ("-transparent") badges and chips: the text sits on a pale tint of its own colour,
   so it needs the deeper shade in light mode and the mode's light text colour in dark mode. */
.bg-primary-transparent { color: #065f46 !important; }
.bg-secondary-transparent { color: #9a3412 !important; }
.bg-success-transparent { color: #166534 !important; }
.bg-info-transparent { color: #155e75 !important; }
.bg-danger-transparent { color: #991b1b !important; }
.bg-warning-transparent { color: #854d0e !important; }
[data-theme-mode="dark"] .bg-primary-transparent { color: var(--fhm-text-primary) !important; }
[data-theme-mode="dark"] .bg-secondary-transparent { color: var(--fhm-text-secondary) !important; }
[data-theme-mode="dark"] .bg-success-transparent { color: var(--fhm-text-success) !important; }
[data-theme-mode="dark"] .bg-info-transparent { color: var(--fhm-text-info) !important; }
[data-theme-mode="dark"] .bg-danger-transparent { color: var(--fhm-text-danger) !important; }
[data-theme-mode="dark"] .bg-warning-transparent { color: var(--fhm-text-warning) !important; }

/* The already-chosen item in an open searchable dropdown. */
/* The template sets these with !important, so the override has to as well. */
.fhm-choices .choices__list--dropdown .choices__item--selectable.is-selected { color: #065f46 !important; font-weight: 600; }
[data-theme-mode="dark"] .fhm-choices .choices__list--dropdown .choices__item--selectable.is-selected { color: var(--fhm-text-primary) !important; }
.fhm-choices .choices__list--dropdown .choices__item--selectable.is-selected.is-highlighted { color: #ffffff !important; }