/* ==========================================================
   House of Genius ERP — Brand Stylesheet
   Palette inspired by houseofgenius.in: warm coral, sunshine
   yellow, soft teal, cream background, rounded & playful.
   ========================================================== */
:root{
  --hog-coral: #FF7A59;
  --hog-coral-dark: #F0603A;
  --hog-yellow: #FFC845;
  --hog-teal: #2EC4B6;
  --hog-navy: #2B2250;
  --hog-cream: #FFF8F0;
  --hog-ink: #3A3157;
  --hog-muted: #8A8298;
  --radius: 16px;
}

*{ box-sizing: border-box; }
body{
  background: var(--hog-cream);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--hog-ink);
}
h1,h2,h3,h4,h5,.brand-font{ font-family: 'Baloo 2', 'Poppins', sans-serif; color: var(--hog-navy); }

a{ text-decoration:none; }

/* ---------- Auth / Login screen ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 15% 20%, #fff0e2 0, transparent 45%),
              radial-gradient(circle at 85% 80%, #e8fbf9 0, transparent 45%),
              var(--hog-cream);
  padding: 24px;
}
.auth-card{
  width:100%; max-width:420px; background:#fff; border-radius:24px;
  box-shadow: 0 20px 50px rgba(43,34,80,0.12); padding: 40px 36px; text-align:center;
}
.auth-logo{
  width:64px; height:64px; border-radius:18px; background: linear-gradient(135deg, var(--hog-coral), var(--hog-yellow));
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:28px; color:#fff; font-weight:700;
}
.auth-card .form-control{ border-radius:12px; padding:12px 14px; border:1.5px solid #eee0d4; }
.auth-card .form-control:focus{ border-color: var(--hog-coral); box-shadow:0 0 0 3px rgba(255,122,89,.15); }
.btn-hog{
  background: linear-gradient(135deg, var(--hog-coral), var(--hog-coral-dark)); border:none; color:#fff;
  border-radius:12px; padding:11px 18px; font-weight:600; transition: transform .15s ease, box-shadow .15s ease;
}
.btn-hog:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(240,96,58,.25); color:#fff; }
.btn-teal{ background: var(--hog-teal); border:none; color:#fff; border-radius:12px; font-weight:600; }
.btn-teal:hover{ background:#25a99d; color:#fff; }
.demo-creds{ font-size:12.5px; color:var(--hog-muted); background:#fbf5ee; border-radius:12px; padding:10px 14px; margin-top:18px; }

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:250px; background: var(--hog-navy); color:#fff; flex-shrink:0; padding: 20px 14px;
  position: sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding: 6px 10px 22px; }
.sidebar .brand .logo-chip{
  width:38px; height:38px; border-radius:11px; background: linear-gradient(135deg, var(--hog-coral), var(--hog-yellow));
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff;
}
.sidebar .brand div b{ font-family:'Baloo 2',sans-serif; color:#fff; font-size:15px; display:block; line-height:1.1;}
.sidebar .brand div span{ font-size:11px; color:#c9c3e6; }
.nav-section{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8b84b8; margin:18px 10px 6px; }
.sidebar .nav-link{
  color:#d9d5ef; padding:10px 12px; border-radius:12px; font-size:14.5px; display:flex; align-items:center; gap:10px; margin-bottom:2px;
}
.sidebar .nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.sidebar .nav-link.active{ background: var(--hog-coral); color:#fff; font-weight:600; }
.sidebar .nav-link .ic{ width:20px; text-align:center; }

.main{ flex:1; min-width:0; }
.topbar{
  background:#fff; padding:14px 24px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #f1e9dd; position:sticky; top:0; z-index:20;
}
.topbar .school-pill{
  background: #fff1e8; color: var(--hog-coral-dark); padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600;
}
.avatar{
  width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg, var(--hog-teal), #17a094);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.content{ padding: 24px; }

/* ---------- Cards / widgets ---------- */
.card{ border:1px solid #f1e9dd; border-radius: var(--radius); box-shadow: 0 4px 14px rgba(43,34,80,0.04); }
.stat-card{ border-radius:18px; padding:20px; color:#fff; position:relative; overflow:hidden; }
.stat-card .stat-num{ font-size:28px; font-weight:700; font-family:'Baloo 2',sans-serif; }
.stat-card .stat-label{ font-size:13px; opacity:.9; }
.stat-card .stat-ic{ position:absolute; right:14px; top:14px; font-size:34px; opacity:.35; }
.bg-c1{ background: linear-gradient(135deg, var(--hog-coral), #ff9a72); }
.bg-c2{ background: linear-gradient(135deg, var(--hog-teal), #45d6c8); }
.bg-c3{ background: linear-gradient(135deg, #6C63FF, #8b84ff); }
.bg-c4{ background: linear-gradient(135deg, var(--hog-yellow), #ffda80); color:#5c4200 !important; }

.section-title{ font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--hog-navy); }
.table thead th{ font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--hog-muted); border-bottom:2px solid #f1e9dd; }
.table td, .table th{ vertical-align:middle; padding:12px 14px; }
.table-hover tbody tr:hover{ background:#fff8f0; }

.btn-primary, .btn-outline-primary{ --bs-btn-bg: var(--hog-coral); --bs-btn-border-color: var(--hog-coral); --bs-btn-hover-bg: var(--hog-coral-dark); --bs-btn-hover-border-color: var(--hog-coral-dark); }
.btn-outline-primary{ --bs-btn-color: var(--hog-coral); --bs-btn-hover-color:#fff; }
.form-control, .form-select{ border-radius:10px; border:1.5px solid #eee0d4; }
.form-control:focus, .form-select:focus{ border-color: var(--hog-coral); box-shadow:0 0 0 3px rgba(255,122,89,.12); }
.form-label{ font-weight:600; font-size:13.5px; color:var(--hog-navy); }

.badge{ font-weight:600; padding:6px 10px; border-radius:8px; }
.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }

.pill-tabs .nav-link{ border-radius:999px; padding:6px 16px; color:var(--hog-muted); font-weight:600; font-size:13.5px; }
.pill-tabs .nav-link.active{ background:var(--hog-coral); color:#fff; }

.empty-state{ text-align:center; padding:50px 20px; color:var(--hog-muted); }
.empty-state .ic{ font-size:44px; margin-bottom:10px; }

@media (max-width: 900px){
  .sidebar{ position:fixed; left:-260px; z-index:1000; transition:.25s; }
  .sidebar.open{ left:0; }
  .content{ padding:16px; }
}