*{box-sizing:border-box} :root{--page-max:1600px;--gutter:clamp(14px,2.5vw,36px);font-family:system-ui,-apple-system,"Noto Sans Bengali","Segoe UI",sans-serif;color:#17211b;background:#f4f7f4}body{margin:0}.topbar{background:#14532d;color:#fff;padding:24px max(var(--gutter),calc((100vw - var(--page-max))/2 + var(--gutter)));display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}.topbar h1{margin:2px 0;font-size:clamp(1.45rem,3vw,2rem)}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;opacity:.8}.sub{margin:6px 0 0;color:#dcece1;font-size:.92rem}.pill{padding:8px 12px;border-radius:999px;background:#ffffff20;font-size:.84rem}.container{max-width:var(--page-max);margin:22px auto;padding:0 var(--gutter)}.notice{background:#fff7df;border:1px solid #e8ce7a;border-radius:12px;padding:14px 16px;line-height:1.65;margin-bottom:18px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.tab,.button{border:0;border-radius:9px;padding:11px 15px;font:inherit;font-weight:650;cursor:pointer}.tab{background:#e4ebe5;color:#23432e}.tab.active{background:#14532d;color:white}.panel{background:white;border:1px solid #dce5de;border-radius:16px;padding:clamp(16px,3vw,26px);box-shadow:0 5px 20px #183c2410}.section-heading{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-bottom:18px}.section-heading h2{margin:0 0 5px;font-size:1.35rem}.section-heading p,.muted{margin:0;color:#617067;font-size:.92rem}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0}label{display:flex;flex-direction:column;gap:7px;font-size:.92rem;font-weight:600}input,select{width:100%;min-width:0;border:1px solid #cbd7ce;border-radius:8px;padding:11px 10px;background:white;color:#17211b;font:inherit}input:focus,select:focus,button:focus-visible{outline:3px solid #93c5a3;outline-offset:2px}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.metric{border:1px solid #dfe7e0;background:#f8faf8;border-radius:12px;padding:13px;display:flex;flex-direction:column;gap:6px}.metric span{font-size:.82rem;color:#617067}.metric strong{font-size:1.55rem}.metric.present{border-color:#a9d9b7;background:#f0fbf3}.metric.absent{border-color:#edc1bd;background:#fff5f4}.metric.pending{border-color:#ecd99e;background:#fffbec}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.button.primary{background:#166534;color:white}.button.secondary{background:#e9efea;color:#203d29}.button.danger{background:#fee2e2;color:#991b1b}.button:disabled{opacity:.55;cursor:not-allowed}.table-wrap{overflow-x:auto;margin-top:12px}.data-table{border-collapse:collapse;width:100%;min-width:540px}.data-table th,.data-table td{padding:11px 10px;border-bottom:1px solid #e5ebe6;text-align:left;vertical-align:middle}.data-table th{background:#f4f8f4;color:#3b5141;font-size:.88rem}.data-table td select{min-width:130px}.submit-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}.hidden{display:none!important}.empty{padding:24px;text-align:center;color:#6b776e;background:#f7f9f7;border-radius:10px}.activity-item{border-bottom:1px solid #e5ebe6;padding:13px 0}.activity-item:last-child{border:0}.activity-time{font-size:.82rem;color:#68766c}.activity-text{margin-top:4px;line-height:1.5}.export-grid{display:flex;gap:10px;flex-wrap:wrap}.file-button{display:inline-flex;justify-content:center}.warning{color:#805b00;background:#fff7df;padding:11px;border-radius:9px;line-height:1.5}.form-actions{display:flex;align-items:end}.dialog-content{padding:22px;min-width:min(90vw,520px)}dialog{border:0;border-radius:16px;box-shadow:0 20px 80px #0003;max-width:95vw}dialog::backdrop{background:#0b1b10a8}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:20px}footer{text-align:center;padding:24px 14px;color:#66746a;font-size:.82rem}@media(max-width:600px){.topbar{padding:18px var(--gutter)}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.submit-row .button{width:100%}.dialog-content{min-width:0;padding:16px}.dialog-actions button{flex:1}.container{margin:14px auto}.tab{flex:1;padding:10px 8px;font-size:.88rem}}


/* Inline present/absent choices beside each student's name */
.student-attendance-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.student-name{font-weight:600;min-width:120px}
.attendance-options{display:flex;gap:8px;flex-wrap:wrap}
.attendance-choice{border:1px solid #cbd7ce;border-radius:999px;background:#fff;color:#33483a;padding:8px 13px;font:inherit;font-size:.9rem;font-weight:650;cursor:pointer;white-space:nowrap}
.attendance-choice.present-choice.selected{background:#166534;border-color:#166534;color:#fff}
.attendance-choice.absent-choice.selected{background:#b91c1c;border-color:#b91c1c;color:#fff}
.attendance-choice:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:520px){.student-attendance-row{align-items:flex-start;flex-direction:column;gap:9px}.attendance-options{width:100%}.attendance-choice{flex:1}}

.date-display{display:block;color:#14532d;background:#f0fbf3;border:1px solid #cde8d3;border-radius:8px;padding:8px 10px;font-size:.92rem;font-weight:700;letter-spacing:.01em}

.required-mark{color:#b91c1c;font-size:.75rem;font-weight:700}.optional-mark{color:#617067;font-size:.75rem;font-weight:500}

.school-address{margin:2px 0 0;color:#dcece1;font-size:.95rem;font-weight:700;letter-spacing:.04em}

/* Date entry is always day-month-year; the native picker is opened from the calendar button. */
.date-input-row{display:flex;align-items:center;gap:8px;position:relative}
.date-input-row #attendanceDateText{flex:1;min-width:0}
.calendar-button{flex:0 0 auto;width:44px;height:44px;border:1px solid #cbd7ce;border-radius:8px;background:#f8faf8;font-size:1.15rem;cursor:pointer}
.native-date-picker{position:absolute;right:0;top:0;width:44px;height:44px;padding:0;border:0;opacity:0;overflow:hidden;pointer-events:none}


/* Attendance history with per-record edit/delete controls */
.records-panel{margin-top:18px}.records-table{min-width:850px}.record-actions{white-space:nowrap}.record-actions .button{padding:8px 10px;font-size:.86rem}.record-status{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}.record-status-submitted{background:#dcfce7;color:#166534}.record-status-draft{background:#fef3c7;color:#92400e}


/* One reusable comment per attendance date, shared across classes and sections. */
.date-comment-label{display:flex;flex-direction:column;gap:7px;margin:4px 0 18px;font-size:.92rem;font-weight:650}
.date-comment-label textarea{width:100%;min-height:68px;resize:vertical;border:1px solid #cbd7ce;border-radius:8px;padding:11px 10px;background:#fff;color:#17211b;font:inherit;line-height:1.5}
.date-comment-label .muted{font-size:.82rem;font-weight:400;line-height:1.45}
.record-comment{min-width:180px;max-width:280px;white-space:pre-wrap;overflow-wrap:anywhere}
.records-table{min-width:1040px}

/* Read-only attendance record viewer */
.view-dialog-content{width:min(94vw,760px);max-height:88vh;overflow:auto}.view-comment-block{margin:14px 0;padding:12px 14px;background:#f5f8f5;border:1px solid #dce5de;border-radius:10px;line-height:1.5}.view-comment-block p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.view-summary-grid{margin:14px 0}.attendance-view-table{min-width:420px}.view-status{display:inline-block;padding:4px 9px;border-radius:999px;font-size:.82rem;font-weight:700}.view-status-present{background:#dcfce7;color:#166534}.view-status-absent{background:#fee2e2;color:#991b1b}.view-status-pending{background:#fef3c7;color:#92400e}

.attendance-view-table td.absent-name{color:#b91c1c;font-weight:700}
.off-day-box{background:#eef2ff;color:#3730a3;font-size:1.05rem;line-height:1.7}
/* Responsive attendance list (mobile fix) */
.attendance-table{min-width:0!important;width:100%;table-layout:fixed}
.attendance-table th:first-child,.attendance-table td:first-child{width:54px;padding-left:6px;padding-right:6px;text-align:center}
.attendance-table td,.attendance-table th{overflow-wrap:anywhere}
.attendance-table .student-name{min-width:0;flex:1 1 auto;display:block;color:#17211b;overflow-wrap:anywhere}
.attendance-table .student-attendance-row{min-width:0}
.attendance-table .attendance-options{flex:0 0 auto}
#attendanceList,#adminAttendanceList{overflow-x:hidden}
@media(max-width:520px){
  .attendance-table th,.attendance-table td{padding:9px 6px}
  .attendance-table th:first-child,.attendance-table td:first-child{width:44px}
  .attendance-table .student-attendance-row{flex-direction:column;align-items:stretch;gap:8px}.attendance-table .student-name{flex:0 0 auto;width:100%}
  .attendance-table .attendance-options{width:100%;flex-wrap:nowrap}
  .attendance-table .attendance-choice{flex:1 1 0;min-width:0;padding:10px 6px;white-space:nowrap}
}


/* Re-take Attendance button (Admin Attendance records) */
.button.retake{background:#fff4d6;color:#7a4b00;border:1px solid #efd27f}.button.retake:hover{background:#ffeab0}
.records-table .record-actions{white-space:normal}.records-table .record-actions .button{margin:2px 0}

/* Password dialog */
body.pw-open{overflow:hidden}
.pw-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(8,28,16,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:pwFade .18s ease-out}
.pw-overlay.pw-gate{background:radial-gradient(circle at 20% 15%,#1f7a43 0,transparent 45%),radial-gradient(circle at 85% 90%,#0f3d21 0,transparent 50%),linear-gradient(160deg,#14532d,#0a2e19)}
.pw-card{width:min(100%,400px);background:#fff;border-radius:22px;padding:30px 26px 24px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.35);animation:pwRise .24s ease-out}
.pw-badge{width:68px;height:68px;margin:-64px auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,#22a05a,#14532d);border:5px solid #fff;box-shadow:0 8px 22px rgba(20,83,45,.38)}
.pw-school{margin:0 0 4px;font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#4a7a5a}
.pw-title{margin:0 0 8px;font-size:1.35rem;color:#12301d}
.pw-sub{margin:0 0 20px;font-size:.9rem;line-height:1.55;color:#5d6d62;white-space:pre-line}
.pw-field{position:relative}
.pw-field input{padding:14px 48px 14px 15px;font-size:1.05rem;border:2px solid #d5e0d8;border-radius:12px;background:#f7faf8;letter-spacing:.04em}
.pw-field input:focus{outline:0;border-color:#22a05a;background:#fff;box-shadow:0 0 0 4px rgba(34,160,90,.18)}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:#6b7c70;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pw-eye:hover{background:#e7efe9;color:#14532d}
.pw-eye .pw-slash{opacity:0}.pw-eye.on .pw-slash{opacity:1}
.pw-error{min-height:1.3em;margin:10px 0 0;font-size:.86rem;font-weight:650;color:#b91c1c;line-height:1.4}
.pw-actions{display:flex;gap:10px;margin-top:14px}
.pw-actions .button{flex:1;padding:13px 14px;border-radius:12px;font-size:1rem}
.pw-actions .button.primary{background:linear-gradient(145deg,#1f8a4c,#14532d)}
.pw-actions .button.primary:disabled{opacity:.7}
.pw-card.shake{animation:pwShake .36s ease-in-out}
@keyframes pwFade{from{opacity:0}to{opacity:1}}
@keyframes pwRise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pwShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.pw-overlay,.pw-card,.pw-card.shake{animation:none}}
.pw-overlay.pw-gate{animation:none}


/* ===== Responsive v2: mobile View dialog + laptop/desktop layout ===== */

/* Dialogs: remove the browser default padding that pushed content off-screen on phones */
dialog{padding:0;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow:hidden}
.dialog-content{min-width:0;width:min(calc(100vw - 20px),520px)}
.view-dialog-content{width:min(calc(100vw - 20px),860px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.view-dialog-content h2{margin:0 0 6px;font-size:1.25rem;overflow-wrap:anywhere}
.view-dialog-content .muted{overflow-wrap:anywhere;line-height:1.5}
.view-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.view-summary-grid .metric{padding:10px 8px;gap:3px;min-width:0}
.view-summary-grid .metric span{font-size:.76rem;overflow-wrap:anywhere}
.view-summary-grid .metric strong{font-size:1.3rem}
#attendanceViewList{overflow-x:hidden}
.attendance-view-table{min-width:0!important;width:100%;table-layout:fixed}
.attendance-view-table th:first-child,.attendance-view-table td:first-child{width:64px;text-align:center}
.attendance-view-table th:last-child,.attendance-view-table td:last-child{width:104px}
.attendance-view-table td,.attendance-view-table th{overflow-wrap:anywhere}
.view-dialog-content .dialog-actions{position:sticky;bottom:-22px;margin:16px -22px -22px;padding:12px 22px;background:#fff;border-top:1px solid #e5ebe6}

@media(max-width:600px){
  dialog{border-radius:14px}
  .dialog-content{padding:16px}
  .view-dialog-content{width:calc(100vw - 16px)}
  .view-dialog-content h2{font-size:1.1rem}
  .view-comment-block{margin:10px 0;padding:10px 12px;font-size:.9rem}
  .view-summary-grid{gap:6px;margin:10px 0}
  .view-summary-grid .metric{padding:8px 4px;text-align:center;align-items:center}
  .view-summary-grid .metric span{font-size:.7rem}
  .view-summary-grid .metric strong{font-size:1.15rem}
  .attendance-view-table th,.attendance-view-table td{padding:9px 6px;font-size:.9rem}
  .attendance-view-table th:first-child,.attendance-view-table td:first-child{width:46px;padding-left:2px;padding-right:2px}
  .attendance-view-table th:last-child,.attendance-view-table td:last-child{width:98px}
  .attendance-view-table th{font-size:.8rem;white-space:nowrap;overflow-wrap:normal}
  .view-status{padding:3px 7px;font-size:.76rem}
  .view-dialog-content .dialog-actions{bottom:-16px;margin:14px -16px -16px;padding:10px 16px}
}

/* Reports / Backup: buttons share the full width instead of clustering on the left */
.export-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.export-grid .button{padding:16px 18px;text-align:center;display:flex;align-items:center;justify-content:center;min-height:56px}
.file-button{text-align:center;align-items:center}

/* Laptop / desktop: attendance controls on the left, student list on the right */
@media(min-width:1100px){
  .attendance-layout{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:0 32px;align-items:start}
  .attendance-controls{position:sticky;top:14px;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow-y:auto;padding-right:6px}
  .attendance-controls .form-grid{grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 12px}
  .attendance-controls .form-grid>label:first-child{grid-column:1/-1}
  .attendance-controls .summary-grid{margin:12px 0}
  .attendance-controls .toolbar .button{flex:1 1 calc(50% - 8px)}
  .attendance-main{min-width:0;border-left:1px solid #e5ebe6;padding-left:32px}
  .attendance-main .table-wrap{margin-top:0}
  .attendance-main .submit-row{position:sticky;bottom:0;background:#fff;padding:14px 0;border-top:1px solid #e5ebe6}
}
@media(min-width:1500px){
  .attendance-layout{grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:0 44px}
  .attendance-main{padding-left:44px}
}

/* Student attendance report */
.report-form{align-items:end}
.date-input-row input[type="text"]{flex:1;min-width:0}
.report-head{padding:12px 14px;background:#f5f8f5;border:1px solid #dce5de;border-radius:10px;line-height:1.6;margin-top:4px}
.report-metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.metric.off{border-color:#c7d2fe;background:#eef2ff}
.report-sub{margin:18px 0 8px;font-size:1.02rem}
.day-chips{display:flex;flex-wrap:wrap;gap:6px}
.day-chip{display:inline-block;padding:5px 10px;border-radius:999px;font-size:.83rem;font-weight:650;white-space:nowrap}
.day-chip.present{background:#dcfce7;color:#166534}
.day-chip.absent{background:#fee2e2;color:#991b1b}
.day-chip.off{background:#e0e7ff;color:#3730a3;white-space:normal}
.view-status-off{background:#e0e7ff;color:#3730a3}
.report-table{min-width:560px}
.off-day-hint{margin:2px 0 8px;line-height:1.55}

/* ===== Student Report – colourful layout ===== */
.report-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px;margin-top:6px;border-radius:16px;color:#fff;background:linear-gradient(135deg,#14532d 0%,#15803d 55%,#0d9488 100%);box-shadow:0 6px 18px rgba(20,83,45,.22)}
.report-avatar{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;font-weight:800;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.55);flex:none}
.report-hero-info{flex:1;min-width:200px;display:flex;flex-direction:column;gap:7px}
.report-hero-info>strong{font-size:1.3rem;line-height:1.2}
.report-tags{display:flex;flex-wrap:wrap;gap:6px}
.rtag{background:rgba(255,255,255,.2);padding:3px 11px;border-radius:999px;font-size:.82rem;font-weight:650}
.report-range{font-size:.85rem;opacity:.92}
.report-ring{--p:0;--c:#16a34a;width:92px;height:92px;border-radius:50%;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.28) 0);color:#17211b}
.report-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.report-ring b,.report-ring small{position:relative;z-index:1;line-height:1.15}
.report-ring b{font-size:1.2rem;color:var(--c)}
.report-ring small{font-size:.64rem;color:#617067;font-weight:650}
.report-metrics .metric{border-width:1px 1px 1px 5px;transition:transform .15s}
.report-metrics .metric:hover{transform:translateY(-2px)}
.metric.total{border-color:#bfdbfe #bfdbfe #bfdbfe #3b82f6;background:linear-gradient(135deg,#eff6ff,#dbeafe)}
.metric.total strong{color:#1d4ed8}
.report-metrics .metric.present{border-left-color:#16a34a;background:linear-gradient(135deg,#f0fdf4,#dcfce7)}
.report-metrics .metric.present strong{color:#15803d}
.report-metrics .metric.absent{border-left-color:#dc2626;background:linear-gradient(135deg,#fff5f5,#fee2e2)}
.report-metrics .metric.absent strong{color:#b91c1c}
.report-metrics .metric.off{border-left-color:#6366f1;background:linear-gradient(135deg,#eef2ff,#e0e7ff)}
.report-metrics .metric.off strong{color:#4338ca}
.metric.percent{--c:#16a34a;border-color:#e5e7eb #e5e7eb #e5e7eb var(--c);background:linear-gradient(135deg,#fffbeb,#fef3c7)}
.metric.percent strong{color:var(--c)}
.report-bar{display:flex;height:26px;border-radius:999px;overflow:hidden;margin:4px 0 6px;background:#e5e7eb;box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.report-bar span{display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:800;min-width:0}
.bar-present{background:linear-gradient(90deg,#22c55e,#16a34a)}
.bar-absent{background:linear-gradient(90deg,#f87171,#dc2626)}
.report-bar-legend{display:flex;gap:16px;font-size:.8rem;color:#617067;margin-bottom:4px}
.report-bar-legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.dot.present{background:#16a34a}.dot.absent{background:#dc2626}
.report-sub{padding:7px 12px;border-radius:9px;border-left:5px solid #94a3b8;background:#f1f5f9;color:#334155}
.report-sub.sub-present{border-left-color:#16a34a;background:#f0fdf4;color:#166534}
.report-sub.sub-absent{border-left-color:#dc2626;background:#fef2f2;color:#991b1b}
.report-sub.sub-off{border-left-color:#6366f1;background:#eef2ff;color:#3730a3}
.report-sub.sub-day{border-left-color:#0d9488;background:#f0fdfa;color:#115e59}
.day-chip.present{border:1px solid #86efac}
.day-chip.absent{border:1px solid #fca5a5}
.day-chip.off{border:1px solid #a5b4fc}
.report-table tbody tr.row-present td:first-child{box-shadow:inset 4px 0 0 #16a34a}
.report-table tbody tr.row-absent td:first-child{box-shadow:inset 4px 0 0 #dc2626}
.report-table tbody tr.row-off td:first-child{box-shadow:inset 4px 0 0 #6366f1}
.report-table tbody tr.row-pending td:first-child{box-shadow:inset 4px 0 0 #f59e0b}
.report-table tbody tr.row-present{background:#f7fdf9}
.report-table tbody tr.row-absent{background:#fff7f7}
.report-table tbody tr.row-off{background:#f6f7ff}
.report-table tbody tr.row-pending{background:#fffcf0}
.report-table th{background:#14532d;color:#fff}
.rec-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.76rem;font-weight:700}
.rec-badge.sub{background:#dcfce7;color:#166534}
.rec-badge.draft{background:#fef3c7;color:#92400e}
@media (max-width:640px){
  .report-hero{padding:14px;gap:12px}
  .report-avatar{width:48px;height:48px;font-size:1.4rem}
  .report-ring{width:78px;height:78px}
  .report-ring::before{inset:8px}
  .report-ring b{font-size:1rem}
}

/* Day-by-day: full-row colours */
.report-table tbody tr.row-present>td{background:#bbf7d0;color:#14532d;border-bottom:1px solid #86efac}
.report-table tbody tr.row-absent>td{background:#fecaca;color:#7f1d1d;border-bottom:1px solid #fca5a5}
.report-table tbody tr.row-off>td{background:#e0e7ff;color:#312e81;border-bottom:1px solid #c7d2fe}
.report-table tbody tr.row-pending>td{background:#fef3c7;color:#78350f;border-bottom:1px solid #fde68a}
.report-table tbody tr.row-present>td:first-child{box-shadow:inset 6px 0 0 #16a34a;font-weight:650}
.report-table tbody tr.row-absent>td:first-child{box-shadow:inset 6px 0 0 #dc2626;font-weight:650}
.report-table tbody tr.row-present .view-status-present{background:#16a34a;color:#fff}
.report-table tbody tr.row-absent .view-status-absent{background:#dc2626;color:#fff}
.report-table tbody tr.row-present .rec-badge,.report-table tbody tr.row-absent .rec-badge{background:#fff}
.report-table tbody tr.row-present:hover>td{background:#a7f3c4}
.report-table tbody tr.row-absent:hover>td{background:#fca5a5}

/* ===== Student Report – options / filter design ===== */
.report-panel{border-top:5px solid #0d9488;background:linear-gradient(180deg,#f0fdfa 0,#fff 140px)}
.report-heading h2{color:#115e59}
.report-filter{padding:16px;border-radius:16px;background:linear-gradient(135deg,#ecfdf5,#eff6ff);border:1px solid #bfe3d4;box-shadow:0 2px 8px rgba(13,148,136,.08);gap:14px}
.report-filter label{font-weight:700;display:flex;flex-direction:column;gap:6px}
.report-filter .rf-title{display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:800}
.report-filter .rf-class .rf-title{background:#dbeafe;color:#1d4ed8}
.report-filter .rf-section .rf-title{background:#ede9fe;color:#6d28d9}
.report-filter .rf-student .rf-title{background:#dcfce7;color:#15803d}
.report-filter .rf-from .rf-title{background:#ffedd5;color:#c2410c}
.report-filter .rf-to .rf-title{background:#fce7f3;color:#be185d}
.report-filter select,.report-filter input[type=text]{background:#fff;border:2px solid #cbd5e1;border-radius:10px;transition:border-color .15s,box-shadow .15s}
.report-filter .rf-class select{border-color:#93c5fd}
.report-filter .rf-section select{border-color:#c4b5fd}
.report-filter .rf-student select{border-color:#86efac}
.report-filter .rf-from input[type=text]{border-color:#fdba74}
.report-filter .rf-to input[type=text]{border-color:#f9a8d4}
.report-filter .rf-class select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.18);outline:none}
.report-filter .rf-section select:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.18);outline:none}
.report-filter .rf-student select:focus{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);outline:none}
.report-filter .rf-from input:focus{border-color:#ea580c;box-shadow:0 0 0 3px rgba(234,88,12,.18);outline:none}
.report-filter .rf-to input:focus{border-color:#db2777;box-shadow:0 0 0 3px rgba(219,39,119,.18);outline:none}
.report-filter .calendar-button{background:#fff7ed;border:2px solid #fdba74;border-radius:10px}
.report-filter .rf-to .calendar-button{background:#fdf2f8;border-color:#f9a8d4}
.report-filter .calendar-button:hover{filter:brightness(.96)}
.report-download{background:linear-gradient(135deg,#0d9488,#15803d);color:#fff;border:0;font-weight:800;box-shadow:0 3px 10px rgba(13,148,136,.3)}
.report-download:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.report-download:disabled{background:#cbd5e1;color:#64748b;box-shadow:none;cursor:not-allowed}

.pw-id-field{margin-bottom:10px}.pw-id-field input{padding-right:15px!important}
.attendance-lock{text-align:center;padding:40px 20px}.attendance-lock h2{margin-top:0}.attendance-lock .button{margin-top:10px}
.scope-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:700}
.scope-bar.hidden,.attendance-lock.hidden,.pw-id-field.hidden{display:none}
select:disabled{opacity:.85;cursor:not-allowed}

/* Logged-in bar */
.scope-bar{background:linear-gradient(135deg,#14532d 0%,#1f8a4c 60%,#22a05a 100%);color:#fff;border:0;border-radius:16px;padding:14px 18px;box-shadow:0 8px 20px rgba(20,83,45,.28)}
.scope-bar #attendanceScopeText{display:flex;align-items:center;gap:10px;font-size:1.02rem;font-weight:700;letter-spacing:.01em}
.scope-bar #attendanceScopeText::before{content:"";width:11px;height:11px;border-radius:50%;background:#86efac;box-shadow:0 0 0 4px rgba(134,239,172,.3);flex:none}
.scope-bar #attendanceScopeText .scope-id{background:#fff;color:#14532d;padding:3px 11px;border-radius:999px;font-weight:800}
.scope-bar #attendanceScopeText .scope-class{background:rgba(255,255,255,.18);padding:3px 11px;border-radius:999px;font-weight:700}
.scope-bar #attendanceLogoutBtn{background:#fff;color:#b91c1c;border:2px solid #fff;font-weight:800;border-radius:12px;padding:9px 18px;transition:all .15s}
.scope-bar #attendanceLogoutBtn:hover{background:#dc2626;color:#fff;border-color:#dc2626;transform:translateY(-1px)}