/* Shared design language for every DANMAWeb Academy page. */
:root {
  --zhb-brand-primary: #173B67;
  --zhb-brand-primary-dark: #102D4F;
  --zhb-brand-accent: #159B7A;
  --zhb-brand-gold: #D59B16;
  --zhb-page-bg: #F6F8FC;
  --zhb-surface: #FFFFFF;
  --zhb-text: #253247;
  --zhb-muted: #687588;
  --zhb-border: #E0E7F0;
  --zhb-radius: 14px;
  --zhb-shadow: 0 8px 28px rgba(16,45,79,.07);
  --zhb-body-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zhb-heading-font: "Poppins", var(--zhb-body-font);
}
html { font-size: 16px; }
body { font-family: var(--zhb-body-font); color: var(--zhb-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body :is(h1,h2,h3,h4,h5,h6,.page-title,.section-title) { font-family: var(--zhb-heading-font); letter-spacing: -.018em; line-height: 1.25; }
body :is(button,input,select,textarea) { font-family: var(--zhb-body-font); }
button, [role="button"], input[type="submit"] { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; }
button:not(:disabled):hover, input[type="submit"]:not(:disabled):hover { filter: brightness(1.025); }
button:not(:disabled):active, input[type="submit"]:not(:disabled):active { transform: translateY(1px); }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid rgba(21,155,122,.35); outline-offset: 2px; }
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) { border-radius: 10px; }
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea):focus { border-color: var(--zhb-brand-accent); box-shadow: 0 0 0 3px rgba(21,155,122,.12); }
body :is(.admin-panel,.admin-stat-card,.admin-welcome,.admin-content-card,.teacher-panel,.teacher-card,.student-card,.student-panel,.content-card,.dashboard-card,.result-card,.quiz-card,.assignment-card,.material-card) { border-radius: var(--zhb-radius); }
body :is(.admin-panel,.teacher-panel,.student-panel,.content-card,.dashboard-card,.result-card,.quiz-card,.assignment-card,.material-card) { box-shadow: var(--zhb-shadow); }
body :is(.admin-panel,.teacher-panel,.student-panel,.content-card,.dashboard-card) { border-color: var(--zhb-border); }
body :is(.admin-nav a,.teacher-nav a,.student-nav a,.dashboard-nav a) { transition: background-color .15s ease, color .15s ease; }
body table { border-collapse: collapse; }
body :is(.admin-panel table,.teacher-panel table,.student-panel table,.zhb-report-table) th { font-weight: 700; }
body :is(.admin-panel table,.teacher-panel table,.student-panel table) th,
body :is(.admin-panel table,.teacher-panel table,.student-panel table) td { padding: .7rem .8rem; }
body :is(.admin-footer,.teacher-footer,.student-footer) { color: var(--zhb-muted); }
/* Integrated Supabase administration dashboard */
body .zhb-admin-main { background: var(--zhb-page-bg); color: var(--zhb-text); }
body .zhb-admin-side { background: linear-gradient(180deg,#173B67 0%,#102D4F 100%); }
body .zhb-admin-brand>span { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
body .zhb-admin-card, body .zhb-admin-stat { border: 1px solid var(--zhb-border); border-radius: var(--zhb-radius); box-shadow: var(--zhb-shadow); }
body .zhb-admin-card h2, body .zhb-admin-card h3, body .zhb-admin-top h1 { font-family: var(--zhb-heading-font); }
body .zhb-admin-btn { border-radius: 10px; }
body .zhb-admin-btn:not(.secondary):not(.danger) { background: linear-gradient(135deg,#173B67,#24558A); }
body .zhb-admin-btn.secondary { border: 1px solid var(--zhb-border); background: #F5F8FC; }
body .zhb-admin-table th { background: #F2F6FB; }
body .zhb-admin-table tbody tr:hover { background: #F8FBFE; }
/* Expanded reports and rankings */
.zhb-report-hero { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:24px 26px; margin-bottom:18px; border-radius:18px; color:#fff; background:linear-gradient(120deg,#4B2E24 0%,#352019 68%,#765648 100%); box-shadow:0 12px 28px rgba(75,46,36,.18); }
.zhb-report-hero h2,.zhb-report-hero p,.zhb-report-hero .zhb-report-kicker { color:#fff; }
.zhb-report-hero h2 { margin:7px 0 8px; font-size:clamp(1.3rem,2vw,1.8rem); }
.zhb-report-hero p { max-width:820px; opacity:.88; font-size:.92rem; }
.zhb-report-hero-mark { flex:0 0 72px; width:72px; height:72px; border:1px solid #ffffff60; border-radius:18px; display:grid; place-items:center; font-weight:800; font-size:1.2rem; letter-spacing:.05em; color:#4B2E24; background:#fff; }
.zhb-report-kicker { color:#765648; font-size:.69rem; font-weight:800; letter-spacing:.13em; }
.zhb-report-stat-grid .zhb-admin-stat { min-width:0; }
.zhb-report-stat-grid .zhb-admin-stat strong { font-size:clamp(1.3rem,2vw,1.8rem); overflow-wrap:anywhere; }
.zhb-report-top-name { font-size:1.15rem!important; }
.zhb-report-stat-grid .zhb-admin-stat span { color:var(--zhb-muted); font-size:.78rem; }
.zhb-report-scope-note { margin: -6px 0 20px; }
.zhb-report-card { padding:clamp(16px,2vw,24px); }
.zhb-report-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:17px; }
.zhb-report-section-heading h2 { margin:4px 0 6px; }
.zhb-report-section-heading p { color:var(--zhb-muted); font-size:.87rem; max-width:760px; }
.zhb-report-controls { display:grid; grid-template-columns:minmax(220px,1fr) minmax(260px,1fr); gap:13px; align-items:end; padding:16px; margin-bottom:16px; border:1px solid var(--zhb-border); background:#FBF7F0; border-radius:12px; }
.zhb-report-controls label { display:grid; gap:7px; color:#332923; font-size:.8rem; font-weight:700; }
.zhb-report-controls input,.zhb-report-controls select { width:100%; min-width:0; padding:11px 12px; color:var(--zhb-text); background:#fff; border:1px solid #E9DED2; border-radius:9px; }
.zhb-report-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; grid-column:1/-1; }
.zhb-report-controls-compact { grid-template-columns:minmax(200px,320px) 1fr; }
.zhb-report-result-caption { margin:12px 0; color:var(--zhb-muted); font-size:.88rem; font-weight:600; }
.zhb-report-table { width:100%; min-width:720px; }
.zhb-report-table th { color:#4B2E24; font-size:.73rem; text-transform:uppercase; letter-spacing:.035em; white-space:nowrap; }
.zhb-report-table td { font-size:.82rem; }
.zhb-report-table td small { color:var(--zhb-muted); }
.zhb-report-rank-number { display:inline-grid; min-width:34px; height:30px; padding:0 7px; place-items:center; border-radius:9px; color:#4B2E24; background:#F3E8D5; font-weight:800; }
.zhb-report-output { min-width:0; }
.zhb-individual-report-print { border:1px solid var(--zhb-border); border-radius:14px; padding:clamp(14px,2vw,22px); background:#fff; }
.zhb-report-student-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; border-bottom:1px solid var(--zhb-border); padding-bottom:16px; margin-bottom:18px; }
.zhb-report-student-header h3 { color:#4B2E24; font-size:1.35rem; margin:6px 0; }
.zhb-report-student-header p { color:var(--zhb-muted); font-size:.84rem; overflow-wrap:anywhere; }
.zhb-report-rank-badge { flex:0 0 auto; display:grid; gap:3px; padding:11px 14px; border-radius:12px; border:1px solid #E9DED2; background:#FBF7F0; }
.zhb-report-rank-badge small,.zhb-report-rank-badge span { color:#81766F; font-size:.7rem; }
.zhb-report-rank-badge strong { font-family:var(--zhb-heading-font); color:#4B2E24; font-size:1.75rem; }
.zhb-report-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:22px; }
.zhb-report-stats>div { padding:13px; border:1px solid var(--zhb-border); border-radius:11px; background:#FBF7F0; min-width:0; }
.zhb-report-stats small { display:block; color:var(--zhb-muted); font-size:.72rem; }
.zhb-report-stats strong { display:block; font-family:var(--zhb-heading-font); font-size:1.25rem; color:#4B2E24; margin-top:5px; overflow-wrap:anywhere; }
.zhb-individual-report-print h4 { margin:18px 0 9px; color:#4B2E24; }
.zhb-report-footnote { font-size:.76rem; color:var(--zhb-muted); margin-top:15px; }
.zhb-report-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media(max-width:900px){.zhb-report-detail-grid{grid-template-columns:1fr}.zhb-report-controls{grid-template-columns:1fr}.zhb-report-controls-compact{grid-template-columns:1fr}.zhb-report-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.zhb-report-hero{align-items:flex-start}.zhb-report-section-heading{flex-direction:column}}
@media(max-width:560px){.zhb-report-hero{padding:18px}.zhb-report-hero-mark{display:none}.zhb-report-actions{display:grid;grid-template-columns:1fr}.zhb-report-actions .zhb-admin-btn{width:100%}.zhb-report-student-header{flex-direction:column}.zhb-report-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.zhb-report-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print { .zhb-admin-side,.zhb-admin-top,.zhb-admin-notice,.zhb-report-controls,.zhb-report-actions { display:none!important; } body { background:white!important; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }