/* [SCHOOL NAME] Academy Platform — interface styles. Brand colours come from Settings → Branding. */
:root {
  --brand: #1f4e79;
  --brand-2: #f2a900;
  --surface: #f5f6f8;
  --line: #e4e7eb;
  --sidebar-w: 256px;
}
body { background: var(--surface); color: #1d2430; }
a { color: var(--brand); }

/* Buttons & accents follow the brand colour */
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--brand) 75%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--brand) 75%, #000); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); }
.text-bg-primary { background-color: var(--brand) !important; }
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; color: #fff; }
.form-control:focus, .form-select:focus { border-color: color-mix(in srgb, var(--brand) 55%, #fff); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 20%, transparent); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.page-link { color: var(--brand); }
.active > .page-link, .page-link.active { background-color: var(--brand); border-color: var(--brand); }
.nav-pills .nav-link.active { background: var(--brand); }
.nav-tabs .nav-link.active { color: var(--brand); font-weight: 600; }

/* App shell */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--brand);
  background-image: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.28));
  color: #fff; position: fixed; inset: 0 auto 0 0; overflow-y: auto; z-index: 1040;
  transition: transform .2s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.1rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar-brand:hover { color: #fff; }
.sidebar-logo { max-height: 38px; max-width: 64px; background: #fff; border-radius: 6px; padding: 2px; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--brand-2); color: #1d2430; font-size: 1.15rem; flex-shrink: 0; }
.brand-mark.lg { width: 48px; height: 48px; font-size: 1.4rem; }
.brand-name { font-weight: 600; line-height: 1.2; font-size: .98rem; }
.sidebar-nav { padding: .5rem .6rem 2rem; }
.nav-group-label { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; opacity: .6; padding: 1rem .6rem .35rem; }
.sidebar-link { display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.86); text-decoration: none; padding: .52rem .7rem; border-radius: 8px; font-size: .92rem; }
.sidebar-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar-link.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-2); }
.app-main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.app-topbar { height: 60px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 1rem 0 1.5rem; position: sticky; top: 0; z-index: 1020; }
.topbar-title { font-weight: 600; font-size: 1.05rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem; }
.app-content { padding: 1.5rem; flex: 1; max-width: 1400px; width: 100%; }
.app-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--line); }
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-main { margin-left: 0; }
  body.sidebar-open .app-sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1035; }
  .app-content { padding: 1rem; }
  .app-topbar { padding-left: .5rem; }
}

/* Cards & content */
.card { border: 1px solid var(--line); border-radius: 12px; }
.card-header { background: #fff; border-bottom: 1px solid var(--line); font-weight: 600; padding: .85rem 1.1rem; border-radius: 12px 12px 0 0 !important; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.45rem; margin: 0; font-weight: 650; }
.page-head .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.stat { padding: 1.1rem 1.2rem; }
.stat .label { font-size: .8rem; color: #6b7480; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.stat .icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--brand); }
.table > :not(caption) > * > * { padding: .65rem .8rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7480; font-weight: 600; background: #fafbfc; }
.table-card { margin: 0; }
.empty { text-align: center; color: #6b7480; padding: 2.5rem 1rem; }
.empty i { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .5; }
.class-card { border-left: 4px solid var(--brand); }
.class-card.cancelled { border-left-color: #dc3545; opacity: .75; }
.when { font-variant-numeric: tabular-nums; }
.kv dt { color: #6b7480; font-weight: 500; font-size: .85rem; }
.kv dd { margin-bottom: .7rem; }
.att-grid .btn-check + .btn { padding: .2rem .5rem; font-size: .8rem; }
.perm-grid { columns: 2 280px; }
.perm-grid .form-check { break-inside: avoid; }
.sortable-row { cursor: default; }

/* Guest pages (login, apply, public forms) */
body.guest { background: var(--surface); }
.guest-band { position: absolute; top: 0; left: 0; right: 0; height: 260px; background: var(--brand); background-image: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.3)); z-index: 0; }
.guest-wrap { position: relative; z-index: 1; max-width: 480px; padding-top: 3rem; padding-bottom: 3rem; }
.guest-wrap.guest-wide { max-width: 780px; }
.guest-brand { color: #fff; }
.guest-card { border-radius: 14px; }

/* Signature pad */
.signature-pad { touch-action: none; background: repeating-linear-gradient(to bottom, transparent 0 140px, #c9ced6 140px 141px, transparent 141px 180px); border-radius: 6px; cursor: crosshair; display: block; }
.signature-img { max-height: 110px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }

/* Form builder */
.field-row { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: .75rem 1rem; margin-bottom: .6rem; }
.field-row .type { font-size: .75rem; color: #6b7480; }

@media print {
  .app-sidebar, .app-topbar, .app-footer, .no-print { display: none !important; }
  .app-main { margin: 0; }
}