/*
 * ── Brand overrides ───────────────────────────────────────────────
 *  1. CSS custom properties for every color group (the single
 *     source of truth — change ONE variable → all derived shades
 *     and every component class follow automatically).
 *  2. Override of every Vuexy / Bootstrap utility class so it
 *     reads from var(--{color}) instead of hardcoded hex.
 *  3. Typography (Cairo).
 *
 *  HOW TO CHANGE THE BRAND COLOR
 *  ──────────────────────────────
 *  Quick test   → update `--primary` (and `--primary-rgb`) below,
 *                 then reload the page.   That's it.
 *
 *  Permanent    → edit $primary in
 *                 UI/assets/scss/variables/_variables.scss
 *                 then run:  npm run theme && npm run build
 *
 *  All shades (hover, active, light-bg, outline, relief, focus
 *  rings, pagination, nav-pills …) recalculate automatically in
 *  both workflows.
 * ──────────────────────────────────────────────────────────────────
 */

/* =============================================================
   0.  TYPOGRAPHY
   ============================================================= */
body,
button, input, optgroup, select, textarea,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.brand-text, .menu-title, .menu-item,
.card-title, .content-header-title,
.dropdown-item, .nav-link, .btn,
.form-label, .form-control, .form-select {
    font-family: 'Cairo', 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
}

/* =============================================================
   1.  CSS CUSTOM PROPERTIES  –  single source of truth
   ============================================================= */
:root {
    --bs-body-font-family: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;

    /* ── Base colours ─────────────────────────────────────── */
    --primary: #6B7F6B;
    --primary-rgb: 107, 127, 107;

    --secondary: #6B6B6B;
    --secondary-rgb: 107, 107, 107;

    --success: #4A6B4A;
    --success-rgb: 74, 107, 74;

    --danger: #8B4444;
    --danger-rgb: 139, 68, 68;

    --warning: #9A9A9A;
    --warning-rgb: 154, 154, 154;

    --info: #5B6B7F;
    --info-rgb: 91, 107, 127;

    --dark: #1A1A1A;
    --dark-rgb: 26, 26, 26;
    --light: #F4F6F4;
    --light-rgb: 244, 246, 244;

    /* ── Derived helpers (recalculated when base changes) ──── */
    --primary-active:   color-mix(in srgb, var(--primary) 89%, black);
    --primary-hover-bg: color-mix(in srgb, var(--primary) 12%, white);
    --primary-focus-bg: color-mix(in srgb, var(--primary) 20%, white);

    --secondary-active:   color-mix(in srgb, var(--secondary) 89%, black);
    --secondary-hover-bg: color-mix(in srgb, var(--secondary) 12%, white);
    --secondary-focus-bg: color-mix(in srgb, var(--secondary) 20%, white);

    --success-active:   color-mix(in srgb, var(--success) 89%, black);
    --success-hover-bg: color-mix(in srgb, var(--success) 12%, white);
    --success-focus-bg: color-mix(in srgb, var(--success) 20%, white);

    --danger-active:   color-mix(in srgb, var(--danger) 89%, black);
    --danger-hover-bg: color-mix(in srgb, var(--danger) 12%, white);
    --danger-focus-bg: color-mix(in srgb, var(--danger) 20%, white);

    --warning-active:   color-mix(in srgb, var(--warning) 89%, black);
    --warning-hover-bg: color-mix(in srgb, var(--warning) 12%, white);
    --warning-focus-bg: color-mix(in srgb, var(--warning) 20%, white);

    --info-active:   color-mix(in srgb, var(--info) 89%, black);
    --info-hover-bg: color-mix(in srgb, var(--info) 12%, white);
    --info-focus-bg: color-mix(in srgb, var(--info) 20%, white);

    --dark-active:   color-mix(in srgb, var(--dark) 89%, black);
    --dark-hover-bg: color-mix(in srgb, var(--dark) 12%, white);
    --dark-focus-bg: color-mix(in srgb, var(--dark) 20%, white);

    /* ── Bootstrap semantic colour overrides ──────────────── */
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-primary-text-emphasis: color-mix(in srgb, var(--primary) 40%, black);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--primary) 12%, white);
    --bs-primary-border-subtle: color-mix(in srgb, var(--primary) 20%, white);
    --bs-secondary: var(--secondary);
    --bs-secondary-rgb: var(--secondary-rgb);
    --bs-success: var(--success);
    --bs-success-rgb: var(--success-rgb);
    --bs-danger: var(--danger);
    --bs-danger-rgb: var(--danger-rgb);
    --bs-warning: var(--warning);
    --bs-warning-rgb: var(--warning-rgb);
    --bs-info: var(--info);
    --bs-info-rgb: var(--info-rgb);
    --bs-dark: var(--dark);
    --bs-dark-rgb: var(--dark-rgb);
    --bs-light: var(--light);
    --bs-light-rgb: var(--light-rgb);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color: color-mix(in srgb, var(--primary) 85%, black);
    --bs-link-hover-color-rgb: var(--primary-rgb);

    /* ── Dropdown (avatar/user menu) ──────────────────────── */
    --bs-dropdown-link-hover-color: var(--primary);
    --bs-dropdown-link-hover-bg: rgba(var(--primary-rgb), 0.12);
    --bs-dropdown-link-active-bg: var(--primary);
}

/* =============================================================
   1(b).  CARD SURFACE
   ============================================================= */
/* The compiled theme defines `--bs-card-bg: var(--bs-body-bg)` *inside* the
   .card rule, so cards render the same grey (#f8f8f8) as the page body. The
   property is scoped to .card, so a :root override can't win — redefine it on
   .card itself (this stylesheet loads after bootstrap.css, so it takes over). */
.card {
    --bs-card-bg: #fff;
}

/* Dark layout: keep the Vuexy dark card surface distinct from the body. */
.dark-layout .card {
    --bs-card-bg: #283046;
}

