/* Presentation layer: keeps the existing attendance API and stacked chart. */
:root{--ink:#162c3c;--muted:#4c6374;--green:#25835e;--red:#da5263;--amber:#d39124;--purple:#8b6cd1}
body{background:#eef3f6;color:var(--ink);font-family:Prompt,Tahoma,sans-serif;font-variant-numeric:tabular-nums}
header{background:#fff!important;border-bottom:1px solid #d8e3e9!important;position:static!important;backdrop-filter:none!important}
.container{max-width:none!important;width:100%!important;margin:0 auto;padding-left:2.2vw!important;padding-right:2.2vw!important}
header .container{padding-top:18px;padding-bottom:18px}
header h1{font-size:clamp(25px,2vw,40px)!important;letter-spacing:-.025em;color:var(--ink)!important}
header p{font-size:clamp(14px,1vw,20px)!important;color:var(--muted)!important;margin-top:4px}
header img{height:64px!important}
header .bg-blue-50{background:#e4f3ed!important;color:var(--green)!important;border-radius:16px;padding:12px}
header .text-blue-600{color:var(--green)!important}
#display-school-year{color:#237050!important}
main{padding-top:20px!important;padding-bottom:20px!important;gap:20px!important;overflow:visible!important}
.modern-card{border:1px solid #dce5eb!important;border-radius:18px;box-shadow:0 3px 10px #20394e04;transition:none}
.modern-card:hover{transform:none;box-shadow:0 3px 10px #20394e04;border-color:#dce5eb}
.date-strip{background:transparent;border:0!important;box-shadow:none!important;border-radius:0;padding:0!important;min-height:48px}
.date-strip label{font-size:18px;color:var(--ink);font-weight:600}
.date-strip .fa-calendar-alt{color:var(--green)!important}
.date-tools{display:flex;align-items:center;gap:10px}
#display-date{font-size:clamp(18px,1.3vw,26px);font-weight:600;color:var(--ink);margin-left:12px}
#date-selector{background:white;font-size:16px;border:1px solid #bfced8;border-radius:10px;padding:10px 14px;min-height:44px}
#full-screen{font:inherit;font-size:15px;color:#244b3d;border:1px solid #b9cec3;background:#fff;border-radius:10px;padding:10px 16px;min-height:44px;cursor:pointer}
#full-screen:focus-visible,#date-selector:focus-visible{outline:3px solid #25835e;outline-offset:3px}
.summary-grid{gap:16px!important}
.summary-grid>.modern-card{padding:20px 24px!important;border-left:0!important;min-height:175px}
.summary-grid h2{font-size:clamp(16px,1.15vw,23px)!important;color:var(--muted)!important;letter-spacing:0;font-weight:500}
.summary-grid .bg-icon{display:none}
.summary-grid .text-xs{font-size:13px!important}
.summary-grid .mt-4{margin-top:10px!important}
.summary-grid .text-slate-400{color:var(--muted)!important}
.summary-grid .text-sm{font-size:16px}
.summary-grid [class*="text-[10px]"]{font-size:14px!important}
#students-present,#students-absent-total,#students-late{font-size:clamp(42px,3.7vw,72px)!important;line-height:1.12;letter-spacing:-.035em;font-weight:600}
.summary-grid>.modern-card:first-child{background:#e1f1e9!important;border-color:#b7d9c8!important}
.summary-grid>.modern-card:first-child h2,.summary-grid>.modern-card:first-child #students-present{color:#195c40!important}
.summary-grid>.modern-card:first-child .rounded-full{color:#195c40!important;background:#c8e4d5!important}
#students-absent-total{color:#a22d42}#students-late{color:#925f10}
#count-absent,#count-leave-personal,#count-leave-sick{font-size:19px!important}
#count-absent{color:#a22d42!important}#count-leave-personal{color:#975311!important}#count-leave-sick{color:#7250ad!important}
#api-status-text{font-size:clamp(20px,1.55vw,30px)!important;color:var(--ink);line-height:1.4;margin-top:14px}
#last-updated{font-size:15px;line-height:1.65;color:var(--muted)}
.chart-card{padding:22px 24px!important;min-height:420px!important}
.chart-heading{margin-bottom:8px!important}.chart-heading h2{font-size:clamp(20px,1.35vw,28px)!important;color:var(--ink)!important}
.chart-heading .bg-slate-100{display:none}
.chart-note{font-size:14px;color:var(--muted);font-weight:400;margin-top:4px}
#chart-container{min-height:350px;height:calc(100vh - 475px);flex:1}
footer{background:transparent!important;border:0!important;padding:8px 0 14px!important;color:#526b7c!important;font-size:12px!important}
@media(min-width:1100px) and (max-height:850px){header .container{padding-top:10px;padding-bottom:10px}header img{height:48px!important}header h1{font-size:27px!important}main{gap:12px!important;padding-top:12px!important;padding-bottom:8px!important}.summary-grid>.modern-card{padding:12px 18px!important;min-height:150px}.summary-grid h2{font-size:16px!important}.summary-grid .text-sm{font-size:13px}#students-present,#students-absent-total,#students-late{font-size:46px!important}#api-status-text{font-size:21px!important}#last-updated{font-size:12px}.summary-grid .mt-4{margin-top:7px!important}.chart-card{padding:14px 18px!important;min-height:300px!important}#chart-container{min-height:240px;height:calc(100vh - 400px)}.chart-heading h2{font-size:20px!important}.chart-note{font-size:12px}#display-date{font-size:18px}.date-strip label{font-size:15px}}
@media(max-width:1099px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.summary-grid>.modern-card{padding:16px!important}.date-strip{align-items:flex-start!important}#display-date{display:block;margin:4px 0 0}.chart-heading{align-items:flex-start}#chart-container{height:430px}.chart-card{overflow-x:auto}.chart-card #chart-container{min-width:850px}.chart-note{max-width:500px}}
@media(max-width:599px){.container{padding-left:14px!important;padding-right:14px!important}header img{height:44px!important}header h1{font-size:23px!important}header p{font-size:12px!important}.date-tools{width:100%}#date-selector{min-width:0;flex:1}#full-screen{padding:10px}.summary-grid{gap:10px!important}.summary-grid>.modern-card{padding:13px!important;min-height:155px}.summary-grid h2{font-size:14px!important}.summary-grid .rounded-full{display:none}.summary-grid .text-sm{font-size:12px}#students-present,#students-absent-total,#students-late{font-size:44px!important}#api-status-text{font-size:20px!important}#last-updated{font-size:12px}.chart-card{padding:14px!important}.chart-note{font-size:12px}footer .container{flex-wrap:wrap}}
@media(min-width:1100px) and (min-height:650px){body{height:100vh;min-height:0}main{flex:1 1 0;min-height:0}.chart-card{flex:1 1 0;min-height:0!important}.chart-note{flex-shrink:0}#chart-container{height:0;min-height:0;flex:1 1 0}}