/* CSJMSS Portal theme. Tokens mirror assets/css/base.css (keep in sync).
   This file is self-contained: does NOT load base.css/components.css. */
:root {
  --navy-deep:#082a63; --navy:#0b3d91; --blue:#1559b6; --blue-bright:#1f7ae0;
  --blue-sky:#38bdf8; --gold:#ffb703; --gold-dark:#f59e0b;
  --bg:#ffffff; --bg-alt:#f6f8fc; --bg-tint:#eef3fc;
  --text:#1a2238; --text-muted:#5a6377; --border:#e3e9f5;
  --radius-sm:6px; --radius:10px; --radius-lg:16px;
  --shadow-sm:0 2px 8px rgba(20,30,60,.06);
  --shadow:0 8px 24px rgba(20,30,60,.10);
  --shadow-lg:0 16px 40px rgba(20,30,60,.14);
  --grad-hero:linear-gradient(120deg,#082a63 0%,#1559b6 55%,#1f7ae0 100%);
  --grad-navy:linear-gradient(135deg,#0b3d91,#1559b6);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
     color:var(--text);background:var(--bg-alt);line-height:1.6;font-size:16px}
a{color:var(--blue-bright);text-decoration:none}
a:hover{text-decoration:underline}
ul{list-style:none}

/* ---- Login split panel ---- */
.login-wrap{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.login-brand{background:var(--grad-hero);color:#fff;padding:48px;display:flex;
  flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-brand::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 60%);border-radius:50%}
.login-brand .logo{display:flex;align-items:center;gap:10px;position:relative}
.login-brand .logo .mark{width:38px;height:38px;border-radius:8px;background:var(--gold);
  color:var(--navy-deep);font-weight:800;display:grid;place-items:center}
.login-brand .tagline{position:relative}
.login-brand .tagline .eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;
  opacity:.85;font-weight:700}
.login-brand .tagline h1{color:#fff;margin:8px 0;font-size:1.6rem}
.login-brand .tagline p{color:rgba(255,255,255,.85);font-size:.95rem}

.login-form{display:flex;align-items:center;justify-content:center;padding:32px}
.login-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:36px;width:100%;max-width:380px}
.login-card h2{color:var(--navy);margin-bottom:4px}
.login-card .sub{color:var(--text-muted);font-size:.9rem;margin-bottom:22px}

/* ---- Form fields (shared across portal) ---- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;color:var(--text);font-size:.85rem;margin-bottom:4px}
.field input,.field select{width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg-alt);font:inherit;color:var(--text)}
.field input:focus{border-color:var(--blue-bright);background:#fff;
  outline:3px solid rgba(31,122,224,.18)}
.field .req{color:#c0392b}
.field .hint{font-size:.75rem;color:var(--text-muted)}
.field.error input{border-color:#dc3545}
.field .err-msg{color:#dc3545;font-size:.78rem;margin-top:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 20px;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem;
  cursor:pointer;border:none;text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--gold);color:var(--navy-deep);box-shadow:var(--shadow-sm);width:100%}
.btn-primary:hover{box-shadow:var(--shadow)}
.btn-outline{background:transparent;color:var(--navy);border:2px solid var(--navy)}

/* ---- Alerts (flash) ---- */
.alert{padding:10px 14px;border-radius:var(--radius-sm);font-size:.88rem;margin-bottom:18px}
.alert-error{background:#fdecea;border:1px solid #f5c6cb;color:#a94442}
.alert-success{background:#eafaf1;border:1px solid #b2ebbf;color:#1e7e34}
.alert-info{background:#e7f1ff;border:1px solid #b6d4fe;color:#084298}

/* ---- Helpers ---- */
.muted{color:var(--text-muted)}

.login-card .row{display:flex;justify-content:space-between;align-items:center;
  font-size:.82rem;margin-bottom:18px}
.login-card .row a{color:var(--blue-bright);font-weight:600}

.back-home{display:block;text-align:center;margin-top:18px;font-size:.82rem;color:var(--text-muted)}

@media (max-width:940px){
  .login-wrap{grid-template-columns:1fr}
  .login-brand{padding:32px;min-height:auto}
}
@media (max-width:560px){
  .login-brand,.login-form{padding:22px}
}

/* ---- App shell (dashboard) ---- */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{background:var(--navy-deep);color:#cfe0f7;padding:18px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .logo{display:flex;align-items:center;gap:8px;padding:0 18px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar .logo .mark{width:28px;height:28px;border-radius:7px;background:var(--gold);color:var(--navy-deep);font-weight:800;display:grid;place-items:center;font-size:.85rem}
.sidebar .logo strong{color:#fff;font-size:.9rem}
.nav-side{padding:12px 0}
.nav-side a{display:block;padding:9px 18px;color:#cfe0f7;font-size:.9rem;font-weight:600;border-left:3px solid transparent;text-decoration:none}
.nav-side a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav-side a.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--gold)}
.nav-side .soon{font-size:.65rem;opacity:.5;font-weight:500;margin-left:4px}
.nav-side .sep{padding:14px 18px 4px;font-size:.65rem;text-transform:uppercase;letter-spacing:1px;opacity:.5}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:11px 22px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
.topbar .crumb{color:var(--navy);font-weight:700;font-size:.95rem}
.topbar .right{display:flex;align-items:center;gap:12px}
.topbar .badge-role{background:var(--bg-tint);color:var(--navy);padding:4px 11px;border-radius:20px;font-size:.72rem;font-weight:600}
.topbar .avatar{width:30px;height:30px;border-radius:50%;background:var(--grad-navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.72rem}
.topbar .nav-toggle{display:none;background:none;border:none;color:var(--navy);font-size:1.4rem;cursor:pointer}
.content{padding:24px}

/* ---- Stat cards / panels ---- */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.stat .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--blue-bright);font-weight:700}
.stat .num{font-size:1.8rem;font-weight:800;color:var(--navy)}
.stat.accent{background:var(--grad-navy);color:#fff}
.stat.accent .lbl{color:rgba(255,255,255,.85)}
.stat.accent .num{color:#fff}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);margin-top:16px}
.panel h3{margin-bottom:12px;font-size:1.05rem}
.notice{background:#fff7e6;border:1px solid #f0e2b8;border-left:3px solid var(--gold);border-radius:var(--radius-sm);padding:11px 14px;font-size:.85rem;color:#7a5a10;margin-top:16px}

/* ---- Tables ---- */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
.tbl th{font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);background:var(--bg-alt)}
.tbl tr:hover td{background:var(--bg-alt)}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:600}
.pill-ok{background:#eafaf1;color:#1e7e34}
.pill-warn{background:#fff7e6;color:#9a6a00}
.pill-bad{background:#fdecea;color:#a94442}
.pill-mute{background:var(--bg-tint);color:var(--navy)}

/* ---- Institution switcher (superadmin, in the top bar) ---- */
.inst-switch{display:inline-flex;align-items:center}
.inst-switch select{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:4px 8px;font-size:.85rem;max-width:220px;color:var(--text);font-family:inherit}

/* ---- Mobile ---- */
@media (max-width:940px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-260px;top:0;width:230px;transition:left .25s;z-index:1000;height:100vh}
  .sidebar.open{left:0}
  .topbar .nav-toggle{display:block}
  .grid-3,.grid-2{grid-template-columns:1fr}
}