/* Dark-layout overrides for derived helpers */
.dark-layout {
    --primary-hover-bg:   color-mix(in srgb, var(--primary) 20%, #283046);
    --primary-focus-bg:   color-mix(in srgb, var(--primary) 30%, #283046);
    --secondary-hover-bg: color-mix(in srgb, var(--secondary) 20%, #283046);
    --success-hover-bg:   color-mix(in srgb, var(--success) 20%, #283046);
    --danger-hover-bg:    color-mix(in srgb, var(--danger) 20%, #283046);
    --warning-hover-bg:   color-mix(in srgb, var(--warning) 20%, #283046);
    --info-hover-bg:      color-mix(in srgb, var(--info) 20%, #283046);
    --dark-hover-bg:      color-mix(in srgb, var(--dark) 20%, #283046);
}

/* =============================================================
   2(a).  BACKGROUNDS  –  solid & light
   ============================================================= */

/* Card header/footer inside coloured backgrounds */
[class*="bg-primary"] .card-header,
[class*="bg-primary"] .card-footer,
[class*="bg-secondary"] .card-header,
[class*="bg-secondary"] .card-footer,
[class*="bg-success"] .card-header,
[class*="bg-success"] .card-footer,
[class*="bg-danger"] .card-header,
[class*="bg-danger"] .card-footer,
[class*="bg-warning"] .card-header,
[class*="bg-warning"] .card-footer,
[class*="bg-info"] .card-header,
[class*="bg-info"] .card-footer,
[class*="bg-dark"] .card-header,
[class*="bg-dark"] .card-footer,
[class*="bg-light"] .card-header,
[class*="bg-light"] .card-footer {
    background-color: transparent;
}

/* Solid backgrounds */
.bg-primary,
.bg-primary.badge-glow { background-color: var(--primary) !important; }

.bg-secondary,
.bg-secondary.badge-glow { background-color: var(--secondary) !important; }

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

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

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

.bg-info,
.bg-info.badge-glow { background-color: var(--info) !important; }

.bg-dark,
.bg-dark.badge-glow { background-color: var(--dark) !important; }

.bg-light,
.bg-light.badge-glow { background-color: var(--light) !important; }

/* Light backgrounds */
.bg-light-primary,
.badge.badge-light-primary,
.avatar.bg-light-primary { background-color: var(--primary-hover-bg) !important; color: var(--primary) !important; }

.bg-light-secondary,
.badge.badge-light-secondary,
.avatar.bg-light-secondary { background-color: var(--secondary-hover-bg) !important; color: var(--secondary) !important; }

.bg-light-success,
.badge.badge-light-success,
.avatar.bg-light-success { background-color: var(--success-hover-bg) !important; color: var(--success) !important; }

.bg-light-danger,
.badge.badge-light-danger,
.avatar.bg-light-danger { background-color: var(--danger-hover-bg) !important; color: var(--danger) !important; }

.bg-light-warning,
.badge.badge-light-warning,
.avatar.bg-light-warning { background-color: var(--warning-hover-bg) !important; color: var(--warning) !important; }

.bg-light-info,
.badge.badge-light-info,
.avatar.bg-light-info { background-color: var(--info-hover-bg) !important; color: var(--info) !important; }

.badge.badge-light-dark { background-color: var(--dark-hover-bg) !important; color: var(--dark) !important; }

/* Active / inactive status badges (tables, datatables, inline labels) */
.badge.badge-status-active,
.badge.badge-status-inactive {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    padding-inline: 0.55rem;
}

.badge.badge-status-active::before,
.badge.badge-status-inactive::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge.badge-status-active {
    background-color: var(--success-hover-bg) !important;
    color: var(--success) !important;
    border-color: color-mix(in srgb, var(--success) 35%, transparent) !important;
}

.badge.badge-status-active::before {
    background-color: var(--success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent);
}

.badge.badge-status-inactive {
    background-color: var(--secondary-hover-bg) !important;
    color: color-mix(in srgb, var(--secondary) 90%, var(--dark)) !important;
    border-color: color-mix(in srgb, var(--secondary) 45%, transparent) !important;
}

.badge.badge-status-inactive::before {
    background-color: var(--secondary);
    opacity: 0.7;
}

/* =============================================================
   2(b).  TEXT COLOURS
   ============================================================= */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-dark { color: var(--dark) !important; }
.text-light { color: var(--light) !important; }

/* =============================================================
   2(c).  BORDERS
   ============================================================= */
.border-primary,
.border-top-primary, .border-bottom-primary,
.border-start-primary, .border-end-primary,
.border-primary.badge-glow { border-color: var(--primary) !important; }

.border-secondary,
.border-top-secondary, .border-bottom-secondary,
.border-start-secondary, .border-end-secondary,
.border-secondary.badge-glow { border-color: var(--secondary) !important; }

.border-success,
.border-top-success, .border-bottom-success,
.border-start-success, .border-end-success,
.border-success.badge-glow { border-color: var(--success) !important; }

.border-danger,
.border-top-danger, .border-bottom-danger,
.border-start-danger, .border-end-danger,
.border-danger.badge-glow { border-color: var(--danger) !important; }

.border-warning,
.border-top-warning, .border-bottom-warning,
.border-start-warning, .border-end-warning,
.border-warning.badge-glow { border-color: var(--warning) !important; }

.border-info,
.border-top-info, .border-bottom-info,
.border-start-info, .border-end-info,
.border-info.badge-glow { border-color: var(--info) !important; }

.border-dark,
.border-top-dark, .border-bottom-dark,
.border-start-dark, .border-end-dark,
.border-dark.badge-glow { border-color: var(--dark) !important; }

.border-light,
.border-top-light, .border-bottom-light,
.border-start-light, .border-end-light,
.border-light.badge-glow { border-color: var(--light) !important; }

/* =============================================================
   2(d).  OVERLAYS
   ============================================================= */
.overlay-primary { background: var(--primary); background: color-mix(in srgb, var(--primary) 60%, transparent); }
.overlay-secondary { background: var(--secondary); background: color-mix(in srgb, var(--secondary) 60%, transparent); }
.overlay-success { background: var(--success); background: color-mix(in srgb, var(--success) 60%, transparent); }
.overlay-danger { background: var(--danger); background: color-mix(in srgb, var(--danger) 60%, transparent); }
.overlay-warning { background: var(--warning); background: color-mix(in srgb, var(--warning) 60%, transparent); }
.overlay-info { background: var(--info); background: color-mix(in srgb, var(--info) 60%, transparent); }
.overlay-dark { background: var(--dark); background: color-mix(in srgb, var(--dark) 60%, transparent); }
.overlay-light { background: var(--light); background: color-mix(in srgb, var(--light) 60%, transparent); }

/* =============================================================
   2(e).  BUTTONS  –  solid, outline, flat, relief
   ============================================================= */

/* ── SOLID ─────────────────────────────────────────────────────── */
.btn-primary {
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
    color: #fff !important;
}
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    background-color: var(--primary-active) !important;
    color: #fff;
}
.btn-primary:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--primary);
}

.btn-secondary {
    border-color: var(--secondary) !important;
    background-color: var(--secondary) !important;
    color: #fff !important;
}
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary {
    background-color: var(--secondary-active) !important;
    color: #fff;
}
.btn-secondary:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--secondary);
}

.btn-success {
    border-color: var(--success) !important;
    background-color: var(--success) !important;
    color: #fff !important;
}
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-check:checked + .btn-success,
.btn-check:active + .btn-success {
    background-color: var(--success-active) !important;
    color: #fff;
}
.btn-success:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--success);
}

.btn-danger {
    border-color: var(--danger) !important;
    background-color: var(--danger) !important;
    color: #fff !important;
}
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-check:checked + .btn-danger,
.btn-check:active + .btn-danger {
    background-color: var(--danger-active) !important;
    color: #fff;
}
.btn-danger:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--danger);
}

.btn-warning {
    border-color: var(--warning) !important;
    background-color: var(--warning) !important;
    color: #fff !important;
}
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-check:checked + .btn-warning,
.btn-check:active + .btn-warning {
    background-color: var(--warning-active) !important;
    color: #fff;
}
.btn-warning:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--warning);
}

.btn-info {
    border-color: var(--info) !important;
    background-color: var(--info) !important;
    color: #fff !important;
}
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-check:checked + .btn-info,
.btn-check:active + .btn-info {
    background-color: var(--info-active) !important;
    color: #fff;
}
.btn-info:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--info);
}

.btn-dark {
    border-color: var(--dark) !important;
    background-color: var(--dark) !important;
    color: #fff !important;
}
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.btn-check:checked + .btn-dark,
.btn-check:active + .btn-dark {
    background-color: var(--dark-active) !important;
    color: #fff;
}
.btn-dark:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--dark);
}

/* ── OUTLINE ───────────────────────────────────────────────────── */
.btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary);
}
.btn-outline-primary:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--primary) 4%, white);
    color: var(--primary);
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):focus,
.btn-outline-primary.show.dropdown-toggle,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    background-color: var(--primary-focus-bg);
    color: var(--primary);
}

