:root{
  --nav:#082846;
  --nav2:#123e69;
  --blue:#176fce;
  --blue2:#0d5dad;
  --green:#0e9a72;
  --green2:#087a5c;
  --gold:#f2b624;
  --gold-soft:#fff4cb;
  --teal:#11a8a0;
  --bg:#f2f7fb;
  --card:#ffffff;
  --text:#12233c;
  --muted:#62728a;
  --line:#d9e5ef;
  --shadow:0 14px 36px rgba(20,48,82,.09);
}

/* ===== LOGIN: two-panel style inspired by supplied reference ===== */
.login-screen{
  padding:36px;
  background:
    radial-gradient(circle at 10% 15%, rgba(33,130,216,.18), transparent 25%),
    radial-gradient(circle at 88% 82%, rgba(14,154,114,.13), transparent 25%),
    linear-gradient(135deg,#f5f9fc 0%,#eaf3fa 100%);
}
.login-shell{
  width:min(1180px,100%);
  min-height:650px;
  display:grid;
  grid-template-columns:1.12fr .95fr;
  background:#fff;
  border:1px solid #d9e5ef;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 75px rgba(20,48,82,.16);
}
.login-visual{
  position:relative;
  padding:48px 56px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 8%, rgba(255,255,255,.12) 0 18%, transparent 18.2%),
    radial-gradient(circle at 5% 100%, rgba(242,182,36,.18) 0 20%, transparent 20.2%),
    linear-gradient(145deg,#082f5c 0%,#0f5fa5 46%,#0d8f78 100%);
}
.login-visual::after{
  content:"";
  position:absolute;
  width:250px;height:250px;
  right:-80px;bottom:-80px;
  border:34px solid rgba(255,255,255,.07);
  border-radius:50%;
}
.login-brand-row{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.login-brand-mark{
  width:58px;height:58px;border-radius:18px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#fff 0%,#e9f7f3 100%);
  color:#0b5275;font-weight:900;font-size:1.12em;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  border:3px solid rgba(255,255,255,.55);
}
.login-brand-row b{display:block;font-size:1.26em;letter-spacing:.02em}
.login-brand-row span{display:block;margin-top:3px;color:#dbeeff;font-size:.88em}
.login-visual-copy{position:relative;z-index:1;max-width:520px}
.eyebrow,.section-kicker,.hero-kicker{
  font-size:.77em;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.login-visual-copy .eyebrow{color:#ffe08b}
.login-visual-copy h2{font-size:3em;line-height:1.08;margin:14px 0 20px;max-width:540px}
.login-visual-copy p{font-size:1.03em;line-height:1.65;color:#e5f2fb;max-width:520px}
.login-feature-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.login-feature-pills span{
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  font-size:.83em;font-weight:700;
}
.login-school-note{position:relative;z-index:1;color:#d8e9f7;font-size:.88em}
.login-panel{
  display:grid;place-items:center;
  padding:44px 56px;
  background:
    radial-gradient(circle at 100% 0%,rgba(242,182,36,.07),transparent 22%),
    #fff;
}
.login-panel-inner{width:min(430px,100%)}
.login-mobile-logo{display:none}
.login-eyebrow{color:var(--green)}
.login-panel h1{text-align:left;font-size:2em;margin:8px 0 5px}
.login-intro{text-align:left!important;font-size:.98em!important;line-height:1.6;margin:0 0 24px!important}
.login-panel label{font-size:.94em;font-weight:800}
.login-panel input,.login-panel select{
  min-height:54px;
  font-size:1.02em;
  border:1.5px solid #cbdbe9;
  background:#f8fbfe;
}
.login-panel input:focus,.login-panel select:focus{
  outline:none;border-color:#2282d2;
  box-shadow:0 0 0 4px rgba(34,130,210,.13);
  background:#fff;
}
.login-submit{
  min-height:54px;
  margin-top:12px!important;
  font-size:1.03em!important;
  background:linear-gradient(100deg,#135ca8 0%,#1487a1 55%,#0b956e 100%)!important;
  box-shadow:0 12px 22px rgba(14,119,125,.19);
}
.login-help{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:22px;padding-top:18px;
  border-top:1px solid #e6edf3;
  color:#728198;font-size:.83em;line-height:1.45;
}
.help-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:4px;flex:none}

/* ===== MAIN SHELL ===== */
.sidebar{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 18%),
    linear-gradient(180deg,#082641 0%,#092f52 62%,#07584e 130%);
  border-right:1px solid rgba(255,255,255,.04);
}
.brand-icon{
  background:linear-gradient(135deg,#f4c642,#fff1a8);
  color:#123758;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.brand span{color:#bcd4e8}
.side-section{color:#7fa9c8}
.nav{position:relative}
.nav::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:4px;
  border-radius:10px;background:transparent;
}
.nav:hover{background:rgba(40,112,172,.19)}
.nav.active{
  background:linear-gradient(90deg,rgba(32,112,184,.32),rgba(20,146,112,.16));
  box-shadow:inset 0 0 0 1px rgba(121,188,240,.08);
}
.nav.active::before{background:linear-gradient(180deg,#62b5ff,#36c79c)}
.topbar{
  border-bottom:1px solid #dde8f1;
  box-shadow:0 6px 20px rgba(20,48,82,.035);
}
.topbar-left b{color:#10233d}
#modeBadge.badge.ok{
  background:#e5f8f0;color:#087352;border:1px solid #c5eedf;
}
.ui-tools{background:#f1f7fb}
.font-btn.active{
  background:linear-gradient(135deg,#176fce,#0e9a72)!important;
  border-color:transparent!important;
}
.content{background:transparent}

/* ===== DASHBOARD HERO ===== */
.dashboard-hero{
  position:relative;
  min-height:260px;
  border-radius:28px;
  padding:36px 40px;
  margin-bottom:18px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  overflow:hidden;
  box-shadow:0 20px 42px rgba(13,64,111,.15);
  background:
    radial-gradient(circle at 92% 50%,rgba(255,255,255,.10) 0 15%,transparent 15.3%),
    radial-gradient(circle at 93% 50%,transparent 0 22%,rgba(242,182,36,.14) 22.2% 24%,transparent 24.2%),
    linear-gradient(105deg,#0c3767 0%,#1767ac 46%,#0d9077 100%);
}
.dashboard-hero::before{
  content:"";position:absolute;right:-90px;bottom:-120px;width:310px;height:310px;
  border-radius:50%;border:40px solid rgba(255,255,255,.06)
}
.hero-copy,.hero-score{position:relative;z-index:1}
.hero-kicker{color:#ffe08b}
.hero-copy h2{font-size:2.1em;margin:8px 0 7px;line-height:1.18}
.hero-copy p{margin:0;color:#e7f3fb;font-size:1em}
.hero-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.hero-btn{min-height:47px}
.hero-btn.light{
  background:#fff;color:#153653;border-color:#fff;
}
.hero-btn.outline{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.38);color:#fff;
}
.hero-score{display:grid;place-items:center;gap:8px;min-width:170px}
.hero-score-ring{
  --pct:calc(var(--score) * 1%);
  width:142px;height:142px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(#ffd25c var(--pct),rgba(255,255,255,.18) 0);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.hero-score-ring::before{
  content:"";position:absolute;width:110px;height:110px;border-radius:50%;
  background:rgba(8,49,89,.88);
}
.hero-score-ring div{position:relative;z-index:1;text-align:center}
.hero-score-ring b{display:block;font-size:1.6em}
.hero-score-ring span{display:block;font-size:.72em;color:#d9edf8;margin-top:1px}
.hero-score small{color:#e7f3fb}

/* KPI cards with subtle color identity */
.premium-kpis .kpi{position:relative;overflow:hidden;padding:20px 20px 19px}
.premium-kpis .kpi::after{
  content:"";position:absolute;right:-28px;top:-28px;width:92px;height:92px;border-radius:50%;opacity:.10
}
.kpi-icon{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:13px;font-weight:900
}
.kpi-blue .kpi-icon{background:#e7f2ff;color:#176fce}.kpi-blue::after{background:#176fce}
.kpi-green .kpi-icon{background:#e6f7f1;color:#0e9a72}.kpi-green::after{background:#0e9a72}
.kpi-gold .kpi-icon{background:#fff3c8;color:#a86f00}.kpi-gold::after{background:#f2b624}
.kpi-teal .kpi-icon{background:#e4f8f7;color:#0b8f89}.kpi-teal::after{background:#11a8a0}
.premium-kpis .kpi b{font-size:2em;margin:3px 0 2px}

/* Dashboard sections */
.dashboard-status-card{padding:24px}
.dashboard-two-column{display:grid;grid-template-columns:1.4fr .85fr;gap:28px}
.section-heading-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:8px}
.section-kicker{display:block;color:#0d8570;margin-bottom:4px}
.section-heading-row h3,.today-card h3{margin:0;font-size:1.18em}
.premium-meter{height:10px}
.premium-meter i{background:linear-gradient(90deg,#176fce 0%,#11a8a0 54%,#0e9a72 100%)}
.chip-blue{background:#e9f3ff;color:#145fab}
.chip-green{background:#e6f7f1;color:#087456}
.chip-gold{background:#fff4cb;color:#8d6200}
.active-schedule-panel{border-left:1px solid #e4ecf3;padding-left:24px}
.active-schedule-card{
  display:flex;flex-direction:column;gap:7px;
  background:linear-gradient(135deg,#f1f7ff,#eefaf7);
  border:1px solid #d7e7ee;border-radius:16px;padding:16px;margin-top:8px
}
.active-schedule-card span{color:var(--muted);font-size:.87em}
.active-schedule-card .btn{align-self:flex-start;margin-top:5px}
.premium-success{
  display:flex;flex-direction:column;gap:3px;
  border:1px solid #cceedd;
  background:linear-gradient(90deg,#eaf9f3,#f7fcfa);
}
.today-card{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.today-icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,#fff1b8,#ffd25c);font-size:1.35em
}

/* ===== GENERAL CARDS / TABLES / BUTTONS ===== */
.card,.kpi,.report-card{
  border:1px solid #dbe6ef;
  box-shadow:0 12px 28px rgba(20,48,82,.055);
}
.card:hover,.kpi:hover,.report-card:hover{
  border-color:#c9dce9;
}
.btn.primary{
  background:linear-gradient(100deg,#176fce 0%,#118b8a 58%,#0e9a72 100%);
  border-color:transparent;
  box-shadow:0 8px 16px rgba(17,126,139,.12);
}
.btn.primary:hover{filter:brightness(.97)}
.btn:not(.primary):not(.danger){
  border-color:#d7e3ed;background:#f7fafc;color:#1c3c5a
}
.badge.warn{background:#fff3cb;color:#906300;border:1px solid #f6dea0}
.badge.ok{background:#e6f7ef;color:#08714f;border:1px solid #c8ebdc}
.notice{background:#eef6ff;color:#174f83;border-color:#d7e8f8}
.success{background:#eaf8f2;color:#0c694b}
.issue.warn{background:#fff5d8;color:#866000}
.issue.bad{background:#fff0ee;color:#9c3d31}
table thead th{
  background:linear-gradient(180deg,#f3f8fc,#eaf2f8);
  color:#2d4760;
}
table tbody tr:hover td{background:#f8fbfd}
.sched{
  background:linear-gradient(135deg,#e9f3ff,#edf9f6);
  color:#105c8b;
  border:1px solid #d3e7ef
}
.sched.fixed{
  background:linear-gradient(135deg,#fff3cb,#fff9e8);
  color:#886100;border-color:#f2dda0
}
.att-buttons button.sel{
  background:linear-gradient(135deg,#176fce,#0e9a72)
}
.toast{background:linear-gradient(100deg,#155f9f,#0d8c72)}
.spinner{border-top-color:#0e9a72}

/* responsive */
@media(max-width:960px){
  .login-shell{grid-template-columns:1fr;min-height:auto}
  .login-visual{display:none}
  .login-panel{padding:34px 26px}
  .login-mobile-logo{display:block;margin-bottom:12px}
  .login-mobile-logo .login-logo{
    background:linear-gradient(135deg,#176fce,#0e9a72);
  }
  .dashboard-two-column{grid-template-columns:1fr}
  .active-schedule-panel{border-left:0;border-top:1px solid #e4ecf3;padding-left:0;padding-top:20px}
}
@media(max-width:720px){
  .dashboard-hero{padding:28px 22px;align-items:flex-start}
  .hero-score{display:none}
  .hero-copy h2{font-size:1.65em}
  .today-card{grid-template-columns:auto 1fr}
  .today-card .btn{grid-column:1/-1}
}