/* ============================================================
   MODERN THEME OVERLAY — v1 (2025)
   A fresh, Tabler/Stripe-inspired skin applied on top of pcoded.
   No HTML changes required. Respects [data-theme="dark"].
   ============================================================ */

/* ---- 1. Google Fonts + root variables ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

:root {
    --mt-font: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mt-font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;

    --mt-primary:      #4f46e5;    /* indigo-600 */
    --mt-primary-50:   #eef2ff;
    --mt-primary-600:  #4338ca;
    --mt-accent:       #6366f1;

    --mt-success: #10b981;
    --mt-info:    #0ea5e9;
    --mt-warning: #f59e0b;
    --mt-danger:  #ef4444;

    --mt-bg:        #f4f6fb;
    --mt-surface:   #ffffff;
    --mt-border:    #e5e7eb;
    --mt-text:      #111827;
    --mt-text-muted:#6b7280;
    --mt-sidebar-bg: linear-gradient(180deg,#1e293b 0%,#0f172a 100%);
    --mt-sidebar-text: #cbd5e1;
    --mt-sidebar-active: #4f46e5;

    --mt-radius:      12px;
    --mt-radius-sm:    8px;
    --mt-shadow-sm: 0 1px 2px 0 rgba(16,24,40,.06);
    --mt-shadow:    0 1px 3px 0 rgba(16,24,40,.08), 0 1px 2px -1px rgba(16,24,40,.05);
    --mt-shadow-lg: 0 10px 25px -5px rgba(16,24,40,.08), 0 8px 10px -6px rgba(16,24,40,.04);
}
html[data-theme="dark"] {
    --mt-bg:       #0f1419;
    --mt-surface:  #1a1f2b;
    --mt-border:   #2a3040;
    --mt-text:     #e4e6eb;
    --mt-text-muted:#8b93a3;
    --mt-primary-50: #1e1b4b;
}

/* ---- 2. Base body/typography ---- */
body { font-family: var(--mt-font) !important; color: var(--mt-text); background: var(--mt-bg) !important; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11","ss01"; }
h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6 { font-family: var(--mt-font-heading) !important; font-weight: 700; letter-spacing: -.01em; }

.pcoded-content, .pcoded-main-container, .pcoded-inner-content { background: var(--mt-bg) !important; }

/* ---- 3. Cards — flat modern style ---- */
.card {
    border: 1px solid var(--mt-border) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: var(--mt-shadow-sm) !important;
    transition: box-shadow .2s ease, transform .2s ease !important;
}
/* Only tint plain cards white — cards with utility color classes OR inline bg keep their own */
.card:not(.bg-c-blue):not(.bg-c-green):not(.bg-c-red):not(.bg-c-yellow):not(.bg-c-purple):not(.theme-bg):not(.theme-bg2):not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-secondary):not([class*="bg-gradient"]):not([style*="background"]):not([style*="gradient"]) {
    background: var(--mt-surface) !important;
}
.card:hover { box-shadow: var(--mt-shadow) !important; transform: translateY(-1px); }
/* Only neutralise card-headers that DON'T declare their own bg/gradient */
.card .card-header:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-secondary):not(.bg-light):not([class*="bg-gradient"]):not([class*="bg-c-"]):not([style*="background"]) {
    background: transparent !important;
    border-bottom: 1px solid var(--mt-border) !important;
    padding: 1rem 1.25rem !important;
}
.card .card-header { padding: 1rem 1.25rem; }
.card .card-header h5, .card .card-header h4 { margin: 0; font-size: 1rem; font-weight: 700; }