.btn-outline-secondary {
    border-color: var(--secondary) !important;
    color: var(--secondary);
}
.btn-outline-secondary:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--secondary) 4%, white);
    color: var(--secondary);
}
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):focus,
.btn-outline-secondary.show.dropdown-toggle,
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary {
    background-color: var(--secondary-focus-bg);
    color: var(--secondary);
}

.btn-outline-success {
    border-color: var(--success) !important;
    color: var(--success);
}
.btn-outline-success:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--success) 4%, white);
    color: var(--success);
}
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.btn-outline-success:not(:disabled):not(.disabled):focus,
.btn-outline-success.show.dropdown-toggle,
.btn-check:checked + .btn-outline-success,
.btn-check:active + .btn-outline-success {
    background-color: var(--success-focus-bg);
    color: var(--success);
}

.btn-outline-danger {
    border-color: var(--danger) !important;
    color: var(--danger);
}
.btn-outline-danger:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--danger) 4%, white);
    color: var(--danger);
}
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.btn-outline-danger:not(:disabled):not(.disabled):focus,
.btn-outline-danger.show.dropdown-toggle,
.btn-check:checked + .btn-outline-danger,
.btn-check:active + .btn-outline-danger {
    background-color: var(--danger-focus-bg);
    color: var(--danger);
}

.btn-outline-warning {
    border-color: var(--warning) !important;
    color: var(--warning);
}
.btn-outline-warning:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--warning) 4%, white);
    color: var(--warning);
}
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-warning:not(:disabled):not(.disabled):focus,
.btn-outline-warning.show.dropdown-toggle,
.btn-check:checked + .btn-outline-warning,
.btn-check:active + .btn-outline-warning {
    background-color: var(--warning-focus-bg);
    color: var(--warning);
}

.btn-outline-info {
    border-color: var(--info) !important;
    color: var(--info);
}
.btn-outline-info:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--info) 4%, white);
    color: var(--info);
}
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):focus,
.btn-outline-info.show.dropdown-toggle,
.btn-check:checked + .btn-outline-info,
.btn-check:active + .btn-outline-info {
    background-color: var(--info-focus-bg);
    color: var(--info);
}

.btn-outline-dark {
    border-color: var(--dark) !important;
    color: var(--dark);
}
.btn-outline-dark:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--dark) 4%, white);
    color: var(--dark);
}
.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.btn-outline-dark:not(:disabled):not(.disabled):focus,
.btn-outline-dark.show.dropdown-toggle,
.btn-check:checked + .btn-outline-dark,
.btn-check:active + .btn-outline-dark {
    background-color: var(--dark-focus-bg);
    color: var(--dark);
}

/* ── FLAT ──────────────────────────────────────────────────────── */
.btn-flat-primary { color: var(--primary); }
.btn-flat-primary:hover { color: var(--primary); }
.btn-flat-primary:hover:not(.disabled):not(:disabled) { background-color: var(--primary-hover-bg); }
.btn-flat-primary:active,
.btn-flat-primary.active,
.btn-flat-primary:focus { background-color: var(--primary-focus-bg); color: var(--primary); }

.btn-flat-secondary { color: var(--secondary); }
.btn-flat-secondary:hover { color: var(--secondary); }
.btn-flat-secondary:hover:not(.disabled):not(:disabled) { background-color: var(--secondary-hover-bg); }
.btn-flat-secondary:active,
.btn-flat-secondary.active,
.btn-flat-secondary:focus { background-color: var(--secondary-focus-bg); color: var(--secondary); }

.btn-flat-success { color: var(--success); }
.btn-flat-success:hover { color: var(--success); }
.btn-flat-success:hover:not(.disabled):not(:disabled) { background-color: var(--success-hover-bg); }
.btn-flat-success:active,
.btn-flat-success.active,
.btn-flat-success:focus { background-color: var(--success-focus-bg); color: var(--success); }

.btn-flat-danger { color: var(--danger); }
.btn-flat-danger:hover { color: var(--danger); }
.btn-flat-danger:hover:not(.disabled):not(:disabled) { background-color: var(--danger-hover-bg); }
.btn-flat-danger:active,
.btn-flat-danger.active,
.btn-flat-danger:focus { background-color: var(--danger-focus-bg); color: var(--danger); }

.btn-flat-warning { color: var(--warning); }
.btn-flat-warning:hover { color: var(--warning); }
.btn-flat-warning:hover:not(.disabled):not(:disabled) { background-color: var(--warning-hover-bg); }
.btn-flat-warning:active,
.btn-flat-warning.active,
.btn-flat-warning:focus { background-color: var(--warning-focus-bg); color: var(--warning); }

.btn-flat-info { color: var(--info); }
.btn-flat-info:hover { color: var(--info); }
.btn-flat-info:hover:not(.disabled):not(:disabled) { background-color: var(--info-hover-bg); }
.btn-flat-info:active,
.btn-flat-info.active,
.btn-flat-info:focus { background-color: var(--info-focus-bg); color: var(--info); }

.btn-flat-dark { color: var(--dark); }
.btn-flat-dark:hover { color: var(--dark); }
.btn-flat-dark:hover:not(.disabled):not(:disabled) { background-color: var(--dark-hover-bg); }
.btn-flat-dark:active,
.btn-flat-dark.active,
.btn-flat-dark:focus { background-color: var(--dark-focus-bg); color: var(--dark); }

/* ── RELIEF ────────────────────────────────────────────────────── */
.btn-relief-primary {
    background-color: var(--primary);
    box-shadow: inset 0 -3px 0 0 rgba(34, 41, 47, 0.2);
    color: #fff;
}
.btn-relief-primary:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--primary) 110%, white);
}
.btn-relief-primary:active,
.btn-relief-primary.active,
.btn-relief-primary:focus { background-color: var(--primary-active); }
.btn-relief-primary:hover { color: #fff; }

.btn-relief-secondary {
    background-color: var(--secondary);
    box-shadow: inset 0 -3px 0 0 rgba(34, 41, 47, 0.2);
    color: #fff;
}
.btn-relief-secondary:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--secondary) 110%, white);
}
.btn-relief-secondary:active,
.btn-relief-secondary.active,
.btn-relief-secondary:focus { background-color: var(--secondary-active); }
.btn-relief-secondary:hover { color: #fff; }

.btn-relief-success {
    background-color: var(--success);
    box-shadow: inset 0 -3px 0 0 rgba(34, 41, 47, 0.2);
    color: #fff;
}
.btn-relief-success:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--success) 110%, white);
}
.btn-relief-success:active,
.btn-relief-success.active,
.btn-relief-success:focus { background-color: var(--success-active); }
.btn-relief-success:hover { color: #fff; }

.btn-relief-danger {
    background-color: var(--danger);
    box-shadow: inset 0 -3px 0 0 rgba(34, 41, 47, 0.2);
    color: #fff;
}
.btn-relief-danger:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--danger) 110%, white);
}
.btn-relief-danger:active,
.btn-relief-danger.active,
.btn-relief-danger:focus { background-color: var(--danger-active); }
.btn-relief-danger:hover { color: #fff; }

.btn-relief-warning {
    background-color: var(--warning);
    box-shadow: inset 0 -3px 0 0 rgba(34, 41, 47, 0.2);
    color: #fff;
}
.btn-relief-warning:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--warning) 110%, white);
}
.btn-relief-warning:active,
.btn-relief-warning.active,
.btn-relief-warning:focus { background-color: var(--warning-active); }
.btn-relief-warning:hover { color: #fff; }

.btn-relief-info {
    background-color: var(--info);
    box-shadow: inset 0 -3px 0 0 rgba(34, 41, 47, 0.2);
    color: #fff;
}
.btn-relief-info:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--info) 110%, white);
}
.btn-relief-info:active,
.btn-relief-info.active,
.btn-relief-info:focus { background-color: var(--info-active); }
.btn-relief-info:hover { color: #fff; }

.btn-relief-dark {
    background-color: var(--dark);
    box-shadow: inset 0 -3px 0 0 rgba(34, 41, 47, 0.2);
    color: #fff;
}
.btn-relief-dark:hover:not(.disabled):not(:disabled) {
    background-color: color-mix(in srgb, var(--dark) 110%, white);
}
.btn-relief-dark:active,
.btn-relief-dark.active,
.btn-relief-dark:focus { background-color: var(--dark-active); }
.btn-relief-dark:hover { color: #fff; }

/* ── FLAT / OUTLINE dropdown chevrons ──────────────────────────── */
.btn-flat-primary.dropdown-toggle::after,
.btn-outline-primary.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c02526' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.btn-flat-secondary.dropdown-toggle::after,
.btn-outline-secondary.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.btn-flat-success.dropdown-toggle::after,
.btn-outline-success.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328c76f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.btn-flat-danger.dropdown-toggle::after,
.btn-outline-danger.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea5455' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.btn-flat-warning.dropdown-toggle::after,
.btn-outline-warning.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9f43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.btn-flat-info.dropdown-toggle::after,
.btn-outline-info.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300cfe8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.btn-flat-dark.dropdown-toggle::after,
.btn-outline-dark.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b4b4b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* waves-ripple for outline / flat */
.btn-outline-primary.waves-effect .waves-ripple,
.btn-flat-primary.waves-effect .waves-ripple {
    background: radial-gradient(color-mix(in srgb, var(--primary) 20%, transparent) 0, color-mix(in srgb, var(--primary) 30%, transparent) 40%, color-mix(in srgb, var(--primary) 40%, transparent) 50%, color-mix(in srgb, var(--primary) 50%, transparent) 60%, rgba(255, 255, 255, 0) 70%);
}
.btn-outline-secondary.waves-effect .waves-ripple,
.btn-flat-secondary.waves-effect .waves-ripple {
    background: radial-gradient(color-mix(in srgb, var(--secondary) 20%, transparent) 0, color-mix(in srgb, var(--secondary) 30%, transparent) 40%, color-mix(in srgb, var(--secondary) 40%, transparent) 50%, color-mix(in srgb, var(--secondary) 50%, transparent) 60%, rgba(255, 255, 255, 0) 70%);
}
.btn-outline-success.waves-effect .waves-ripple,
.btn-flat-success.waves-effect .waves-ripple {
    background: radial-gradient(color-mix(in srgb, var(--success) 20%, transparent) 0, color-mix(in srgb, var(--success) 30%, transparent) 40%, color-mix(in srgb, var(--success) 40%, transparent) 50%, color-mix(in srgb, var(--success) 50%, transparent) 60%, rgba(255, 255, 255, 0) 70%);
}
.btn-outline-danger.waves-effect .waves-ripple,
.btn-flat-danger.waves-effect .waves-ripple {
    background: radial-gradient(color-mix(in srgb, var(--danger) 20%, transparent) 0, color-mix(in srgb, var(--danger) 30%, transparent) 40%, color-mix(in srgb, var(--danger) 40%, transparent) 50%, color-mix(in srgb, var(--danger) 50%, transparent) 60%, rgba(255, 255, 255, 0) 70%);
}
.btn-outline-warning.waves-effect .waves-ripple,
.btn-flat-warning.waves-effect .waves-ripple {
    background: radial-gradient(color-mix(in srgb, var(--warning) 20%, transparent) 0, color-mix(in srgb, var(--warning) 30%, transparent) 40%, color-mix(in srgb, var(--warning) 40%, transparent) 50%, color-mix(in srgb, var(--warning) 50%, transparent) 60%, rgba(255, 255, 255, 0) 70%);
}
.btn-outline-info.waves-effect .waves-ripple,
.btn-flat-info.waves-effect .waves-ripple {
    background: radial-gradient(color-mix(in srgb, var(--info) 20%, transparent) 0, color-mix(in srgb, var(--info) 30%, transparent) 40%, color-mix(in srgb, var(--info) 40%, transparent) 50%, color-mix(in srgb, var(--info) 50%, transparent) 60%, rgba(255, 255, 255, 0) 70%);
}
.btn-outline-dark.waves-effect .waves-ripple,
.btn-flat-dark.waves-effect .waves-ripple {
    background: radial-gradient(color-mix(in srgb, var(--dark) 20%, transparent) 0, color-mix(in srgb, var(--dark) 30%, transparent) 40%, color-mix(in srgb, var(--dark) 40%, transparent) 50%, color-mix(in srgb, var(--dark) 50%, transparent) 60%, rgba(255, 255, 255, 0) 70%);
}

/* =============================================================
   2(f).  BULLET
   ============================================================= */
.bullet.bullet-primary { background-color: var(--primary); }
.bullet.bullet-secondary { background-color: var(--secondary); }
.bullet.bullet-success { background-color: var(--success); }
.bullet.bullet-danger { background-color: var(--danger); }
.bullet.bullet-warning { background-color: var(--warning); }
.bullet.bullet-info { background-color: var(--info); }
.bullet.bullet-dark { background-color: var(--dark); }

/* =============================================================
   2(g).  MODAL
   ============================================================= */
.modal.modal-primary .modal-header .modal-title { color: var(--primary); }
.modal.modal-secondary .modal-header .modal-title { color: var(--secondary); }
.modal.modal-success .modal-header .modal-title { color: var(--success); }
.modal.modal-danger .modal-header .modal-title { color: var(--danger); }
.modal.modal-warning .modal-header .modal-title { color: var(--warning); }
.modal.modal-info .modal-header .modal-title { color: var(--info); }
.modal.modal-dark .modal-header .modal-title { color: var(--dark); }

/* =============================================================
   2(h).  PAGINATION
   ============================================================= */
.pagination-primary .page-item.active .page-link { background: var(--primary) !important; color: #fff; }
.pagination-primary .page-item .page-link:hover { color: var(--primary); }
.pagination-primary .page-item.prev-item .page-link:hover,
.pagination-primary .page-item.next-item .page-link:hover { background: var(--primary); color: #fff; }

.pagination-secondary .page-item.active .page-link { background: var(--secondary) !important; color: #fff; }
.pagination-secondary .page-item .page-link:hover { color: var(--secondary); }
.pagination-secondary .page-item.prev-item .page-link:hover,
.pagination-secondary .page-item.next-item .page-link:hover { background: var(--secondary); color: #fff; }

.pagination-success .page-item.active .page-link { background: var(--success) !important; color: #fff; }
.pagination-success .page-item .page-link:hover { color: var(--success); }
.pagination-success .page-item.prev-item .page-link:hover,
.pagination-success .page-item.next-item .page-link:hover { background: var(--success); color: #fff; }

.pagination-danger .page-item.active .page-link { background: var(--danger) !important; color: #fff; }
.pagination-danger .page-item .page-link:hover { color: var(--danger); }
.pagination-danger .page-item.prev-item .page-link:hover,
.pagination-danger .page-item.next-item .page-link:hover { background: var(--danger); color: #fff; }

.pagination-warning .page-item.active .page-link { background: var(--warning) !important; color: #fff; }
.pagination-warning .page-item .page-link:hover { color: var(--warning); }
.pagination-warning .page-item.prev-item .page-link:hover,
.pagination-warning .page-item.next-item .page-link:hover { background: var(--warning); color: #fff; }

.pagination-info .page-item.active .page-link { background: var(--info) !important; color: #fff; }
.pagination-info .page-item .page-link:hover { color: var(--info); }
.pagination-info .page-item.prev-item .page-link:hover,
.pagination-info .page-item.next-item .page-link:hover { background: var(--info); color: #fff; }

.pagination-dark .page-item.active .page-link { background: var(--dark) !important; color: #fff; }
.pagination-dark .page-item .page-link:hover { color: var(--dark); }
.pagination-dark .page-item.prev-item .page-link:hover,
.pagination-dark .page-item.next-item .page-link:hover { background: var(--dark); color: #fff; }

/* =============================================================
   2(i).  NAV PILL
   ============================================================= */
.nav-pill-primary .nav-item .nav-link.active {
    color: #fff;
    background-color: var(--primary) !important;
    border-color: var(--primary);
    box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--primary) 65%, transparent);
}
.nav-pill-secondary .nav-item .nav-link.active {
    color: #fff; background-color: var(--secondary) !important;
    border-color: var(--secondary);
    box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--secondary) 65%, transparent);
}
.nav-pill-success .nav-item .nav-link.active {
    color: #fff; background-color: var(--success) !important;
    border-color: var(--success);
    box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--success) 65%, transparent);
}
.nav-pill-danger .nav-item .nav-link.active {
    color: #fff; background-color: var(--danger) !important;
    border-color: var(--danger);
    box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--danger) 65%, transparent);
}
.nav-pill-warning .nav-item .nav-link.active {
    color: #fff; background-color: var(--warning) !important;
    border-color: var(--warning);
    box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--warning) 65%, transparent);
}
.nav-pill-info .nav-item .nav-link.active {
    color: #fff; background-color: var(--info) !important;
    border-color: var(--info);
    box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--info) 65%, transparent);
}
.nav-pill-dark .nav-item .nav-link.active {
    color: #fff; background-color: var(--dark) !important;
    border-color: var(--dark);
    box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--dark) 65%, transparent);
}

/* =============================================================
   2(j).  PROGRESS BAR
   ============================================================= */
.progress-bar-primary { background-color: var(--primary-hover-bg); }
.progress-bar-primary .progress-bar { background-color: var(--primary); }

.progress-bar-secondary { background-color: var(--secondary-hover-bg); }
.progress-bar-secondary .progress-bar { background-color: var(--secondary); }

.progress-bar-success { background-color: var(--success-hover-bg); }
.progress-bar-success .progress-bar { background-color: var(--success); }

.progress-bar-danger { background-color: var(--danger-hover-bg); }
.progress-bar-danger .progress-bar { background-color: var(--danger); }

.progress-bar-warning { background-color: var(--warning-hover-bg); }
.progress-bar-warning .progress-bar { background-color: var(--warning); }

.progress-bar-info { background-color: var(--info-hover-bg); }
.progress-bar-info .progress-bar { background-color: var(--info); }

.progress-bar-dark { background-color: var(--dark-hover-bg); }
.progress-bar-dark .progress-bar { background-color: var(--dark); }

/* =============================================================
   2(k).  TIMELINE
   ============================================================= */
.timeline.timeline-compact .timeline-item:not(:last-child) {
    padding-bottom: 1.25rem;
}

.timeline.timeline-compact .timeline-item .timeline-event {
    min-height: auto;
}

.timeline .timeline-point-primary { border-color: var(--primary) !important; }
.timeline .timeline-point-primary i,
.timeline .timeline-point-primary svg { stroke: var(--primary) !important; }
.timeline .timeline-point-primary.timeline-point-indicator { background-color: var(--primary) !important; }
.timeline .timeline-point-primary.timeline-point-indicator:before { background: var(--primary-hover-bg) !important; }

.timeline .timeline-point-secondary { border-color: var(--secondary) !important; }
.timeline .timeline-point-secondary i,
.timeline .timeline-point-secondary svg { stroke: var(--secondary) !important; }
.timeline .timeline-point-secondary.timeline-point-indicator { background-color: var(--secondary) !important; }
.timeline .timeline-point-secondary.timeline-point-indicator:before { background: var(--secondary-hover-bg) !important; }

.timeline .timeline-point-success { border-color: var(--success) !important; }
.timeline .timeline-point-success i,
.timeline .timeline-point-success svg { stroke: var(--success) !important; }
.timeline .timeline-point-success.timeline-point-indicator { background-color: var(--success) !important; }
.timeline .timeline-point-success.timeline-point-indicator:before { background: var(--success-hover-bg) !important; }

.timeline .timeline-point-danger { border-color: var(--danger) !important; }
.timeline .timeline-point-danger i,
.timeline .timeline-point-danger svg { stroke: var(--danger) !important; }
.timeline .timeline-point-danger.timeline-point-indicator { background-color: var(--danger) !important; }
.timeline .timeline-point-danger.timeline-point-indicator:before { background: var(--danger-hover-bg) !important; }

.timeline .timeline-point-warning { border-color: var(--warning) !important; }
.timeline .timeline-point-warning i,
.timeline .timeline-point-warning svg { stroke: var(--warning) !important; }
.timeline .timeline-point-warning.timeline-point-indicator { background-color: var(--warning) !important; }
.timeline .timeline-point-warning.timeline-point-indicator:before { background: var(--warning-hover-bg) !important; }

.timeline .timeline-point-info { border-color: var(--info) !important; }
.timeline .timeline-point-info i,
.timeline .timeline-point-info svg { stroke: var(--info) !important; }
.timeline .timeline-point-info.timeline-point-indicator { background-color: var(--info) !important; }
.timeline .timeline-point-info.timeline-point-indicator:before { background: var(--info-hover-bg) !important; }

.timeline .timeline-point-dark { border-color: var(--dark) !important; }
.timeline .timeline-point-dark i,
.timeline .timeline-point-dark svg { stroke: var(--dark) !important; }
.timeline .timeline-point-dark.timeline-point-indicator { background-color: var(--dark) !important; }
.timeline .timeline-point-dark.timeline-point-indicator:before { background: var(--dark-hover-bg) !important; }

/* =============================================================
   2(l).  DIVIDER
   ============================================================= */
.divider.divider-primary .divider-text:before,
.divider.divider-primary .divider-text:after { border-color: var(--primary) !important; }
.divider.divider-secondary .divider-text:before,
.divider.divider-secondary .divider-text:after { border-color: var(--secondary) !important; }
.divider.divider-success .divider-text:before,
.divider.divider-success .divider-text:after { border-color: var(--success) !important; }
.divider.divider-danger .divider-text:before,
.divider.divider-danger .divider-text:after { border-color: var(--danger) !important; }
.divider.divider-warning .divider-text:before,
.divider.divider-warning .divider-text:after { border-color: var(--warning) !important; }
.divider.divider-info .divider-text:before,
.divider.divider-info .divider-text:after { border-color: var(--info) !important; }
.divider.divider-dark .divider-text:before,
.divider.divider-dark .divider-text:after { border-color: var(--dark) !important; }

/* =============================================================
   2(m).  FORM CHECK
   ============================================================= */
.form-check-primary .form-check-input:checked {
    border-color: var(--primary);
    background-color: var(--primary);
}
.form-check-primary .form-check-input:not(:disabled):checked,
.form-check-primary .form-check-input:not(:disabled):focus {
    border-color: var(--primary);
    box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--primary) 40%, transparent);
}

