/* ============================================================
   UMS Public Portals — Deep Blue + Gold theme
   Layers on top of Bootstrap 5. Shared by the student portal,
   lecturer portal and online-admissions pages.
   ============================================================ */

:root {
  /* --brand/--gold are set per-tenant (inline theme block in the templates);
     the shades derive from them so one override re-themes the whole portal. */
  --brand:#0E2A5E;
  --brand-700: color-mix(in srgb, var(--brand) 88%, white);
  --brand-800: color-mix(in srgb, var(--brand) 80%, black);
  --brand-600: color-mix(in srgb, var(--brand) 76%, white);
  --brand-050: color-mix(in srgb, var(--brand) 8%, white);
  --gold:#C8A23A;
  --gold-400: color-mix(in srgb, var(--gold) 76%, white);
  --gold-600: color-mix(in srgb, var(--gold) 76%, black);
  --ink:#1A2233; --muted:#6A7488; --border:#E2E8F2; --surface:#fff; --bg:#EFF2F8;
  --mru:var(--brand);            /* backward-compat alias */
  --shadow:0 1px 2px rgba(11,33,73,.05), 0 8px 24px rgba(11,33,73,.07);
  --shadow-lg:0 16px 48px rgba(11,33,73,.18);
}

body {
  background:
    radial-gradient(1100px 380px at 100% -10%, rgba(200,162,58,.06), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- Dark theme (works alongside Bootstrap's data-bs-theme="dark") ---- */
[data-bs-theme="dark"] {
  --bg:#0E1522; --surface:#16202F; --ink:#E6EBF3; --muted:#94A2B6;
  --border:#29384C; --brand-050: color-mix(in srgb, var(--brand) 28%, black);
}
[data-bs-theme="dark"] .table thead.table-light th,
[data-bs-theme="dark"] .table > thead th { background:#1B2736; color:#94A2B6; }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background:#1A2A45; }
[data-bs-theme="dark"] .mru-text { color: color-mix(in srgb, var(--brand) 42%, white) !important; }
[data-bs-theme="dark"] .card-header.bg-white { background:#16202F !important; color:#E6EBF3; }
[data-bs-theme="dark"] .auth-panel { background:#16202F; }

/* Theme toggle button (navbar) */
.theme-toggle {
  border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff;
  width:36px; height:36px; border-radius:9px; cursor:pointer; font-size:1rem;
  display:inline-grid; place-items:center; transition:background .12s, transform .12s;
}
.theme-toggle:hover { transform:translateY(-1px); background:rgba(255,255,255,.12); }

/* Time-of-day greeting banner — bigger, modern gradient, slides in once per login */
.greeting {
  display:flex; align-items:center; gap:1.1rem;
  background:linear-gradient(120deg, #202a56 0%, var(--brand) 52%, #17a8bd 118%);
  color:#fff; border-left:5px solid var(--gold);
  padding:1.25rem 1.5rem; border-radius:16px; margin-bottom:1.5rem;
  box-shadow:0 14px 34px rgba(20,40,90,.28);
  position:relative; overflow:hidden;
}
.greeting::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18), transparent 55%);
  pointer-events:none;
}
.greeting .g-emoji { font-size:2.5rem; line-height:1; filter:drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.greeting .g-body { position:relative; z-index:1; }
.greeting .g-hello { color:#fff; font-weight:800; font-size:1.35rem; letter-spacing:.2px; }
.greeting .g-sub { color:#dbe6fb; font-size:.86rem; margin-top:1px; }
.greeting .g-quote { color:#eef4ff; font-size:.92rem; font-style:italic; margin-top:.55rem; opacity:.95; }
.greeting .g-quote .g-author { font-style:normal; opacity:.8; font-size:.82rem; }
@keyframes g-in  { from { opacity:0; transform:translateX(-46px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes g-out { to   { opacity:0; transform:translate(48vw, -150%) rotate(3deg) scale(.9); } }
.greeting.g-enter { animation:g-in .65s cubic-bezier(.2,.8,.2,1) both; }
.greeting.g-leave { animation:g-out .85s cubic-bezier(.6,.05,.7,.1) forwards; }
@media (prefers-reduced-motion: reduce) { .greeting.g-leave { display:none; } }

/* ---- Brand helpers ---- */
.mru-text { color:var(--brand) !important; }
.mru-bg {
  background:linear-gradient(100deg, var(--brand-800), var(--brand-700) 70%) !important;
  box-shadow:0 2px 14px rgba(11,33,73,.22);
  border-bottom:2px solid var(--gold);
}
.navbar .navbar-brand { letter-spacing:.2px; }
.brand-seal {
  width:34px; height:34px; border-radius:9px; background:var(--gold); color:var(--brand-800);
  display:inline-grid; place-items:center; font-weight:800; font-size:.78rem;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); margin-right:.55rem; flex:0 0 auto;
}
.brand-logo {
  width:38px; height:38px; border-radius:9px; background:#fff; object-fit:contain;
  padding:3px; margin-right:.6rem; flex:0 0 auto;
}
.auth-hero .hero-logo {
  width:86px; height:86px; border-radius:18px; background:#fff; object-fit:contain;
  padding:6px; margin-bottom:1.4rem; box-shadow:0 8px 24px rgba(0,0,0,.25);
  position:relative; z-index:1;
}

/* ---- Buttons ----
   NOTE: .btn-mru / .btn-gold are custom (not Bootstrap variants). Bootstrap's
   base .btn:hover sets background-color from CSS vars we must define, otherwise
   the background turns transparent on hover (button "disappears"). We set the
   --bs-btn-* hover vars AND explicit colours so hover is always solid. */
.btn { border-radius:9px; }
.btn-mru {
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-700); --bs-btn-hover-border-color:var(--brand-700);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-bg:var(--brand-800);
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  transition:transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.btn-mru:hover, .btn-mru:focus {
  background:var(--brand-700); color:#fff; border-color:var(--brand-700);
  transform:translateY(-1px); box-shadow:0 6px 18px rgba(14,42,94,.28);
}
.btn-mru:active { transform:translateY(0); background:var(--brand-800); }

.btn-gold {
  --bs-btn-bg:var(--gold); --bs-btn-border-color:var(--gold);
  --bs-btn-hover-bg:var(--gold-600); --bs-btn-hover-border-color:var(--gold-600);
  --bs-btn-color:var(--brand-800); --bs-btn-hover-color:#fff;
  background:var(--gold); color:var(--brand-800); border:1px solid var(--gold); font-weight:600;
  transition:transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.btn-gold:hover, .btn-gold:focus {
  background:var(--gold-600); color:#fff; border-color:var(--gold-600);
  transform:translateY(-1px); box-shadow:0 6px 18px rgba(200,162,58,.4);
}

/* Outline button in the brand colour (used for secondary actions) */
.btn-outline-mru {
  --bs-btn-color:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand); --bs-btn-hover-color:#fff;
  color:var(--brand); border:1px solid var(--brand); background:transparent;
  transition:transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.btn-outline-mru:hover, .btn-outline-mru:focus {
  background:var(--brand); color:#fff; transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(14,42,94,.22);
}

/* ---- Cards ---- */
.card { border-radius:14px !important; box-shadow:var(--shadow); }
.card.shadow-sm { box-shadow:var(--shadow) !important; }
.card-header { border-top-left-radius:14px !important; border-top-right-radius:14px !important; }

/* Stat cards: gold accent rail + hover lift */
.stat-card {
  border:0 !important; border-left:4px solid var(--gold) !important;
  transition:transform .16s ease, box-shadow .16s ease;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }

/* ---- Tables ---- */
.table thead.table-light th, .table > thead th {
  background:#F5F8FD; color:var(--muted); text-transform:uppercase;
  font-size:.72rem; letter-spacing:.04em; border-bottom:1px solid var(--border);
}
.table-hover tbody tr:hover { background:var(--brand-050); }

/* ---- Forms ---- */
.form-control, .form-select {
  border-radius:9px; border-color:var(--border);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.form-control:focus, .form-select:focus {
  border-color:var(--brand-600); box-shadow:0 0 0 .2rem var(--brand-050);
}

/* ---- Badges (soft, professional) ---- */
.badge.bg-success { background:#E6F4EA !important; color:#1E7E34 !important; }
.badge.bg-danger  { background:#FBE9E7 !important; color:#C0392B !important; }
.badge.bg-warning { background:#FBF3E2 !important; color:#B7791F !important; }
.badge.bg-secondary { background:#EEF1F6 !important; color:#6A7488 !important; }
.badge.bg-info    { background:#E7EEFA !important; color:#17458F !important; }

/* ---- Footer ---- */
footer { color:var(--muted); }
footer em { color:var(--gold-600); }

/* ============================================================
   Animations & transitions (tasteful; motion-safe)
   ============================================================ */
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.reveal { animation:fadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
/* Stagger children of a .reveal-group (cards in a row, etc.) */
.reveal-group > * { animation:fadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
.reveal-group > *:nth-child(1){animation-delay:.02s}
.reveal-group > *:nth-child(2){animation-delay:.08s}
.reveal-group > *:nth-child(3){animation-delay:.14s}
.reveal-group > *:nth-child(4){animation-delay:.20s}
.reveal-group > *:nth-child(5){animation-delay:.26s}
.reveal-group > *:nth-child(6){animation-delay:.32s}

a { transition:color .12s ease; }

@media (prefers-reduced-motion: reduce) {
  *, .reveal, .reveal-group > * { animation:none !important; transition:none !important; }
}

/* ============================================================
   Split-screen auth hero (login pages)
   ============================================================ */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.auth-hero {
  background:linear-gradient(150deg, var(--brand-800), var(--brand) 58%, var(--brand-700));
  color:#fff; padding:3rem; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.auth-hero::before { content:""; position:absolute; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,162,58,.28), transparent 70%); top:-130px; right:-120px;
  animation:fadeIn 1.2s ease both; }
.auth-hero::after { content:""; position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(23,69,143,.5), transparent 70%); bottom:-120px; left:-90px; }
.auth-hero .seal { width:66px; height:66px; border-radius:15px; background:var(--gold);
  color:var(--brand-800); display:grid; place-items:center; font-weight:800; font-size:1.25rem;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.4); margin-bottom:1.4rem; position:relative; z-index:1; }
.auth-hero h1 { font-size:2rem; line-height:1.15; position:relative; z-index:1; }
.auth-hero p { color:#c6d2e8; max-width:30rem; position:relative; z-index:1; }
.auth-hero .tagline { color:var(--gold-400); font-style:italic; margin-top:1.8rem; position:relative; z-index:1; }
.auth-panel { display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--surface); }
.auth-card { width:100%; max-width:370px; animation:fadeUp .5s ease both; }

@media (max-width: 860px) {
  .auth-wrap { grid-template-columns:1fr; }
  .auth-hero { display:none; }
}

/* --- Quick-links tiles (dashboard) --- */
.quick-tile { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; text-align:center; padding:1.1rem .5rem; text-decoration:none; color:inherit;
  transition:transform .15s, box-shadow .2s, border-color .2s; }
.quick-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg) !important; color:inherit; }
.quick-tile .qt-ico { font-size:1.55rem; line-height:1; }
.quick-tile .qt-label { font-size:.85rem; font-weight:600; }

/* --- Avatars --- */
.nav-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.55); display:inline-flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.18); color:#fff; font-weight:700; font-size:.9rem; }
.profile-avatar { width:76px; height:76px; border-radius:50%; object-fit:cover;
  border:2px solid color-mix(in srgb, var(--brand) 40%, transparent);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:color-mix(in srgb, var(--brand) 16%, transparent);
  color:var(--brand); font-size:1.9rem; font-weight:700; }