/* ============================================================
   SKOOLY BRAND STYLESHEET — v1.0
   Smart School Management · skooly.pk
   Font: Poppins (Google Fonts) — load before this sheet:
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* Brand core */
  --sk-navy:   #0F1B33;  /* ink, dark surfaces */
  --sk-blue:   #2563EB;  /* primary actions */
  --sk-green:  #22C55E;  /* success, growth */
  --sk-amber:  #FBBF24;  /* highlights, money */
  --sk-surface:#F1F5F9;  /* app background */

  /* Blue ramp */
  --sk-blue-50:#EFF6FF; --sk-blue-100:#DBEAFE; --sk-blue-200:#BFDBFE;
  --sk-blue-300:#93C5FD; --sk-blue-400:#60A5FA; --sk-blue-500:#3B82F6;
  --sk-blue-600:#2563EB; --sk-blue-700:#1D4ED8; --sk-blue-800:#1E40AF; --sk-blue-900:#1E3A8A;

  /* Green ramp */
  --sk-green-50:#F0FDF4; --sk-green-100:#DCFCE7; --sk-green-200:#BBF7D0;
  --sk-green-300:#86EFAC; --sk-green-400:#4ADE80; --sk-green-500:#22C55E;
  --sk-green-600:#16A34A; --sk-green-700:#15803D; --sk-green-800:#166534; --sk-green-900:#14532D;

  /* Amber ramp */
  --sk-amber-50:#FFFBEB; --sk-amber-100:#FEF3C7; --sk-amber-200:#FDE68A;
  --sk-amber-300:#FCD34D; --sk-amber-400:#FBBF24; --sk-amber-500:#F59E0B;
  --sk-amber-600:#D97706; --sk-amber-700:#B45309; --sk-amber-800:#92400E; --sk-amber-900:#78350F;

  /* Slate (neutrals) */
  --sk-slate-50:#F8FAFC; --sk-slate-100:#F1F5F9; --sk-slate-200:#E2E8F0;
  --sk-slate-300:#CBD5E1; --sk-slate-400:#94A3B8; --sk-slate-500:#64748B;
  --sk-slate-600:#475569; --sk-slate-700:#334155; --sk-slate-800:#1E293B; --sk-slate-900:#0F172A;

  /* Navy tints (dark UI surfaces) */
  --sk-navy-700:#1E2E4F; --sk-navy-600:#27395F; --sk-navy-500:#33466F;

  /* Semantic */
  --sk-ink:        var(--sk-navy);
  --sk-ink-soft:   var(--sk-slate-500);
  --sk-danger:     #EF4444;
  --sk-bg:         var(--sk-surface);
  --sk-card:      #FFFFFF;
  --sk-border:     var(--sk-slate-200);

  /* Type */
  --sk-font: 'Poppins', 'Segoe UI', system-ui, sans-serif;

  /* Radius (Skooly is softly rounded) */
  --sk-r-sm: 8px; --sk-r-md: 12px; --sk-r-lg: 16px; --sk-r-xl: 22px; --sk-r-full: 999px;

  /* Elevation */
  --sk-shadow-sm: 0 1px 2px rgba(15,27,51,.06);
  --sk-shadow-md: 0 4px 12px rgba(15,27,51,.08);
  --sk-shadow-lg: 0 12px 32px rgba(15,27,51,.14);

  /* Spacing scale (4px base) */
  --sk-s1:4px; --sk-s2:8px; --sk-s3:12px; --sk-s4:16px; --sk-s5:20px;
  --sk-s6:24px; --sk-s8:32px; --sk-s10:40px; --sk-s12:48px; --sk-s16:64px;
}

/* ---------- Base ---------- */
.sk-app, .sk-app body { font-family: var(--sk-font); color: var(--sk-ink); background: var(--sk-bg);
  -webkit-font-smoothing: antialiased; }
.sk-app ::selection { background: var(--sk-blue-100); }
.sk-app a { color: var(--sk-blue-600); text-decoration: none; }
.sk-app a:hover { color: var(--sk-blue-700); text-decoration: underline; }

/* ---------- Buttons ---------- */
.sk-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 14px/1 var(--sk-font); padding:0 20px; height:42px; border-radius:var(--sk-r-md);
  border:1px solid transparent; cursor:pointer; transition:all .15s ease; white-space:nowrap; }
