@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary:#2563eb; --primary-dk:#1d4ed8;
  --success:#16a34a; --warning:#d97706; --danger:#dc2626;
  --bg:#f1f5f9; --card:#ffffff; --text:#1e293b; --muted:#64748b;
  --border:#e2e8f0;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:14px;}
a{text-decoration:none;color:inherit;}

/* ── TOPBAR NAV ── */
.topnav{
  background:#1e293b;
  padding:0 20px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:999;
}
.topnav-left{
  display:flex;align-items:center;gap:10px;
}
.topnav-brand{
  font-size:15px;font-weight:700;color:#fff;
}
.topnav-user{
  font-size:13px;color:#94a3b8;
}

/* Desktop menu links */
.topnav-links{
  display:flex;align-items:center;gap:4px;
}
.topnav-links a{
  color:#94a3b8;font-size:13px;font-weight:500;
  padding:7px 12px;border-radius:6px;
  transition:all .15s;white-space:nowrap;
}
.topnav-links a:hover{background:#334155;color:#fff;}
.topnav-links a.active{background:var(--primary);color:#fff;}
.notif-wrap{position:relative;}
.notif-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--danger);color:#fff;
  font-size:9px;font-weight:700;
  width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* Mobile dropdown menu */
.menu-btn{
  display:none;
  background:#334155;border:none;color:#fff;
  padding:8px 14px;border-radius:8px;
  font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;
}
.dropdown-menu{
  display:none;
  position:absolute;top:56px;right:0;left:0;
  background:#1e293b;
  border-top:1px solid #334155;
  z-index:998;
}
.dropdown-menu a{
  display:block;
  color:#94a3b8;font-size:14px;font-weight:500;
  padding:14px 20px;
  border-bottom:1px solid #334155;
  transition:all .15s;
}
.dropdown-menu a:hover{background:#334155;color:#fff;}
.dropdown-menu a.active{color:#60a5fa;background:rgba(37,99,235,.15);}
.dropdown-menu.open{display:block;}

/* PAGE BODY */
.page-body{padding:20px;max-width:1200px;margin:0 auto;}

/* LOGIN */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e3a8a 0%,#0ea5e9 100%);}
.login-card{background:#fff;border-radius:16px;padding:40px 36px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.2);}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo h1{font-size:22px;font-weight:700;color:var(--primary);}
.login-logo p{color:var(--muted);font-size:13px;margin-top:4px;}
.role-tabs{display:flex;background:var(--bg);border-radius:8px;padding:4px;margin-bottom:24px;}
.role-tab{flex:1;text-align:center;padding:8px;border-radius:6px;cursor:pointer;font-weight:500;color:var(--muted);transition:all .2s;font-size:13px;}
.role-tab.active{background:var(--primary);color:#fff;}

/* FORMS */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-weight:500;margin-bottom:6px;font-size:13px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;color:var(--text);background:#fff;transition:border-color .2s;outline:none;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.form-group textarea{resize:vertical;min-height:90px;}
.form-group input:read-only{background:#f8fafc;color:var(--muted);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* TOGGLE SWITCH */
.toggle-wrap{display:flex;align-items:center;gap:10px;padding:10px 0;}
.switch{position:relative;display:inline-block;width:44px;height:24px;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#cbd5e1;transition:.3s;border-radius:24px;}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%;}
input:checked+.slider{background:var(--primary);}
input:checked+.slider:before{transform:translateX(20px);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .2s;font-family:inherit;}
.btn-primary{background:var(--primary);color:#fff;} .btn-primary:hover{background:var(--primary-dk);}
.btn-success{background:var(--success);color:#fff;} .btn-success:hover{background:#15803d;}
.btn-danger{background:var(--danger);color:#fff;}   .btn-danger:hover{background:#b91c1c;}
.btn-warning{background:var(--warning);color:#fff;} .btn-warning:hover{background:#b45309;}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-full{width:100%;justify-content:center;}
.btn-sm{padding:6px 14px;font-size:12px;}

/* CARDS */
.card{background:var(--card);border-radius:12px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.06);border:1px solid var(--border);margin-bottom:20px;}
.card-title{font-size:15px;font-weight:600;margin-bottom:16px;}

/* SECTION DIVIDER */
.section-divider{display:flex;align-items:center;gap:12px;margin:20px 0 16px;}
.section-divider span{font-size:13px;font-weight:600;white-space:nowrap;color:var(--muted);}
.section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:var(--border);}

/* STATS — always 2 columns */
.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.stat-card{background:var(--card);border-radius:12px;padding:16px;border:1px solid var(--border);}
.stat-card .label{font-size:11px;color:var(--muted);font-weight:500;}
.stat-card .value{font-size:24px;font-weight:700;margin-top:4px;}
.blue{color:var(--primary);} .green{color:var(--success);} .orange{color:var(--warning);} .red{color:var(--danger);}

/* TABLES */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
th{background:var(--bg);padding:10px 14px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);}
td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:#f8fafc;}

/* BADGES */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;text-transform:capitalize;}
.badge-pending{background:#fef3c7;color:#92400e;}
.badge-approved{background:#dcfce7;color:#166534;}
.badge-rejected{background:#fee2e2;color:#991b1b;}
.badge-submitted{background:#dbeafe;color:#1e40af;}
.badge-reviewed{background:#f0fdf4;color:#15803d;}

/* ALERTS */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:13px;font-weight:500;}
.alert-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;}
.alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;}
.alert-info{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe;}

/* KM ROW */
.km-row{display:flex;align-items:center;gap:10px;}
.km-row input{flex:1;}
.km-switch-label{font-size:12px;color:var(--muted);white-space:nowrap;}

/* LOCKED */
.locked-note{display:inline-flex;align-items:center;gap:5px;background:#fef3c7;color:#92400e;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;}

/* COLLAPSIBLE */
.school-list{display:none;margin-top:12px;}
.school-list.open{display:block;}

/* MISC */
.hidden{display:none!important;}
.mb-0{margin-bottom:0!important;}
.mt-8{margin-top:8px;}
.text-muted{color:var(--muted);}
.flex-between{display:flex;align-items:center;justify-content:space-between;}

/* MOBILE */
@media(max-width:768px){
  .topnav-links{display:none;}
  .menu-btn{display:block;}
  .form-row{grid-template-columns:1fr;}
  .page-body{padding:16px;}
}