/*
 * KLAS - Khomas Learner Admissions System
 * Brand colour overrides for the Konrix admin shell.
 *
 * Directorate of Education palette (Namibian national colours):
 *   Blue (primary):  #0C5BA8   official, trustworthy
 *   Navy (menus):    #08233F   deep institutional navy
 *   Green (accent):  #009543   Namibian flag green
 *   Gold (highlight):#F2A900   Namibian sun / accent
 *   Red (danger):    #D21034   Namibian flag red (kept for alerts)
 *
 * Konrix default primary is #3073F1 (blue). We remap primary to the
 * Directorate blue and use navy for the side menu and topbar.
 * Loaded AFTER app.min.css so these win.
 */

/* ========== Primary (Directorate blue #0C5BA8) ========== */
.bg-primary { --tw-bg-opacity: 1; background-color: rgb(12 91 168 / var(--tw-bg-opacity)) !important; }
.bg-primary\/5  { background-color: rgb(12 91 168 / 0.05) !important; }
.bg-primary\/10 { background-color: rgb(12 91 168 / 0.1) !important; }
.bg-primary\/20 { background-color: rgb(12 91 168 / 0.2) !important; }
.bg-primary\/25 { background-color: rgb(12 91 168 / 0.25) !important; }

.text-primary { --tw-text-opacity: 1; color: rgb(12 91 168 / var(--tw-text-opacity)) !important; }
.text-primary\/10 { color: rgb(12 91 168 / 0.1) !important; }
.text-primary\/25 { color: rgb(12 91 168 / 0.25) !important; }
.text-primary\/50 { color: rgb(12 91 168 / 0.5) !important; }
.text-primary\/75 { color: rgb(12 91 168 / 0.75) !important; }
.text-primary\/90 { color: rgb(12 91 168 / 0.9) !important; }

