:root {
    color-scheme: light;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bg-body: #f8fafc;
    --bg-soft: radial-gradient(circle at top, rgba(59, 130, 246, 0.16), transparent 45%), #f8fafc;
    --bg-shell: #ffffff;
    --bg-sidebar: #60a5fa;
    --bg-card: #ffffff;
    --text-color: #0f172a;
    --text-muted: #6c757d;
    --border-color: rgba(15, 23, 42, 0.08);
    --topbar-bg: #ffffff;
    --topbar-border: rgba(15, 23, 42, 0.08);
    --sidebar-text: #f8fafc;
    --sidebar-icon: #e0f2fe;
    --sidebar-hover: rgba(255, 255, 255, 0.14);
    --sidebar-active: rgba(255, 255, 255, 0.24);
    --table-head-bg: rgba(59, 130, 246, 0.12);
    --table-head-text: #0f172a;
    --table-stripe: #fbfdff;
    --table-accent: #1d4ed8;
}

body {
    min-height: 100vh;
    background: var(--bg-soft);
    color: var(--text-color);
}
body.theme-blue {
    --bg-body: #eff6ff;
    --bg-soft: radial-gradient(circle at top, rgba(59, 130, 246, 0.16), transparent 45%), #eff6ff;
    --bg-shell: #ffffff;
    --bg-sidebar: #0d6efd;
    --bg-card: #ffffff;
    --text-color: #0f172a;
    --text-muted: #6c757d;
    --border-color: rgba(15, 23, 42, 0.08);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(15, 23, 42, 0.08);
}