.form-check-secondary .form-check-input:checked {
    border-color: var(--secondary);
    background-color: var(--secondary);
}
.form-check-secondary .form-check-input:not(:disabled):checked,
.form-check-secondary .form-check-input:not(:disabled):focus {
    border-color: var(--secondary);
    box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--secondary) 40%, transparent);
}

.form-check-success .form-check-input:checked {
    border-color: var(--success);
    background-color: var(--success);
}
.form-check-success .form-check-input:not(:disabled):checked,
.form-check-success .form-check-input:not(:disabled):focus {
    border-color: var(--success);
    box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--success) 40%, transparent);
}

.form-check-danger .form-check-input:checked {
    border-color: var(--danger);
    background-color: var(--danger);
}
.form-check-danger .form-check-input:not(:disabled):checked,
.form-check-danger .form-check-input:not(:disabled):focus {
    border-color: var(--danger);
    box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--danger) 40%, transparent);
}

.form-check-warning .form-check-input:checked {
    border-color: var(--warning);
    background-color: var(--warning);
}
.form-check-warning .form-check-input:not(:disabled):checked,
.form-check-warning .form-check-input:not(:disabled):focus {
    border-color: var(--warning);
    box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--warning) 40%, transparent);
}

.form-check-info .form-check-input:checked {
    border-color: var(--info);
    background-color: var(--info);
}
.form-check-info .form-check-input:not(:disabled):checked,
.form-check-info .form-check-input:not(:disabled):focus {
    border-color: var(--info);
    box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--info) 40%, transparent);
}

