/* ============================================================
   MOAWIN — MODERN THEME v2.0
   Deep Indigo · Clean · Professional · Animated
   ============================================================ */

/* ---------- Google Fonts: Manrope (loaded here as fallback) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand Palette */
    --c-primary:        #6d28d9;
    --c-primary-light:  #7c3aed;
    --c-primary-dark:   #5b21b6;
    --c-secondary:      #4f46e5;
    --c-accent:         #06b6d4;

    /* Sidebar */
    --sb-bg-top:        #120e2e;
    --sb-bg-mid:        #1e1254;
    --sb-bg-bot:        #0f0c29;
    --sb-item-hover:    rgba(255,255,255,0.08);
    --sb-item-active-from: #7c3aed;
    --sb-item-active-to:   #4f46e5;
    --sb-text:          rgba(255,255,255,0.70);
    --sb-text-active:   #ffffff;
    --sb-sub-text:      rgba(255,255,255,0.50);

    /* Surface */
    --bg-app:           #f0f2f8;
    --bg-card:          #ffffff;
    --bg-card-alt:      #fafbff;

    /* Borders */
    --border-light:     rgba(0,0,0,0.07);
    --border-input:     #d1d5db;

    /* Shadows */
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:        0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
    --shadow-lg:        0 20px 40px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06);
    --shadow-primary:   0 8px 24px rgba(109,40,217,0.35);
    --shadow-success:   0 8px 24px rgba(16,185,129,0.35);
    --shadow-danger:    0 8px 24px rgba(239,68,68,0.35);
    --shadow-warning:   0 8px 24px rgba(245,158,11,0.35);
    --shadow-info:      0 8px 24px rgba(6,182,212,0.35);

    /* Radii */
    --r-xs:  4px;
    --r-sm:  6px;
    --r-md:  10px;
    --r-lg:  14px;
    --r-xl:  18px;
    --r-pill:100px;

    /* Transition */
    --t-fast:  0.15s ease;
    --t-base:  0.22s ease;
    --t-slow:  0.35s ease;

    /* Typography */
    --font-sans: 'Manrope', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-app-font="manrope"] {
    --font-sans: 'Manrope', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-app-font="inter"] {
    --font-sans: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-app-font="poppins"] {
    --font-sans: 'Poppins', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-app-font="source"] {
    --font-sans: 'Source Sans Pro', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-app-theme="blue"] {
    --c-primary:        #2563eb;
    --c-primary-light:  #3b82f6;
    --c-primary-dark:   #1d4ed8;
    --c-secondary:      #0f766e;
    --c-accent:         #38bdf8;
    --sb-bg-top:        #0f172a;
    --sb-bg-mid:        #16233a;
    --sb-bg-bot:        #1b2f4d;
    --sb-item-active-from: #2563eb;
    --sb-item-active-to:   #38bdf8;
    --shadow-primary:   0 8px 22px rgba(37,99,235,0.20);
    --auth-bg-a:        #eff6ff;
    --auth-bg-b:        #ecfeff;
    --auth-bg-c:        #dbeafe;
    --auth-card-bg:     rgba(255,255,255,0.92);
    --auth-card-border: rgba(37,99,235,0.10);
    --auth-strong:      #10233f;
    --auth-muted:       #5f738d;
    --auth-surface:     rgba(255,255,255,0.72);
    --auth-surface-border: rgba(37,99,235,0.08);
}

html[data-app-theme="normal"] {
    --c-primary:        #4f6b8a;
    --c-primary-light:  #6f88a5;
    --c-primary-dark:   #425973;
    --c-secondary:      #8194aa;
    --c-accent:         #7ba6a1;
    --sb-bg-top:        #253141;
    --sb-bg-mid:        #2d3a49;
    --sb-bg-bot:        #344454;
    --sb-item-active-from: #5f7896;
    --sb-item-active-to:   #748ca6;
    --shadow-primary:   0 8px 22px rgba(95,120,150,0.18);
    --auth-bg-a:        #f6f8f9;
    --auth-bg-b:        #eef2f4;
    --auth-bg-c:        #dbe3ea;
    --auth-card-bg:     rgba(255,255,255,0.90);
    --auth-card-border: rgba(79,107,138,0.10);
    --auth-strong:      #314051;
    --auth-muted:       #6f7f90;
    --auth-surface:     rgba(255,255,255,0.66);
    --auth-surface-border: rgba(108,126,145,0.10);
}

html[data-app-theme="green"] {
    --c-primary:        #0f766e;
    --c-primary-light:  #10b981;
    --c-primary-dark:   #0f5d57;
    --c-secondary:      #3f8c7b;
    --c-accent:         #22c55e;
    --sb-bg-top:        #10281f;
    --sb-bg-mid:        #153428;
    --sb-bg-bot:        #1f4735;
    --sb-item-active-from: #0f766e;
    --sb-item-active-to:   #10b981;
    --shadow-primary:   0 8px 22px rgba(15,118,110,0.20);
    --auth-bg-a:        #f0fdf4;
    --auth-bg-b:        #ecfdf5;
    --auth-bg-c:        #d1fae5;
    --auth-card-bg:     rgba(255,255,255,0.92);
    --auth-card-border: rgba(16,185,129,0.12);
    --auth-strong:      #12352d;
    --auth-muted:       #5b7b72;
    --auth-surface:     rgba(255,255,255,0.74);
    --auth-surface-border: rgba(16,185,129,0.08);
}

html[data-app-theme="black"] {
    --c-primary:        #111827;
    --c-primary-light:  #1f2937;
    --c-primary-dark:   #030712;
    --c-secondary:      #475569;
    --c-accent:         #94a3b8;
    --sb-bg-top:        #020617;
    --sb-bg-mid:        #0f172a;
    --sb-bg-bot:        #111827;
    --sb-item-active-from: #1f2937;
    --sb-item-active-to:   #334155;
    --shadow-primary:   0 8px 22px rgba(15,23,42,0.26);
    --auth-bg-a:        #0f172a;
    --auth-bg-b:        #111827;
    --auth-bg-c:        #1f2937;
    --auth-card-bg:     rgba(17,24,39,0.90);
    --auth-card-border: rgba(148,163,184,0.12);
    --auth-strong:      #f8fafc;
    --auth-muted:       #cbd5e1;
    --auth-surface:     rgba(15,23,42,0.54);
    --auth-surface-border: rgba(148,163,184,0.12);
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--font-sans) !important;
    background: var(--bg-app) !important;
    color: #1e293b !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { transition: color var(--t-fast) !important; }
a:focus { outline: none !important; }

/* ============================================================
   GLOBAL SCROLLBAR
   ============================================================ */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #c4c9d4; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ============================================================
   SIDEBAR — main-sidebar + .sidebar
   ============================================================ */
.main-sidebar {
    background: linear-gradient(170deg, var(--sb-bg-top) 0%, var(--sb-bg-mid) 55%, var(--sb-bg-bot) 100%) !important;
    border-right: none !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.40) !important;
    width: 255px !important;
    transition: width var(--t-base) !important;
}