body.theme-green {
    --bg-body: #ecfdf5;
    --bg-soft: radial-gradient(circle at top, rgba(16, 185, 129, 0.2), transparent 45%), #ecfdf5;
    --bg-shell: #ffffff;
    --bg-sidebar: #10b981;
    --bg-card: #ffffff;
    --text-color: #0f172a;
    --text-muted: #4b5563;
    --border-color: rgba(16, 185, 129, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(16, 185, 129, 0.2);
}

body.theme-purple {
    --bg-body: #faf5ff;
    --bg-soft: radial-gradient(circle at top, rgba(168, 85, 247, 0.18), transparent 45%), #faf5ff;
    --bg-shell: #ffffff;
    --bg-sidebar: #7c3aed;
    --bg-card: #ffffff;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --border-color: rgba(124, 58, 237, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(124, 58, 237, 0.2);
}

body.theme-slate {
    --bg-body: #f8fafc;
    --bg-soft: radial-gradient(circle at top, rgba(100, 116, 139, 0.18), transparent 45%), #f8fafc;
    --bg-shell: #ffffff;
    --bg-sidebar: #334155;
    --bg-card: #ffffff;
    --text-color: #0f172a;
    --text-muted: #475569;
    --border-color: rgba(100, 116, 139, 0.16);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(100, 116, 139, 0.18);
}

body.theme-orange {
    --bg-body: #fff7ed;
    --bg-soft: radial-gradient(circle at top, rgba(249, 115, 22, 0.18), transparent 45%), #fff7ed;
    --bg-shell: #ffffff;
    --bg-sidebar: #fb923c;
    --bg-card: #ffffff;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --border-color: rgba(249, 115, 22, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(249, 115, 22, 0.2);
}

body.theme-cyan {
    --bg-body: #ecfeff;
    --bg-soft: radial-gradient(circle at top, rgba(6, 182, 212, 0.18), transparent 45%), #ecfeff;
    --bg-shell: #ffffff;
    --bg-sidebar: #06b6d4;
    --bg-card: #ffffff;
    --text-color: #0f172a;
    --text-muted: #334155;
    --border-color: rgba(6, 182, 212, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(6, 182, 212, 0.2);
}

body.theme-indigo {
    --bg-body: #eef2ff;
    --bg-soft: radial-gradient(circle at top, rgba(99, 102, 241, 0.18), transparent 45%), #eef2ff;
    --bg-shell: #ffffff;
    --bg-sidebar: #6366f1;
    --bg-card: #ffffff;
    --text-color: #1f2937;
    --text-muted: #4b5563;
    --border-color: rgba(99, 102, 241, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(99, 102, 241, 0.2);
}

body.theme-emerald {
    --bg-body: #ecfdf5;
    --bg-soft: radial-gradient(circle at top, rgba(5, 150, 105, 0.18), transparent 45%), #ecfdf5;
    --bg-shell: #ffffff;
    --bg-sidebar: #10b981;
    --bg-card: #ffffff;
    --text-color: #0f172a;
    --text-muted: #334155;
    --border-color: rgba(5, 150, 105, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(5, 150, 105, 0.2);
}

body.theme-violet {
    --bg-body: #f5f3ff;
    --bg-soft: radial-gradient(circle at top, rgba(139, 92, 246, 0.18), transparent 45%), #f5f3ff;
    --bg-shell: #ffffff;
    --bg-sidebar: #8b5cf6;
    --bg-card: #ffffff;
    --text-color: #1f2937;
    --text-muted: #4b5563;
    --border-color: rgba(139, 92, 246, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(139, 92, 246, 0.2);
}

body.theme-fuchsia {
    --bg-body: #fdf4ff;
    --bg-soft: radial-gradient(circle at top, rgba(192, 38, 211, 0.18), transparent 45%), #fdf4ff;
    --bg-shell: #ffffff;
    --bg-sidebar: #c026d3;
    --bg-card: #ffffff;
    --text-color: #1f2937;
    --text-muted: #4b5563;
    --border-color: rgba(192, 38, 211, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(192, 38, 211, 0.2);
}

body.theme-amber {
    --bg-body: #fffbeb;
    --bg-soft: radial-gradient(circle at top, rgba(245, 158, 11, 0.18), transparent 45%), #fffbeb;
    --bg-shell: #ffffff;
    --bg-sidebar: #f59e0b;
    --bg-card: #ffffff;
    --text-color: #1f2937;
    --text-muted: #4b5563;
    --border-color: rgba(245, 158, 11, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(245, 158, 11, 0.2);
}

body.theme-lime {
    --bg-body: #f7fee7;
    --bg-soft: radial-gradient(circle at top, rgba(132, 204, 22, 0.18), transparent 45%), #f7fee7;
    --bg-shell: #ffffff;
    --bg-sidebar: #84cc16;
    --bg-card: #ffffff;
    --text-color: #1f2937;
    --text-muted: #4b5563;
    --border-color: rgba(132, 204, 22, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(132, 204, 22, 0.2);
}

body.theme-sky {
    --bg-body: #eff6ff;
    --bg-soft: radial-gradient(circle at top, rgba(56, 189, 248, 0.18), transparent 45%), #eff6ff;
    --bg-shell: #ffffff;
    --bg-sidebar: #38bdf8;
    --bg-card: #ffffff;
    --text-color: #0f172a;
    --text-muted: #4b5563;
    --border-color: rgba(56, 189, 248, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(56, 189, 248, 0.2);
}

body.theme-pink {
    --bg-body: #fdf2f8;
    --bg-soft: radial-gradient(circle at top, rgba(236, 72, 153, 0.18), transparent 45%), #fdf2f8;
    --bg-shell: #ffffff;
    --bg-sidebar: #ec4899;
    --bg-card: #ffffff;
    --text-color: #1f2937;
    --text-muted: #4b5563;
    --border-color: rgba(236, 72, 153, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(236, 72, 153, 0.2);
}

body.theme-stone {
    --bg-body: #fafaf9;
    --bg-soft: radial-gradient(circle at top, rgba(120, 113, 108, 0.18), transparent 45%), #fafaf9;
    --bg-shell: #ffffff;
    --bg-sidebar: #57534e;
    --bg-card: #ffffff;
    --text-color: #1f2937;
    --text-muted: #4b5563;
    --border-color: rgba(120, 113, 108, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(120, 113, 108, 0.2);
}

body.theme-crimson {
    --bg-body: #fff1f2;
    --bg-soft: radial-gradient(circle at top, rgba(220, 38, 38, 0.18), transparent 45%), #fff1f2;
    --bg-shell: #ffffff;
    --bg-sidebar: #dc2626;
    --bg-card: #ffffff;
    --text-color: #1f2937;
    --text-muted: #4b5563;
    --border-color: rgba(220, 38, 38, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(220, 38, 38, 0.2);
}

body.theme-navy {
    --bg-body: #eff6ff;
    --bg-soft: radial-gradient(circle at top, rgba(30, 64, 175, 0.18), transparent 45%), #eff6ff;
    --bg-shell: #ffffff;
    --bg-sidebar: #1e40af;
    --bg-card: #ffffff;
    --text-color: #0f172a;
    --text-muted: #4b5563;
    --border-color: rgba(30, 64, 175, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(30, 64, 175, 0.2);
}

body.theme-olive {
    --bg-body: #f8fff0;
    --bg-soft: radial-gradient(circle at top, rgba(64, 116, 9, 0.18), transparent 45%), #f8fff0;
    --bg-shell: #ffffff;
    --bg-sidebar: #4d7c0f;
    --bg-card: #ffffff;
    --text-color: #0f172a;
    --text-muted: #4b5563;
    --border-color: rgba(64, 116, 9, 0.18);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --topbar-border: rgba(64, 116, 9, 0.2);
}

body.theme-dark {
    color-scheme: dark;
    --bg-body: #0f172a;
    --bg-soft: radial-gradient(circle at top, rgba(59, 130, 246, 0.18), transparent 45%), #0f172a;
    --bg-shell: #111827;
    --bg-sidebar: #0f172a;
    --bg-card: #1f2937;
    --text-color: #e2e8f0;
    --text-muted: #94a3b8;
    --border-color: rgba(148, 163, 184, 0.2);
    --topbar-bg: rgba(15, 23, 42, 0.96);
    --topbar-border: rgba(148, 163, 184, 0.16);
    --sidebar-text: #e2e8f0;
    --sidebar-icon: #93c5fd;
    --sidebar-hover: rgba(148, 163, 184, 0.16);
    --sidebar-active: rgba(59, 130, 246, 0.38);
    --table-head-bg: rgba(59, 130, 246, 0.22);
    --table-head-text: #dbeafe;
    --table-stripe: rgba(148, 163, 184, 0.05);
    --table-accent: #93c5fd;
}

.app-shell {
    min-height: 100vh;
}
.sidebar {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    background: var(--bg-sidebar) !important;
    color: var(--sidebar-text);
}
.sidebar .nav-link,
.sidebar .sidebar-brand,
.sidebar .sidebar-brand img {
    color: var(--sidebar-text) !important;
}
.sidebar .nav-link {
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: var(--sidebar-hover);
    color: var(--sidebar-text) !important;
}
.sidebar .nav-link.active,
.sidebar .nav-link.active.bg-primary {
    background: var(--sidebar-active) !important;
}
.sidebar .nav-link .bi,
.sidebar .nav-link .nav-icon {
    color: var(--sidebar-icon);
}
.app-main {
    min-width: 0;
}
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--topbar-bg) !important;
    border-color: var(--topbar-border) !important;
}
.topbar .profile-info {
    min-width: 180px;
}
.dashboard-clock {
    min-width: 190px;
}
.theme-toggle-btn {
    min-width: 150px;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.theme-toggle-btn:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
.glass-card {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.85);
}
.stats-card {
    background: var(--bg-card);
}
.card,
.list-group-item,
.dropdown-menu,
.modal-content,
.form-control,
.form-select,
.table,
.table th,
.table td {
    background: var(--bg-card);
    color: var(--text-color);
}
.sheet-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-color);
}
.sheet-table th,
.sheet-table td {
    border: 1px solid var(--border-color);
    padding: 0.85rem 0.9rem;
    vertical-align: middle;
}
.sheet-table thead th {
    background: var(--table-head-bg);
    color: var(--table-head-text);
    font-weight: 700;
}
.sheet-table tbody tr:nth-child(odd) {
    background: var(--table-stripe);
}
.sheet-table tbody tr.sheet-group-heading td {
    background: var(--table-head-bg);
    font-weight: 700;
    color: var(--table-accent);
    border-top: 2px solid var(--border-color);
}
.sheet-table thead tr.sheet-week-header th {
    background: var(--table-head-bg);
    color: var(--table-accent);
    font-weight: 700;
}
.sheet-table thead th.text-center,
.sheet-table td.text-center {
    text-align: center;
}
.sheet-table .profile-thumb {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: cover !important;
    border-radius: 4px;
}
.card {
    border-color: var(--border-color);
}
.quick-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.quick-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
}

.learners-stats {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
}
.learners-stat {
    min-width: 0;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.03);
    text-align: center;
}
.learners-stat .count {
    font-weight: 700;
    font-size: 1.25rem;
}
.learners-stat.small { padding: 0.25rem 0.5rem; border-radius: 6px; }
body.theme-dark .learners-stat { background: rgba(255,255,255,0.02); }
.auth-page {
    padding: 3rem 1rem;
}
.bg-auth {
    background: var(--bg-soft);
}
body.bg-auth .app-shell {
    background: transparent;
}
body.bg-auth .app-main {
    background: transparent;
}
body.bg-auth .sidebar {
    background: var(--bg-sidebar);
}
body.bg-auth .topbar {
    background: var(--topbar-bg);
    border-color: var(--topbar-border);
    backdrop-filter: blur(16px);
}
body.bg-auth .card,
body.bg-auth .modal-content,
body.bg-auth .dropdown-menu,
body.bg-auth .list-group-item,
body.bg-auth .form-control,
body.bg-auth .form-select,
body.bg-auth .table,
body.bg-auth .table th,
body.bg-auth .table td {
    background: var(--bg-card);
}
body.bg-auth .card {
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}
.icon-box {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.login-brand-logo {
    width: 120px;
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    display: inline-block;
}
.portal-qr-wrap {
    max-width: 250px;
}
.portal-qr-wrap img {
    display: block;
    width: 100%;
    height: auto;
}
.sidebar-brand img {
    width: 100px;
    max-width: 80%;
    height: auto;
    border-radius: 16px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    padding: 4px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.scanner-camera-wrap {
    position: relative;
    min-height: 360px;
}
.scanner-preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(3px);
    border-radius: 0.375rem;
}
body.theme-dark .bg-white {
    background-color: #1f2937 !important;
}
body.theme-dark .bg-light {
    background-color: #111827 !important;
}
body.theme-dark .text-dark {
    color: #e2e8f0 !important;
}
body.theme-dark .text-muted {
    color: #94a3b8 !important;
}
body.theme-dark .border,
body.theme-dark .table,
body.theme-dark .table th,
body.theme-dark .table td {
    border-color: rgba(148, 163, 184, 0.16) !important;
}
body.theme-dark .form-control,
body.theme-dark .form-select {
    background: #1f2937;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.16);
}
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
    background: #1f2937;
    color: #e2e8f0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}
body.theme-dark .alert {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.16);
}
body.theme-dark .list-group-item {
    background: #1f2937;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.12);
}
body.theme-dark .dropdown-menu {
    background: #111827;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.16);
}
body.theme-dark .modal-content {
    background: #111827;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.16);
}
body.theme-dark .sidebar {
    background: #2563eb;
}
body.theme-dark .sidebar .nav-link,
body.theme-dark .sidebar .nav-link.text-white,
body.theme-dark .sidebar .nav-link.active {
    color: #f8fafc !important;
}
body.theme-dark .sidebar .nav-link.active.bg-primary {
    background-color: #60a5fa !important;
}
body.theme-dark .topbar {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(148, 163, 184, 0.16);
}
body.theme-dark .theme-toggle-btn {
    border-color: rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}
body.theme-dark .btn-outline-secondary {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.16);
}
body.theme-dark .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 767.98px) {
    .dashboard-clock,
    .profile-info {
        width: 100%;
        text-align: left !important;
    }
    .theme-toggle-btn {
        width: 100%;
        justify-content: center;
    }
    .topbar .profile-info .text-muted {
        display: none;
    }
}
@media (max-width: 575.98px) {
    .topbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .topbar-left p.text-muted.mb-0 {
        display: none;
    }
}
@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        height: 100%;
        transition: left 0.25s ease;
        z-index: 20;
    }
    .sidebar.active {
        left: 0;
    }
    .app-main {
        margin-left: 0;
    }
}
.profile-thumb { width: 50px !important; height: 50px !important; max-width: 50px !important; max-height: 50px !important; min-width: 50px; object-fit: cover; display: block; margin: 0 auto; border: 1px solid #d7dee8; border-radius: 0 !important; background: #f1f4f8; }
#attendance-tbody-male td, #attendance-tbody-female td { vertical-align: middle; }
.topbar { position: relative; }
.topbar-school {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 60%;
    white-space: nowrap;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.2;
    color: var(--text-color);
}
@media (max-width: 1199.98px) {
    .topbar-school {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        white-space: normal;
        text-align: center;
        padding: .35rem 0;
        font-size: 1rem;
    }
}
@media (max-width: 767.98px) {
    .topbar-school {
        font-size: .88rem;
        padding: .25rem 0;
        order: -1;
    }
}
@media print { .app-sidebar, .topbar, .grade-filter-bar, .no-print, .btn, button, .modal { display:none !important; } .app-main, main { padding:0 !important; margin:0 !important; } .card { box-shadow:none !important; border:0 !important; } }
/* Shared search / export / print bar used by learners and attendance reports. */
.report-toolbar {
    display: grid;
    grid-template-columns: minmax(10rem, 12.5rem) minmax(16rem, 1fr) max-content;
    align-items: end;
    gap: .65rem;
}
.report-toolbar .toolbar-search {
    min-width: 0;
}
.report-toolbar:not(:has(.toolbar-filter)) {
    grid-template-columns: minmax(16rem, 1fr) max-content;
}
.report-toolbar .toolbar-filter {
    min-width: 0;
}
.report-toolbar .toolbar-actions {
    display: flex;
    gap: .65rem;
    align-items: end;
}
.report-toolbar .btn {
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    .report-toolbar { display: flex; align-items: stretch; flex-wrap: wrap; }
    .report-toolbar .toolbar-search, .report-toolbar .toolbar-filter { flex: 1 0 100%; }
    .report-toolbar .toolbar-actions { width: 100%; }
    .report-toolbar .toolbar-actions .btn { flex: 1; }
}

/* QRAttend final visual system */
:root{--radius-lg:1rem;--shadow-soft:0 10px 30px rgba(15,23,42,.07);--transition:180ms ease}
body{background:var(--bg-soft);transition:background-color .25s ease,color .25s ease}
.card,.btn,.form-control,.form-select,.dropdown-menu,.table{transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition),background-color var(--transition)}
.card:not(.stats-card):hover{box-shadow:var(--shadow-soft)!important}
.btn{font-weight:600}.btn:hover{transform:translateY(-1px)}
.page-card,.dashboard-hero{animation:fadeUp .35s ease both}
.clean-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:var(--table-head-bg);border-bottom:0;white-space:nowrap}
.clean-table tbody tr{border-color:var(--border-color)}
.clean-table tbody tr:hover{background:rgba(59,130,246,.045)}
.stat-card{overflow:hidden}.stat-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem}.metric-box{border:1px solid var(--border-color);border-radius:14px;padding:1rem;text-align:center;background:var(--bg-card)}.metric-box span{display:block;color:var(--text-muted);font-size:.8rem;margin-top:.2rem}.session-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--border-color)}.session-row:last-child{border-bottom:0}.quick-action{display:flex;align-items:center;gap:.85rem;padding:.9rem;border:1px solid var(--border-color);border-radius:14px;text-decoration:none;color:inherit;background:var(--bg-card)}.quick-action:hover{transform:translateX(2px);border-color:rgba(59,130,246,.35)}.quick-action>i:first-child{font-size:1.25rem;color:var(--table-accent)}.quick-action small{display:block;color:var(--text-muted);margin-top:2px}.status-dot{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700}.status-dot:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}.status-present{color:#16a34a}.status-late{color:#d97706}.status-absent{color:#dc2626}.status-cutting{color:#64748b}.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--table-accent)}.action-menu-btn{width:36px;height:36px;padding:0;display:inline-grid;place-items:center}.dropdown-menu{border-radius:14px;padding:.4rem;box-shadow:var(--shadow-soft)}.dropdown-item{border-radius:9px;padding:.55rem .7rem}.dropdown-item:hover{background:var(--table-head-bg)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

body.theme-aqua{--bg-body:#ecfeff;--bg-soft:radial-gradient(circle at top,rgba(20,184,166,.18),transparent 45%),#ecfeff;--bg-sidebar:#0f766e;--bg-card:#fff;--text-color:#0f172a;--text-muted:#475569;--border-color:rgba(15,118,110,.18);--table-head-bg:rgba(20,184,166,.12);--table-accent:#0f766e}
body.theme-forest{--bg-body:#f0fdf4;--bg-soft:radial-gradient(circle at top,rgba(22,101,52,.18),transparent 45%),#f0fdf4;--bg-sidebar:#166534;--bg-card:#fff;--text-color:#14532d;--text-muted:#4b5563;--border-color:rgba(22,101,52,.18);--table-head-bg:rgba(22,101,52,.1);--table-accent:#166534}
body.theme-berry{--bg-body:#fff1f2;--bg-soft:radial-gradient(circle at top,rgba(190,24,93,.16),transparent 45%),#fff1f2;--bg-sidebar:#9d174d;--bg-card:#fff;--text-color:#4a044e;--text-muted:#6b7280;--border-color:rgba(157,23,77,.18);--table-head-bg:rgba(190,24,93,.1);--table-accent:#9d174d}
body.theme-coffee{--bg-body:#fffbeb;--bg-soft:radial-gradient(circle at top,rgba(120,53,15,.14),transparent 45%),#fffbeb;--bg-sidebar:#78350f;--bg-card:#fff;--text-color:#292524;--text-muted:#57534e;--border-color:rgba(120,53,15,.18);--table-head-bg:rgba(120,53,15,.08);--table-accent:#78350f}
body.theme-ocean{--bg-body:#eff6ff;--bg-soft:radial-gradient(circle at top,rgba(3,105,161,.2),transparent 45%),#eff6ff;--bg-sidebar:#075985;--bg-card:#fff;--text-color:#0c4a6e;--text-muted:#475569;--border-color:rgba(3,105,161,.18);--table-head-bg:rgba(3,105,161,.1);--table-accent:#075985}
body.theme-mint{--bg-body:#f0fdfa;--bg-soft:radial-gradient(circle at top,rgba(13,148,136,.16),transparent 45%),#f0fdfa;--bg-sidebar:#0f766e;--bg-card:#fff;--text-color:#134e4a;--text-muted:#475569;--border-color:rgba(13,148,136,.18);--table-head-bg:rgba(13,148,136,.1);--table-accent:#0f766e}
body.theme-sunrise{--bg-body:#fff7ed;--bg-soft:radial-gradient(circle at top,rgba(234,88,12,.2),transparent 45%),#fff7ed;--bg-sidebar:#c2410c;--bg-card:#fff;--text-color:#431407;--text-muted:#57534e;--border-color:rgba(234,88,12,.18);--table-head-bg:rgba(234,88,12,.1);--table-accent:#c2410c}
body.theme-graphite{--bg-body:#f8fafc;--bg-soft:radial-gradient(circle at top,rgba(30,41,59,.14),transparent 45%),#f8fafc;--bg-sidebar:#1e293b;--bg-card:#fff;--text-color:#0f172a;--text-muted:#475569;--border-color:rgba(30,41,59,.16);--table-head-bg:rgba(30,41,59,.08);--table-accent:#334155}
body.theme-school{--bg-body:#eff6ff;--bg-soft:radial-gradient(circle at top,rgba(30,64,175,.2),transparent 45%),#eff6ff;--bg-sidebar:#1e3a8a;--bg-card:#fff;--text-color:#172554;--text-muted:#475569;--border-color:rgba(30,64,175,.16);--table-head-bg:rgba(30,64,175,.1);--table-accent:#1e40af}


/* Responsive hardening — phones, tablets, laptops and wide displays */
html, body { max-width: 100%; overflow-x: hidden; }
.app-shell, .app-main, main { min-width: 0; }
main.container-fluid { width: 100%; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.table-responsive > .table { min-width: 820px; }
#attendance-tbody-male td, #attendance-tbody-female td { white-space: nowrap; }
#attendance-tbody-male td:nth-child(3), #attendance-tbody-female td:nth-child(4),
#attendance-tbody-male td:nth-child(5), #attendance-tbody-female td:nth-child(6) { white-space: normal; min-width: 120px; }
.school-year-switcher { background: color-mix(in srgb, var(--bg-card) 92%, var(--table-accent) 8%) !important; border-color: var(--border-color) !important; }
.scanner-camera-wrap { width: 100%; max-width: 100%; overflow: hidden; border-radius: 1rem; }
#qr-reader, #qr-reader video { width: 100% !important; max-width: 100% !important; }
.modal-dialog { max-width: min(1140px, calc(100vw - 1rem)); }
@media (max-width: 1199.98px) {
  .app-main main { padding-left: 1rem !important; padding-right: 1rem !important; }
  .topbar { padding-left: 1rem !important; padding-right: 1rem !important; }
}
@media (max-width: 767.98px) {
  .app-main main { padding: .75rem !important; }
  .card-body { padding: 1rem !important; }
  .topbar { padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .topbar-school { font-size: .95rem; }
  .sidebar { width: min(82vw, 300px); }
  .report-toolbar { gap: .5rem; }
  .report-toolbar .toolbar-actions { flex-wrap: wrap; }
  .report-toolbar .toolbar-actions .btn { min-width: 0; }
  .school-year-switcher .d-flex.flex-wrap { width: 100%; }
  .school-year-switcher form { flex: 1 1 auto; }
  .school-year-switcher button { width: 100%; }
  .modal-dialog { margin: .5rem; }
  .modal-content { border-radius: 1rem !important; }
  #qr-reader { min-height: 250px !important; }
  .scanner-preview-overlay img { width: 120px !important; height: 120px !important; }
  .scanner-preview-overlay .h2 { font-size: 1.35rem; }
  .table-responsive > .table { min-width: 760px; }
  .profile-thumb { width: 42px !important; height: 42px !important; min-width: 42px !important; max-width: 42px !important; max-height: 42px !important; }
}
@media (max-width: 575.98px) {
  .btn { min-height: 40px; }
  .form-control, .form-select { min-height: 42px; }
  .stats-card h3 { font-size: 1.45rem; }
  .topbar-left h1 { font-size: 1rem; }
  .topbar-left .text-muted { font-size: .72rem !important; }
  .table-responsive > .table { min-width: 700px; }
  .action-menu-btn { width: 40px; height: 40px; }
}


/* QRAttend scanner visual system */
.qr-scanner-modal { border-radius: 1.25rem; overflow: hidden; background: var(--bg-card, #fff); }
.qr-scanner-modal-dialog { width: min(1080px, calc(100vw - 2rem)); max-width: 1080px; }
.scanner-stage { position:relative; min-height:420px; background:#0f172a; border-radius:1.25rem; overflow:hidden; box-shadow:0 18px 45px rgba(15,23,42,.18); }
.scanner-stage-header { position:absolute; top:16px; left:18px; z-index:8; color:#fff; font-size:.75rem; font-weight:800; letter-spacing:.08em; background:rgba(15,23,42,.65); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); padding:8px 11px; border-radius:999px; }
.scanner-live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; margin-right:7px; box-shadow:0 0 0 5px rgba(34,197,94,.12); }
.qr-reader-stage { width:100%; min-height:420px; }
.qr-reader-stage video { width:100% !important; height:420px !important; object-fit:cover !important; }
.qr-reader-stage #qr-shaded-region { border-width:3px !important; }
.scanner-frame { position:absolute; inset:50% auto auto 50%; width:min(48%,280px); aspect-ratio:1; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.92); border-radius:24px; box-shadow:0 0 0 9999px rgba(2,6,23,.22); pointer-events:none; z-index:4; }
.scanner-frame:before,.scanner-frame:after,.scanner-frame span:before,.scanner-frame span:after { content:""; position:absolute; width:32px; height:32px; border-color:#38bdf8; border-style:solid; }
.scanner-frame:before { left:-3px; top:-3px; border-width:5px 0 0 5px; border-radius:18px 0 0 0; }
.scanner-frame:after { right:-3px; top:-3px; border-width:5px 5px 0 0; border-radius:0 18px 0 0; }
.scanner-frame span:before { left:-3px; bottom:-3px; border-width:0 0 5px 5px; border-radius:0 0 0 18px; }
.scanner-frame span:after { right:-3px; bottom:-3px; border-width:0 5px 5px 0; border-radius:0 0 18px 0; }
.scanner-result-overlay { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.94); backdrop-filter:blur(10px); animation:scannerFadeIn .18s ease; }
.scanner-result-card { color:#fff; padding:24px; }
.scanner-check { width:62px; height:62px; margin:0 auto 12px; border-radius:50%; background:#22c55e; display:grid; place-items:center; font-size:2rem; box-shadow:0 0 0 10px rgba(34,197,94,.14); }
.scanner-result-photo { width:150px; height:150px; border-radius:50%; object-fit:cover; border:5px solid #fff; box-shadow:0 12px 35px rgba(0,0,0,.3); display:block; margin:0 auto 14px; background:#e2e8f0; }
.scanner-result-name { font-size:clamp(1.35rem,3vw,2rem); font-weight:800; line-height:1.15; }
.scanner-result-extra { margin-top:6px; color:rgba(255,255,255,.78); font-weight:600; }
.scanner-result-status { margin-top:14px; display:inline-block; padding:8px 14px; border-radius:999px; background:#166534; color:#dcfce7; font-weight:800; }
.scanner-feedback { border-radius:14px; padding:12px 15px; font-weight:700; text-align:center; border:1px solid transparent; }
.scanner-feedback-info { color:#1e3a8a; background:#eff6ff; border-color:#bfdbfe; }
.scanner-control-card { border:1px solid var(--border-color,#e2e8f0); border-radius:1.25rem; padding:20px; background:var(--bg-card,#fff); box-shadow:0 10px 28px rgba(15,23,42,.06); }
.scanner-time-card { padding:14px; border-radius:14px; background:var(--bg-body,#f8fafc); border:1px solid var(--border-color,#e2e8f0); }
.scanner-time-card strong { display:block; margin-top:3px; font-size:1.2rem; }
.scanner-control-hint { display:flex; align-items:flex-start; gap:4px; padding:10px 12px; border-radius:12px; background:rgba(59,130,246,.07); color:var(--text-muted,#64748b); font-size:.82rem; margin-bottom:10px; }
@keyframes scannerFadeIn { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:scale(1); } }
@media(max-width:767.98px){ .qr-scanner-modal-dialog{width:calc(100vw - 1rem);margin:.5rem}.scanner-stage,.qr-reader-stage{min-height:340px}.qr-reader-stage video{height:340px !important}.scanner-frame{width:210px}.scanner-result-photo{width:115px;height:115px}.scanner-result-card{padding:16px}.scanner-control-card{padding:16px} }


/* QRAttend v10 consistency + responsive hardening */
.action-menu-btn { width: 36px; height: 36px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:10px !important; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.action-menu-btn:hover, .action-menu-btn:focus { transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,23,42,.10); }
.dropdown-menu { border-radius:12px !important; padding:.4rem; }
.dropdown-item { border-radius:8px; min-height:38px; display:flex; align-items:center; }
.report-period-nav { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.report-period-label { min-width:170px; padding:.55rem .85rem; border:1px solid var(--topbar-border); border-radius:12px; background:var(--topbar-bg); text-align:center; display:flex; flex-direction:column; line-height:1.15; }
.report-period-label strong { font-size:.98rem; }
.settings-section-icon { width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:rgba(13,110,253,.10); color:var(--bs-primary); font-size:1.15rem; flex:0 0 auto; }
@media (max-width: 767.98px) {
  .app-main main.container-fluid { padding-left:.75rem !important; padding-right:.75rem !important; }
  .page-card .card-body, .card.p-4 { padding:1rem !important; }
  .report-period-nav { width:100%; justify-content:center; }
  .report-period-nav .btn { flex:1 1 auto; }
  .report-period-label { flex:1 1 170px; }
  .report-toolbar .toolbar-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
  .report-toolbar .toolbar-actions .btn:last-child { grid-column:1/-1; }
  .table-responsive { border-radius:12px; }
  .action-menu-btn { width:34px; height:34px; }
}
@media (max-width: 575.98px) {
  .report-period-nav .btn { font-size:.82rem; padding:.5rem .55rem; }
  .report-period-label { min-width:135px; font-size:.84rem; }
  .topbar { padding-left:.75rem !important; padding-right:.75rem !important; }
}

/* QRAttend v11 consistency and responsive controls */
.action-menu-btn { width: 38px; height: 38px; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.date-display-control { min-width: 180px; border:1px solid var(--bs-border-color); border-radius:.75rem; padding:.48rem .75rem; background:var(--bs-body-bg); }
.report-period-label { min-width: 150px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:.35rem .75rem; }
@media (max-width: 767.98px) {
  .date-display-control { min-width: 145px; }
  .report-period-nav { width:100%; display:flex; justify-content:center; gap:.4rem; }
  .report-period-nav .btn { flex:0 0 auto; }
  .report-period-label { min-width:120px; }
  .table-responsive { border-radius:.75rem; }
}

/* QRAttend v12 UI fixes */
.school-year-line { white-space: nowrap; }
.session-row-link { display:flex; width:100%; color:inherit; text-decoration:none; cursor:pointer; border-radius:12px; padding-left:.55rem; padding-right:.55rem; transition:background-color .18s ease, transform .18s ease; }
.session-row-link:hover, .session-row-link:focus-visible { background:var(--table-head-bg); color:inherit; transform:translateX(2px); outline:none; }
.session-row-link .bi-chevron-right { transition:transform .18s ease; }
.session-row-link:hover .bi-chevron-right, .session-row-link:focus-visible .bi-chevron-right { transform:translateX(3px); }
.attendance-date-nav { display:grid; grid-template-columns:40px minmax(150px,1fr) 40px; align-items:center; gap:.45rem; width:100%; }
.attendance-date-nav > .btn { width:40px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.attendance-date-nav .date-display-control { width:100%; min-width:0; }
.learner-header-actions { flex-wrap:wrap; }
.learner-action-btn { min-height:40px; padding:.55rem .9rem; }
.learner-qr-cell { width:92px; }
.learner-qr-thumb { width:58px; height:58px; object-fit:contain; display:block; margin:0 auto; border:1px solid var(--border-color,#dbe3ee); border-radius:8px; background:#fff; padding:3px; }
.learner-qr-thumb:hover { transform:scale(1.04); box-shadow:0 6px 16px rgba(15,23,42,.10); }
.report-summary-cards > [class*="col-xl"] { min-width:0; }
.report-summary-cards .card { min-height:96px; }
.report-summary-cards .h3 { font-size:1.65rem; }
.sheet-week-header th { background:rgba(13,110,253,.10) !important; color:#0b5ed7 !important; border-top:1px solid rgba(13,110,253,.16); border-bottom:1px solid rgba(13,110,253,.16); font-weight:800; padding:.55rem .65rem; }
.dropdown-toggle.action-menu-btn::after { display:none !important; }
@media (max-width: 767.98px) {
  .school-year-line { white-space:nowrap; }
  .attendance-date-nav { grid-template-columns:40px minmax(120px,1fr) 40px; }
  .attendance-date-nav .date-display-control { padding:.4rem .5rem; }
  .learner-header-actions { width:100%; }
  .learner-action-btn { flex:1 1 0; }
}
@media (max-width: 575.98px) {
  .learner-action-btn { font-size:.82rem; padding:.5rem .65rem; }
  .learner-qr-thumb { width:50px; height:50px; }
}


/* QRAttend v13: stable daily-attendance toolbar layout */
.report-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 270px) minmax(260px, 1fr) auto;
  align-items: end;
  gap: 1rem;
}
.toolbar-date, .toolbar-search, .toolbar-actions { min-width: 0; }
.toolbar-actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.attendance-date-nav {
  display:grid;
  grid-template-columns:40px minmax(145px,1fr) 40px;
  align-items:center;
  gap:.5rem;
  width:100%;
}
.attendance-date-nav > .btn { width:40px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.attendance-date-nav .date-display-control { width:100%; min-width:0; min-height:58px; padding:.55rem .45rem; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--bs-border-color,#dee2e6); border-radius:.75rem; background:var(--bs-body-bg,#fff); }
@media (max-width: 991.98px) {
  .report-toolbar { grid-template-columns: 1fr; align-items:stretch; }
  .toolbar-actions { justify-content:flex-start; }
}
@media (max-width: 575.98px) {
  .attendance-date-nav { grid-template-columns:40px minmax(0,1fr) 40px; }
  .attendance-date-nav .date-display-control { font-size:.9rem; }
  .toolbar-actions .btn { flex:1 1 auto; }
}
/* Never let the scanner library's pause overlay become the actual scanner state. */
#qr-reader video { border-radius: 1rem; object-fit: cover; }
.scanner-result-overlay { z-index: 10; }


/* QRAttend v14 global UI polish: one consistent visual language across modules. */
:root {
  --qr-radius: 16px;
  --qr-shadow: 0 8px 24px rgba(15, 23, 42, .07);
  --qr-shadow-hover: 0 12px 30px rgba(15, 23, 42, .11);
  --qr-control-h: 42px;
}

body { overflow-x: hidden; }
.card { border-radius: var(--qr-radius) !important; }
.card, .stat-card, .stats-card, .dashboard-hero { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.stat-card:hover, .stats-card:hover { transform: translateY(-2px); box-shadow: var(--qr-shadow-hover) !important; }
.btn { min-height: var(--qr-control-h); border-radius: 11px; font-weight: 600; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; }
.btn:hover { transform: translateY(-1px); }
.form-control, .form-select { min-height: var(--qr-control-h); border-radius: 11px; }
.table { --bs-table-border-color: rgba(15,23,42,.08); }
.table thead th { white-space: nowrap; font-size: .82rem; letter-spacing: .01em; }
.table tbody tr { transition: background-color .14s ease; }
.table tbody tr:hover { background: rgba(13,110,253,.035); }

/* Consistent action menu: three dots only, never the Bootstrap triangle. */
.action-menu-btn { width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; }
.action-menu-btn::after, .dropdown-toggle.action-menu-btn::after { display: none !important; content: none !important; }
.action-menu-btn i { font-size: 1.05rem; }

/* Consistent P/A/L/C colors and icons. */
.status-badge { border-radius: 999px; padding: .38rem .62rem; font-weight: 700; }
.status-badge-present { background: #d1fae5; color: #047857; }
.status-badge-absent { background: #fee2e2; color: #b91c1c; }
.status-badge-late { background: #fef3c7; color: #92400e; }
.status-badge-cutting { background: #e2e8f0; color: #475569; }
.status-badge-neutral { background: #e5e7eb; color: #4b5563; }

/* Daily date/search/export toolbar: stable grid, no merging or overlap. */
.attendance-toolbar-date { min-width: 235px; }
.attendance-toolbar-search { min-width: 260px; }
.attendance-date-nav { display: grid; grid-template-columns: 40px minmax(170px, 1fr) 40px; gap: .55rem; align-items: center; width: 100%; }
.attendance-date-nav .date-display-control { min-width: 0; width: 100%; min-height: 58px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.toolbar-actions { align-items: end; }

/* Equal dashboard/report metric cards. */
.report-summary-cards > [class*="col-"] { min-width: 0; }
.report-summary-cards .card { min-height: 112px; }
.report-summary-cards .h3 { font-variant-numeric: tabular-nums; }

/* Week strip: consistent blue band used by weekly and monthly sheets. */
.sheet-week-header th { background: rgba(13,110,253,.11) !important; color: #0b5ed7 !important; border-top: 1px solid rgba(13,110,253,.16); border-bottom: 1px solid rgba(13,110,253,.16); font-weight: 800; }

/* Session rows and quick actions have the same click affordance. */
.session-row-link, .quick-action { min-height: 56px; }
.session-row-link:focus-visible, .quick-action:focus-visible, .action-menu-btn:focus-visible { outline: 3px solid rgba(13,110,253,.18); outline-offset: 2px; }

/* Soft page entrance, kept intentionally subtle. */
main > * { animation: qrFadeIn .22s ease both; }
@keyframes qrFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Sidebar refinement. */
.sidebar { gap: .35rem; }
.sidebar .nav { gap: .22rem; }
.sidebar .nav-link { border-radius: 12px; min-height: 44px; display: flex; align-items: center; transition: transform .16s ease, background-color .16s ease, color .16s ease; }
.sidebar .nav-link:hover { transform: translateX(2px); }
.sidebar .nav-link.active { font-weight: 700; box-shadow: 0 6px 18px rgba(15,23,42,.10); }
.sidebar .nav-link i { width: 20px; text-align: center; }
.sidebar .nav-link-logout { margin-top: .4rem; }

@media (max-width: 1199.98px) {
  .attendance-toolbar-date { min-width: 215px; }
}
@media (max-width: 767.98px) {
  .attendance-toolbar-date, .attendance-toolbar-search { min-width: 0; width: 100%; }
  .attendance-date-nav { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .report-summary-cards > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .report-summary-cards > .col-12 { flex-basis: 100%; max-width: 100%; }
}


/* v16 consistency pass */
.school-year-line { white-space: nowrap; }
.topbar { min-height: 104px; }
.topbar-school { line-height: 1.25; letter-spacing: .01em; }
.report-summary-cards > [class*="col-"] { display: flex; }
.report-summary-cards > [class*="col-"] > .card { width: 100%; min-height: 118px; }
.report-summary-cards > .col-12 > .card { min-height: 118px; }
.attendance-period-nav { display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; }
.attendance-period-label { min-width: 190px; }
.school-year-nav { min-width: 300px; }
.school-year-current, .school-year-previous { min-width: 132px; min-height: 62px; padding:.65rem .9rem; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-card); display:flex; flex-direction:column; justify-content:center; text-align:center; }
.school-year-previous { text-decoration:none; }
.school-year-previous.disabled { opacity:.55; }
.qr-action-menu-portal { min-width: 180px; max-height: min(320px, calc(100vh - 16px)); overflow-y:auto; box-shadow: 0 12px 30px rgba(15,23,42,.16) !important; }
.action-menu-btn { flex:0 0 auto; }

@media (max-width: 767.98px) {
  .topbar { min-height: auto; }
  .attendance-period-nav { width:100%; justify-content:center; }
  .attendance-period-label { min-width: 150px; }
  .school-year-nav { min-width:0; width:100%; }
  .school-year-current, .school-year-previous { flex:1; }
}


/* v17: learner action controls and nearby three-dot menus */
.learner-header-actions .learner-action-btn {
  width: 210px;
  min-width: 210px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.qr-action-menu-portal {
  position: fixed !important;
  z-index: 3000 !important;
  margin: 0 !important;
  transform: none !important;
  min-width: 175px;
  max-width: min(240px, calc(100vw - 16px));
  max-height: min(320px, calc(100vh - 16px));
  overflow-y: auto;
  box-shadow: 0 12px 30px rgba(15,23,42,.18) !important;
}
@media (max-width: 575.98px) {
  .learner-header-actions .learner-action-btn { width: 100%; min-width: 0; }
}

/* v18: continuous school-year navigation, matching report navigation controls. */
.school-year-switcher .school-year-current {
    min-width: 220px;
    min-height: 64px;
    padding: .65rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.school-year-switcher .school-year-nav-btn {
    min-width: 112px;
    min-height: 64px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.school-year-switcher .school-year-nav-form {
    margin: 0;
}
@media (max-width: 991.98px) {
    .school-year-switcher .school-year-current,
    .school-year-switcher .school-year-nav-btn {
        width: 100%;
    }
}

/* v20 school-year state + stable global action menus */
.school-year-state { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.school-year-state::before { content:''; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
.school-year-state.current { color:#2563eb; }
.school-year-state.previous { color:#64748b; }
.school-year-state.next { color:#0f766e; }
.qr-action-menu-portal { position:fixed !important; z-index:3000 !important; max-width:min(260px, calc(100vw - 16px)); }

/* School Form reporting: screen preview + A4/landscape print-ready layout */
.sf-paper{background:#fff;border:1px solid #9aa3ad;padding:12px;color:#111;font-family:Arial,Helvetica,sans-serif}.sf-title{text-align:center;font-weight:800;font-size:20px}.sf-sub{text-align:center;font-size:9px;font-style:italic;margin-bottom:8px}.sf-header{width:100%;border-collapse:collapse;font-size:10px;margin-bottom:8px}.sf-header td,.sf-header th{border:1px solid #555;padding:5px}.sf-header td{font-weight:600;background:#f5f5f5}.sf-header th{text-align:center}.table-wrap{overflow:auto}.sf-table{border-collapse:collapse;width:100%;font-size:8px}.sf-table th,.sf-table td{border:1px solid #555;padding:3px;text-align:center;vertical-align:middle;white-space:nowrap}.sf-table th{background:#eee;font-weight:800}.sf2-paper .sf-table{min-width:1300px}.sf4-paper .sf-table{min-width:1900px}.name-col{min-width:210px}.remarks-col{min-width:180px}.mark{font-weight:700}.mark.abs{color:#111}.mark.tardy{font-weight:800}.gender-row td{background:#ddd;font-weight:800;text-align:left}.daily-total td,.total-row td{background:#e5e5e5;font-weight:800}.sf2-bottom{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:10px;font-size:9px}.sf2-bottom ol{margin:4px 0 0 18px;padding:0}.summary-box{border:1px solid #555;padding:8px;line-height:1.8}.sf-footer{display:flex;justify-content:space-between;font-size:8px;margin-top:12px}.adviser-cell{min-width:150px}.adviser-form{min-width:145px}.print-adviser{display:none}.sf4-mortality{display:flex;gap:20px;border:1px solid #555;margin-top:8px;padding:8px;font-size:9px}.sf4-mortality b{margin-right:auto}@media print{body{background:#fff!important}.no-print{display:none!important}.app-main{margin:0!important}.app-shell .sidebar,.app-shell .app-main>header{display:none!important}.app-main>main{padding:0!important}.sf-paper{border:0;padding:0}.sf-title{font-size:16px}.sf-table{font-size:7px}.sf-table th,.sf-table td{padding:2px}.sf2-paper .sf-table,.sf4-paper .sf-table{min-width:0;width:100%}.adviser-form{display:none}.print-adviser{display:inline}.sf4-mortality{font-size:8px}.sf-footer{font-size:7px}}@page{size:A4 landscape;margin:7mm}


/* v25: global friendly notifications and school-report print chooser */
.qr-toast-stack{position:fixed;top:20px;right:20px;z-index:5000;width:min(420px,calc(100vw - 30px));display:flex;flex-direction:column;gap:10px;pointer-events:none}.qr-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:14px 14px 14px 15px;box-shadow:0 14px 38px rgba(15,23,42,.18);opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .22s ease}.qr-toast.show{opacity:1;transform:translateY(0) scale(1)}.qr-toast-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;font-size:18px}.qr-toast-content{min-width:0;flex:1;font-size:.9rem;line-height:1.4}.qr-toast-content strong{display:block;margin-bottom:2px}.qr-toast-content div{color:#475569}.qr-toast-close{border:0;background:transparent;color:#64748b;font-size:23px;line-height:1;padding:0 2px;cursor:pointer}.qr-toast{position:relative;overflow:hidden}.qr-toast::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.18;transform-origin:left;animation:qrToastProgress 3s linear forwards}@keyframes qrToastProgress{from{transform:scaleX(1)}to{transform:scaleX(0)}}.qr-toast-success .qr-toast-icon{background:#dcfce7;color:#15803d}.qr-toast-error .qr-toast-icon{background:#fee2e2;color:#b91c1c}.qr-toast-warning .qr-toast-icon{background:#fef3c7;color:#b45309}.qr-toast-info .qr-toast-icon{background:#dbeafe;color:#1d4ed8}.report-choice{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e2e8f0;border-radius:14px;text-decoration:none;color:inherit;margin-bottom:10px;transition:.18s ease;background:#fff}.report-choice:hover{border-color:#93c5fd;box-shadow:0 8px 22px rgba(15,23,42,.08);transform:translateY(-1px)}.report-choice-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:0 0 42px}.report-choice span:nth-child(2){display:flex;flex-direction:column;min-width:0}.report-choice small{color:#64748b;margin-top:2px}.qr-clicked{transform:scale(.98);transition:transform .12s ease}
@media(max-width:575.98px){.qr-toast-stack{top:12px;right:12px;left:12px;width:auto}.qr-toast{border-radius:14px}.report-choice{padding:12px}.report-choice small{font-size:.75rem}}


/* v28 deployment hardening: consistent responsive shell and touch targets */
html{scroll-behavior:smooth}
button,a,.form-control,.form-select{touch-action:manipulation}
.btn{min-height:40px}
.sidebar{flex-shrink:0;z-index:1040}
@media(max-width:991.98px){
  .sidebar{box-shadow:0 20px 60px rgba(15,23,42,.28)!important}
  .topbar{z-index:1030}
  .topbar-school{order:2}
  .topbar-left{width:100%}
  .topbar-left>div{min-width:0}
  .dashboard-clock{min-width:0}
  .report-period-nav{max-width:100%;overflow-x:auto}
  .report-period-nav .btn{flex:0 0 auto}
}
@media(max-width:575.98px){
  .topbar h1{font-size:1rem}
  .topbar .school-year-line{display:none}
  .topbar-school{font-size:.9rem}
  .report-toolbar .toolbar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .report-toolbar .toolbar-actions .btn{width:100%;min-width:0}
  .report-toolbar .toolbar-actions .btn:first-child:last-child{grid-column:1/-1}
  .card{border-radius:1rem!important}
  .modal-dialog{margin:.5rem}
  .modal-body{padding:1rem}
  .qr-toast-stack{top:10px!important;right:10px!important;left:10px!important;width:auto!important}
  .qr-toast{font-size:.9rem}
}
@media(min-width:992px){.sidebar{position:sticky;top:0;height:100vh}}
@media print{
  body{background:#fff!important}
  #qrReportPrintChooser,.qr-toast-stack{display:none!important}
}

/* v29 school-form print/export reference alignment */
.sf-paper{background:#fff;border:1px solid #aeb7c2;padding:0;color:#111;font-family:Arial,Helvetica,sans-serif;overflow-x:auto}
.sf-title-band{background:#1f3b64;color:#fff;text-align:center;font-weight:800;font-size:18px;letter-spacing:.01em;padding:5px 8px;border:1px solid #17304f}
.sf-meta-line{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;font-size:10px;padding:5px 6px;border-left:1px solid #777;border-right:1px solid #777}
.sf-meta-line + .sf-meta-line{border-top:1px solid #bbb;border-bottom:1px solid #777}
.sf-table{border-collapse:collapse;width:100%;font-size:9px;table-layout:auto}
.sf-table th,.sf-table td{border:1px solid #555;padding:3px 4px;text-align:center;vertical-align:middle;white-space:nowrap;height:20px}
.sf-table th{background:#d9e2f3;font-weight:800}
.sf2-reference-table .name-col{min-width:220px;width:220px}.sf2-reference-table .remarks-col{min-width:150px;width:150px}.sf2-reference-table .mark{min-width:24px}.sf2-reference-table .daily-total td{background:#d9e2f3;font-weight:800}
.sf4-reference-table{min-width:980px}.sf4-reference-table th{white-space:normal;line-height:1.15}.sf4-reference-table td{white-space:normal}.sf4-reference-table .adviser-cell{min-width:185px}.sf4-reference-table td[rowspan="3"]{vertical-align:middle}.sf4-reference-table .total-row td{background:#d9e2f3;font-weight:800}.sf4-template-table{table-layout:fixed}.sf4-template-table td[rowspan="3"]{vertical-align:middle}.sf4-template-table .sf4-gender-cell{height:38px;vertical-align:middle}
.sf4-print-wrap{overflow-x:hidden}.sf4-template-table{min-width:0!important;width:100%!important;table-layout:fixed}.sf4-template-table th,.sf4-template-table td{white-space:normal;overflow-wrap:anywhere;word-break:break-word;min-width:0}.sf4-template-table th:nth-child(1){width:12%}.sf4-template-table th:nth-child(2){width:17%}.sf4-template-table th:nth-child(3){width:7%}.sf4-template-table th:nth-child(4){width:8%}.sf4-template-table th:nth-child(5){width:9%}.sf4-template-table th:nth-child(6){width:10%}.sf4-template-table th:nth-child(7){width:9%}.sf4-template-table th:nth-child(8){width:9%}.sf4-template-table th:nth-child(9){width:9%}.sf4-template-table th:nth-child(10){width:10%}
.sf-signatures{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:22px 4px 4px;font-size:9px}.sf-signatures>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:end}.sf-signatures span{color:#333}.sf-signatures b{display:block;border-bottom:1px solid #333;height:18px}.sf-signatures i{grid-column:2;font-size:8px;margin-top:3px}.sf-footer{display:flex;justify-content:space-between;gap:10px;font-size:8px;padding:8px 4px 4px}
@media(max-width:767.98px){.sf-meta-line{justify-content:flex-start;font-size:9px}.sf-title-band{font-size:14px}.sf-paper{border-radius:8px}.sf-table{font-size:8px}.sf-signatures{gap:20px}.sf-footer{flex-direction:column}.sf2-reference-table,.sf4-reference-table{min-width:980px}}
@media print{
  @page{size:A4 landscape;margin:7mm}
  html,body{background:#fff!important;color:#111!important;width:100%!important;overflow:visible!important}
  body>*{display:none!important}
  .app-shell,.app-shell .app-main,.app-shell .app-main>main{display:block!important;margin:0!important;padding:0!important;width:100%!important;min-width:0!important}
  .app-shell .sidebar,.app-shell .app-main>header,.no-print{display:none!important}
  .sf-paper{display:block!important;border:0!important;padding:0!important;margin:0!important;width:100%!important;overflow:visible!important;box-shadow:none!important}
  .sf-title-band{font-size:14px;padding:4px 6px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sf-meta-line{font-size:8px;padding:3px}.sf-table{font-size:7px;width:100%!important}.sf-table th,.sf-table td{padding:2px 3px;height:17px}
  .sf2-reference-table .name-col{min-width:0!important;width:auto!important}.sf2-reference-table .remarks-col{min-width:70px!important;width:auto!important}.sf4-reference-table{min-width:0!important;width:100%!important}.sf4-reference-table .adviser-cell{min-width:0!important}
  .sf-signatures{padding-top:12px;gap:60px}.sf-footer{font-size:7px}.print-adviser{display:inline!important}.adviser-form{display:none!important}
  .sf-paper *{box-sizing:border-box}
}


/* QRAttend v30 — final global UI system */
:root{
  --qa-primary:#1f3b64;
  --qa-primary-2:#2d5b91;
  --qa-accent:#3b82f6;
  --qa-success:#198754;
  --qa-warning:#d97706;
  --qa-danger:#dc3545;
  --qa-info:#0ea5e9;
  --qa-radius:14px;
  --qa-shadow:0 8px 24px rgba(15,23,42,.07);
}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}
.btn{border-radius:10px;font-weight:650;letter-spacing:.005em;min-height:40px;box-shadow:none!important}
.btn-primary{background:var(--qa-primary);border-color:var(--qa-primary)}
.btn-primary:hover,.btn-primary:focus{background:var(--qa-primary-2);border-color:var(--qa-primary-2)}
.btn-outline-secondary,.btn-outline-primary,.btn-outline-success,.btn-outline-danger{background:var(--bg-card)}
.btn:active{transform:translateY(0)!important}
.form-control,.form-select{border-radius:10px;min-height:42px;border-color:var(--border-color);background:var(--bg-card);color:var(--text-color)}
.form-control:focus,.form-select:focus{border-color:rgba(31,59,100,.45);box-shadow:0 0 0 .2rem rgba(31,59,100,.10)}
.card,.page-card{border-radius:var(--qa-radius)!important;border-color:var(--border-color)!important;box-shadow:var(--qa-shadow)}
.card-header{background:transparent;border-bottom:1px solid var(--border-color)}
.table-responsive{border-radius:12px}
.table{font-size:.9rem}
.table thead th{background:var(--table-head-bg);color:var(--table-head-text);font-weight:750;vertical-align:middle}
.table tbody td{vertical-align:middle}
.table tbody tr{transition:background-color .16s ease,transform .16s ease}
.table-hover tbody tr:hover{background:rgba(31,59,100,.035)}
.badge{font-weight:700;letter-spacing:.01em}
.nav-link,.dropdown-item,.quick-action,.session-row-link{transition:background-color .16s ease,color .16s ease,transform .16s ease}
.sidebar{box-shadow:8px 0 28px rgba(15,23,42,.08)}
.sidebar .nav-link{border-radius:11px;margin:.15rem .7rem;padding:.7rem .8rem}
.sidebar .nav-link.active{box-shadow:inset 3px 0 rgba(255,255,255,.95),0 4px 14px rgba(15,23,42,.08)}
.topbar{background:var(--topbar-bg)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.topbar-school{font-size:1.05rem;letter-spacing:.015em}
.topbar-left h1{font-weight:750}
.report-toolbar{display:flex;gap:.75rem;align-items:end;justify-content:space-between;flex-wrap:wrap}
.toolbar-search{flex:1 1 320px;min-width:220px}
.toolbar-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.toolbar-actions .btn{white-space:nowrap}
.report-period-nav{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:nowrap}
.report-period-nav .btn{height:42px;min-height:42px;padding:.45rem .75rem;border-radius:10px;white-space:nowrap}
.report-period-label{min-width:142px;height:42px;padding:.35rem .7rem;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-card);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.report-period-label strong{font-size:.88rem}
.report-period-label .small{font-size:.72rem}
/* Settings school-year selector now matches Daily/Weekly/Monthly navigation dimensions. */
.school-year-switcher{padding:.65rem!important;border-radius:12px!important}
.school-year-switcher>div{gap:.4rem!important;justify-content:center!important}
.school-year-switcher .school-year-nav-form{flex:0 0 auto!important}
.school-year-switcher .school-year-nav-btn{width:92px!important;min-width:92px!important;height:42px!important;min-height:42px!important;padding:.45rem .7rem!important;border-radius:10px!important;font-size:.86rem!important}
.school-year-switcher .school-year-current{width:150px!important;min-width:150px!important;min-height:42px!important;height:42px!important;padding:.25rem .65rem!important;border-radius:10px!important}
.school-year-switcher .school-year-state{font-size:.62rem!important;line-height:1!important;margin-bottom:.12rem!important}
.school-year-switcher .school-year-current .fw-bold{font-size:.9rem!important;line-height:1!important}
.school-year-switcher .school-year-current .badge{font-size:.58rem!important;padding:.2rem .4rem!important}
/* Consistent action buttons / icon-only controls */
.action-menu-btn{width:40px!important;height:40px!important;min-width:40px!important;border-radius:10px!important}
.btn i{vertical-align:-.08em}
/* Mobile/tablet */
@media(max-width:1199.98px){
  .topbar-school{font-size:1rem}
  main.container-fluid{padding-left:1rem!important;padding-right:1rem!important}
}
@media(max-width:991.98px){
  .sidebar{position:fixed!important;left:0;top:0;height:100vh;transform:translateX(-105%);transition:transform .22s ease;z-index:1045}
  .sidebar.active{transform:translateX(0)}
  .app-main{width:100%;min-width:0}
  .topbar{position:sticky;top:0;z-index:1035}
  .school-year-switcher>div{width:auto!important;flex-direction:row!important;align-items:center!important}
}
@media(max-width:767.98px){
  main.container-fluid{padding:.75rem!important}
  .topbar{padding:.7rem .75rem!important}
  .topbar-school{font-size:.92rem}
  .topbar-left{min-width:0}
  .dashboard-clock{display:none}
  .report-toolbar{display:grid;grid-template-columns:1fr;align-items:stretch}
  .toolbar-search,.toolbar-actions{width:100%;min-width:0}
  .toolbar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
  .toolbar-actions .btn{width:100%}
  .report-period-nav{width:100%;justify-content:center}
  .report-period-nav .btn{flex:0 0 auto}
  .report-period-label{min-width:126px}
  .school-year-switcher>div{width:100%!important;display:grid!important;grid-template-columns:1fr 1.4fr 1fr!important}
  .school-year-switcher .school-year-nav-btn,.school-year-switcher .school-year-current{width:100%!important;min-width:0!important}
  .table-responsive>.table{min-width:760px}
  .modal-dialog{margin:.5rem}
  .modal-content{border-radius:14px!important}
}
@media(max-width:575.98px){
  .topbar-school{font-size:.84rem}
  .topbar .badge{font-size:.65rem}
  .toolbar-actions{grid-template-columns:1fr 1fr}
  .toolbar-actions .btn{font-size:.82rem;padding:.5rem .55rem}
  .report-period-nav .btn{font-size:.8rem;padding:.45rem .55rem}
  .report-period-label{min-width:112px}
  .report-period-label strong{font-size:.8rem}
  .report-period-label .small{font-size:.66rem}
  .school-year-switcher{padding:.45rem!important}
  .school-year-switcher .school-year-nav-btn{font-size:.78rem!important}
  .school-year-switcher .school-year-current .fw-bold{font-size:.82rem!important}
  .card-body{padding:1rem!important}
}
/* Keep school-form print exact and screen-scrollable. */
@media print{
  .app-shell{display:block!important}
  .app-main{width:100%!important}
  .sf-paper{page-break-inside:avoid}
}
/* School Calendar */
.school-calendar-icon{width:48px;height:48px;border-radius:15px;font-size:1.25rem;display:inline-flex;align-items:center;justify-content:center;background:rgba(37,99,235,.10);color:var(--bs-primary);flex:0 0 auto}
.school-calendar-page .school-calendar-toolbar{border:1px solid var(--border-color,#e2e8f0)!important}
.school-calendar-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#27458f;background:rgba(59,130,246,.07);white-space:nowrap}
.calendar-type-pill{display:inline-flex;align-items:center;gap:.2rem;padding:.38rem .62rem;border-radius:999px;font-size:.78rem;font-weight:800;white-space:nowrap}
.calendar-type-national_holiday{background:rgba(220,38,38,.10);color:#b91c1c}
.calendar-type-municipal_no_class{background:rgba(124,58,237,.10);color:#6d28d9}
.calendar-type-school_no_class{background:rgba(2,132,199,.10);color:#0369a1}
.calendar-type-other{background:rgba(100,116,139,.12);color:#475569}
body.theme-dark .school-calendar-table thead th{background:rgba(59,130,246,.12);color:#bfdbfe}
body.theme-dark .school-calendar-table td{color:#e2e8f0}
body.theme-dark .school-calendar-page .school-calendar-toolbar{background:rgba(15,23,42,.55)!important}
.calendar-attendance-banner{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;border:1px solid rgba(220,38,38,.18);background:rgba(220,38,38,.07);color:var(--text-color,#0f172a)}
.calendar-attendance-banner.calendar-banner-municipal_no_class{border-color:rgba(124,58,237,.18);background:rgba(124,58,237,.07)}
.calendar-attendance-banner.calendar-banner-school_no_class{border-color:rgba(2,132,199,.18);background:rgba(2,132,199,.07)}
.calendar-banner-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.75);font-size:1.25rem;flex:0 0 auto}.calendar-banner-lock{font-weight:800;font-size:.82rem;white-space:nowrap}.scanner-calendar-block{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:rgba(15,23,42,.96);color:#fff}.scanner-calendar-block-icon{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:rgba(255,255,255,.10);font-size:2rem;margin-bottom:14px}.scanner-calendar-block-title{font-size:1.25rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.scanner-calendar-block-date{font-size:1.8rem;font-weight:800;margin-top:4px}.scanner-calendar-block-reason{font-size:1rem;color:rgba(255,255,255,.82);margin-top:6px}.scanner-calendar-block-note{margin-top:18px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.8);font-size:.82rem;font-weight:700}
@media(max-width:767.98px){.calendar-attendance-banner{align-items:flex-start;flex-wrap:wrap}.calendar-banner-lock{width:100%;margin-left:62px}.scanner-calendar-block-date{font-size:1.45rem}}
.calendar-report-status{width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;font-size:.8rem;font-weight:900}.calendar-report-national_holiday{background:rgba(220,38,38,.12);color:#b91c1c}.calendar-report-municipal_no_class{background:rgba(124,58,237,.12);color:#6d28d9}.calendar-report-school_no_class{background:rgba(2,132,199,.12);color:#0369a1}.calendar-report-other{background:rgba(100,116,139,.12);color:#475569}
/* School Calendar form must remain fully interactive above any page overlays. */
.school-calendar-page .calendar-form-panel { position: relative; z-index: 50; pointer-events: auto; }
.school-calendar-page .calendar-form-panel * { pointer-events: auto; }
.school-calendar-page .calendar-form-panel.d-none { display: none !important; }
.school-calendar-page .calendar-form-panel:not(.d-none) { display: block !important; }

/* Calendar notices must stay readable against the page background and image layers. */
.calendar-attendance-banner { color:#0f172a !important; background:#fff !important; border-color:#cbd5e1 !important; }
.calendar-attendance-banner .calendar-banner-icon { background:#f8fafc !important; color:#1d4ed8 !important; }
.calendar-attendance-banner #attendanceCalendarType, .calendar-attendance-banner #attendanceCalendarReason, .calendar-attendance-banner #attendanceCalendarDate, .calendar-attendance-banner .calendar-banner-lock { color:#0f172a !important; }

/* Theme preference repair: core UI controls follow the selected theme. */
body.theme-blue, body.theme-green, body.theme-purple, body.theme-slate, body.theme-orange,
body.theme-cyan, body.theme-indigo, body.theme-emerald, body.theme-violet, body.theme-fuchsia,
body.theme-amber, body.theme-lime, body.theme-sky, body.theme-pink, body.theme-stone,
body.theme-crimson, body.theme-navy, body.theme-olive, body.theme-dark, body.theme-aqua,
body.theme-forest, body.theme-berry, body.theme-coffee, body.theme-ocean, body.theme-mint,
body.theme-sunrise, body.theme-graphite, body.theme-school {
  --qa-primary: var(--table-accent);
  --qa-primary-2: color-mix(in srgb, var(--table-accent) 82%, #0f172a);
  --qa-accent: var(--table-accent);
}
body.theme-school {
  --bg-body:#f0fdf4;
  --bg-soft:radial-gradient(circle at top,rgba(22,101,52,.16),transparent 45%),#f0fdf4;
  --bg-sidebar:#166534;
  --bg-card:#fff;
  --text-color:#14532d;
  --text-muted:#475569;
  --border-color:rgba(22,101,52,.18);
  --table-head-bg:rgba(22,101,52,.10);
  --table-accent:#166534;
  --qa-primary:#166534;
  --qa-primary-2:#14532d;
  --qa-accent:#16a34a;
}
.btn-primary{background:var(--qa-primary)!important;border-color:var(--qa-primary)!important}
.btn-primary:hover,.btn-primary:focus{background:var(--qa-primary-2)!important;border-color:var(--qa-primary-2)!important}
.form-control:focus,.form-select:focus{border-color:color-mix(in srgb,var(--table-accent) 45%,transparent);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--table-accent) 12%,transparent)}
.table-hover tbody tr:hover{background:color-mix(in srgb,var(--table-accent) 5%,transparent)}