.form-check-dark .form-check-input:checked {
    border-color: var(--dark);
    background-color: var(--dark);
}
.form-check-dark .form-check-input:not(:disabled):checked,
.form-check-dark .form-check-input:not(:disabled):focus {
    border-color: var(--dark);
    box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--dark) 40%, transparent);
}

/* =============================================================
   2(n).  SELECT2
   ============================================================= */
.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--primary) !important; border-color: var(--primary) !important;
}
.select2-secondary .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--secondary) !important; border-color: var(--secondary) !important;
}
.select2-success .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--success) !important; border-color: var(--success) !important;
}
.select2-danger .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--danger) !important; border-color: var(--danger) !important;
}
.select2-warning .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--warning) !important; border-color: var(--warning) !important;
}
.select2-info .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--info) !important; border-color: var(--info) !important;
}
.select2-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--dark) !important; border-color: var(--dark) !important;
}

/* =============================================================
   2(o).  FOCUS GLOW  (input:focus ~ .bg-*)
   ============================================================= */
input:focus ~ .bg-primary {
    box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.21rem var(--primary) !important;
}
input:focus ~ .bg-secondary {
    box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.21rem var(--secondary) !important;
}
input:focus ~ .bg-success {
    box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.21rem var(--success) !important;
}
input:focus ~ .bg-danger {
    box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.21rem var(--danger) !important;
}
input:focus ~ .bg-warning {
    box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.21rem var(--warning) !important;
}
input:focus ~ .bg-info {
    box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.21rem var(--info) !important;
}
input:focus ~ .bg-dark {
    box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.21rem var(--dark) !important;
}
input:focus ~ .bg-light {
    box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.21rem var(--light) !important;
}

/* =============================================================
   2(p).  ALERT
   ============================================================= */
.alert-primary {
    background: var(--primary-hover-bg) !important;
    color: var(--primary) !important;
}
.alert-primary .alert-heading {
    box-shadow: color-mix(in srgb, var(--primary) 40%, transparent) 0px 6px 15px -7px;
}
.alert-primary .alert-link { color: var(--primary-active) !important; }

.alert-secondary {
    background: var(--secondary-hover-bg) !important;
    color: var(--secondary) !important;
}
.alert-secondary .alert-heading {
    box-shadow: color-mix(in srgb, var(--secondary) 40%, transparent) 0px 6px 15px -7px;
}
.alert-secondary .alert-link { color: var(--secondary-active) !important; }

.alert-success {
    background: var(--success-hover-bg) !important;
    color: var(--success) !important;
}
.alert-success .alert-heading {
    box-shadow: color-mix(in srgb, var(--success) 40%, transparent) 0px 6px 15px -7px;
}
.alert-success .alert-link { color: var(--success-active) !important; }

.alert-danger {
    background: var(--danger-hover-bg) !important;
    color: var(--danger) !important;
}
.alert-danger .alert-heading {
    box-shadow: color-mix(in srgb, var(--danger) 40%, transparent) 0px 6px 15px -7px;
}
.alert-danger .alert-link { color: var(--danger-active) !important; }

.alert-warning {
    background: var(--warning-hover-bg) !important;
    color: var(--warning) !important;
}
.alert-warning .alert-heading {
    box-shadow: color-mix(in srgb, var(--warning) 40%, transparent) 0px 6px 15px -7px;
}
.alert-warning .alert-link { color: var(--warning-active) !important; }

.alert-info {
    background: var(--info-hover-bg) !important;
    color: var(--info) !important;
}
.alert-info .alert-heading {
    box-shadow: color-mix(in srgb, var(--info) 40%, transparent) 0px 6px 15px -7px;
}
.alert-info .alert-link { color: var(--info-active) !important; }

.alert-dark {
    background: var(--dark-hover-bg) !important;
    color: var(--dark) !important;
}
.alert-dark .alert-heading {
    box-shadow: color-mix(in srgb, var(--dark) 40%, transparent) 0px 6px 15px -7px;
}
.alert-dark .alert-link { color: var(--dark-active) !important; }

/* ── Dashboard notices (help callouts, inline warnings — no borders) ── */
.dashboard-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 0;
    border-radius: 0.428rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.dashboard-notice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.428rem;
}

.dashboard-notice__icon .ficon,
.dashboard-notice__icon svg {
    width: 16px;
    height: 16px;
}

.dashboard-notice__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.35;
}

.dashboard-notice__body {
    font-size: 0.875rem;
    color: var(--body-color, #6e6b7b);
    line-height: 1.45;
}

.dashboard-notice--primary {
    background: var(--primary-hover-bg);
}

.dashboard-notice--primary .dashboard-notice__icon {
    background: var(--primary-focus-bg);
    color: var(--primary);
}

.dashboard-notice--primary .dashboard-notice__title {
    color: var(--primary);
}

.dashboard-notice--secondary {
    background: var(--secondary-hover-bg);
}

.dashboard-notice--secondary .dashboard-notice__icon {
    background: var(--secondary-focus-bg);
    color: var(--secondary);
}

.dashboard-notice--secondary .dashboard-notice__title {
    color: var(--secondary);
}

.dashboard-notice--success {
    background: var(--success-hover-bg);
}

.dashboard-notice--success .dashboard-notice__icon {
    background: var(--success-focus-bg);
    color: var(--success);
}

.dashboard-notice--success .dashboard-notice__title {
    color: var(--success);
}

.dashboard-notice--danger {
    background: var(--danger-hover-bg);
}

.dashboard-notice--danger .dashboard-notice__icon {
    background: var(--danger-focus-bg);
    color: var(--danger);
}

.dashboard-notice--danger .dashboard-notice__title {
    color: var(--danger);
}

.dashboard-notice--warning {
    background: var(--warning-hover-bg);
}

.dashboard-notice--warning .dashboard-notice__icon {
    background: var(--warning-focus-bg);
    color: var(--warning);
}

.dashboard-notice--warning .dashboard-notice__title {
    color: var(--warning);
}

.dashboard-notice--info {
    background: var(--info-hover-bg);
}

.dashboard-notice--info .dashboard-notice__icon {
    background: var(--info-focus-bg);
    color: var(--info);
}

.dashboard-notice--info .dashboard-notice__title {
    color: var(--info);
}

.dark-layout .dashboard-notice__body {
    color: color-mix(in srgb, #b4b7bd 92%, white);
}

[data-settings-page] .dashboard-notice:last-child {
    margin-bottom: 0;
}

/* =============================================================
   2(q).  BADGE GLOW  (shared with background section)
   ============================================================= */
.bg-primary.badge-glow { box-shadow: 0px 0px 10px var(--primary); }
.bg-secondary.badge-glow { box-shadow: 0px 0px 10px var(--secondary); }
.bg-success.badge-glow { box-shadow: 0px 0px 10px var(--success); }
.bg-danger.badge-glow { box-shadow: 0px 0px 10px var(--danger); }
.bg-warning.badge-glow { box-shadow: 0px 0px 10px var(--warning); }
.bg-info.badge-glow { box-shadow: 0px 0px 10px var(--info); }
.bg-dark.badge-glow { box-shadow: 0px 0px 10px var(--dark); }
.border-primary.badge-glow { box-shadow: 0px 0px 10px var(--primary); }
.border-secondary.badge-glow { box-shadow: 0px 0px 10px var(--secondary); }
.border-success.badge-glow { box-shadow: 0px 0px 10px var(--success); }
.border-danger.badge-glow { box-shadow: 0px 0px 10px var(--danger); }
.border-warning.badge-glow { box-shadow: 0px 0px 10px var(--warning); }
.border-info.badge-glow { box-shadow: 0px 0px 10px var(--info); }
.border-dark.badge-glow { box-shadow: 0px 0px 10px var(--dark); }

/* =============================================================
   2(r).  SIDEBAR NAVIGATION — active link respects brand colour
   ============================================================= */

/* ── Light menu ──────────────────────────────────────────── */
.main-menu.menu-light .navigation > li.nav-item.active > a,
.main-menu.menu-light .navigation > li.active > a {
    background: linear-gradient(118deg, var(--primary), rgba(var(--primary-rgb), 0.7)) !important;
    box-shadow: 0 0 10px 1px rgba(var(--primary-rgb), 0.7) !important;
    color: #fff !important;
}
.main-menu.menu-light .navigation > li.nav-item.has-sub.sidebar-group-active > a {
    color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.12) !important;
    border-radius: 6px;
}
.main-menu.menu-light .navigation > li .active > a {
    color: var(--primary) !important;
}
.main-menu.menu-light .navigation > li ul .active {
    background: linear-gradient(118deg, var(--primary), rgba(var(--primary-rgb), 0.7)) !important;
    box-shadow: 0 0 10px 1px rgba(var(--primary-rgb), 0.7) !important;
    border-radius: 4px;
}
.main-menu.menu-light .navigation > li ul .active > a {
    color: #fff !important;
}

/* ── Dark menu ───────────────────────────────────────────── */
.main-menu.menu-dark .navigation > li.nav-item.active > a,
.main-menu.menu-dark .navigation > li.active > a {
    background: linear-gradient(118deg, var(--primary), rgba(var(--primary-rgb), 0.7)) !important;
    box-shadow: 0 0 10px 1px rgba(var(--primary-rgb), 0.7) !important;
    color: #fff !important;
}
.main-menu.menu-dark .navigation > li.nav-item.has-sub.sidebar-group-active > a {
    color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.16) !important;
    border-radius: 6px;
}
.main-menu.menu-dark .navigation > li .active > a {
    color: var(--primary) !important;
}
.main-menu.menu-dark .navigation > li ul .active {
    background: linear-gradient(118deg, var(--primary), rgba(var(--primary-rgb), 0.7)) !important;
    box-shadow: 0 0 10px 1px rgba(var(--primary-rgb), 0.7) !important;
    border-radius: 4px;
}
.main-menu.menu-dark .navigation > li ul .active > a {
    color: #fff !important;
}

/* =============================================================
   2(s).  FORM CHECK — default checked / focus respects brand
   ============================================================= */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.form-check-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 2px 4px 0 rgba(var(--primary-rgb), 0.4) !important;
}

/* =============================================================
   2(t).  FORM FLOATING — focus label colour
   ============================================================= */
.form-floating > .form-control:focus ~ label {
    color: var(--primary) !important;
}

/* =============================================================
   2(u).  FORM CHECK — checked (not disabled) respects brand
   ============================================================= */
.form-check-input:not(:disabled):checked {
    box-shadow: 0 2px 4px 0 rgba(var(--primary-rgb), 0.4) !important;
}

/* =============================================================
   2(v).  SELECT2 — borders, choices, results respect brand colour
   ============================================================= */

/* ── Focus / open borders ─────────────────────────────────── */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--primary) !important;
}

/* ── Selected choice pills ────────────────────────────────── */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff;
}

/* ── Dropdown — selected option ───────────────────────────── */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* ── Dropdown — highlighted/active option ─────────────────── */
.select2-container--default .select2-results__option--highlighted {
    background-color: rgba(var(--primary-rgb), 0.12) !important;
    color: var(--primary) !important;
}

/* ── Dark-layout choice pills ─────────────────────────────── */
.dark-layout .select2-container .select2-selection--multiple .select2-selection__choice {
    background: rgba(var(--primary-rgb), 0.12) !important;
    color: var(--primary) !important;
}
.dark-layout .select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    color: var(--primary) !important;
}

/* =============================================================
   2(w).  REMAINING VUEXY COMPONENTS — branded with CSS variables
   ============================================================= */

/* ── Sidebar brand text ─────────────────────────────────── */
.main-menu .navbar-header .navbar-brand .brand-text {
    color: var(--primary) !important;
    font-weight: 700;
}

/* ── Pace page-loading bar (disabled — NProgress is the single top bar) ─ */
.pace {
    display: none !important;
}

/* ── Nprogress page-loading bar ──────────────────────────── */
#nprogress .bar {
    background: var(--primary) !important;
}
#nprogress .peg {
    box-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary) !important;
}
#nprogress .spinner-icon {
    border-top-color: var(--primary) !important;
    border-left-color: var(--primary) !important;
}

/* ── Navbar icon hover (bell, message, bookmark) ─────────── */
.header-navbar .navbar-container ul.navbar-nav li i.ficon:hover,
.header-navbar .navbar-container ul.navbar-nav li svg.ficon:hover {
    color: var(--primary) !important;
}