.sidebar-mini .main-sidebar {
    width: 255px !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar {
    width: 4.6rem !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar:hover {
    width: 255px !important;
}

/* Remove AdminLTE elevation4 double shadow */
.main-sidebar.elevation-4 {
    box-shadow: 4px 0 32px rgba(0,0,0,0.42) !important;
}

/* Brand link */
.brand-link {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 14px 18px !important;
    min-height: 57px;
    transition: background var(--t-fast) !important;
}
.brand-link:hover { background: rgba(255,255,255,0.09) !important; }

.brand-link .brand-text {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.97rem !important;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User panel */
.sidebar .user-panel {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(255,255,255,0.03) !important;
    padding: 12px 16px 14px !important;
}
.sidebar .user-panel .info a {
    color: rgba(255,255,255,0.80) !important;
    font-size: 0.83rem !important;
    font-weight: 500;
}

/* Section headers */
.nav-sidebar .nav-header {
    color: rgba(255,255,255,0.32) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase;
    padding: 14px 22px 5px !important;
}

/* Top-level nav links */
.nav-sidebar > .nav-item > .nav-link {
    color: var(--sb-text) !important;
    border-radius: var(--r-md) !important;
    margin: 2px 10px !important;
    padding: 9px 14px !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) !important;
    white-space: nowrap;
}

.nav-sidebar > .nav-item > .nav-link:hover {
    background: var(--sb-item-hover) !important;
    color: #fff !important;
    transform: translateX(3px);
}

.nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(90deg, var(--sb-item-active-from), var(--sb-item-active-to)) !important;
    color: var(--sb-text-active) !important;
    box-shadow: 0 4px 18px rgba(124,58,237,0.50) !important;
    font-weight: 600 !important;
}

/* Icons */
.nav-sidebar .nav-link .nav-icon,
.nav-sidebar .nav-link > i:not(.right):not(.fa-angle-left) {
    color: rgba(255,255,255,0.52) !important;
    font-size: 0.88rem !important;
    width: 1.35rem !important;
    min-width: 1.35rem;
    transition: color var(--t-fast) !important;
}
.nav-sidebar .nav-link:hover .nav-icon,
.nav-sidebar .nav-link:hover > i:not(.right):not(.fa-angle-left) { color: rgba(255,255,255,0.9) !important; }
.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-link.active > i:not(.right):not(.fa-angle-left) { color: #fff !important; }

/* Angle/caret */
.nav-sidebar .nav-link .right,
.nav-sidebar .nav-link p .right {
    color: rgba(255,255,255,0.38) !important;
    transition: transform var(--t-base) !important;
}

/* Treeview sub-items */
.nav-treeview > .nav-item > .nav-link {
    color: var(--sb-sub-text) !important;
    font-size: 0.80rem !important;
    padding: 7px 14px 7px 37px !important;
    border-radius: var(--r-sm) !important;
    margin: 1px 10px !important;
    transition: background var(--t-fast), color var(--t-fast) !important;
}
.nav-treeview > .nav-item > .nav-link:hover {
    background: rgba(255,255,255,0.07) !important;
    color: rgba(255,255,255,0.88) !important;
}
.nav-treeview > .nav-item > .nav-link.active {
    background: rgba(124,58,237,0.30) !important;
    color: #c4b5fd !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.nav-treeview .nav-link .nav-icon { color: rgba(255,255,255,0.35) !important; }

/* Sidebar custom scrollbar */
.main-sidebar::-webkit-scrollbar       { width: 3px; }
.main-sidebar::-webkit-scrollbar-track { background: transparent; }
.main-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }

/* ============================================================
   TOP NAVBAR
   ============================================================ */
.main-header.navbar {
    background: rgba(255,255,255,0.96) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 1px 16px rgba(0,0,0,0.07) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    min-height: 57px !important;
}
.main-header .nav-link {
    color: #4b5563 !important;
    border-radius: var(--r-sm) !important;
    padding: 6px 10px !important;
    transition: background var(--t-fast), color var(--t-fast) !important;
}
.main-header .nav-link:hover {
    background: #f3f0ff !important;
    color: var(--c-primary) !important;
}
.main-header .nav-link i { font-size: 1rem; }

/* Logout link special */
.main-header .nav-link[href*="Logout"] { font-weight: 500; font-size: 0.83rem; }

/* Search block */
.navbar-search-block .form-control {
    border-radius: var(--r-md) 0 0 var(--r-md) !important;
    border: 1.5px solid #e2e8f0 !important;
}

/* ============================================================
   CONTENT WRAPPER + CONTENT HEADER
   ============================================================ */
.content-wrapper {
    background: var(--bg-app) !important;
}

.content-header {
    background: #fff !important;
    padding: 10px 22px !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.04) !important;
    margin-bottom: 0 !important;
}
.content-header h1 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}
.breadcrumb {
    background: transparent !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-size: 0.77rem !important;
}
.breadcrumb-item a { color: var(--c-primary) !important; text-decoration: none !important; }
.breadcrumb-item.active { color: #64748b !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #94a3b8 !important; }

/* Section content padding */
.content { padding: 18px 22px !important; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border: none !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--bg-card) !important;
    transition: box-shadow var(--t-base), transform var(--t-base) !important;
    overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-lg) !important; }

.card-header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 15px 20px !important;
    font-weight: 600 !important;
    font-size: 0.90rem !important;
    color: #1e293b !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}
/* Coloured card headers keep their own background */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-warning,
.card-header.bg-info,
.card-header.bg-dark {
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}

.card-body { padding: 20px !important; }
.card-footer {
    background: #fafbff !important;
    border-top: 1px solid var(--border-light) !important;
    padding: 12px 20px !important;
    border-radius: 0 0 var(--r-xl) var(--r-xl) !important;
}

/* ---- Info Box (AdminLTE) ---- */
.info-box {
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-md) !important;
    border: none !important;
    overflow: hidden !important;
    transition: transform var(--t-base), box-shadow var(--t-base) !important;
}
.info-box:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }
.info-box-icon { border-radius: var(--r-lg) 0 0 var(--r-lg) !important; width: 80px !important; font-size: 1.9rem !important; }
.info-box-content { padding: 10px 14px !important; }
.info-box-text { font-size: 0.78rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.6px; }
.info-box-number { font-size: 1.5rem !important; font-weight: 800 !important; }

/* ---- Small Box (AdminLTE) ---- */
.small-box {
    border-radius: var(--r-xl) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
    transition: transform var(--t-base), box-shadow var(--t-base) !important;
}
.small-box:hover { transform: translateY(-5px) !important; box-shadow: var(--shadow-lg) !important; }
.small-box .inner h3 { font-size: 2.1rem !important; font-weight: 800 !important; }
.small-box .inner p { font-size: 0.83rem !important; font-weight: 600 !important; opacity: 0.92; }
.small-box .icon { font-size: 70px !important; opacity: 0.18 !important; right: 12px !important; top: 8px !important; }
.small-box-footer {
    background: rgba(0,0,0,0.12) !important;
    font-size: 0.78rem !important;
    padding: 6px 14px !important;
    letter-spacing: 0.3px;
}
.small-box-footer:hover { background: rgba(0,0,0,0.22) !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    font-family: var(--font-sans) !important;
    border-radius: var(--r-md) !important;
    font-weight: 500 !important;
    font-size: 0.83rem !important;
    padding: 7px 18px !important;
    border: none !important;
    transition: all var(--t-fast) !important;
    letter-spacing: 0.15px !important;
    position: relative;
    overflow: hidden;
}
.btn:hover       { transform: translateY(-2px) !important; }
.btn:active      { transform: translateY(0) !important; }
.btn:focus       { box-shadow: 0 0 0 3px rgba(124,58,237,0.20) !important; outline: none !important; }