/* Accessibility — guarantee contrast on coloured headers */
.card .card-header.bg-primary,
.card .card-header.bg-success,
.card .card-header.bg-info,
.card .card-header.bg-danger,
.card .card-header.bg-dark,
.card .card-header.bg-secondary { color: #fff !important; }
.card .card-header.bg-warning,
.card .card-header.bg-light     { color: #1a1a2e !important; }
.card .card-header.bg-primary   { background:#5e72e4 !important; }
.card .card-header.bg-success   { background:#2dce89 !important; }
.card .card-header.bg-info      { background:#11cdef !important; }
.card .card-header.bg-warning   { background:#fb6340 !important; }
.card .card-header.bg-danger    { background:#f5365c !important; }
.card .card-header.bg-dark      { background:#212529 !important; }
.card .card-header.bg-secondary { background:#6c757d !important; }

/* Accessibility — enforce readable text on coloured utility backgrounds everywhere */
.bg-primary, .bg-success, .bg-info, .bg-danger, .bg-dark, .bg-secondary { color:#fff; }
.bg-warning, .bg-light { color:#1a1a2e; }
.card .card-body, .card .card-block { padding: 1.25rem !important; }

/* Preserve pcoded "bitcoin-wallet" coloured KPI cards (text-white stays visible) */
.card.bg-c-blue   { background: #04a9f5 !important; }
.card.bg-c-green  { background: #1de9b6 !important; }
.card.bg-c-red    { background: #f44236 !important; }
.card.bg-c-yellow { background: #f4c22b !important; }
.card.bg-c-purple { background: #a389d4 !important; }
.card.theme-bg    { background: linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%) !important; }
.card.theme-bg2   { background: linear-gradient(-135deg, #899fd4 0%, #a389d4 100%) !important; }
.card.bitcoin-wallet .card-block,
.card.bitcoin-wallet .card-body { color: #fff !important; }
.card.bitcoin-wallet h2,
.card.bitcoin-wallet h5 { color: #fff !important; }
.card.bitcoin-wallet .card-block { position: relative; overflow: hidden; padding: 1.25rem 1.5rem !important; }
.card.bitcoin-wallet i { opacity: .35; }

/* ---- 4. Buttons ---- */
.btn { border-radius: 8px !important; font-weight: 600 !important; padding: .5rem 1rem !important; transition: all .15s ease !important; letter-spacing: .01em; }
.btn-sm { padding: .25rem .6rem !important; font-size: .8rem !important; }
.btn-xs { padding: .125rem .5rem !important; font-size: .72rem !important; border-radius: 6px !important; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--mt-primary) !important; border-color: var(--mt-primary) !important; }
.btn-primary:hover { background: var(--mt-primary-600) !important; border-color: var(--mt-primary-600) !important; box-shadow: 0 4px 12px rgba(79,70,229,.3) !important; }
.btn-success { background: var(--mt-success) !important; border-color: var(--mt-success) !important; }
.btn-info    { background: var(--mt-info) !important; border-color: var(--mt-info) !important; }
.btn-warning { background: var(--mt-warning) !important; border-color: var(--mt-warning) !important; color:#fff !important; }
.btn-danger  { background: var(--mt-danger) !important; border-color: var(--mt-danger) !important; }
.btn-outline-primary { color: var(--mt-primary) !important; border-color: var(--mt-primary) !important; }
.btn-outline-primary:hover { background: var(--mt-primary) !important; color: #fff !important; }

/* ---- 5. Tables ---- */
.table { color: var(--mt-text) !important; font-size: .875rem; }
.table thead th { background: transparent !important; border-bottom: 1px solid var(--mt-border) !important; border-top: none !important; font-weight: 600 !important; font-size: .72rem !important; text-transform: uppercase; letter-spacing: .05em; color: var(--mt-text-muted) !important; padding: .75rem 1rem !important; }
.table tbody td { border-top: 1px solid var(--mt-border) !important; padding: .85rem 1rem !important; vertical-align: middle; }
.table-hover tbody tr { transition: background-color .12s ease !important; }
.table-hover tbody tr:hover { background: var(--mt-primary-50) !important; }

/* ---- 6. Forms ---- */
.form-control, .form-select, select.form-control, input.form-control, textarea.form-control {
    border-radius: 8px !important;
    border: 1px solid var(--mt-border) !important;
    padding: .55rem .85rem !important;
    font-size: .875rem !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    background: var(--mt-surface) !important;
    color: var(--mt-text) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--mt-primary) !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important;
    outline: none;
}
label { font-weight: 600; font-size: .825rem; color: var(--mt-text); margin-bottom: .4rem; }

/* ---- 7. Badges ---- */
.badge { font-weight: 600 !important; padding: .35em .65em !important; border-radius: 6px !important; font-size: .72rem !important; letter-spacing: .02em; }
.badge-primary   { background: var(--mt-primary-50) !important; color: var(--mt-primary) !important; }
.badge-success   { background: #d1fae5 !important; color: #065f46 !important; }
.badge-info      { background: #e0f2fe !important; color: #075985 !important; }
.badge-warning   { background: #fef3c7 !important; color: #92400e !important; }
.badge-danger    { background: #fee2e2 !important; color: #991b1b !important; }
.badge-secondary { background: #f3f4f6 !important; color: #374151 !important; }
.badge-light     { background: #f9fafb !important; color: #374151 !important; }
html[data-theme="dark"] .badge-success { background: #064e3b !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .badge-info    { background: #164e63 !important; color: #7dd3fc !important; }
html[data-theme="dark"] .badge-warning { background: #78350f !important; color: #fcd34d !important; }
html[data-theme="dark"] .badge-danger  { background: #7f1d1d !important; color: #fca5a5 !important; }
html[data-theme="dark"] .badge-secondary,
html[data-theme="dark"] .badge-light   { background: #2a3040 !important; color: #cbd5e1 !important; }

/* ---- 8. Sidebar (pcoded-navbar) — modern dark, high-contrast overrides ---- */
/* Wrapper */
.pcoded-navbar,
.pcoded-navbar.active-lightblue,
.pcoded-navbar.navbar-lightblue,
.pcoded-navbar[class*="navbar-image"] {
    background: var(--mt-sidebar-bg) !important;
    box-shadow: 0 0 24px rgba(0,0,0,.08) !important;
}
.pcoded-navbar .navbar-wrapper { background: transparent !important; }
.pcoded-navbar .header-logo { background: transparent !important; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); }

/* Section captions (e.g. Navigation / Account) */
.pcoded-navbar .pcoded-menu-caption,
.pcoded-navbar .pcoded-menu-caption > label {
    color: #94a3b8 !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Top-level nav links — high specificity to beat pcoded skins */
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li.nav-item > a,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar > li > a,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li > a.nav-link {
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    margin: 2px 12px !important;
    padding: .6rem .85rem !important;
    transition: all .12s ease !important;
    font-weight: 500 !important;
}

/* Text and icons inside links — force bright colors */
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li > a .pcoded-mtext,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-mtext { color: #e2e8f0 !important; opacity: 1 !important; }
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon i,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li > a i { color: #cbd5e1 !important; opacity: 1 !important; }

/* Hasmenu caret indicator */
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a:after { color: #94a3b8 !important; opacity: 1 !important; }

/* Hover */
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li > a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
}
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li > a:hover .pcoded-mtext,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li > a:hover .pcoded-micon i { color: #ffffff !important; }

/* Active / open */
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar > li.active > a,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li.nav-item.active > a,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar li.nav-item.pcoded-trigger > a {
    background: var(--mt-sidebar-active) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79,70,229,.4) !important;
}
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar > li.active > a .pcoded-mtext,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar > li.active > a .pcoded-micon i,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a .pcoded-mtext,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a .pcoded-micon i { color: #ffffff !important; }

/* Submenu */
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu {
    background: rgba(0,0,0,.2) !important;
    border-radius: 8px !important;
    margin: 0 12px !important;
    padding: 4px 0 !important;
}
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu li a {
    color: #cbd5e1 !important;
    padding: .45rem 2.2rem !important;
    font-size: .84rem !important;
    border-radius: 6px !important;
    margin: 2px 6px !important;
}
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu li.active > a,
.pcoded-navbar.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu li > a:hover {
    background: rgba(255,255,255,.1) !important;
    color: #ffffff !important;
}

/* Mobile toggle bars inside sidebar */
.pcoded-navbar .mobile-menu span,
.pcoded-navbar .mobile-menu span:before,
.pcoded-navbar .mobile-menu span:after { background: #cbd5e1 !important; }

/* ---- 9. Top navbar ---- */
.pcoded-header { background: var(--mt-surface) !important; border-bottom: 1px solid var(--mt-border) !important; box-shadow: var(--mt-shadow-sm) !important; }
.pcoded-header .navbar-nav > li > a { color: var(--mt-text) !important; }
.pcoded-header .mobile-menu span,
.pcoded-header .mobile-menu span:before,
.pcoded-header .mobile-menu span:after { background: var(--mt-text-muted) !important; }
.pcoded-header .full-screen i,
.pcoded-header .search-ic,
.pcoded-header #darkModeIcon { color: var(--mt-text) !important; font-size: 1.15rem; }
.pcoded-header .dropdown-toggle,
.pcoded-header .dropdown-toggle i { color: var(--mt-text) !important; }

/* Top quick-access circled icons — keep blue, ensure white icon is visible */
.pcoded-header .navbar-nav > li span.top-icon a,
.pcoded-header .navbar-nav > li span.top-icon a i {
    color: #ffffff !important;
}
.pcoded-header .navbar-nav > li span.top-icon a {
    background: var(--mt-primary) !important;
    border: 2px solid var(--mt-primary) !important;
    box-shadow: 0 2px 6px rgba(79,70,229,.25);
    transition: transform .12s ease, box-shadow .12s ease;
}
.pcoded-header .navbar-nav > li span.top-icon a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(79,70,229,.35);
    background: var(--mt-primary-600) !important;
}

/* Search input in header */
.pcoded-header .search-bar input,
.pcoded-header input[type="search"] {
    background: #f3f4f6 !important;
    border: 1px solid var(--mt-border) !important;
    color: var(--mt-text) !important;
    border-radius: 999px !important;
    padding-inline: 1rem;
}

/* ---- 10. Breadcrumb / page header ---- */
.page-header { background: transparent !important; border-bottom: none !important; margin-bottom: 1rem; }
.page-header .page-header-title h5 { font-size: 1.4rem !important; font-weight: 700; letter-spacing: -.02em; }
.breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; font-size: .82rem; }
.breadcrumb-item { color: var(--mt-text-muted); }

/* ---- 11. Tabs / pills ---- */
.nav-pills .nav-link { border-radius: 8px !important; padding: .5rem 1rem !important; color: var(--mt-text-muted) !important; font-weight: 600 !important; }
.nav-pills .nav-link.active { background: var(--mt-primary) !important; color: #fff !important; }
.nav-tabs { border-bottom: 1px solid var(--mt-border) !important; }
.nav-tabs .nav-link { border: none !important; color: var(--mt-text-muted) !important; font-weight: 600 !important; padding: .75rem 1.1rem !important; }
.nav-tabs .nav-link.active { color: var(--mt-primary) !important; border-bottom: 2px solid var(--mt-primary) !important; background: transparent !important; }

/* ---- 12. Alerts ---- */
.alert { border-radius: var(--mt-radius) !important; border: 1px solid transparent !important; padding: 1rem 1.25rem; }
.alert-success { background: #ecfdf5 !important; color: #065f46 !important; border-color: #a7f3d0 !important; }
.alert-info    { background: #eff6ff !important; color: #1e3a8a !important; border-color: #bfdbfe !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }
.alert-danger  { background: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important; }

/* ---- 13. Dashboard stat cards ---- */
.card .card-body h3, .card .card-body h2 { font-weight: 800; letter-spacing: -.02em; }
.card .card-body i.f-30, .card .card-body i.f-40 { padding: .75rem; border-radius: 10px; background: var(--mt-primary-50); color: var(--mt-primary) !important; }
.card .card-body i.text-success { background: #d1fae5; color: var(--mt-success) !important; }
.card .card-body i.text-info    { background: #e0f2fe; color: var(--mt-info) !important; }
.card .card-body i.text-warning { background: #fef3c7; color: var(--mt-warning) !important; }
.card .card-body i.text-danger  { background: #fee2e2; color: var(--mt-danger) !important; }

/* ---- 14. Pagination ---- */
.pagination .page-link { border: 1px solid var(--mt-border) !important; color: var(--mt-text) !important; border-radius: 8px !important; margin: 0 2px; min-width: 36px; text-align: center; }
.pagination .page-item.active .page-link { background: var(--mt-primary) !important; border-color: var(--mt-primary) !important; color: #fff !important; }

/* ---- 15. Modals ---- */
.modal-content { border-radius: var(--mt-radius) !important; border: none !important; box-shadow: var(--mt-shadow-lg) !important; }
.modal-header { border-bottom: 1px solid var(--mt-border) !important; padding: 1.25rem 1.5rem; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--mt-border) !important; padding: 1rem 1.5rem; }

/* ---- 16. Dropdowns ---- */
.dropdown-menu { border: 1px solid var(--mt-border) !important; border-radius: 10px !important; box-shadow: var(--mt-shadow-lg) !important; padding: .5rem !important; }
.dropdown-item { border-radius: 6px !important; padding: .5rem .75rem !important; font-weight: 500 !important; }
.dropdown-item:hover { background: var(--mt-primary-50) !important; color: var(--mt-primary) !important; }

/* ---- 17. Utilities ---- */
.text-primary { color: var(--mt-primary) !important; }
.text-success { color: var(--mt-success) !important; }
.text-danger  { color: var(--mt-danger) !important; }
.text-warning { color: var(--mt-warning) !important; }
.text-info    { color: var(--mt-info) !important; }
hr { border-color: var(--mt-border) !important; opacity: .7; }

/* ---- 18. DataTables tweaks ---- */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { border-radius: 8px !important; border: 1px solid var(--mt-border) !important; padding: .35rem .7rem !important; }

/* ---- 19. Animations (subtle) ---- */
@keyframes mt-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card, .alert { animation: mt-fade-up .28s ease both; }

/* ---- 20. Scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7cad1; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #9ea3ad; background-clip: padding-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #404756; background-clip: padding-box; }

/* ---- 21. President portal flourish ---- */
body.president-mode .card-body h2,
body.president-mode .card-body h1 { background: linear-gradient(135deg, var(--mt-primary) 0%, #8b5cf6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- 22. Dark-mode inversions that need specificity ---- */
html[data-theme="dark"] body { background: var(--mt-bg) !important; color: var(--mt-text) !important; }
html[data-theme="dark"] .card { background: var(--mt-surface) !important; border-color: var(--mt-border) !important; }
html[data-theme="dark"] .pcoded-header { background: var(--mt-surface) !important; border-color: var(--mt-border) !important; }
html[data-theme="dark"] .table tbody td { border-top-color: var(--mt-border) !important; }
html[data-theme="dark"] .table-hover tbody tr:hover { background: rgba(79,70,229,.08) !important; }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background: #151a24 !important; border-color: var(--mt-border) !important; color: var(--mt-text) !important; }

/* ---- 23. Skeleton effect for loading states (optional utility) ---- */
.mt-skeleton { background: linear-gradient(90deg,#eee,#f5f5f5,#eee); background-size: 200% 100%; animation: mt-sk 1.2s infinite linear; border-radius: 4px; }
@keyframes mt-sk { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ---- 24. Feather icon alignment ---- */
.feather { vertical-align: -3px; }

/* ---- 25. Accessibility — WCAG AA contrast enforcement ---- */
/* Badges: ensure readable contrast on all utility colour backgrounds */
.badge.bg-primary, .badge.bg-success, .badge.bg-info, .badge.bg-danger, .badge.bg-dark, .badge.bg-secondary { color:#fff !important; }
.badge.bg-warning, .badge.bg-light { color:#1a1a2e !important; }

/* Muted/helper text — darker than Bootstrap default for AA compliance */
.text-muted { color:#55607a !important; }
html[data-theme="dark"] .text-muted { color:#9aa4bd !important; }

/* Form labels & helper text */
.form-label, label { color: var(--mt-text, #1a1a2e); font-weight: 500; }
.form-text { color:#55607a; }
html[data-theme="dark"] .form-label, html[data-theme="dark"] label { color:#e7ebf5 !important; }

/* Alerts — never have low-contrast text */
.alert { border-width:1px; }
.alert-info    { background:#e0f4fa !important; color:#084c61 !important; border-color:#b3e0ee !important; }
.alert-success { background:#e3f9ed !important; color:#0d5c2b !important; border-color:#b5ecc9 !important; }
.alert-warning { background:#fff4d6 !important; color:#7a4d00 !important; border-color:#ffd874 !important; }
.alert-danger  { background:#fde2e7 !important; color:#7a1330 !important; border-color:#f8b6c2 !important; }

/* Focus ring — visible keyboard focus for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid #4f46e5 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(79,70,229,.20) !important;
}

/* Select2 — ensure selected text is readable */
.select2-container--default .select2-selection--single .select2-selection__rendered { color:#1a1a2e !important; }
html[data-theme="dark"] .select2-container--default .select2-selection--single { background:#151a24 !important; border-color: var(--mt-border) !important; }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color:#e7ebf5 !important; }
.select2-dropdown { border-color: var(--mt-border) !important; }
.select2-results__option { color:#1a1a2e !important; }
.select2-results__option--highlighted[aria-selected] { background:#4f46e5 !important; color:#fff !important; }

/* Tables — header contrast */
.table thead th { color:#1a1a2e; font-weight:700; background:#f5f7fa; }
html[data-theme="dark"] .table thead th { color:#e7ebf5 !important; background:#1c2230 !important; }

/* Links — underline on hover for clarity */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Disabled form states — not invisible */
input:disabled, select:disabled, textarea:disabled, button:disabled {
    opacity: .65 !important;
    cursor: not-allowed;
}

/* ============================================================
   UMS KPI Cards (v3.1, 2026-04)
   Shared modern KPI card pattern across all portals.
   Markup:
     <div class="ums-kpi-grid">
        <a class="ums-kpi ums-kpi--blue" href="...">
            <div class="ums-kpi__top">
                <div>
                    <h3 class="ums-kpi__value">42</h3>
                    <span class="ums-kpi__label">Active Students</span>
                </div>
                <span class="ums-kpi__icon"><i class="feather icon-users"></i></span>
            </div>
            <div class="ums-kpi__hint"><span>View all</span><i class="feather icon-arrow-left"></i></div>
        </a>
     </div>
   ============================================================ */
.ums-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 1199px) { .ums-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .ums-kpi-grid { grid-template-columns: 1fr; } }

.ums-kpi {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 14px;
    padding: 20px 22px;
    text-decoration: none !important;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    overflow: hidden;
}
.ums-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -12px rgba(15,23,42,.18);
    border-color: transparent;
    color: inherit;
}
.ums-kpi__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}
.ums-kpi__icon {
    width: 52px; height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 22px;
    flex-shrink: 0;
}
.ums-kpi__icon i { font-size: 22px; line-height: 1; }
.ums-kpi__value {
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    color: #0f172a;
    margin: 0;
    letter-spacing: -.5px;
    word-break: break-all;
}
.ums-kpi__label {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 13.5px;
    font-weight: 500;
}
.ums-kpi__hint {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
    color: #64748b;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ums-kpi__hint i { font-size: 14px; opacity: .8; }

/* Color variants — soft tinted icons */
.ums-kpi--blue   .ums-kpi__icon { background: linear-gradient(135deg,#dbeafe,#bfdbfe); color:#1d4ed8; }
.ums-kpi--green  .ums-kpi__icon { background: linear-gradient(135deg,#d1fae5,#a7f3d0); color:#047857; }
.ums-kpi--amber  .ums-kpi__icon { background: linear-gradient(135deg,#fef3c7,#fde68a); color:#b45309; }
.ums-kpi--rose   .ums-kpi__icon { background: linear-gradient(135deg,#ffe4e6,#fecdd3); color:#be123c; }
.ums-kpi--violet .ums-kpi__icon { background: linear-gradient(135deg,#ede9fe,#ddd6fe); color:#6d28d9; }
.ums-kpi--cyan   .ums-kpi__icon { background: linear-gradient(135deg,#cffafe,#a5f3fc); color:#0e7490; }
.ums-kpi--slate  .ums-kpi__icon { background: linear-gradient(135deg,#e2e8f0,#cbd5e1); color:#334155; }
.ums-kpi--orange .ums-kpi__icon { background: linear-gradient(135deg,#ffedd5,#fed7aa); color:#c2410c; }

.ums-kpi--blue:hover   { background: linear-gradient(180deg,#fff,#f8fbff); }
.ums-kpi--green:hover  { background: linear-gradient(180deg,#fff,#f6fefa); }
.ums-kpi--amber:hover  { background: linear-gradient(180deg,#fff,#fffaf0); }
.ums-kpi--rose:hover   { background: linear-gradient(180deg,#fff,#fff5f7); }
.ums-kpi--violet:hover { background: linear-gradient(180deg,#fff,#faf8ff); }
.ums-kpi--cyan:hover   { background: linear-gradient(180deg,#fff,#f6fdff); }
.ums-kpi--slate:hover  { background: linear-gradient(180deg,#fff,#fafbfc); }
.ums-kpi--orange:hover { background: linear-gradient(180deg,#fff,#fffaf5); }

/* RTL flip the hint row */
[dir="rtl"] .ums-kpi__hint { flex-direction: row-reverse; }

/* Welcome / page header strip used with KPI grid */
.ums-welcome { padding: 4px 0 18px; }
.ums-welcome h4 { font-weight: 600; color: #0f172a; margin: 0; font-size: 22px; }
.ums-welcome p  { color: #64748b; margin: 4px 0 0; font-size: 14px; }

/* Dark mode tweak */
[data-theme="dark"] .ums-kpi {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .ums-kpi__value { color: #f1f5f9; }
[data-theme="dark"] .ums-kpi__label,
[data-theme="dark"] .ums-kpi__hint  { color: #94a3b8; }
[data-theme="dark"] .ums-kpi__hint  { border-top-color: #334155; }
[data-theme="dark"] .ums-welcome h4 { color: #f1f5f9; }
[data-theme="dark"] .ums-welcome p  { color: #94a3b8; }