/* ── Navbar notification / cart count badge (above bell icon) */
.header-navbar .navbar-container ul.navbar-nav li.dropdown-cart .badge.badge-up,
.header-navbar .navbar-container ul.navbar-nav li.dropdown-notification .badge.badge-up {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* ── Notification / cart dropdown top arrow ──────────────── */
.header-navbar .navbar-container ul.navbar-nav li.dropdown-cart .dropdown-menu.dropdown-menu-end::before,
.header-navbar .navbar-container ul.navbar-nav li.dropdown-notification .dropdown-menu.dropdown-menu-end::before {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* ── Bookmark / command-palette input focus ──────────────── */
.navbar-container .bookmark-input input:focus {
    border-color: var(--primary) !important;
}

/* ── Nav tabs active (underline + text) ──────────────────── */
.nav-tabs .nav-link.active {
    color: var(--primary) !important;
}
.nav-tabs .nav-link:after {
    background: linear-gradient(30deg, var(--primary), rgba(var(--primary-rgb), 0.5)) !important;
}

/* ── Nav pills active ────────────────────────────────────── */
.nav-pills .nav-link.active {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 18px -4px rgba(var(--primary-rgb), 0.65) !important;
}
.nav-pills.dropdown.show .dropdown-item.active:hover {
    color: var(--primary) !important;
}

/* ── Input group focus border ────────────────────────────── */
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
    border-color: var(--primary) !important;
}

/* ── Pagination prev / next hover / active ───────────────── */
.page-item.prev-item .page-link:hover {
    color: var(--primary) !important;
    background-color: var(--primary) !important;
}
.page-item.prev-item .page-link:active,
.page-item.next-item .page-link:hover {
    background-color: var(--primary) !important;
}
.page-item.next-item .page-link:hover {
    color: #fff !important;
}

/* ── Congratulations card gradient ───────────────────────── */
.card-congratulations {
    background: linear-gradient(118deg, var(--primary), rgba(var(--primary-rgb), 0.7)) !important;
}

/* ── Textarea character counter ──────────────────────────── */
.textarea-counter-value {
    background-color: var(--primary) !important;
}

/* ── Popover header border + bottom arrow ────────────────── */
.popover .popover-header {
    border-color: var(--primary) !important;
}
.popover.bs-popover-bottom .popover-arrow:after {
    border-bottom-color: var(--primary) !important;
}

/* ── Customizer settings-toggle button ───────────────────── */
.customizer .customizer-toggle {
    background: var(--primary) !important;
}

/* ── Gradient button / background ────────────────────────── */
.bg-gradient-primary,
.btn-gradient-primary {
    background-image: linear-gradient(47deg, var(--primary), rgb(from var(--primary) calc(r * 1.134) calc(g * 1.134) calc(b * 1.134))) !important;
}
.bg-gradient-primary:active, .bg-gradient-primary:focus,
.btn-gradient-primary:active,
.btn-gradient-primary:focus {
    background-image: linear-gradient(47deg, rgb(from var(--primary) calc(r * 0.777) calc(g * 0.777) calc(b * 0.777)), var(--primary)) !important;
}

/* =============================================================
   2(z).  BOOTSTRAP SCOPED VARS + FORM FOCUS
   Vuexy bootstrap.css hardcodes #c02526 on .dropdown-menu,
   .pagination, and form :focus — override with theme variables.
   ============================================================= */

.dropdown-menu {
    --bs-dropdown-link-hover-color: var(--primary);
    --bs-dropdown-link-hover-bg: rgba(var(--primary-rgb), 0.12);
    --bs-dropdown-link-active-bg: var(--primary);
}

.dropdown-menu-dark {
    --bs-dropdown-link-active-bg: var(--primary);
}

.pagination {
    --bs-pagination-hover-color: var(--primary);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: var(--primary) !important;
    background-color: rgba(var(--primary-rgb), 0.12) !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    color: #fff !important;
    background-color: var(--primary) !important;
}

.pagination:not([class*="pagination-"]) .page-item.active .page-link,
.pagination:not([class*="pagination-"]) .active > .page-link {
    color: #fff !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.pagination:not([class*="pagination-"]) .page-item .page-link:hover,
.pagination:not([class*="pagination-"]) .page-link:hover {
    color: var(--primary) !important;
}

.page-item.prev-item .page-link:hover,
.page-item.next-item .page-link:hover {
    color: #fff !important;
}

.page-item.prev-item .page-link:active,
.page-item.prev-item .page-link:hover,
.page-item.next-item .page-link:active,
.page-item.next-item .page-link:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

div.dataTables_wrapper .dt-button-collection [class*="buttons-"]:hover,
div.dataTables_wrapper .dt-button-collection [class*="buttons-"]:focus {
    color: var(--primary) !important;
    background-color: rgba(var(--primary-rgb), 0.12) !important;
}

div.dataTables_wrapper .dt-button-collection [class*="buttons-"]:active {
    color: #fff !important;
    background-color: var(--primary) !important;
}

/* =============================================================
   2(x).  TIMELINE — default point indicator (not .timeline-point-* variant)
   ============================================================= */
.timeline .timeline-item .timeline-point {
    border-color: var(--primary) !important;
    background-color: #fff;
}
.timeline .timeline-item .timeline-point.timeline-point-indicator {
    background-color: var(--primary) !important;
}
.timeline .timeline-item .timeline-point.timeline-point-indicator:before {
    background: rgba(var(--primary-rgb), 0.12) !important;
}

/* =============================================================
   2(y).  DARK-LAYOUT — override every hardcoded primary
   ============================================================= */
.dark-layout a:hover {
    color: var(--primary) !important;
}
.dark-layout .main-menu .collapse-toggle-icon {
    color: var(--primary) !important;
}
.dark-layout .dropdown-menu .dropdown-item:hover,
.dark-layout .dropdown-menu .dropdown-item:focus {
    background: rgba(var(--primary-rgb), 0.12) !important;
    color: var(--primary) !important;
}
.dark-layout .dropdown-menu .dropdown-item:active,
.dark-layout .dropdown-menu .dropdown-item.active {
    color: #fff !important;
    background-color: var(--primary) !important;
}
.dark-layout .btn-group label[class*=btn-outline-] {
    color: var(--primary) !important;
}
.dark-layout .input-group:focus-within .form-control,
.dark-layout .input-group:focus-within .input-group-text {
    border-color: var(--primary) !important;
}
.dark-layout .pagination:not([class*=pagination-]) .page-item.active .page-link {
    background-color: var(--primary) !important;
}
.dark-layout .pagination:not([class*=pagination-]) .page-item .page-link:hover {
    color: var(--primary) !important;
}
.dark-layout .dataTables_wrapper .dt-buttons .buttons-copy:active,
.dark-layout .dataTables_wrapper .dt-buttons .buttons-excel:active,
.dark-layout .dataTables_wrapper .dt-buttons .buttons-pdf:active,
.dark-layout .dataTables_wrapper .dt-buttons .buttons-print:active,
.dark-layout .dataTables_wrapper .dt-buttons .btn-secondary:active,
.dark-layout .dataTables_wrapper .dt-buttons .dt-button-collection [class*=buttons-]:active {
    background-color: var(--primary) !important;
}

/* ── Auth pages (minimal custom overrides) ───────────────── */
.auth-cover-bg {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.14), rgba(var(--bs-info-rgb), 0.08));
}

.auth-lang-switch {
    position: absolute;
    top: 1.25rem;
    inset-inline-end: 1.5rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: rgba(var(--bs-body-color-rgb), 0.04);
    border: 1px solid var(--bs-border-color);
}

.auth-lang-switch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.875rem;
    padding: 0 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.auth-lang-switch__btn:hover {
    color: var(--bs-primary);
}

.auth-lang-switch__btn.is-active {
    background: var(--bs-primary);
    color: var(--bs-white);
}





/* Dynamic bootstrap bridge — SVG chevrons in bootstrap-extended.css */
.page-item.prev .page-link:hover:before,
.page-item.previous .page-link:hover:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7F6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.page-item.next .page-link:hover:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7F6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.btn-flat-primary.dropdown-toggle::after,
.btn-outline-primary.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7F6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}