/* Main MIS analytics: visual hierarchy, data density and direct exploration. */
.attendance-dashboard { --ad-ink:#193d34; --ad-muted:#6e817b; --ad-green:#25745d; --ad-line:#e5ece8; --ad-low:#d78567; --ad-mid:#d6b768; color:var(--ad-ink); }
.ad-summary { display:grid; grid-template-columns:1.7fr repeat(4,minmax(0,1fr)); align-items:center; border:1px solid #dce7e1; border-radius:18px; background:linear-gradient(110deg,#edf5ef,#fff 55%); margin-bottom:18px; overflow:hidden; }
.ad-lead { padding:24px 26px; }
.ad-lead>p { margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.02em; }
.ad-rate { font-size:54px; font-weight:700; line-height:1.05; letter-spacing:-3px; font-variant-numeric:tabular-nums; }
.ad-lead>span,.ad-lead>small { display:block; font-size:11px; line-height:1.6; margin-top:8px; color:var(--ad-muted); }
.ad-lead>small { color:var(--ad-green); font-size:10px; max-width:245px; }
.ad-kpi { padding:6px 20px; min-width:0; border-left:1px solid #dce7e1; display:flex; flex-direction:column; gap:10px; }
.ad-kpi>span { font-size:11px; font-weight:600; }
.ad-kpi>strong { font-size:32px; line-height:1; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.ad-kpi>small { color:var(--ad-muted); font-size:10px; line-height:1.6; }
.ad-absent>strong,.ad-concern>strong { color:#aa5c42; }
.ad-main-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
.ad-panel { border:1px solid #dfe9e3; border-radius:16px; background:#fff; padding:22px; min-width:0; overflow:hidden; }
.ad-panel-head { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:16px; }
.ad-panel-head p { font-size:10px; color:var(--ad-muted); margin:0 0 6px; letter-spacing:.02em; }
.ad-panel-head h2 { font-size:16px; margin:0; font-weight:700; letter-spacing:-.4px; color:var(--ad-ink); }
.ad-trend { grid-column:span 8; }
.ad-mix { grid-column:span 4; }
.ad-calendar-panel { grid-column:1 / -1; }
.ad-cohorts { grid-column:span 7; }
.ad-bands { grid-column:span 5; }
.ad-shortlist { grid-column:span 7; }
.ad-periods { grid-column:span 5; }
.ad-last { text-align:right; flex-shrink:0; }
.ad-last strong { font-size:24px; display:block; letter-spacing:-1px; color:var(--ad-green); }
.ad-last span { font-size:10px; color:var(--ad-muted); }
.ad-svg-wrap { width:100%; }
.ad-svg-wrap svg { width:100%; height:auto; overflow:visible; display:block; }
.ad-svg-wrap svg text { font-family:inherit; font-size:11px; fill:#778781; }
.ad-gridline { stroke:#e8eeeb; stroke-width:1; }
.ad-line { fill:none; stroke:var(--ad-green); stroke-width:2.6; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.ad-area { fill:#e8f2ed; opacity:.8; }
.ad-point { fill:#fff; stroke:var(--ad-green); stroke-width:1.8; cursor:crosshair; }
.ad-point:hover,.ad-point:focus-visible { r:6; fill:var(--ad-green); outline:none; stroke-width:3; }
.ad-average { stroke:#9faeaa; stroke-dasharray:4 4; }
.ad-compare-label select { background:#f6f9f7; border:1px solid #dde7e1; border-radius:7px; padding:7px; color:var(--ad-ink); font:inherit; font-size:11px; max-width:130px; }
.ad-bubble { cursor:pointer; }
.ad-bubble circle { fill:#6ca88d; stroke:#fff; stroke-width:2; fill-opacity:.7; }
.ad-bubble.low circle { fill:#d78567; }
.ad-bubble.mid circle { fill:#d6b768; }
.ad-bubble text { font-size:10px!important; fill:#3a5149!important; pointer-events:none; }
.ad-bubble:hover circle,.ad-bubble:focus-visible circle { stroke:#193d34; stroke-width:2.5; fill-opacity:1; }
.ad-bubble:focus { outline:none; }
.ad-ring-layout { display:flex; flex-direction:column; align-items:center; gap:16px; }
.ad-ring { position:relative; width:180px; height:180px; flex-shrink:0; }
.ad-ring svg { width:100%; height:100%; display:block; }
.ad-ring-track { fill:none; stroke:#edf2ef; stroke-width:20; }
.ad-ring-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; pointer-events:none; }
.ad-ring-center strong { font-size:27px; letter-spacing:-1px; line-height:1.3; }
.ad-ring-center span { font-size:10px; color:var(--ad-muted); }
.ad-ring-key { width:100%; display:grid; gap:8px; max-height:130px; overflow:auto; }
.ad-ring-key>div { display:grid; grid-template-columns:7px minmax(0,1fr) auto; align-items:center; gap:9px; font-size:10px; }
.ad-ring-key i { width:7px; height:7px; border-radius:50%; }
.ad-ring-key strong { font-size:11px; font-weight:600; }
.ad-ring-key span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ad-calendar-scroll { max-width:100%; overflow-x:auto; padding:4px 0 12px; }
.ad-calendar { display:grid; grid-template-columns:30px max-content; grid-template-rows:20px auto; width:max-content; min-width:0; gap:4px 10px; }
.ad-calendar-months { grid-column:2; display:grid; grid-template-columns:repeat(var(--ad-weeks),14px); gap:4px; font-size:9px; color:var(--ad-muted); }
.ad-calendar-months span { overflow:visible; }
.ad-calendar-days { grid-row:2; display:flex; flex-direction:column; justify-content:space-between; font-size:9px; color:var(--ad-muted); }
.ad-calendar-cells { display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,14px); grid-auto-columns:14px; gap:4px; }
.ad-day { width:14px; height:14px; padding:0!important; border:0; border-radius:3px; cursor:pointer; background:#edf1ee; }
.ad-day.empty,.ad-legend .empty { background:#edf1ee; }
.ad-day.low,.ad-legend .low { background:#d78567; }
.ad-day.mid,.ad-legend .mid { background:#dcc27c; }
.ad-day.high,.ad-legend .high { background:#478d6c; }
.ad-day:disabled { cursor:default; opacity:1; }
.ad-day:not(:disabled):hover,.ad-day:focus-visible { outline:2px solid var(--ad-ink); outline-offset:2px; }
.ad-legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; align-items:center; font-size:10px; color:var(--ad-muted); }
.ad-legend>span { display:flex; align-items:center; gap:5px; }
.ad-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; }
.ad-legend small { margin-left:auto; font-size:10px; }
.ad-distribution { height:220px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; gap:14px; padding-top:14px; }
.ad-dist-item { display:flex; align-items:center; flex-direction:column; gap:10px; min-width:0; padding:7px 4px!important; background:transparent; border:1px solid transparent; border-radius:8px; color:var(--ad-ink); cursor:pointer; font:inherit; }
.ad-dist-item>strong { font-size:22px; letter-spacing:-.5px; }
.ad-dist-item>span:last-child { font-size:10px; white-space:nowrap; }
.ad-dist-track { display:flex; align-items:end; width:75%; height:115px; border-radius:5px; background:#f5f8f6; overflow:hidden; }
.ad-dist-track i { display:block; width:100%; min-height:2px; background:#478d6c; border-radius:5px 5px 0 0; }
.ad-dist-item.low i { background:#d78567; }.ad-dist-item.mid i { background:#dcc27c; }.ad-dist-item.empty i { background:#c8d2cc; }
.ad-dist-item:hover,.ad-dist-item.selected { background:#f6f9f7; border-color:#dfe9e3; }
.ad-dist-item:focus-visible,.ad-followups button:focus-visible { outline:2px solid var(--ad-green); outline-offset:2px; }
.ad-footnote { color:var(--ad-muted); font-size:10px; margin:16px 0 0; line-height:1.6; }
.ad-followups { display:grid; }
.ad-followups button { display:grid; grid-template-columns:22px minmax(0,1fr) 45px 15px; gap:10px; align-items:center; padding:12px 0; border:0; border-bottom:1px solid #edf1ee; background:transparent; text-align:left; cursor:pointer; font:inherit; color:var(--ad-ink); }
.ad-followups button:last-child { border-bottom:0; }
.ad-followups button:hover { background:#f8faf8; }
.ad-followups button strong { display:block; font-size:12px; font-weight:600; }
.ad-followups button small { display:block; color:var(--ad-muted); font-size:10px; margin-top:4px; }
.ad-followups button b { color:#aa5c42; font-size:14px; font-variant-numeric:tabular-nums; text-align:right; }
.ad-rank { color:#a1afa8; font-size:10px; }
.ad-column-scroll { overflow-x:auto; max-width:100%; }
.ad-columns { display:flex; align-items:end; gap:16px; min-height:180px; padding-top:12px; }
.ad-column { display:flex; flex:1 0 58px; max-width:120px; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.ad-column>strong { font-size:14px; font-weight:600; }
.ad-column-track { height:120px; display:flex; align-items:end; width:60%; background:#f4f7f5; border-radius:5px; overflow:hidden; }
.ad-column-track i { display:block; width:100%; min-height:2px; border-radius:4px 4px 0 0; background:#78a7a5; }
.ad-column>span:not(.ad-column-track) { font-size:10px; line-height:1.4; }
.ad-column>small { font-size:9px; color:var(--ad-muted); }
.ad-roster { margin-top:20px; border:1px solid #dfe9e3; border-radius:14px; background:#fff; padding:18px 20px; }
.ad-roster>summary { cursor:pointer; font-size:13px; font-weight:600; color:#193d34; }
.ad-roster>summary span { float:right; font-size:11px; color:#6e817b; font-weight:400; }
.ad-roster .mis-analytics-pupils { margin-top:12px; padding:10px 0 0; border:0; box-shadow:none; }
.ad-empty { min-height:150px; display:grid; align-content:center; justify-items:center; color:#6e817b; font-size:12px; text-align:center; padding:25px; }
@media(min-width:1350px) { .ad-summary { grid-template-columns:1.8fr repeat(4,minmax(0,1fr)); } }
@media(max-width:1150px) { .ad-summary { grid-template-columns:repeat(4,minmax(0,1fr)); } .ad-lead { grid-column:1 / -1; padding:20px 24px; display:grid; grid-template-columns:1fr auto; gap:4px 16px; } .ad-lead>p { grid-column:1; } .ad-rate { grid-column:2; grid-row:1 / 4; } .ad-lead>small { max-width:none; }.ad-kpi { margin:6px 0 20px; padding:6px 16px; } .ad-kpi:nth-child(2) { border-left:0; } .ad-trend { grid-column:span 7; } .ad-mix { grid-column:span 5; } }
@media(max-width:850px) { .ad-panel { padding:18px; } .ad-main-grid { gap:14px; } .ad-trend,.ad-cohorts,.ad-shortlist { grid-column:1 / -1; } .ad-mix,.ad-bands,.ad-periods { grid-column:span 6; } .ad-ring-layout { gap:10px; } .ad-kpi>strong { font-size:28px; } }
@media(max-width:560px) { .ad-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .ad-lead { padding:20px 18px; }.ad-rate { font-size:44px; }.ad-lead>small { max-width:190px; font-size:9px; }.ad-lead>span { font-size:10px; }.ad-kpi { margin:8px 0 18px; padding:4px 18px; }.ad-kpi:nth-child(4) { border-left:0; }.ad-panel { grid-column:1 / -1; padding:16px; }.ad-panel-head h2 { font-size:15px; }.ad-panel-head p { font-size:9px; }.ad-last strong { font-size:20px; }.ad-ring-layout { flex-direction:row; gap:18px; }.ad-ring { width:145px; height:145px; }.ad-ring-key { flex:1; }.ad-ring-center strong { font-size:23px; }.ad-legend { gap:10px; }.ad-legend small { margin-left:0; width:100%; }.ad-roster { padding:16px; }.ad-roster>summary span { display:block; float:none; margin:8px 0 0; }.ad-followups button { gap:6px; }.ad-followups button strong { font-size:11px; }.ad-svg-wrap svg text { font-size:12px; } }
.ad-label-on-hover text { opacity:0; }.ad-label-on-hover:hover text,.ad-label-on-hover:focus-visible text { opacity:1; }
.ad-filter-drawer { border:1px solid #dfe9e3; border-radius:12px; background:#fff; margin-bottom:16px; }
.ad-filter-drawer>summary { display:flex; align-items:center; gap:15px; padding:15px 18px; cursor:pointer; list-style:none; font-size:12px; color:#193d34; }
.ad-filter-drawer>summary::-webkit-details-marker { display:none; }
.ad-filter-drawer>summary>span { color:#71827b; font-size:11px; flex:1; }
.ad-filter-drawer>summary>b { color:#25745d; font-size:11px; font-weight:600; }
.ad-filter-drawer>summary:focus-visible { outline:2px solid #25745d; outline-offset:2px; border-radius:10px; }
.ad-filter-drawer[open]>summary { border-bottom:1px solid #e6ece8; }
.ad-filter-drawer .mis-analytics-filters { border:0; margin:0; }
.ad-calendar-panel { grid-column:span 7; order:3; }
.ad-trend { order:1; }.ad-mix { order:2; }.ad-bands { order:4; }.ad-cohorts { order:5; }.ad-shortlist { order:6; grid-column:span 5; }.ad-periods { order:7; grid-column:1 / -1; }
.ad-calendar-months { grid-template-columns:repeat(var(--ad-weeks),var(--ad-cell)); }
.ad-calendar-cells { grid-template-rows:repeat(7,var(--ad-cell)); grid-auto-columns:var(--ad-cell); }
.ad-day { width:var(--ad-cell); height:var(--ad-cell); }
@media(max-width:850px) { .ad-calendar-panel,.ad-cohorts { grid-column:1 / -1; }.ad-bands,.ad-shortlist { grid-column:span 6; }.ad-bands { order:4; }.ad-shortlist { order:5; }.ad-cohorts { order:6; } }
@media(max-width:560px) { .ad-filter-drawer>summary { flex-wrap:wrap; gap:6px 12px; padding:13px 15px; }.ad-filter-drawer>summary>span { order:3; flex:1 1 100%; font-size:10px; line-height:1.5; }.ad-filter-drawer>summary>b { margin-left:auto; }.ad-panel { grid-column:1 / -1; }.ad-calendar-panel { order:3; }.ad-cohorts { order:5; }.ad-shortlist { order:6; } }
.ad-secondary .ad-trend { grid-column:span 7; }.ad-secondary .ad-calendar-panel { grid-column:span 5; order:2; }.ad-secondary .ad-mix { grid-column:span 5; }.ad-secondary .ad-cohorts { grid-column:span 7; }
@media(max-width:850px) { .ad-secondary .ad-panel { grid-column:1 / -1; } }
@media(max-width:560px) { .ad-line-chart text { font-size:20px!important; }.ad-scatter text { font-size:17px!important; }.ad-scatter .ad-bubble text { font-size:17px!important; } }