/* unilorin.css — Unilorin-inspired dashboard skin (v23)
   Loaded globally by templates/layout.php.
   Goal: simple, calm, highly navigable UI modelled on portal.unilorin.edu.ng.
   Fully additive — overrides colors, spacing, typography, iconography
   and responsive behaviour of existing dashboard chrome. */

:root{
  --uni-navy:#003366;
  --uni-navy-2:#00224a;
  --uni-sky:#0a66c2;
  --uni-gold:#f0a500;
  --uni-gold-2:#c98a00;
  --uni-red:#c8102e;
  --uni-ink:#0f172a;
  --uni-ink-2:#334155;
  --uni-muted:#64748b;
  --uni-line:#e5e7eb;
  --uni-soft:#f4f6fb;
  --uni-bg:#f7f9fc;
}

/* Force the Unilorin palette across dashboard chrome. */
body{background:var(--uni-bg)!important}
:root{--brand:var(--uni-navy);--primary:var(--uni-navy);--accent:var(--uni-gold)}

/* ── Unilorin utility strip (thin bar above topbar) ── */
.uni-utility{
  background:var(--uni-navy-2);
  color:#cfd8ea;font-size:12.5px;
  border-bottom:2px solid var(--uni-gold);
}
.uni-utility .wrap{
  max-width:1400px;margin:0 auto;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:6px 18px;
}
.uni-utility a{color:#cfd8ea;text-decoration:none;transition:.15s;font-weight:500}
.uni-utility a:hover{color:var(--uni-gold)}
.uni-utility .u-spacer{flex:1 1 auto;min-width:8px}
.uni-utility .u-sep{opacity:.35}
.uni-utility strong{color:var(--uni-gold);font-weight:700;letter-spacing:.02em}

/* ── Topbar polish ── */
.main > .topbar{
  border-bottom:1px solid var(--uni-line);
  background:#fff;
  padding:10px 18px;
  box-shadow:0 1px 0 rgba(0,20,60,.03);
}
.tb-search input{border-radius:6px;background:var(--uni-soft);border:1px solid transparent;padding:9px 12px;font-size:13.5px}
.tb-search input:focus{background:#fff;border-color:var(--uni-navy);outline:0}
.tb-icon-btn{border-radius:8px}
.tb-user .avatar{background:var(--uni-navy);color:var(--uni-gold);font-weight:800;border:2px solid var(--uni-gold)}
body.theme-dark .main > .topbar{background:#0f1830;border-bottom-color:#1e2a4a}

/* ── Hero card (dashboard welcome) ── */
.card.hero{
  background:linear-gradient(120deg,var(--uni-navy) 0%,var(--uni-navy-2) 60%,#0a3a86 100%);
  color:#fff;border:0;position:relative;overflow:hidden;
  padding:28px;border-radius:12px;
  box-shadow:0 20px 40px -22px rgba(0,34,74,.55);
}
.card.hero::before{
  content:"";position:absolute;inset:auto -80px -120px auto;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(240,165,0,.55),transparent 60%);
  filter:blur(4px);
}
.card.hero h1{color:#fff;font-family:"Poppins","Fraunces",Georgia,serif;font-weight:700;letter-spacing:-.01em}
.card.hero .tag{background:var(--uni-gold);color:var(--uni-navy);font-weight:800;border:0}
.card.hero .btn.gold{background:var(--uni-gold);color:var(--uni-navy);border:0;font-weight:700}
.card.hero .btn.gold:hover{background:#ffbf3a}
.card.hero .btn.secondary{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)}
.card.hero .btn.secondary:hover{background:rgba(255,255,255,.22)}

/* ── KPI cards ── */
.kpi{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));margin:18px 0}
.kpi .card{
  border:1px solid var(--uni-line);border-radius:10px;padding:18px;
  background:#fff;position:relative;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.kpi .card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--uni-gold);
}
.kpi .card:hover{transform:translateY(-3px);box-shadow:0 18px 30px -20px rgba(0,34,74,.25)}
.kpi .card h3{margin:0 0 6px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--uni-muted);font-weight:700;font-family:"Poppins",sans-serif}
.kpi .card .v{font-family:"Poppins",Georgia,serif;font-size:30px;font-weight:800;color:var(--uni-navy);line-height:1}
.kpi .card small.delta{display:block;margin-top:8px;color:var(--uni-muted);font-size:12px}
body.theme-dark .kpi .card{background:#111a33;border-color:#1e2a4a}
body.theme-dark .kpi .card .v{color:#f8d777}

/* ── Modcards (Quick access tiles) ── */
.modgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.modcard{
  display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:10px;
  background:#fff;border:1px solid var(--uni-line);
  text-decoration:none;color:var(--uni-ink);
  transition:.18s ease;position:relative;overflow:hidden;min-height:100px;
}
.modcard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:.2s
}
.modcard:hover{transform:translateY(-3px);border-color:var(--uni-navy);box-shadow:0 14px 26px -18px rgba(0,34,74,.35)}
.modcard:hover::before{background:var(--uni-gold)}
.modcard .ico{width:36px;height:36px;border-radius:8px;background:var(--uni-soft);color:var(--uni-navy);display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:4px}
.modcard b{display:block;color:var(--uni-navy);font-weight:700;font-family:"Poppins",sans-serif;font-size:14px}
.modcard small{color:var(--uni-muted);display:block;line-height:1.45;font-size:12.5px}
body.theme-dark .modcard{background:#111a33;border-color:#1e2a4a;color:#e2e8f0}
body.theme-dark .modcard b{color:#f8d777}

/* ── Cards & tables ── */
.card{border-radius:10px;border:1px solid var(--uni-line);background:#fff}
.card h2{font-family:"Poppins",Georgia,serif;color:var(--uni-navy);letter-spacing:-.01em;font-weight:700}
body.theme-dark .card h2{color:#f8d777}
.card table th{background:var(--uni-soft);color:var(--uni-navy);font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:.05em}
body.theme-dark .card table th{background:#132348;color:#f8d777}

/* ── Buttons ── */
.btn.gold{background:var(--uni-gold);color:var(--uni-navy);border:0;font-weight:700}
.btn.gold:hover{background:#ffbf3a}
.btn{border-radius:6px}
.btn.primary{background:var(--uni-navy);color:#fff}
.btn.primary:hover{background:var(--uni-sky)}

/* ── Sidebar — Unified Unilorin navy + gold (applies to all portals) ── */
.sidebar{
  background:linear-gradient(180deg,#062052 0%,#03153b 100%) !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
  color:#e7edfb;
  padding:0;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12) !important}
.sb-brand{
  padding:18px 18px 16px !important;
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  position:relative;
  margin:0 !important;
}
.sb-brand::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--uni-gold) 0%,#ffce55 55%,transparent 100%);
}
.sb-brand,.sb-brand span{color:#fff !important}
.sb-section{
  color:#ffce55 !important;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:10.5px;
  padding:16px 20px 6px !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  font-family:'Plus Jakarta Sans','Poppins',sans-serif;
  opacity:.92;
}
.sb-nav{padding:2px 10px !important;display:flex;flex-direction:column;gap:2px}
.sb-nav a{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px !important;
  color:#cfd8ee !important;
  text-decoration:none;font-size:13.5px;font-weight:500;
  border-radius:10px;
  border-left:3px solid transparent;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
}
.sb-nav a:hover{
  background:rgba(255,255,255,.07) !important;
  color:#ffffff !important;
  border-left-color:rgba(240,180,41,.55);
}
.sb-nav a.active{
  background:linear-gradient(90deg,rgba(240,180,41,.22),rgba(240,180,41,.02)) !important;
  color:#ffffff !important;font-weight:700;
  border-left-color:#f0b429 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.sb-nav a .ic{
  width:22px;height:22px;flex:0 0 22px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#ffce55;opacity:.95;
}
.sb-nav a .ic svg{width:18px;height:18px;stroke-width:1.9}
.sb-nav a:hover .ic,.sb-nav a.active .ic{color:#ffce55;opacity:1}
.sb-foot{
  padding:14px 18px;font-size:11.5px;color:#8fa0c6 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  margin-top:10px;background:rgba(0,0,0,.15);
}
.sb-foot,.sb-foot *{color:#8fa0c6 !important}

/* Dark theme keeps identical treatment for consistency */
body.theme-dark .sidebar,body.in-admin .sidebar{
  background:linear-gradient(180deg,#062052 0%,#03153b 100%) !important;
}
body.theme-dark .sb-section,body.in-admin .sb-section{color:#ffce55 !important;background:transparent !important;border:0 !important}
body.theme-dark .sb-nav a,body.in-admin .sb-nav a{color:#cfd8ee !important}
body.theme-dark .sb-nav a:hover,body.in-admin .sb-nav a:hover{background:rgba(255,255,255,.07) !important;color:#fff !important}
body.theme-dark .sb-nav a.active,body.in-admin .sb-nav a.active{color:#fff !important}
body.theme-dark .sb-nav a .ic,body.in-admin .sb-nav a .ic{color:#ffce55 !important}

/* Collapsed sidebar (icons only) */
body.sidebar-collapsed .sidebar{width:72px}
body.sidebar-collapsed .sb-nav a .lb,
body.sidebar-collapsed .sb-brand span:not(:first-child),
body.sidebar-collapsed .sb-section,
body.sidebar-collapsed .sb-foot{display:none}
body.sidebar-collapsed .sb-nav a{justify-content:center;padding:11px 0 !important;border-left-color:transparent !important}
body.sidebar-collapsed .sb-nav a.active{background:rgba(240,180,41,.18) !important}
body.sidebar-collapsed .main{margin-left:72px}

/* Mobile drawer polish */
@media (max-width:900px){
  .sidebar{width:280px !important;box-shadow:0 20px 60px rgba(0,10,40,.5)}
}

/* ── Unilorin footer ── */
.uni-foot{
  background:linear-gradient(180deg,var(--uni-navy),var(--uni-navy-2));
  color:#cbd5e1;padding:34px 0 0;margin-top:36px;
  border-top:3px solid var(--uni-gold);
}
.uni-foot .wrap{max-width:1400px;margin:0 auto;padding:0 22px;
  display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.uni-foot h5{color:var(--uni-gold);font-family:"Poppins",Georgia,serif;font-size:15px;margin:0 0 12px;letter-spacing:.03em;text-transform:uppercase}
.uni-foot a{color:#cbd5e1;text-decoration:none;display:block;padding:4px 0;font-size:13.5px;transition:.15s}
.uni-foot a:hover{color:var(--uni-gold);padding-left:4px}
.uni-foot .brand-col p{font-size:13px;line-height:1.55;color:#a5b4cf;margin:8px 0 12px}
.uni-foot .socials{display:flex;gap:8px;margin-top:10px}
.uni-foot .socials a{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.uni-foot .socials a:hover{background:var(--uni-gold);color:var(--uni-navy)}
.uni-foot .base{
  margin-top:26px;padding:14px 22px;border-top:1px solid rgba(255,255,255,.08);
  text-align:center;font-size:12.5px;color:#94a3b8;
  background:rgba(0,0,0,.15);
}
.uni-foot .base a{display:inline;color:var(--uni-gold)}

/* Hide legacy .foot in favor of our unified footer */
.main > footer.foot{display:none}

/* Bottom bar (mobile) — Unilorin-friendly */
.bottombar{
  background:#fff;border-top:1px solid var(--uni-line);
  box-shadow:0 -6px 14px rgba(0,20,60,.06);
}
.bottombar a{color:var(--uni-muted);font-size:11px}
.bottombar a.active{color:var(--uni-navy)}
.bottombar a.active span{transform:scale(1.1)}
.bottombar a span{transition:.15s}

/* ── Responsive polish ── */
@media (max-width:1080px){
  .sidebar{position:fixed;inset:0 auto 0 0;width:280px;transform:translateX(-100%);transition:transform .25s ease;z-index:200}
  body.drawer-open .sidebar{transform:translateX(0);box-shadow:0 12px 40px rgba(0,20,60,.35)}
  .main{margin-left:0}
  body.sidebar-collapsed .main{margin-left:0}
}
@media (max-width:900px){
  .card.hero{padding:22px 18px}
  .card.hero h1{font-size:22px}
  .uni-utility{font-size:12px}
  .uni-utility .u-sep{display:none}
  .main > .topbar{padding:8px 12px}
  main.container{padding:14px !important}
}
@media (max-width:640px){
  .kpi .card .v{font-size:24px}
  .uni-utility .wrap{gap:10px;padding:6px 12px}
  .modcard{padding:14px;min-height:auto}
  .card{padding:16px}
}

/* Simple animated reveal for KPI/mod tiles on load. */
@keyframes uniRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.kpi .card, .modcard, .card.hero{animation:uniRise .4s ease both}
.modcard:nth-child(2){animation-delay:.05s}
.modcard:nth-child(3){animation-delay:.1s}
.modcard:nth-child(4){animation-delay:.15s}
.modcard:nth-child(5){animation-delay:.2s}
.modcard:nth-child(6){animation-delay:.25s}

/* v25 — Breadcrumbs (auto-inserted below topbar) */
.ep-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 20px;font-size:13px;color:var(--muted,#64748b);background:rgba(0,51,102,.03);border-bottom:1px solid var(--border,#e5e7eb)}
.ep-breadcrumbs a{color:var(--brand,#003366);text-decoration:none;font-weight:600}
.ep-breadcrumbs a:hover{text-decoration:underline}
.ep-breadcrumbs .sep{opacity:.5;font-weight:600}
.ep-breadcrumbs .cur{color:#0f172a;font-weight:600}
body.theme-dark .ep-breadcrumbs{background:rgba(255,255,255,.03);border-bottom-color:rgba(255,255,255,.08);color:#94a3b8}
body.theme-dark .ep-breadcrumbs .cur{color:#e2e8f0}

/* v25 — Clean tile-based quick access (Unilorin app-card style) */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:14px}
.qa-tile{display:flex;flex-direction:column;gap:8px;padding:18px 16px;border-radius:14px;background:#fff;border:1px solid rgba(0,51,102,.10);color:#0f172a;text-decoration:none;transition:.18s;position:relative;overflow:hidden;min-height:120px}
.qa-tile:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,51,102,.14);border-color:#f0a500}
.qa-tile .qa-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#003366,#0a66c2);color:#f0a500}
.qa-tile .qa-ic svg{width:22px;height:22px}
.qa-tile b{font-size:14px;line-height:1.25;color:#0b2a5b}
.qa-tile small{color:#5b6474;font-size:12px;line-height:1.4}
.qa-tile::after{content:'→';position:absolute;top:14px;right:16px;color:#94a3b8;font-weight:700;transition:.18s}
.qa-tile:hover::after{color:#f0a500;transform:translateX(4px)}
body.theme-dark .qa-tile{background:#0f172a;border-color:rgba(255,255,255,.08);color:#e2e8f0}
body.theme-dark .qa-tile b{color:#f8fafc}
body.theme-dark .qa-tile small{color:#94a3b8}
@media(max-width:520px){.qa-grid{grid-template-columns:repeat(2,1fr);gap:10px}.qa-tile{min-height:100px;padding:14px 12px}.qa-tile .qa-ic{width:38px;height:38px}}