/* ===== Base Layout & Theme ===== */
:root{
  --sky: #0ea5e9;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f8fafc;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.site{background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";}

/* Container (matches base.html layout) */
main.container{max-width:1200px;margin-inline:auto;padding:1rem;}
@media (min-width:640px){ main.container{padding:1.25rem;} }

/* Cards & Tiles (legacy classes kept) */
.card{
  background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1rem 1.25rem;
  box-shadow:0 8px 22px rgba(14,165,233,.10), 0 2px 8px rgba(14,165,233,.06);
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.tile{background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1rem;}

/* Buttons */
.btn{
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem .9rem;border-radius:.8rem;border:1px solid #0284c7;
  background:linear-gradient(180deg,#38bdf8,#0ea5e9);color:#fff;font-weight:700;
  box-shadow:0 6px 18px rgba(2,132,199,.22);
  transition:transform .06s ease, box-shadow .2s ease; will-change:transform;
}
.btn:hover{box-shadow:0 10px 24px rgba(2,132,199,.30);}
.btn:active{transform:translateY(1px) scale(.995);}

/* Tables */
.table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:.75rem;overflow:hidden;}
.table th,.table td{padding:.65rem .75rem;border-bottom:1px solid var(--line);text-align:left;}
.table thead th{background:var(--bg);font-weight:800;color:var(--ink);}
.table-scroll{overflow:auto;border-radius:.75rem;border:1px solid var(--line);}

/* Utility */
.muted{color:var(--muted);}
.big-counter{font-size:2.2rem;font-weight:900;letter-spacing:.02em}

/* ===== Home Counters – shared classes (template also has scoped CSS) ===== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;}
.stat-card{
  position:relative;background:#fff;border-radius:1.25rem;padding:1rem 1.25rem;border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(14,165,233,.14), 0 3px 10px rgba(14,165,233,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:160px;
}
.stat-title{font-weight:800;color:var(--ink);text-align:center;margin:0 0 .25rem 0;font-size:clamp(1rem,2.4vw,1.15rem)}
.stat-icon{font-size:1.35rem;opacity:.9;margin:.1rem 0 .35rem 0}
.stat-count{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight:900; letter-spacing:.03em;
  padding:.25rem .5rem; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:.6rem; text-align:center;
}
.corner-badge{
  position:absolute; top:0; left:0; transform: translate(-12%, -45%) rotate(-6deg);
  background: linear-gradient(135deg, var(--sky-100) 0%, var(--sky-200) 60%, var(--sky-300) 100%);
  color:#0c4a6e; border:1px solid var(--sky-300); border-radius:.75rem; padding:.25rem .5rem;
  font-weight:900; font-size:.85rem; box-shadow:0 6px 16px rgba(14,165,233,.25); pointer-events:none;
}

/* Per-dept accent variants */
.dept-ENG .corner-badge{ background:linear-gradient(135deg,#e0f2fe,#93c5fd); color:#1e3a8a; border-color:#93c5fd;}
.dept-LIN .corner-badge{ background:linear-gradient(135deg,#dcfce7,#86efac); color:#065f46; border-color:#86efac;}
.dept-FRN .corner-badge{ background:linear-gradient(135deg,#fae8ff,#e9d5ff); color:#6b21a8; border-color:#e9d5ff;}
.dept-EEL .corner-badge{ background:linear-gradient(135deg,#fff7ed,#fed7aa); color:#9a3412; border-color:#fed7aa;}
.dept-NAR .corner-badge{ background:linear-gradient(135deg,#fef9c3,#fde68a); color:#854d0e; border-color:#fde68a;}
.dept-CHN .corner-badge{ background:linear-gradient(135deg,#fee2e2,#fecaca); color:#7f1d1d; border-color:#fecaca;}
.dept-AR2 .corner-badge{ background:linear-gradient(135deg,#f1f5f9,#cbd5e1); color:#0f172a; border-color:#cbd5e1;}