/* Primary */
.btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(124,58,237,0.30) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%) !important;
    box-shadow: var(--shadow-primary) !important;
    color: #fff !important;
}

/* Success */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(16,185,129,0.28) !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: var(--shadow-success) !important;
    color: #fff !important;
}

/* Danger */
.btn-danger {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(239,68,68,0.28) !important;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    box-shadow: var(--shadow-danger) !important;
    color: #fff !important;
}

/* Warning */
.btn-warning {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(245,158,11,0.28) !important;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important;
    box-shadow: var(--shadow-warning) !important;
    color: #fff !important;
}

/* Info */
.btn-info {
    background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(6,182,212,0.28) !important;
}
.btn-info:hover {
    background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%) !important;
    box-shadow: var(--shadow-info) !important;
    color: #fff !important;
}

/* Secondary / Default */
.btn-secondary, .btn-default {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: none !important;
}
.btn-secondary:hover, .btn-default:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Dark */
.btn-dark {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
    color: #fff !important;
}
.btn-dark:hover {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
    color: #fff !important;
}

/* Light */
.btn-light {
    background: #f8fafc !important;
    color: #374151 !important;
    border: 1.5px solid #e2e8f0 !important;
}
.btn-light:hover { background: #e2e8f0 !important; }

/* Outline variants */
.btn-outline-primary { border: 1.5px solid #7c3aed !important; color: #7c3aed !important; background: transparent !important; }
.btn-outline-primary:hover { background: linear-gradient(135deg,#7c3aed,#4f46e5) !important; color:#fff !important; box-shadow: var(--shadow-primary) !important; }

.btn-outline-success { border: 1.5px solid #10b981 !important; color: #10b981 !important; background: transparent !important; }
.btn-outline-success:hover { background: linear-gradient(135deg,#10b981,#059669) !important; color:#fff !important; }

.btn-outline-danger { border: 1.5px solid #ef4444 !important; color: #ef4444 !important; background: transparent !important; }
.btn-outline-danger:hover { background: linear-gradient(135deg,#f87171,#dc2626) !important; color:#fff !important; }

.btn-outline-warning { border: 1.5px solid #f59e0b !important; color: #d97706 !important; background: transparent !important; }
.btn-outline-warning:hover { background: linear-gradient(135deg,#fbbf24,#d97706) !important; color:#fff !important; }

.btn-outline-info { border: 1.5px solid #06b6d4 !important; color: #0891b2 !important; background: transparent !important; }
.btn-outline-info:hover { background: linear-gradient(135deg,#22d3ee,#0891b2) !important; color:#fff !important; }

.btn-outline-secondary { border: 1.5px solid #94a3b8 !important; color: #64748b !important; background: transparent !important; }
.btn-outline-secondary:hover { background: #f1f5f9 !important; }

/* Sizes */
.btn-xs  { padding: 3px 10px !important; font-size: 0.74rem !important; border-radius: var(--r-sm) !important; }
.btn-sm  { padding: 4px 13px !important; font-size: 0.78rem !important; border-radius: var(--r-sm) !important; }
.btn-lg  { padding: 11px 26px !important; font-size: 0.95rem !important; border-radius: var(--r-lg) !important; }
.btn-xl  { padding: 14px 32px !important; font-size: 1.05rem !important; border-radius: var(--r-xl) !important; }

/* Icon spacing */
.btn i.fas, .btn i.far, .btn i.fab, .btn i.fal { margin-right: 5px !important; }

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
.form-control {
    font-family: var(--font-sans) !important;
    border: 1.5px solid var(--border-input) !important;
    border-radius: var(--r-md) !important;
    font-size: 0.84rem !important;
    padding: 8px 14px !important;
    color: #1e293b !important;
    background: #fff !important;
    transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
    height: auto !important;
}
.form-control:focus {
    border-color: var(--c-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
    outline: none !important;
}
.form-control::placeholder { color: #9ca3af !important; }
.form-control:disabled, .form-control[readonly] {
    background: #f8fafc !important;
    color: #94a3b8 !important;
}

textarea.form-control { min-height: 90px; resize: vertical; }

.form-group label, .form-label {
    font-weight: 600 !important;
    font-size: 0.80rem !important;
    color: #4b5563 !important;
    margin-bottom: 5px !important;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

/* Input group */
.input-group-text {
    border: 1.5px solid var(--border-input) !important;
    background: #f8fafc !important;
    color: #6b7280 !important;
    font-size: 0.84rem !important;
    transition: border-color var(--t-fast) !important;
}
.input-group:focus-within .input-group-text { border-color: var(--c-primary-light) !important; }
.input-group > .form-control:not(:first-child) { border-left: none !important; }
.input-group > .form-control:not(:last-child)  { border-right: none !important; }

/* Select2 */
.select2-container--default .select2-selection--single {
    border: 1.5px solid var(--border-input) !important;
    border-radius: var(--r-md) !important;
    height: 38px !important;
    background: #fff !important;
    transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    color: #1e293b !important;
    font-size: 0.84rem !important;
    padding-left: 13px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--c-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}
.select2-dropdown {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--c-primary-light) !important;
}
.select2-search--dropdown .select2-search__field { border-radius: var(--r-sm) !important; border: 1.5px solid #e2e8f0 !important; }

/* Checkboxes & Radios */
.form-check-input {
    border-radius: var(--r-xs) !important;
    border: 1.5px solid #d1d5db !important;
    transition: all var(--t-fast) !important;
}
.form-check-input:checked {
    background-color: var(--c-primary-light) !important;
    border-color: var(--c-primary-light) !important;
}
.form-check-input[type=radio] { border-radius: var(--r-pill) !important; }

/* ============================================================
   TABLES
   ============================================================ */
.table {
    font-size: 0.83rem !important;
    color: #374151 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
}

.table thead th {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
    color: #ddd6fe !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    padding: 12px 14px !important;
    white-space: nowrap;
}
.table thead th:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm) !important; }
.table thead th:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }

.table tbody tr {
    transition: background var(--t-fast) !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.table tbody tr:hover { background: rgba(109,40,217,0.04) !important; }

.table tbody td {
    padding: 11px 14px !important;
    border-top: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd)       { background: var(--bg-card-alt) !important; }
.table-striped tbody tr:nth-of-type(odd):hover { background: rgba(109,40,217,0.05) !important; }

/* No borders on table-bordered — rely on row separators only */
.table-bordered,
.table-bordered td,
.table-bordered th { border: none !important; border-bottom: 1px solid #f1f5f9 !important; }

/* Table inside a card (remove round card corners overlap) */
.card .table thead th:first-child,
.card-body .table thead th:first-child { border-radius: 0 !important; }
.card .table thead th:last-child,
.card-body .table thead th:last-child  { border-radius: 0 !important; }

/* DataTables wrapper */
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: var(--r-md) !important;
    padding: 6px 12px !important;
    font-size: 0.83rem !important;
}
.dataTables_wrapper .dataTables_length select { border-radius: var(--r-sm) !important; border: 1.5px solid #e2e8f0 !important; }
.dataTables_wrapper .dataTables_info { font-size: 0.78rem !important; color: #64748b !important; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    border-radius: var(--r-sm) !important;
    font-size: 0.69rem !important;
    font-weight: 600 !important;
    padding: 4px 9px !important;
    letter-spacing: 0.3px !important;
}
.badge-primary, .badge.bg-primary     { background: linear-gradient(135deg,#7c3aed,#4f46e5) !important; }
.badge-success, .badge.bg-success     { background: linear-gradient(135deg,#10b981,#059669) !important; }
.badge-danger,  .badge.bg-danger      { background: linear-gradient(135deg,#f87171,#dc2626) !important; }
.badge-warning, .badge.bg-warning     { background: linear-gradient(135deg,#fbbf24,#d97706) !important; color:#fff !important; }
.badge-info,    .badge.bg-info        { background: linear-gradient(135deg,#22d3ee,#0891b2) !important; }
.badge-secondary,.badge.bg-secondary  { background: #94a3b8 !important; }
.badge-dark,    .badge.bg-dark        { background: linear-gradient(135deg,#374151,#1f2937) !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { gap: 3px !important; }
.pagination .page-link {
    border: 1.5px solid #e2e8f0 !important;
    color: var(--c-primary) !important;
    border-radius: var(--r-md) !important;
    font-size: 0.82rem !important;
    padding: 5px 12px !important;
    transition: all var(--t-fast) !important;
    background: #fff !important;
}
.pagination .page-link:hover {
    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
    border-color: #7c3aed !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124,58,237,0.30) !important;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
    border-color: #7c3aed !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124,58,237,0.30) !important;
}
.pagination .page-item.disabled .page-link { background: #f8fafc !important; color: #cbd5e1 !important; border-color: #e2e8f0 !important; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    border: none !important;
    border-radius: var(--r-lg) !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    padding: 13px 18px !important;
}
.alert-success { background: rgba(16,185,129,.10) !important;  color: #065f46 !important; border-left: 4px solid #10b981 !important; }
.alert-danger   { background: rgba(239,68,68,.10)  !important;  color: #991b1b !important; border-left: 4px solid #ef4444 !important; }
.alert-warning  { background: rgba(245,158,11,.10) !important; color: #92400e !important; border-left: 4px solid #f59e0b !important; }
.alert-info     { background: rgba(6,182,212,.10)  !important;  color: #0e4e63 !important; border-left: 4px solid #06b6d4 !important; }
.alert-primary  { background: rgba(124,58,237,.10) !important; color: #3b0764 !important; border-left: 4px solid #7c3aed !important; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
    border: none !important;
    border-radius: var(--r-xl) !important;
    box-shadow: 0 30px 70px rgba(0,0,0,0.22) !important;
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
    border-bottom: none !important;
    padding: 18px 24px !important;
}
.modal-header .modal-title { color: #fff !important; font-weight: 700 !important; font-size: 1rem !important; }
.modal-header .close, .modal-header .btn-close { color: rgba(255,255,255,0.8) !important; opacity: 1 !important; text-shadow: none !important; }
.modal-header .close:hover { color: #fff !important; }
.modal-body   { padding: 24px !important; }
.modal-footer { border-top: 1px solid #f1f5f9 !important; padding: 16px 24px !important; }

/* ============================================================
   DROPDOWN MENUS
   ============================================================ */
.dropdown-menu {
    border: none !important;
    border-radius: var(--r-lg) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
    padding: 8px !important;
    font-size: 0.83rem !important;
    animation: fadeInDown 0.15s ease !important;
}
.dropdown-item {
    border-radius: var(--r-sm) !important;
    padding: 8px 14px !important;
    color: #374151 !important;
    transition: all var(--t-fast) !important;
}
.dropdown-item:hover,
.dropdown-item:focus  { background: rgba(124,58,237,0.07) !important; color: var(--c-primary) !important; }
.dropdown-divider     { border-color: #f1f5f9 !important; margin: 6px 4px !important; }
.dropdown-header      { font-size: 0.72rem !important; font-weight: 700 !important; color: #94a3b8 !important; text-transform: uppercase; letter-spacing: 0.8px; }

/* ============================================================
   NAV TABS
   ============================================================ */
.nav-tabs {
    border-bottom: 2px solid #e2e8f0 !important;
    gap: 2px;
}
.nav-tabs .nav-link {
    border: none !important;
    border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    font-size: 0.84rem !important;
    padding: 10px 18px !important;
    margin-bottom: -2px !important;
    transition: color var(--t-fast), background var(--t-fast) !important;
}
.nav-tabs .nav-link:hover { color: var(--c-primary) !important; background: rgba(124,58,237,0.06) !important; }
.nav-tabs .nav-link.active {
    color: var(--c-primary) !important;
    border-bottom: 2.5px solid var(--c-primary) !important;
    border-color: transparent transparent var(--c-primary) !important;
    font-weight: 700 !important;
    background: transparent !important;
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress  { border-radius: var(--r-pill) !important; background: #e2e8f0 !important; height: 8px !important; overflow: visible; }
.progress-bar { border-radius: var(--r-pill) !important; background: linear-gradient(90deg, #7c3aed, #4f46e5) !important; }
.progress-bar.bg-success { background: linear-gradient(90deg, #10b981, #059669) !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg, #f87171, #dc2626) !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg, #fbbf24, #d97706) !important; }
.progress-bar.bg-info    { background: linear-gradient(90deg, #22d3ee, #0891b2) !important; }

/* ============================================================
   CALLOUT BOXES
   ============================================================ */
.callout {
    border-radius: var(--r-lg) !important;
    border-left: 4px solid var(--c-primary) !important;
    background: #fff !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 16px 18px !important;
}
.callout.callout-success { border-left-color: #10b981 !important; }
.callout.callout-danger  { border-left-color: #ef4444 !important; }
.callout.callout-warning { border-left-color: #f59e0b !important; }
.callout.callout-info    { border-left-color: #06b6d4 !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.main-footer {
    background: #fff !important;
    border-top: 1px solid var(--border-light) !important;
    color: #9ca3af !important;
    font-size: 0.78rem !important;
    padding: 13px 24px !important;
}

/* ============================================================
   COLOR UTILITIES (override Bootstrap/AdminLTE)
   ============================================================ */
.bg-primary  { background: var(--c-primary-light)  !important; }
.bg-success  { background: #10b981 !important; }
.bg-danger   { background: #ef4444 !important; }
.bg-warning  { background: #f59e0b !important; }
.bg-info     { background: #06b6d4 !important; }
.bg-dark     { background: #1f2937 !important; }

.text-primary  { color: var(--c-primary) !important; }
.text-success  { color: #059669 !important; }
.text-danger   { color: #dc2626 !important; }
.text-warning  { color: #d97706 !important; }
.text-info     { color: #0891b2 !important; }
.text-muted    { color: #9ca3af !important; }
.text-dark     { color: #1e293b !important; }

/* ============================================================
   TOASTR (if used)
   ============================================================ */
#toast-container .toast { border-radius: var(--r-lg) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; }

/* ============================================================
   SPINNER/OVERLAY
   ============================================================ */
.spinner {
    border: 3px solid rgba(255,255,255,0.25) !important;
    border-left-color: #a78bfa !important;
    animation: spin 0.8s ease infinite !important;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 4px 18px rgba(124,58,237,0.40); }
    50%       { box-shadow: 0 4px 28px rgba(124,58,237,0.70); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Page-entry animation on cards */
.card, .info-box, .small-box {
    animation: fadeInUp 0.28s ease both;
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 768px) {
    .card-header, .card-body { padding: 13px 15px !important; }
    .table thead th { font-size: 0.72rem !important; padding: 9px 10px !important; }
    .btn { font-size: 0.79rem !important; padding: 6px 13px !important; }
    .content { padding: 12px 14px !important; }
}

/* ============================================================
   SIDEBAR MINI MODE — icons remain visible
   ============================================================ */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link > p,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .user-panel .info {
    opacity: 0 !important;
    transition: opacity var(--t-fast) !important;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link > p,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .info {
    opacity: 1 !important;
}

/* ============================================================
   UTILITY: Pill badges on sidebar
   ============================================================ */
.nav-sidebar .badge {
    font-size: 0.62rem !important;
    padding: 2px 7px !important;
    font-weight: 700 !important;
}

/* ============================================================
   SECTION DIVIDER (horizontal rule in cards)
   ============================================================ */
hr {
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    margin: 16px 0 !important;
}

/* ============================================================
   TOOLTIP OVERRIDE
   ============================================================ */
.tooltip-inner {
    background: #1e293b !important;
    border-radius: var(--r-sm) !important;
    font-size: 0.78rem !important;
    padding: 5px 10px !important;
}

/* ============================================================
   SOFT REFINEMENT LAYER
   Calm palette, smaller typography, smoother surfaces
   ============================================================ */
:root {
    --c-primary:        #4f6b8a;
    --c-primary-light:  #6f88a5;
    --c-primary-dark:   #425973;
    --c-secondary:      #8194aa;
    --c-accent:         #7ba6a1;

    --sb-bg-top:        #253141;
    --sb-bg-mid:        #2d3a49;
    --sb-bg-bot:        #344454;
    --sb-item-hover:    rgba(255,255,255,0.06);
    --sb-item-active-from: #5f7896;
    --sb-item-active-to:   #748ca6;
    --sb-text:          rgba(255,255,255,0.74);
    --sb-sub-text:      rgba(255,255,255,0.56);

    --bg-app:           #f6f7f8;
    --bg-card:          #ffffff;
    --bg-card-alt:      #fbfbfc;
    --border-light:     rgba(72, 89, 110, 0.10);
    --border-input:     #d8dde4;

    --shadow-sm:        0 1px 2px rgba(40,52,67,0.04), 0 1px 1px rgba(40,52,67,0.03);
    --shadow-md:        0 8px 24px rgba(40,52,67,0.06), 0 2px 8px rgba(40,52,67,0.04);
    --shadow-lg:        0 16px 36px rgba(40,52,67,0.08), 0 6px 12px rgba(40,52,67,0.05);
    --shadow-primary:   0 8px 22px rgba(95,120,150,0.18);
    --shadow-success:   0 8px 22px rgba(95,144,120,0.18);
    --shadow-danger:    0 8px 22px rgba(178,113,113,0.18);
    --shadow-warning:   0 8px 22px rgba(189,151,95,0.18);
    --shadow-info:      0 8px 22px rgba(111,148,165,0.18);
}

html {
    font-size: calc(13.5px * var(--app-font-scale, 1));
}

body,
.content-wrapper,
.main-header,
.card,
.table,
.form-control,
.btn,
.nav-sidebar .nav-link,
.dropdown-menu,
.modal-content {
    letter-spacing: 0 !important;
}

body {
    font-weight: 400 !important;
    color: #445160 !important;
}

.main-sidebar,
.main-sidebar.elevation-4 {
    background: linear-gradient(180deg, var(--sb-bg-top) 0%, var(--sb-bg-mid) 52%, var(--sb-bg-bot) 100%) !important;
    box-shadow: 3px 0 24px rgba(28, 38, 48, 0.16) !important;
}

.brand-link {
    background: rgba(255,255,255,0.035) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.brand-link .brand-text {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px;
}

.sidebar .user-panel .info a,
.nav-sidebar > .nav-item > .nav-link,
.nav-treeview > .nav-item > .nav-link,
.main-header .nav-link,
.dropdown-item {
    font-weight: 500 !important;
}

.nav-sidebar > .nav-item > .nav-link {
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
}

.nav-sidebar > .nav-item > .nav-link:hover {
    transform: translateX(1px);
}

.nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(90deg, rgba(111,136,165,0.92), rgba(95,120,150,0.92)) !important;
    box-shadow: 0 4px 14px rgba(95,120,150,0.20) !important;
}

.nav-treeview > .nav-item > .nav-link {
    font-size: 0.77rem !important;
    padding: 6px 14px 6px 37px !important;
}

.nav-treeview > .nav-item > .nav-link.active {
    background: rgba(132, 154, 177, 0.18) !important;
    color: #eef5fb !important;
}

.main-header.navbar {
    background: rgba(255,255,255,0.94) !important;
    box-shadow: 0 1px 10px rgba(55, 69, 85, 0.05) !important;
}

.main-header .nav-link:hover {
    background: #eef2f5 !important;
    color: var(--c-primary) !important;
}

.content-header h1 {
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    color: #324152 !important;
}

.breadcrumb {
    font-size: 0.72rem !important;
}

.card,
.info-box,
.small-box,
.modal-content,
.dropdown-menu {
    box-shadow: var(--shadow-md) !important;
}

.card {
    border-radius: 16px !important;
}

.card:hover,
.info-box:hover,
.small-box:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-1px) !important;
}

.card-header {
    padding: 13px 18px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #324152 !important;
}

.card-body,
.modal-body {
    padding: 18px !important;
}

.info-box-icon {
    width: 72px !important;
    font-size: 1.55rem !important;
}

.info-box-text {
    font-size: 0.72rem !important;
    letter-spacing: 0.5px;
}

.info-box-number,
.small-box .inner h3,
.stat-number {
    font-weight: 700 !important;
}

.info-box-number {
    font-size: 1.3rem !important;
}

.small-box .inner h3 {
    font-size: 1.75rem !important;
}

.small-box .inner p,
.stat-label,
.dataTables_wrapper .dataTables_info {
    font-size: 0.76rem !important;
}

.btn {
    border-radius: 9px !important;
    font-size: 0.79rem !important;
    font-weight: 500 !important;
    padding: 6px 15px !important;
    box-shadow: none !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
}

.btn:focus {
    box-shadow: 0 0 0 3px rgba(95,120,150,0.14) !important;
}

.btn-primary,
.btn-primary:hover {
    background: linear-gradient(135deg, #69819a 0%, #597089 100%) !important;
    color: #fff !important;
    box-shadow: var(--shadow-primary) !important;
}

.btn-success,
.btn-success:hover {
    background: linear-gradient(135deg, #7ca68d 0%, #6a927b 100%) !important;
    color: #fff !important;
    box-shadow: var(--shadow-success) !important;
}

.btn-danger,
.btn-danger:hover {
    background: linear-gradient(135deg, #bf8a8a 0%, #aa7474 100%) !important;
    color: #fff !important;
    box-shadow: var(--shadow-danger) !important;
}

.btn-warning,
.btn-warning:hover {
    background: linear-gradient(135deg, #c8ae79 0%, #b59763 100%) !important;
    color: #fff !important;
    box-shadow: var(--shadow-warning) !important;
}

.btn-info,
.btn-info:hover {
    background: linear-gradient(135deg, #85a4ad 0%, #73929b 100%) !important;
    color: #fff !important;
    box-shadow: var(--shadow-info) !important;
}

.btn-dark,
.btn-dark:hover {
    background: linear-gradient(135deg, #566474 0%, #475465 100%) !important;
    color: #fff !important;
}

.btn-secondary,
.btn-default,
.btn-light {
    background: #f6f7f8 !important;
    border: 1px solid #dde3e9 !important;
    color: #556474 !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-light:hover {
    background: #edf1f4 !important;
    color: #415263 !important;
}

.btn-outline-primary {
    border: 1px solid #7d91a8 !important;
    color: #5d748d !important;
}

.btn-outline-primary:hover {
    background: #6d839a !important;
    border-color: #6d839a !important;
    color: #fff !important;
    box-shadow: var(--shadow-primary) !important;
}

.form-control,
.input-group-text,
.select2-container--default .select2-selection--single,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-width: 1px !important;
}

.form-control,
.select2-container--default .select2-selection--single,
.input-group-text {
    font-size: 0.79rem !important;
}

.form-control {
    padding: 7px 12px !important;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #95a7b8 !important;
    box-shadow: 0 0 0 3px rgba(125, 145, 168, 0.12) !important;
}

.form-group label,
.form-label {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: #617181 !important;
    letter-spacing: 0.35px;
}

.table {
    font-size: 0.78rem !important;
}

.table thead th {
    background: linear-gradient(135deg, #5f7288 0%, #70839a 100%) !important;
    color: #f6f8fa !important;
    font-size: 0.71rem !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
}

.table tbody td {
    padding: 9px 12px !important;
}

.table tbody tr:hover,
.table-striped tbody tr:nth-of-type(odd):hover {
    background: rgba(111, 136, 165, 0.055) !important;
}

.badge {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
}

.badge-primary, .badge.bg-primary     { background: linear-gradient(135deg,#7a90a8,#677d96) !important; }
.badge-success, .badge.bg-success     { background: linear-gradient(135deg,#83a78f,#71927d) !important; }
.badge-danger,  .badge.bg-danger      { background: linear-gradient(135deg,#c39494,#af7c7c) !important; }
.badge-warning, .badge.bg-warning     { background: linear-gradient(135deg,#ccb17f,#b49662) !important; color:#fff !important; }
.badge-info,    .badge.bg-info        { background: linear-gradient(135deg,#8aa9b1,#78979f) !important; }

.pagination .page-link {
    font-size: 0.77rem !important;
    padding: 4px 10px !important;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #748ca4, #617992) !important;
    border-color: #70879f !important;
    box-shadow: 0 4px 10px rgba(111,136,165,0.18) !important;
}

.alert {
    font-size: 0.79rem !important;
}

.modal-header {
    background: linear-gradient(135deg, #617388, #708399) !important;
}

.dropdown-menu {
    font-size: 0.79rem !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(111, 136, 165, 0.08) !important;
}

.nav-tabs .nav-link {
    font-size: 0.8rem !important;
}

.nav-tabs .nav-link.active {
    color: #5f7896 !important;
    border-color: transparent transparent #70849c !important;
}

.info-box-icon.bg-primary  { background: linear-gradient(135deg, #7b90a7, #687d95) !important; }
.info-box-icon.bg-success  { background: linear-gradient(135deg, #83a790, #71927d) !important; }
.info-box-icon.bg-danger   { background: linear-gradient(135deg, #c39494, #ae7c7c) !important; }
.info-box-icon.bg-warning  { background: linear-gradient(135deg, #ccb180, #b49663) !important; }
.info-box-icon.bg-info     { background: linear-gradient(135deg, #8aa9b1, #76949d) !important; }
.info-box-icon.bg-dark     { background: linear-gradient(135deg, #667483, #546271) !important; }

#notificationCount {
    background: linear-gradient(135deg, #c39494, #ae7c7c) !important;
}

/* ============================================================
   PAGE COMPOSITION SYSTEM
   ============================================================ */
.page-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fdfefe 0%, #f3f6f8 50%, #edf2f5 100%);
    border: 1px solid rgba(108, 126, 145, 0.12);
    border-radius: 22px;
    padding: 24px 26px;
    box-shadow: var(--shadow-md);
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(125, 145, 168, 0.14) 0%, rgba(125, 145, 168, 0) 72%);
    pointer-events: none;
}

.page-kicker {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: #7f8ea0;
    font-weight: 700;
    margin-bottom: 6px;
}

.page-title-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.page-title {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.15;
    font-weight: 700;
    color: #324152;
}

.page-subtitle {
    margin: 8px 0 0;
    font-size: 0.84rem;
    color: #708090;
    max-width: 820px;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(108, 126, 145, 0.14);
    border-radius: 999px;
    color: #5f7285;
    font-size: 0.77rem;
    font-weight: 600;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.toolbar-card,
.content-card,
.table-card,
.form-card,
.auth-card {
    background: #fff;
    border: 1px solid rgba(108, 126, 145, 0.10);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
}

.toolbar-card {
    padding: 16px 18px;
}

.toolbar-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

.toolbar-grow {
    flex: 1 1 240px;
}

.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.stat-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
    border: 1px solid rgba(108, 126, 145, 0.10);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: var(--shadow-md);
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 106px;
}

.stat-card .icon-circle {
    width: 50px;
    height: 50px;
    font-size: 1rem;
    flex: 0 0 auto;
}

.stat-copy {
    min-width: 0;
}

.stat-copy .stat-label {
    display: block;
    margin-bottom: 7px;
}

.stat-copy .stat-number {
    display: block;
    font-size: 1.35rem !important;
}

.section-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 16px 18px 0;
}

.section-card-title {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 700;
    color: #334255;
}

.section-card-subtitle {
    margin: 4px 0 0;
    font-size: 0.76rem;
    color: #8492a0;
}

.table-card .table-responsive,
.content-card .table-responsive {
    padding: 0 18px 18px;
}

.table-card .card-body,
.content-card .card-body,
.form-card .card-body {
    padding: 18px;
}

.table-card .card-footer,
.content-card .card-footer {
    padding: 14px 18px;
}

.empty-state {
    padding: 28px 18px;
    text-align: center;
    color: #8190a0;
    font-size: 0.82rem;
}

.list-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.tag-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(125, 145, 168, 0.08);
    color: #607183;
    font-size: 0.77rem;
    font-weight: 600;
}

.numbered-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.numbered-pager-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: #7d8c9a;
    font-size: 0.77rem;
}

.numbered-pager-meta strong {
    color: #495b6d;
    font-weight: 700;
}

.numbered-pager-list {
    gap: 4px;
}

.numbered-pager-list .page-link {
    min-width: 34px;
    text-align: center;
}

.feedback-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.app-feedback {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid rgba(108, 126, 145, 0.10) !important;
    border-left-width: 4px !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    box-shadow: var(--shadow-sm) !important;
}

.app-feedback-icon {
    font-size: 0.95rem;
    margin-top: 2px;
}

.app-feedback-copy {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.81rem;
    line-height: 1.55;
}

.empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 18px;
    color: #8291a0;
    text-align: center;
}

.empty-state-card.compact-empty-state {
    padding: 18px 14px;
}

.empty-state-card i {
    font-size: 1.25rem;
    color: #93a1af;
}

.form-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.form-page-grid.single-column {
    grid-template-columns: minmax(0, 1fr);
}

.form-card-body {
    padding: 0 0 8px;
}

.form-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.form-section-grid .form-group.full-span,
.form-section-grid .full-span,
.form-group-span-2 {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.form-hint {
    color: #8b98a5;
    font-size: 0.75rem;
    margin-top: 4px;
}

.chart-card .card-body {
    padding-top: 10px !important;
}

/* ============================================================
   AUTH EXPERIENCE
   ============================================================ */
body.auth-page {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--auth-bg-c, #dbeafe) 62%, transparent), transparent 32%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 28%),
        linear-gradient(135deg, var(--auth-bg-a, #eff6ff) 0%, var(--auth-bg-b, #ecfeff) 48%, var(--bg-app) 100%);
    color: var(--auth-strong, #435262);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(360px, 460px);
}

.auth-aside {
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--auth-strong, #324152);
}

.auth-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-primary-light) 0%, var(--c-primary-dark) 100%);
    color: #fff;
    box-shadow: var(--shadow-primary);
}

.auth-theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--auth-surface, rgba(255,255,255,0.72));
    border: 1px solid var(--auth-surface-border, rgba(37,99,235,0.08));
    box-shadow: var(--shadow-sm);
}

.auth-theme-chip {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.85);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.08);
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
    opacity: 0.72;
}

.auth-theme-chip[data-theme="blue"] { background: linear-gradient(135deg, #2563eb, #38bdf8); }
.auth-theme-chip[data-theme="green"] { background: linear-gradient(135deg, #0f766e, #22c55e); }
.auth-theme-chip[data-theme="black"] { background: linear-gradient(135deg, #111827, #475569); }
.auth-theme-chip[data-theme="normal"] { background: linear-gradient(135deg, #64748b, #94a3b8); }

.auth-theme-chip.is-active,
.auth-theme-chip:hover {
    transform: scale(1.08);
    opacity: 1;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary-light) 26%, white);
}

.auth-copy {
    max-width: 560px;
}

.auth-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--auth-muted, #7d8d9e) 92%, white);
    font-weight: 700;
    margin-bottom: 14px;
}

.auth-title {
    margin: 0;
    font-size: 2.25rem;
    line-height: 1.05;
    color: var(--auth-strong, #314051);
    font-weight: 700;
}

.auth-lead {
    margin-top: 18px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--auth-muted, #6f7f90);
}

.auth-feature-list {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.auth-feature {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--auth-surface, rgba(255,255,255,0.66));
    border: 1px solid var(--auth-surface-border, rgba(108, 126, 145, 0.10));
    box-shadow: var(--shadow-sm);
}

.auth-feature strong {
    display: block;
    color: var(--auth-strong, #3a4959);
    font-size: 0.84rem;
}

.auth-feature span {
    display: block;
    margin-top: 3px;
    color: var(--auth-muted, #7b8897);
    font-size: 0.77rem;
}

.auth-panel {
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 430px;
    padding: 24px;
    border-radius: 24px;
    background: var(--auth-card-bg, rgba(255,255,255,0.86));
    border: 1px solid var(--auth-card-border, rgba(37,99,235,0.10));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.12);
}

.auth-card-header {
    margin-bottom: 18px;
}

.auth-card-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--auth-strong, #324152);
}

.auth-card-subtitle {
    margin: 8px 0 0;
    color: var(--auth-muted, #7a8898);
    font-size: 0.82rem;
}

.auth-card .login-box-msg {
    color: var(--auth-muted, #6f7f90);
    font-size: 0.82rem;
    padding: 0;
    margin-bottom: 16px;
}

.auth-card .card-footer,
.auth-links {
    border-top: 1px solid rgba(108, 126, 145, 0.10);
    margin-top: 18px;
    padding-top: 16px;
}

.auth-links a,
.auth-card .card-footer a {
    color: color-mix(in srgb, var(--c-primary) 72%, white 8%);
    font-size: 0.79rem;
    font-weight: 600;
}

.auth-links a:hover,
.auth-card .card-footer a:hover {
    color: var(--c-primary-dark);
    text-decoration: none;
}

.auth-footer-note {
    margin-top: 28px;
    font-size: 0.76rem;
    color: color-mix(in srgb, var(--auth-muted, #95a1ad) 84%, white);
}

.auth-note-card,
.auth-support-card,
.auth-success-panel {
    border-radius: 18px;
    border: 1px solid var(--auth-surface-border, rgba(108, 126, 145, 0.10));
    background: var(--auth-surface, rgba(255,255,255,0.68));
    box-shadow: var(--shadow-sm);
}

.auth-note-card {
    margin-top: 18px;
    padding: 16px 18px;
}

.auth-note-card strong,
.auth-support-card strong {
    display: block;
    color: var(--auth-strong, #324152);
    font-size: 0.84rem;
    margin-bottom: 6px;
}

.auth-note-card p,
.auth-support-card p,
.auth-success-panel p {
    margin: 0;
    color: var(--auth-muted, #6f7f90);
    font-size: 0.79rem;
    line-height: 1.65;
}

.auth-intro-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-primary-light) 10%, white 88%);
    color: var(--c-primary-dark);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.auth-form-stack {
    display: grid;
    gap: 16px;
}

.auth-label-row,
.auth-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.auth-input-shell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255,255,255,0.62);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.auth-input-shell:focus-within {
    border-color: color-mix(in srgb, var(--c-primary-light) 68%, white);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary-light) 14%, transparent);
}

.auth-input-icon {
    color: var(--c-primary);
    font-size: 0.88rem;
}

.auth-input-shell .form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: auto !important;
    color: var(--auth-strong, #324152) !important;
}

.auth-input-shell .form-control::placeholder {
    color: color-mix(in srgb, var(--auth-muted, #7a8898) 82%, white);
}

.auth-inline-alert {
    margin: 0;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(220, 38, 38, 0.12);
    background: rgba(254, 242, 242, 0.92);
    color: #b91c1c;
    font-size: 0.78rem;
    line-height: 1.55;
}

.auth-check .form-check-input {
    margin-top: 0.15rem;
}

.auth-check .form-check-label,
.auth-microcopy {
    font-size: 0.77rem;
    color: var(--auth-muted, #6f7f90);
}

.auth-submit-btn {
    min-height: 48px;
    border-radius: 16px !important;
    font-weight: 700 !important;
}

.auth-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.auth-highlight-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255,255,255,0.58);
    color: var(--auth-muted, #6f7f90);
    font-size: 0.72rem;
    font-weight: 600;
}

.auth-highlight-item i {
    color: var(--c-primary);
    font-size: 0.76rem;
}

.auth-password-toggle {
    border: none;
    background: transparent;
    color: #94a3b8;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color var(--t-fast), background var(--t-fast);
}

.auth-password-toggle:hover {
    color: var(--c-primary);
    background: rgba(148, 163, 184, 0.12);
}

.auth-trust-strip {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.71rem;
    color: color-mix(in srgb, var(--auth-muted, #7a8898) 90%, white);
}

.auth-trust-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.auth-trust-strip i {
    color: var(--c-primary);
}

.auth-support-card {
    margin-top: 18px;
    padding: 16px 18px;
}

.auth-support-card a {
    display: inline-block;
    margin-top: 10px;
    color: var(--c-primary);
    font-weight: 700;
    font-size: 0.79rem;
}

.auth-success-panel {
    padding: 22px 20px;
    text-align: center;
}

.auth-success-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-primary-light), var(--c-secondary));
    color: #fff;
    box-shadow: var(--shadow-primary);
}

.auth-success-panel h3 {
    margin: 0 0 8px;
    color: var(--auth-strong, #324152);
    font-size: 1rem;
    font-weight: 700;
}

html[data-app-theme="black"] .auth-input-shell {
    background: rgba(15,23,42,0.48);
    border-color: rgba(148,163,184,0.16);
}

html[data-app-theme="black"] .auth-intro-pill,
html[data-app-theme="black"] .auth-inline-alert {
    background: rgba(15,23,42,0.68);
}

html[data-app-theme="black"] .auth-inline-alert {
    color: #fecaca;
    border-color: rgba(248,113,113,0.22);
}

@media (max-width: 991px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-aside {
        padding: 30px 22px 8px;
    }

    .auth-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-panel {
        padding: 12px 16px 28px;
    }

    .auth-title {
        font-size: 1.7rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .page-hero,
    .toolbar-card,
    .table-card .card-body,
    .content-card .card-body,
    .form-card .card-body,
    .auth-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .page-title-row,
    .list-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-actions,
    .toolbar-form,
    .toolbar-actions {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .auth-link-row,
    .auth-label-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-highlight-grid {
        grid-template-columns: 1fr;
    }

    .form-section-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   INFO-BOX ICON GRADIENT BACKGROUNDS
   ============================================================ */
.info-box-icon.bg-primary  { background: linear-gradient(135deg, #7c3aed, #4f46e5) !important; }
.info-box-icon.bg-success  { background: linear-gradient(135deg, #10b981, #059669) !important; }
.info-box-icon.bg-danger   { background: linear-gradient(135deg, #f87171, #dc2626) !important; }
.info-box-icon.bg-warning  { background: linear-gradient(135deg, #fbbf24, #d97706) !important; }
.info-box-icon.bg-info     { background: linear-gradient(135deg, #22d3ee, #0891b2) !important; }
.info-box-icon.bg-dark     { background: linear-gradient(135deg, #374151, #1f2937) !important; }
.info-box-icon.bg-secondary{ background: linear-gradient(135deg, #94a3b8, #64748b) !important; }

/* ============================================================
   DASHBOARD GREETING / HEADER BAND
   ============================================================ */
.dashboard-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4f46e5 100%);
    border-radius: var(--r-xl);
    padding: 28px 32px;
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 8px 30px rgba(79,70,229,0.35);
}
.dashboard-hero h2 { font-weight: 800; font-size: 1.5rem; margin: 0 0 4px; }
.dashboard-hero p  { opacity: 0.75; margin: 0; font-size: 0.88rem; }

/* ============================================================
   TABLE ACTION BUTTONS (compact icon buttons in table rows)
   ============================================================ */
.table .btn-xs, .table .btn-sm {
    padding: 3px 9px !important;
    font-size: 0.74rem !important;
    border-radius: var(--r-sm) !important;
    line-height: 1.4;
}

/* ============================================================
   SEARCH / FILTER CARD BAND
   ============================================================ */
.filter-band {
    background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(79,70,229,0.04));
    border: 1.5px solid rgba(124,58,237,0.12);
    border-radius: var(--r-xl);
    padding: 18px 22px;
    margin-bottom: 18px;
}

/* ============================================================
   STAT NUMBER TYPOGRAPHY
   ============================================================ */
.stat-number {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 1 !important;
}
.stat-label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #9ca3af !important;
}

/* ============================================================
   ICON CIRCLE HELPERS
   ============================================================ */
.icon-circle {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.icon-circle-primary  { background: rgba(124,58,237,0.12); color: #7c3aed; }
.icon-circle-success  { background: rgba(16,185,129,0.12);  color: #10b981; }
.icon-circle-danger   { background: rgba(239,68,68,0.12);   color: #ef4444; }
.icon-circle-warning  { background: rgba(245,158,11,0.12);  color: #f59e0b; }
.icon-circle-info     { background: rgba(6,182,212,0.12);   color: #06b6d4; }

/* ============================================================
   PAGE SECTION TITLE
   ============================================================ */
.section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

/* ============================================================
   PULSE DOT (status indicator)
   ============================================================ */
.pulse-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    display: inline-block;
}
.pulse-dot.online  { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.25); animation: pulseGlow 1.8s infinite; }
.pulse-dot.offline { background: #ef4444; }
.pulse-dot.warning { background: #f59e0b; }

/* ============================================================
   NOTIFICATION BADGE OVERRIDE
   ============================================================ */
#notificationCount {
    background: linear-gradient(135deg, #f87171, #dc2626) !important;
    font-size: 0.60rem !important;
    font-weight: 700 !important;
    border-radius: var(--r-pill) !important;
    padding: 2px 5px !important;
    min-width: 16px;
    text-align: center;
}

/* ============================================================
   DARK MODE TOGGLE ICON
   ============================================================ */
#darkModeToggle { color: #6b7280 !important; }
#darkModeToggle:hover { color: var(--c-primary) !important; }
#darkModeToggle[data-theme="normal"] i { color: #64748b; }
#darkModeToggle[data-theme="normal"] .fa-circle-half-stroke { color: #64748b; }
#darkModeToggle[data-theme="blue"] i { color: #2563eb; }
#darkModeToggle[data-theme="green"] i { color: #0f766e; }
#darkModeToggle[data-theme="black"] i { color: #111827; }

.header-font-selector {
    min-width: 118px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(255,255,255,0.92);
    color: #475569;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0 28px 0 10px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.header-font-size-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255,255,255,0.9);
    box-shadow: var(--shadow-sm);
}

.header-font-size-btn {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 7px;
    background: rgba(148, 163, 184, 0.14);
    color: #475569;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}

.header-font-size-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-primary-light) 18%, white);
    color: var(--c-primary-dark);
}

.header-font-size-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.header-font-size-value {
    min-width: 38px;
    text-align: center;
    color: #64748b;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.header-font-selector:focus {
    border-color: var(--c-primary-light);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary-light) 20%, transparent);
    outline: none;
}

html[data-app-theme="black"] .header-font-selector {
    background: rgba(17,24,39,0.88);
    border-color: rgba(148,163,184,0.25);
    color: #e2e8f0;
}

html[data-app-theme="black"] .header-font-size-controls {
    background: rgba(17,24,39,0.88);
    border-color: rgba(148,163,184,0.25);
}

html[data-app-theme="black"] .header-font-size-value {
    color: #cbd5e1;
}

html[data-app-theme="black"] .header-font-size-btn {
    background: rgba(148,163,184,0.18);
    color: #e2e8f0;
}