/* Shared school identity for public verification and administration. */
:root {
  --school-yellow: #f4b400;
  --school-ink: #302812;
}

.school-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.topbar-icon, .header-logo, .sidebar-icon,
.login-logo .logo-icon {
  background: white;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
  overflow: hidden;
}

.topbar-icon, .header-logo { width: 48px; height: 48px; }
.login-logo .logo-icon { width: 88px; height: 88px; }
.sidebar-icon { width: 44px; height: 44px; }

.topbar, header {
  background: var(--school-yellow);
  color: var(--school-ink);
  gap: 16px;
}
.topbar-title, .header-text h1 { color: var(--school-ink); line-height: 1.5; }
.topbar-sub, .header-text p { color: #584316; opacity: 1; }
.topbar-admin, header a {
  color: var(--school-ink);
  background: #fff4cc;
  border-color: #a77800;
  flex-shrink: 0;
}
.topbar-admin:hover, header a:hover { background: white; color: var(--school-ink); }
.card-hero, .card-header {
  background: linear-gradient(135deg, #f4b400, #ffdb63);
}
.card-hero h1, .card-header h2 { color: var(--school-ink); }
.card-hero p, .card-header p { color: #584316; }
.btn-verify, .btn-primary { background: var(--school-yellow); color: var(--school-ink); }
.btn-verify:hover, .btn-primary:hover { background: #e3a600; color: var(--school-ink); }
.login-page { background: linear-gradient(135deg, #f4b400, #ffe18a 55%, #fff8df); }
.sidebar { border-right: 3px solid var(--school-yellow); }
.sidebar-title { font-size: 11px; line-height: 1.6; }
.nav-item.active { background: var(--school-yellow); color: var(--school-ink); }
.sidebar-subtitle, .nav-section-label, .user-role { color: #e8d9aa; }
.user-avatar { background: var(--school-yellow); color: var(--school-ink); }

@media (max-width: 480px) {
  .topbar, header { padding: 12px; flex-wrap: wrap; }
  .topbar-brand, .header-brand { flex: 1 1 240px; }
  .topbar-title, .header-text h1 { font-size: 12px; }
}