:root {
  --bridge-ink: #1f2933;
  --bridge-muted: #6b7785;
  --bridge-line: #e4e8ee;
  --bridge-bg: #f5f7fa;
  --bridge-brand: #1d4ed8;
  --bridge-brand-ink: #ffffff;
  --bridge-side: #111827;
  --bridge-side-ink: #cbd5e1;
  --bridge-side-active: #1f2937;
  --sidebar-w: 240px;
}
body { background: var(--bridge-bg); color: var(--bridge-ink); }
.app-shell { display: flex; min-height: 100vh; }
.app-side {
  width: var(--sidebar-w); background: var(--bridge-side); color: var(--bridge-side-ink);
  flex: 0 0 var(--sidebar-w); display: flex; flex-direction: column;
}
.app-side .brand { padding: 1.1rem 1.25rem; font-weight: 700; color: #fff; letter-spacing: .02em; border-bottom: 1px solid #1f2937; }
.app-side .brand small { display: block; font-weight: 400; color: var(--bridge-side-ink); font-size: .75rem; }
.app-side nav { padding: .75rem; flex: 1; }
.app-side .nav-link { color: var(--bridge-side-ink); border-radius: .5rem; padding: .55rem .75rem; display: flex; gap: .65rem; align-items: center; }
.app-side .nav-link:hover, .app-side .nav-link.active { background: var(--bridge-side-active); color: #fff; }
.app-side .nav-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; padding: .9rem .75rem .3rem; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-top { background: #fff; border-bottom: 1px solid var(--bridge-line); padding: .6rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.app-content { padding: 1.25rem; }
.kpi { background: #fff; border: 1px solid var(--bridge-line); border-radius: .75rem; padding: 1rem 1.1rem; }
.kpi .label { color: var(--bridge-muted); font-size: .8rem; }
.kpi .value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.card { border-color: var(--bridge-line); border-radius: .75rem; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
@media (min-width: 992px) {
  .app-side { position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow-y: auto; }
}
@media (max-width: 991.98px) {
  .app-side { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .2s; z-index: 1040; }
  .app-side.open { transform: none; }
}

/* ---- sizing helpers (replace inline style attributes so a strict CSP can be used) ---- */
.mw-26 { max-width: 26rem; } .mw-30 { max-width: 30rem; } .mw-32 { max-width: 32rem; }
.mw-34 { max-width: 34rem; } .mw-36 { max-width: 36rem; } .mw-38 { max-width: 38rem; }
.w-4 { width: 4rem; } .w-4-5 { width: 4.5rem; } .w-7 { width: 7rem; } .w-8-5 { width: 8.5rem; }
.w-9 { width: 9rem; } .w-9-5 { width: 9.5rem; } .col-check { width: 2.5rem; } .z-5 { z-index: 5; }

/* ---- dashboard ---- */
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 320px; }
.card-title-sm { font-size: .95rem; font-weight: 600; margin: 0; }
.card-sub { color: var(--bridge-muted); font-size: .8rem; }
.viz-table { font-size: .8rem; }
.empty { color: var(--bridge-muted); font-size: .9rem; padding: 2rem 0; text-align: center; }
details.table-view summary { cursor: pointer; font-size: .8rem; color: var(--bridge-muted); margin-top: .5rem; }
progress.meter { -webkit-appearance: none; appearance: none; height: 8px; border: 0; border-radius: 4px; background: var(--bridge-line); overflow: hidden; }
progress.meter::-webkit-progress-bar { background: var(--bridge-line); border-radius: 4px; }
progress.meter::-webkit-progress-value { background: #2a78d6; border-radius: 4px; }
progress.meter::-moz-progress-bar { background: #2a78d6; border-radius: 4px; }

/* ---- attendance matrix ---- */
.matrix th, .matrix td { text-align: center; white-space: nowrap; padding: .3rem .45rem; }
.matrix th:first-child, .matrix td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; }
.matrix thead th:first-child { background: #f8f9fa; }
.matrix .group-start { border-left: 2px solid var(--bridge-line); }