.border-primary { --tw-border-opacity: 1; border-color: rgb(12 91 168 / var(--tw-border-opacity)) !important; }
.from-primary { --tw-gradient-from: #0C5BA8 var(--tw-gradient-from-position) !important; }
.to-primary { --tw-gradient-to: #0C5BA8 var(--tw-gradient-to-position) !important; }
.ring-primary { --tw-ring-color: rgb(12 91 168 / 1) !important; }

.hover\:bg-primary:hover { background-color: rgb(12 91 168 / var(--tw-bg-opacity, 1)) !important; }
.hover\:text-primary:hover { color: rgb(12 91 168 / var(--tw-text-opacity, 1)) !important; }
.focus\:border-primary:focus { border-color: rgb(12 91 168 / var(--tw-border-opacity, 1)) !important; }
.focus\:ring-primary:focus { --tw-ring-color: rgb(12 91 168 / 0.5) !important; }

/* ========== Brand accent helpers (use in views) ========== */
.bg-klas-blue   { background-color: #0C5BA8 !important; }
.bg-klas-navy   { background-color: #08233F !important; }
.bg-klas-green  { background-color: #009543 !important; }
.bg-klas-gold   { background-color: #F2A900 !important; }
.text-klas-blue  { color: #0C5BA8 !important; }
.text-klas-navy  { color: #08233F !important; }
.text-klas-green { color: #009543 !important; }
.text-klas-gold  { color: #F2A900 !important; }
.border-klas-gold { border-color: #F2A900 !important; }

/* ========== Side menu - navy ========== */
html[data-menu-color=light] {
    --tw-menu-item-active-color: #0C5BA8;
    --tw-menu-item-active-bg: rgba(12, 91, 168, 0.1);
    --tw-menu-item-hover-color: #0C5BA8;
    --tw-menu-item-hover-bg: rgba(12, 91, 168, 0.08);
}
html[data-menu-color=dark],
html[data-mode=dark][data-menu-color=light] {
    --tw-menu-bg: #08233F;
    --tw-menu-item-active-color: #FFD15C;
    --tw-menu-item-active-bg: rgba(12, 91, 168, 0.35);
    --tw-menu-item-hover-color: #FFD15C;
    --tw-menu-item-hover-bg: rgba(12, 91, 168, 0.2);
}
html[data-menu-color=brand] {
    --tw-menu-bg: #08233F;
    --tw-menu-item-color: rgba(255, 255, 255, 0.65);
    --tw-menu-item-active-color: #fff;
    --tw-menu-item-active-bg: rgba(12, 91, 168, 0.55);
    --tw-menu-item-hover-color: #fff;
    --tw-menu-item-hover-bg: rgba(12, 91, 168, 0.35);
}

/* ========== Topbar ========== */
html[data-topbar-color=brand] {
    --tw-topbar-bg: #08233F;
    --tw-topbar-item-color: rgba(255, 255, 255, 0.75);
    --tw-topbar-item-active-bg: rgba(12, 91, 168, 0.25);
    --tw-topbar-item-active-color: #fff;
    --tw-topbar-item-hover-bg: rgba(12, 91, 168, 0.25);
    --tw-topbar-item-hover-color: #fff;
}
html[data-topbar-color=light] {
    --tw-topbar-item-active-bg: rgba(12, 91, 168, 0.1);
    --tw-topbar-item-active-color: #0C5BA8;
    --tw-topbar-item-hover-bg: rgba(12, 91, 168, 0.1);
    --tw-topbar-item-hover-color: #0C5BA8;
}

/* ========== Scrollbar ========== */
.app-menu .simplebar-scrollbar:before,
.simplebar-scrollbar:before {
    background-color: #0C5BA8 !important;
    opacity: 0.5 !important;
    left: 0 !important;
    right: 0 !important;
}
.simplebar-scrollbar.simplebar-visible:before,
.simplebar-hover .simplebar-scrollbar:before { opacity: 0.8 !important; }
.simplebar-track.simplebar-vertical { width: 12px !important; }

/* ========== Government crest lockup ========== */
.klas-crest { display:flex; align-items:center; gap:10px; }
.klas-crest .crest-img { height: 40px; width: auto; }
.klas-wordmark { line-height: 1.05; }
.klas-wordmark .wm-top { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #08233F; }
.klas-wordmark .wm-sub { font-size: 9px; font-weight: 600; color: #0C5BA8; text-transform: uppercase; }
.dark .klas-wordmark .wm-top { color: #fff; }
.dark .klas-wordmark .wm-sub { color: #FFD15C; }

[x-cloak] { display: none !important; }

/* status pills */
.pill { display:inline-flex; align-items:center; gap:4px; padding:3px 11px; border-radius:9999px; font-size:11px; font-weight:600; line-height:1.4; box-shadow:inset 0 0 0 1px rgba(8,35,63,.04); }
.pill-received { background:rgba(12,91,168,.12); color:#0C5BA8; }
.pill-review   { background:rgba(242,169,0,.15); color:#9A6B00; }
.pill-admitted { background:rgba(0,149,67,.14); color:#00753A; }
.pill-rejected { background:rgba(210,16,52,.12); color:#B00D2A; }
.pill-waitlist { background:rgba(100,116,139,.15); color:#475569; }

/* ============================================================
   UI/UX DEPTH LAYER
   One include that lifts the whole platform off "flat":
   gives cards real elevation, polishes buttons / inputs / tables,
   and adds a soft branded canvas. Pure CSS, no view changes needed.
   ============================================================ */
:root{
    --klas-blue:#0C5BA8; --klas-navy:#08233F; --klas-green:#009543; --klas-gold:#F2A900;
    --klas-ring:rgba(8,35,63,.07);
    --klas-shadow-sm:0 1px 2px rgba(8,35,63,.06);
    --klas-shadow:0 1px 2px rgba(8,35,63,.04), 0 8px 24px -10px rgba(8,35,63,.16);
    --klas-shadow-lg:0 12px 34px -10px rgba(8,35,63,.26), 0 6px 14px -8px rgba(8,35,63,.12);
}

/* Branded canvas instead of flat grey */
body{
    background:
        radial-gradient(1100px 420px at 100% -8%, rgba(12,91,168,.06), transparent 60%),
        radial-gradient(900px 380px at -5% 110%, rgba(242,169,0,.06), transparent 60%),
        linear-gradient(180deg,#f3f6fb 0%, #eef2f8 100%) !important;
    background-attachment:fixed !important;
}

/* Cards: hairline border + layered elevation + gentle hover */
.card{
    border:1px solid var(--klas-ring) !important;
    border-radius:16px !important;
    box-shadow:var(--klas-shadow) !important;
    transition:box-shadow .25s ease, transform .25s ease;
}
.card:hover{ box-shadow:var(--klas-shadow-lg) !important; }
.card .card-title{ letter-spacing:-.01em; }

/* Interactive tiles (stat cards, link cards) get a real lift */
.klas-lift{ transition:transform .22s ease, box-shadow .22s ease; }
.klas-lift:hover{ transform:translateY(-3px); box-shadow:var(--klas-shadow-lg) !important; }

/* Accent rail on stat cards (set via .klas-accent-{tone}) */
.klas-accent{ position:relative; overflow:hidden; }
.klas-accent::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:16px 0 0 16px; background:var(--klas-blue); }
.klas-accent-green::before{ background:var(--klas-green); }
.klas-accent-gold::before{ background:var(--klas-gold); }
.klas-accent-red::before{ background:#D21034; }
.klas-accent-navy::before{ background:var(--klas-navy); }

/* Gradient icon chip used on stat cards */
.klas-chip{ background:linear-gradient(135deg, rgba(12,91,168,.16), rgba(12,91,168,.06)); box-shadow:inset 0 0 0 1px rgba(12,91,168,.12); }
.klas-chip-green{ background:linear-gradient(135deg, rgba(0,149,67,.18), rgba(0,149,67,.06)); box-shadow:inset 0 0 0 1px rgba(0,149,67,.14); }
.klas-chip-gold{ background:linear-gradient(135deg, rgba(242,169,0,.22), rgba(242,169,0,.07)); box-shadow:inset 0 0 0 1px rgba(242,169,0,.18); }
.klas-chip-red{ background:linear-gradient(135deg, rgba(210,16,52,.16), rgba(210,16,52,.05)); box-shadow:inset 0 0 0 1px rgba(210,16,52,.14); }

/* Primary action buttons: gradient + depth + lift */
button.bg-primary, a.bg-primary, .btn-klas{
    background-image:linear-gradient(135deg,#1267BE 0%, #0C5BA8 55%, #0A4E91 100%) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 18px -8px rgba(12,91,168,.65) !important;
    transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
button.bg-primary:hover, a.bg-primary:hover, .btn-klas:hover{
    transform:translateY(-1px); filter:brightness(1.04);
    box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 12px 22px -8px rgba(12,91,168,.7) !important;
}
button.bg-primary:active, a.bg-primary:active, .btn-klas:active{ transform:translateY(0); }

/* Inputs / selects / textareas: softer, deeper, clearer focus */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea{
    border-radius:10px !important;
    box-shadow:0 1px 2px rgba(8,35,63,.04) inset;
    transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
    box-shadow:0 0 0 4px rgba(12,91,168,.14) !important;
    border-color:#0C5BA8 !important;
}

/* Tables: cleaner header, calmer dividers, smooth hover */
table thead th{
    text-transform:uppercase; font-size:11px; letter-spacing:.04em; font-weight:600;
    background:linear-gradient(180deg,#f7f9fc,#f1f5fa) !important; color:#64748b !important;
    border-bottom:1px solid #e8edf4 !important;
}
table tbody tr{ transition:background-color .12s ease; }
table tbody tr:hover{ background:rgba(12,91,168,.035) !important; }

/* Topbar gets a hairline + soft drop so it separates from content */
.app-topbar, [class*="topbar"]{ box-shadow:0 1px 0 rgba(8,35,63,.06), 0 6px 18px -14px rgba(8,35,63,.4); }

/* Side menu: active item gets a left rail + gold dot */
.app-menu .menu-item .menu-link.active{ position:relative; font-weight:600; }
.app-menu .menu-item .menu-link.active::before{
    content:""; position:absolute; left:0; top:18%; bottom:18%; width:3px; border-radius:0 3px 3px 0; background:#FFD15C;
}
.app-menu .menu-title{ letter-spacing:.08em; }

/* Page title: subtle gradient underline accent */
.klas-page-accent{ height:3px; width:44px; border-radius:3px; background:linear-gradient(90deg,#0C5BA8,#FFD15C); }

/* Section heading helper */
.klas-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#0C5BA8; }

/* Soft empty-state */
.klas-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:48px 16px; color:#94a3b8; }
.klas-empty i{ font-size:34px; color:#cbd5e1; }

/* Reusable surface used on public pages */
.klas-surface{ background:#fff; border:1px solid var(--klas-ring); border-radius:18px; box-shadow:var(--klas-shadow); }

/* Animated aurora blobs for hero / auth panels */
.klas-aurora{ position:absolute; border-radius:9999px; filter:blur(64px); animation:klasFloat 14s ease-in-out infinite; }
@keyframes klasFloat{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(12px,-18px) scale(1.08);} }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
    .card, .klas-lift, button.bg-primary, a.bg-primary, .btn-klas, .klas-aurora{ transition:none !important; animation:none !important; }
}