.sk-btn:focus-visible { outline:2px solid var(--sk-blue-600); outline-offset:2px; }
.sk-btn-primary { background:var(--sk-blue-600); color:#fff; box-shadow:var(--sk-shadow-sm); }
.sk-btn-primary:hover { background:var(--sk-blue-700); }
.sk-btn-primary:active { background:var(--sk-blue-800); }
.sk-btn-success { background:var(--sk-green-500); color:#fff; }
.sk-btn-success:hover { background:var(--sk-green-600); }
.sk-btn-navy { background:var(--sk-navy); color:#fff; }
.sk-btn-navy:hover { background:var(--sk-navy-700); }
.sk-btn-outline { background:#fff; color:var(--sk-ink); border-color:var(--sk-slate-300); }
.sk-btn-outline:hover { border-color:var(--sk-blue-600); color:var(--sk-blue-600); background:var(--sk-blue-50); }
.sk-btn-ghost { background:transparent; color:var(--sk-blue-600); }
.sk-btn-ghost:hover { background:var(--sk-blue-50); }
.sk-btn-danger { background:var(--sk-danger); color:#fff; }
.sk-btn-danger:hover { filter:brightness(.92); }
.sk-btn-sm { height:34px; padding:0 14px; font-size:13px; border-radius:var(--sk-r-sm); }
.sk-btn-lg { height:50px; padding:0 28px; font-size:15px; border-radius:var(--sk-r-lg); }
.sk-btn:disabled { opacity:.45; pointer-events:none; }

/* ---------- Forms ---------- */
.sk-label { display:block; font:500 13px/1.2 var(--sk-font); color:var(--sk-slate-600); margin-bottom:6px; }
.sk-input, .sk-select { width:100%; box-sizing:border-box; height:42px; padding:0 14px;
  font:400 14px var(--sk-font); color:var(--sk-ink); background:#fff;
  border:1px solid var(--sk-slate-300); border-radius:var(--sk-r-md); transition:border .15s, box-shadow .15s; }
.sk-input::placeholder { color:var(--sk-slate-400); }
.sk-input:focus, .sk-select:focus { outline:none; border-color:var(--sk-blue-600);
  box-shadow:0 0 0 3px var(--sk-blue-100); }
.sk-input-error { border-color:var(--sk-danger); }
.sk-help { font:400 12px var(--sk-font); color:var(--sk-slate-500); margin-top:6px; }

/* ---------- Cards ---------- */
.sk-card { background:var(--sk-card); border:1px solid var(--sk-border);
  border-radius:var(--sk-r-lg); box-shadow:var(--sk-shadow-sm); padding:var(--sk-s6); }
.sk-card-title { font:600 16px var(--sk-font); color:var(--sk-ink); margin:0 0 4px; }
.sk-card-sub { font:400 13px var(--sk-font); color:var(--sk-slate-500); margin:0; }

/* Stat tiles (dashboard) */
.sk-stat { border-radius:var(--sk-r-lg); padding:18px 20px; color:#fff; box-shadow:var(--sk-shadow-md); }
.sk-stat .sk-stat-label { font:500 12px var(--sk-font); opacity:.85; letter-spacing:.02em; }
.sk-stat .sk-stat-value { font:600 26px/1.25 var(--sk-font); margin-top:6px; }
.sk-stat .sk-stat-delta { font:500 11px var(--sk-font); opacity:.85; margin-top:6px; }
.sk-stat-blue  { background:linear-gradient(135deg,#3B82F6,#2563EB); }
.sk-stat-green { background:linear-gradient(135deg,#34D399,#16A34A); }
.sk-stat-indigo{ background:linear-gradient(135deg,#6366F1,#4F46E5); }
.sk-stat-amber { background:linear-gradient(135deg,#FBBF24,#F59E0B); }

/* ---------- Badges ---------- */
.sk-badge { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:var(--sk-r-full); font:500 12px var(--sk-font); }
.sk-badge-blue  { background:var(--sk-blue-100);  color:var(--sk-blue-700); }
.sk-badge-green { background:var(--sk-green-100); color:var(--sk-green-700); }
.sk-badge-amber { background:var(--sk-amber-100); color:var(--sk-amber-700); }
.sk-badge-slate { background:var(--sk-slate-100); color:var(--sk-slate-600); }
.sk-badge-red   { background:#FEE2E2; color:#B91C1C; }

/* ---------- Sidebar (dark app nav) ---------- */
.sk-sidebar { background:var(--sk-navy); color:#fff; width:240px; min-height:100%;
  padding:20px 14px; box-sizing:border-box; }
.sk-nav-item { display:flex; align-items:center; gap:12px; padding:11px 14px; margin:2px 0;
  border-radius:var(--sk-r-md); font:500 13.5px var(--sk-font); color:#C7D2E4;
  cursor:pointer; transition:background .15s,color .15s; }
.sk-nav-item:hover { background:rgba(255,255,255,.06); color:#fff; }
.sk-nav-item.active { background:var(--sk-blue-600); color:#fff; }

/* ---------- Top bar ---------- */
.sk-topbar { display:flex; align-items:center; gap:16px; height:64px; padding:0 24px;
  background:#fff; border-bottom:1px solid var(--sk-border); }

/* ---------- Table ---------- */
.sk-table { width:100%; border-collapse:collapse; font:400 13.5px var(--sk-font); }
.sk-table th { text-align:left; font:600 12px var(--sk-font); color:var(--sk-slate-500);
  text-transform:uppercase; letter-spacing:.05em; padding:12px 16px;
  background:var(--sk-slate-50); border-bottom:1px solid var(--sk-border); }
.sk-table td { padding:14px 16px; border-bottom:1px solid var(--sk-slate-100); color:var(--sk-ink); }
.sk-table tr:hover td { background:var(--sk-blue-50); }

/* ---------- Misc ---------- */
.sk-avatar { width:36px; height:36px; border-radius:var(--sk-r-full); background:var(--sk-blue-100);
  color:var(--sk-blue-700); display:inline-flex; align-items:center; justify-content:center;
  font:600 13px var(--sk-font); }
.sk-progress { height:8px; border-radius:var(--sk-r-full); background:var(--sk-slate-200); overflow:hidden; }
.sk-progress > span { display:block; height:100%; border-radius:var(--sk-r-full); background:var(--sk-blue-600); }
.sk-divider { height:1px; background:var(--sk-border); border:0; margin:var(--sk-s6) 0; }