/*
    School Alert System - shared interface styles
    Applies to: index.php, admin_login.php, admin_dashboard.php, studentprofile.php
*/

:root {
    --sa-bg: #eef4ff;
    --sa-surface: rgba(255, 255, 255, 0.88);
    --sa-surface-strong: #ffffff;
    --sa-surface-muted: rgba(248, 250, 252, 0.86);
    --sa-surface-subtle: #f1f5f9;
    --sa-surface-inset: #e2e8f0;
    --sa-border: rgba(15, 23, 42, 0.10);
    --sa-text: #0f172a;
    --sa-muted: #64748b;
    --sa-primary: #2563eb;
    --sa-primary-dark: #1d4ed8;
    --sa-primary-soft: rgba(37, 99, 235, 0.10);
    --sa-success: #16a34a;
    --sa-success-soft: #dcfce7;
    --sa-danger: #dc2626;
    --sa-danger-soft: #fee2e2;
    --sa-warning-soft: #fef3c7;
    --sa-radius-lg: 28px;
    --sa-radius-md: 20px;
    --sa-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
    --sa-shadow-soft: 0 16px 40px rgba(15, 23, 42, 0.10);
    --sa-font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --sa-font-display: "Plus Jakarta Sans", "Source Sans 3", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --sa-bg: #07111f;
    --sa-surface: rgba(15, 23, 42, 0.88);
    --sa-surface-strong: #0f172a;
    --sa-surface-muted: #111d31;
    --sa-surface-subtle: #16243a;
    --sa-surface-inset: #1c2d47;
    --sa-border: rgba(148, 163, 184, 0.22);
    --sa-text: #e5edf8;
    --sa-muted: #9fb0c7;
    --sa-primary: #60a5fa;
    --sa-primary-dark: #93c5fd;
    --sa-primary-soft: rgba(96, 165, 250, 0.16);
    --sa-success: #4ade80;
    --sa-success-soft: rgba(74, 222, 128, 0.15);
    --sa-danger: #fb7185;
    --sa-danger-soft: rgba(251, 113, 133, 0.15);
    --sa-warning-soft: rgba(251, 191, 36, 0.16);
    --sa-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --sa-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.3);
    --bs-body-color: var(--sa-text);
    --bs-body-bg: var(--sa-surface-strong);
    --bs-secondary-color: var(--sa-muted);
    --bs-tertiary-bg: #1e293b;
    --bs-border-color: var(--sa-border);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body.app-body {
    min-height: 100vh;
    margin: 0;
    color: var(--sa-text);
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.18), transparent 30rem),
        linear-gradient(135deg, #f8fbff 0%, var(--sa-bg) 48%, #e0ecff 100%);
    font-family: var(--sa-font-body);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html[data-theme="dark"] body.app-body {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.2), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.12), transparent 30rem),
        linear-gradient(135deg, #050b14 0%, var(--sa-bg) 48%, #0b1729 100%);
}

button,
input,
optgroup,
select,
textarea {
    font: inherit;
}

body.app-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.08));
}

html[data-theme="dark"] body.app-body::before {
    background-image:
        linear-gradient(rgba(96, 165, 250, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 165, 250, 0.055) 1px, transparent 1px);
}

a {
    color: var(--sa-primary);
}

a:hover {
    color: var(--sa-primary-dark);
}

.app-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 56px;
}

.app-shell-narrow {
    width: min(980px, calc(100% - 32px));
}

.app-shell-scanner {
    width: min(1360px, calc(100% - 32px));
}

.login-shell {
    width: min(1120px, calc(100% - 28px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 32px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card,
.glass-card,
.hero-panel,
.metric-card,
.attendance-summary-card,
.profile-detail,
.attendance-day-card,
.table-shell {
    border: 1px solid var(--sa-border);
    box-shadow: var(--sa-shadow-soft);
}

.login-card {
    overflow: hidden;
    border-radius: 34px;
    background: var(--sa-surface-strong);
    box-shadow: var(--sa-shadow);
}

.login-art {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(30, 64, 175, 0.56)),
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.34), transparent 9rem),
        linear-gradient(145deg, #0f172a 0%, #1d4ed8 45%, #0ea5e9 100%);
}

.login-art::before,
.login-art::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    opacity: 0.35;
}

.login-art::before {
    width: 280px;
    height: 280px;
    right: -105px;
    top: -90px;
    background: #ffffff;
}

.login-art::after {
    width: 220px;
    height: 220px;
    left: -90px;
    bottom: -80px;
    border: 34px solid rgba(255, 255, 255, 0.36);
}

.login-art-content {
    position: relative;
    z-index: 1;
}

.hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--sa-radius-lg);
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(37, 99, 235, 0.82)),
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.28), transparent 13rem),
        linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #0284c7 100%);
    box-shadow: var(--sa-shadow);
}

.hero-panel::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -170px;
    bottom: -210px;
    border-radius: 50%;
    border: 58px solid rgba(255, 255, 255, 0.12);
}

.hero-content {
    position: relative;
    z-index: 1;
}

.page-title,
.brand-mark,
.kicker,
.soft-pill,
.btn,
.table thead th,
.metric-label,
.metric-number,
.summary-card-label,
.summary-card-number,
.profile-detail dt,
.profile-detail dd,
.status-badge {
    font-family: var(--sa-font-display);
}

.brand-mark {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 18px;
    font-weight: 900;
    letter-spacing: -0.08em;
    color: var(--sa-primary);
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
}

.brand-mark-light {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(10px);
}

.brand-mark-img {
    object-fit: contain;
    padding: 4px;
    background: #ffffff;
}

.kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.85rem;
    padding: 0.45rem 0.78rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.glass-card {
    border-radius: var(--sa-radius-lg);
    background: var(--sa-surface);
    backdrop-filter: blur(18px);
}

.scanner-card {
    background: rgba(255, 255, 255, 0.94);
}

.scanner-workspace > [class*="col-"] {
    display: flex;
}

.scanner-workspace .glass-card {
    width: 100%;
}

.scanner-recent-card {
    display: flex;
    flex-direction: column;
    min-height: 460px;
}

.scanner-recent-card #recentTapsLiveRegion {
    flex: 1 1 auto;
    min-height: 0;
}

@media (min-width: 1200px) {
    .scanner-recent-card {
        height: 100%;
        max-height: 100%;
    }

    .scanner-recent-card #recentTapsLiveRegion {
        overflow-y: auto;
        padding-right: 0.25rem;
    }
}

.recent-taps-list {
    display: grid;
    gap: 0.8rem;
}

.recent-tap-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: rgba(248, 250, 252, 0.82);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

.recent-tap-event {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 17px;
    font-family: var(--sa-font-display);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.recent-tap-main {
    min-width: 0;
}

.recent-tap-name {
    margin: 0;
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-tap-meta,
.recent-tap-location {
    margin: 0;
    color: var(--sa-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.recent-tap-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-tap-time {
    display: grid;
    gap: 0.08rem;
    justify-items: end;
    color: var(--sa-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.recent-tap-time strong {
    color: var(--sa-text);
    font-size: 0.86rem;
    font-weight: 900;
}

.recent-tap-time span {
    color: #64748b;
}

@media (max-width: 575.98px) {
    .recent-tap-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .recent-tap-time {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }
}


.page-title {
    margin: 0 0 0.8rem;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 0.96;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.page-subtitle {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--sa-font-body);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 500;
}


.btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.45rem;
    font-size: 1.02em;
    line-height: 1;
    vertical-align: -0.08em;
}

.btn span {
    vertical-align: middle;
}

.login-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    padding: 0;
}

.soft-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0.42rem 0.78rem;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.security-list {
    display: grid;
    gap: 0.7rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.security-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

.security-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(255, 255, 255, 0.18);
}

.btn-sa-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    border: 0;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

.btn-sa-primary:hover,
.btn-sa-primary:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--sa-primary-dark), #0369a1);
    transform: translateY(-1px);
}

.btn-soft {
    color: var(--sa-primary-dark) !important;
    background: var(--sa-primary-soft);
    border: 1px solid rgba(37, 99, 235, 0.15);
}

.btn-soft:hover,
.btn-soft:focus {
    color: var(--sa-primary-dark) !important;
    background: rgba(37, 99, 235, 0.16);
}

.form-control,
.form-select {
    border-color: rgba(15, 23, 42, 0.12);
    background-color: rgba(248, 250, 252, 0.95);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(37, 99, 235, 0.58);
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.13);
}

.scanner-input {
    min-height: 56px;
    border-top-left-radius: 18px !important;
    border-bottom-left-radius: 18px !important;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.input-group .btn-sa-primary {
    border-top-right-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
}

.table-shell {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border-radius: 22px;
    background: #ffffff;
}

.table {
    margin-bottom: 0;
}

.table thead th {
    border-bottom: 0;
    color: #475569;
    background: #f8fafc;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.table tbody tr {
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.table-hover tbody tr:hover,
.clickable-row:hover {
    background-color: rgba(37, 99, 235, 0.055);
}

.clickable-row {
    cursor: pointer;
}

.rfid-chip,
.section-chip,
.status-badge,
.attendance-time {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-weight: 900;
    white-space: nowrap;
}

.rfid-chip {
    padding: 0.42rem 0.7rem;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    text-decoration: none;
}

.rfid-chip:hover {
    color: #ffffff;
    background: var(--sa-primary);
}

.section-chip {
    padding: 0.35rem 0.68rem;
    color: #334155;
    background: #f1f5f9;
}

.status-badge {
    padding: 0.42rem 0.72rem;
    font-size: 0.74rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.status-in {
    color: #166534;
    background: var(--sa-success-soft);
}

.status-out {
    color: #991b1b;
    background: var(--sa-danger-soft);
}

.status-neutral {
    color: #475569;
    background: #e2e8f0;
}

.status-warn {
    color: #92400e;
    background: #fef3c7;
}

.metric-card,
.profile-detail,
.attendance-summary-card,
.attendance-day-card {
    border-radius: var(--sa-radius-md);
    background: #ffffff;
}

.metric-card {
    min-width: 170px;
}

.attendance-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.attendance-summary-card {
    position: relative;
    min-height: 178px;
    overflow: hidden;
    padding: 1.2rem;
}

.attendance-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--summary-accent, var(--sa-primary));
}

.summary-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.summary-card-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 16px;
    color: var(--summary-accent, var(--sa-primary));
    background: var(--summary-soft, var(--sa-primary-soft));
    font-size: 1.25rem;
}

.summary-card-label {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.summary-card-number {
    margin-bottom: 0.35rem;
    color: var(--sa-text);
    font-size: clamp(2.25rem, 4vw, 3.35rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.summary-card-helper {
    color: var(--sa-muted);
    font-weight: 700;
}

.attendance-refresh-status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.attendance-manual-refresh-btn {
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    color: var(--sa-muted);
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    line-height: 1;
    transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.attendance-manual-refresh-btn:hover,
.attendance-manual-refresh-btn:focus-visible {
    color: var(--sa-primary);
    border-color: rgba(37, 99, 235, 0.34);
    background: var(--sa-primary-soft);
    transform: translateY(-1px);
}

.attendance-manual-refresh-btn:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.attendance-manual-refresh-btn.is-refreshing i {
    animation: attendance-refresh-spin 0.8s linear infinite;
}

@keyframes attendance-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}

.summary-card-primary {
    --summary-accent: var(--sa-primary);
    --summary-soft: var(--sa-primary-soft);
}

.summary-card-success {
    --summary-accent: var(--sa-success);
    --summary-soft: var(--sa-success-soft);
}

.summary-card-danger,
.summary-card-alert {
    --summary-accent: var(--sa-danger);
    --summary-soft: var(--sa-danger-soft);
}

.summary-card-info {
    --summary-accent: #0284c7;
    --summary-soft: rgba(14, 165, 233, 0.13);
}

.summary-card-warning {
    --summary-accent: #d97706;
    --summary-soft: var(--sa-warning-soft);
}

.metric-label,
.profile-detail dt {
    margin-bottom: 0.35rem;
    color: var(--sa-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.metric-number,
.profile-detail dd {
    margin: 0;
    color: var(--sa-text);
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.card-lift {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.profile-avatar {
    width: clamp(88px, 13vw, 132px);
    height: clamp(88px, 13vw, 132px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 34px;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 900;
    letter-spacing: -0.08em;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.profile-detail {
    padding: 1.1rem;
}

.attendance-calendar-list {
    display: grid;
    gap: 1rem;
}

.attendance-day-card {
    overflow: hidden;
    border-color: rgba(37, 99, 235, 0.16);
}

.attendance-day-header,
.attendance-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.attendance-day-header {
    position: relative;
    overflow: hidden;
    padding: 1.2rem 1.25rem;
    border-bottom: 1px solid rgba(37, 99, 235, 0.12);
    color: var(--sa-text);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(2, 132, 199, 0.05) 100%),
        var(--sa-surface-strong);
}

.attendance-day-header::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -72px;
    bottom: -116px;
    border-radius: 999px;
    border: 32px solid rgba(37, 99, 235, 0.06);
    pointer-events: none;
}

.attendance-day-header > * {
    position: relative;
    z-index: 1;
}

.attendance-day-title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.attendance-day-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 16px;
    color: var(--sa-primary);
    background: var(--sa-primary-soft);
    border: 1px solid rgba(37, 99, 235, 0.16);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
    font-size: 1.2rem;
}

.attendance-day-eyebrow {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--sa-muted);
    font-family: var(--sa-font-display);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.attendance-day-date {
    color: var(--sa-text);
    letter-spacing: -0.025em;
}

.attendance-day-weekday {
    color: var(--sa-muted);
    font-weight: 700;
}

.attendance-day-header .soft-pill,
.attendance-day-header .attendance-duration-pill {
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.attendance-manual-tap-link {
    min-height: 2.25rem;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.attendance-events {
    display: grid;
}

.attendance-event-row {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.attendance-event-row:last-child {
    border-bottom: 0;
}

.attendance-sessions {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.2rem 1.2rem;
}

.attendance-session-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.attendance-session-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--session-accent, var(--sa-primary));
}

.attendance-session-completed {
    --session-accent: var(--sa-success);
}

.attendance-session-short_pair,
.attendance-session-missing_in,
.attendance-session-missing_out,
.attendance-session-unknown {
    --session-accent: #d97706;
}

.attendance-session-invalid_time {
    --session-accent: var(--sa-danger);
}

/* The session card is a native <details> element so each Tap IN / Tap OUT pair
   can be collapsed or expanded with the toggle button on the left. */
.attendance-session-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.95rem 1rem 0.85rem 1.15rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.9));
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Hide the browser's default disclosure triangle (we use our own chevron). */
.attendance-session-summary::-webkit-details-marker {
    display: none;
}

.attendance-session-heading {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.attendance-session-toggle {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #475569;
    background: #eef2f7;
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 1rem;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.attendance-session-summary:hover .attendance-session-toggle {
    color: var(--sa-primary);
    background: var(--sa-primary-soft);
}

/* Rotate the chevron to point down when the pair is expanded. */
details.attendance-session-card[open] > .attendance-session-summary .attendance-session-toggle {
    transform: rotate(90deg);
}

.attendance-session-body {
    display: grid;
}

.attendance-session-pills {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.session-status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.42rem 0.72rem;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.session-status-completed {
    color: #166534;
    background: var(--sa-success-soft);
}

.session-status-short_pair,
.session-status-missing_in,
.session-status-missing_out,
.session-status-unknown {
    color: #92400e;
    background: #fef3c7;
}

.session-status-invalid_time {
    color: #991b1b;
    background: var(--sa-danger-soft);
}

/* Each Tap IN and Tap OUT is now its own full-width row, stacked vertically. */
.attendance-session-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem 0.9rem 1.15rem;
}

.attendance-session-row + .attendance-session-row {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.attendance-session-row-label {
    flex: 1 1 auto;
    min-width: 0;
}

.attendance-session-row-time {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.42rem;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    color: #334155;
    background: #f1f5f9;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.attendance-tap-time-label {
    line-height: 1;
}

.attendance-sms-sent-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    color: #047857;
    background: rgba(16, 185, 129, 0.14);
    box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.18);
}

.attendance-sms-sent-indicator i {
    font-size: 0.78rem;
    line-height: 1;
}

.attendance-session-row-missing {
    opacity: 0.72;
}

.attendance-session-row-missing .tap-dot {
    color: #64748b;
    background: #e2e8f0;
}

.attendance-session-row-missing .attendance-session-row-time {
    color: #64748b;
    background: #eef2f7;
    font-weight: 600;
}

.attendance-session-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.85rem 1rem 1rem 1.15rem;
    padding: 0.72rem 0.85rem;
    border-radius: 14px;
    color: #475569;
    background: #f8fafc;
    font-size: 0.85rem;
    font-weight: 700;
}

.tap-dot {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.85rem;
}

.tap-in {
    color: var(--sa-success);
    background: var(--sa-success-soft);
}

.tap-out {
    color: var(--sa-danger);
    background: var(--sa-danger-soft);
}

.attendance-time {
    padding: 0.42rem 0.68rem;
    color: #334155;
    background: #f1f5f9;
    font-size: 0.82rem;
}

.empty-state {
    border: 1px dashed rgba(15, 23, 42, 0.18);
    border-radius: 22px;
    padding: 2rem;
    color: var(--sa-muted);
    background: rgba(248, 250, 252, 0.75);
    text-align: center;
    font-weight: 700;
}

.alert {
    border: 0;
}

/* Student Attendance Timeline: per-day time-in-school pill, anomaly warning, and operational error cards. */
.attendance-duration-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.42rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--sa-success);
    background: var(--sa-success-soft);
    white-space: nowrap;
}

.attendance-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1rem 1.2rem;
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
}

.attendance-warning i {
    font-size: 1rem;
    line-height: 1.45;
    flex-shrink: 0;
}

.attendance-error {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1rem 1.2rem;
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.45;
}

.attendance-error i {
    font-size: 1rem;
    line-height: 1.45;
    flex-shrink: 0;
}

/* Lets the message text grow so the dismiss (X) button sits flush right. */
.attendance-alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Close button on the warning/error notices. Dismissal is per-view only:
   reloading or re-filtering the page re-renders the notices, so they are
   always shown again for awareness. */
.attendance-alert-dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -0.15rem -0.2rem 0 0.2rem;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: inherit;
    background: rgba(15, 23, 42, 0.06);
    opacity: 0.7;
    line-height: 1;
    font-size: 0.78rem;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.attendance-alert-dismiss:hover,
.attendance-alert-dismiss:focus {
    opacity: 1;
    background: rgba(15, 23, 42, 0.12);
    outline: none;
}

.dataTables_wrapper .dt-search input,
.dataTables_wrapper .dt-length select {
    border-radius: 999px;
    border-color: rgba(15, 23, 42, 0.12);
    padding: 0.5rem 0.9rem;
}

.dataTables_wrapper .dt-search input {
    min-width: min(360px, 100%);
}

.page-link {
    color: var(--sa-primary-dark);
    border-radius: 999px !important;
    margin: 0 0.12rem;
    border-color: rgba(15, 23, 42, 0.10);
}

.active > .page-link,
.page-link.active {
    color: #ffffff;
    background: var(--sa-primary);
    border-color: var(--sa-primary);
}

@media (max-width: 991.98px) {
    .login-art {
        min-height: 420px;
    }

    .attendance-summary-grid,
    .profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .app-shell,
    .login-shell {
        width: min(100% - 20px, 1180px);
        padding-top: 16px;
        padding-bottom: 32px;
    }

    .login-card,
    .glass-card,
    .hero-panel {
        border-radius: 22px;
    }

    .login-art {
        min-height: 360px;
    }

    .attendance-summary-grid,
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .scanner-card .input-group {
        display: grid;
        gap: 0.65rem;
    }

    .scanner-input,
    .scanner-card .input-group .btn-sa-primary {
        width: 100%;
        border-radius: 18px !important;
    }

    .attendance-day-header,
    .attendance-event-row,
    .attendance-session-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .attendance-day-title,
    .attendance-day-meta {
        width: 100%;
    }

    .attendance-day-meta {
        justify-content: flex-start !important;
    }

    .attendance-day-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .attendance-sessions {
        padding: 0.85rem;
    }

    .attendance-session-pills {
        justify-content: flex-start;
    }
}

.fw-black {
    font-weight: 900 !important;
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    border-radius: 999px;
    border-color: rgba(15, 23, 42, 0.12);
    padding: 0.5rem 0.9rem;
}

.dt-container .dt-search input {
    min-width: min(360px, 100%);
}

/* SMS Delivery Log: keep DataTables controls and wide log rows comfortably
   inset from the table card while preserving horizontal scrolling. */
.sms-log-table-shell {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.15rem;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.sms-log-table-shell .dt-container {
    min-width: 100%;
}

.sms-log-table-shell .dt-layout-row {
    margin: 0;
}

.sms-log-table-shell .dt-layout-row:not(.dt-layout-table) {
    gap: 0.85rem 1.25rem;
    padding: 1rem 1.25rem;
}

.sms-log-table-shell .dt-layout-row:first-child {
    margin-bottom: 0.9rem;
    border: 1px solid var(--sa-border);
    border-radius: 16px;
    background: var(--sa-surface-muted);
}

.sms-log-table-shell .dt-layout-row:last-child {
    margin: 0.9rem 0 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--sa-border);
    border-radius: 16px;
    background: var(--sa-surface-muted);
}

.sms-log-table-shell .dt-layout-table {
    padding: 0;
}

.sms-log-table-shell #smsLogTable {
    min-width: 1080px;
}

.sms-log-table-shell #smsLogTable > :not(caption) > * > * {
    padding: 0.95rem 1rem;
    vertical-align: middle;
}

.sms-log-table-shell #smsLogTable > :not(caption) > * > :first-child {
    padding-left: 1.25rem;
}

.sms-log-table-shell #smsLogTable > :not(caption) > * > :last-child {
    padding-right: 1.25rem;
}

.sms-log-table-shell .dt-info,
.sms-log-table-shell .dt-length,
.sms-log-table-shell .dt-search,
.sms-log-table-shell .dt-paging {
    margin: 0;
}

@media (max-width: 767.98px) {
    .sms-log-table-shell {
        padding: 0.8rem;
    }

    .sms-log-table-shell .dt-layout-row:not(.dt-layout-table) {
        align-items: stretch;
        padding: 0.9rem 1rem;
    }

    .sms-log-table-shell .dt-layout-cell,
    .sms-log-table-shell .dt-search,
    .sms-log-table-shell .dt-search input,
    .sms-log-table-shell .dt-length {
        width: 100%;
        min-width: 0;
    }

    .sms-log-table-shell .dt-layout-end {
        margin-left: 0 !important;
    }

    .sms-log-table-shell .dt-layout-row:last-child {
        margin: 0.75rem 0 0;
        padding: 0.85rem;
    }

    .sms-log-table-shell #smsLogTable > :not(caption) > * > * {
        padding: 0.85rem;
    }

    .sms-log-table-shell #smsLogTable > :not(caption) > * > :first-child {
        padding-left: 1rem;
    }

    .sms-log-table-shell #smsLogTable > :not(caption) > * > :last-child {
        padding-right: 1rem;
    }
}

/* Admin header navigation layout */
.admin-layout {
    width: min(1360px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 56px;
}

.admin-content {
    min-width: 0;
}

.admin-topbar {
    position: sticky;
    top: 16px;
    z-index: 30;
    margin-bottom: 1.25rem;
}

.admin-topbar-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    box-shadow: var(--sa-shadow-soft);
}

/*
 * The brand block is the flexible piece of the topbar row: when the nav is
 * wide (site-management admin) or the configured school name is long, the
 * brand shrinks and its text wraps so the row can stay on a single line.
 */
.admin-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 170px;
    color: var(--sa-text);
    text-decoration: none;
}

.admin-topbar-brand:hover,
.admin-topbar-brand:focus-visible {
    color: var(--sa-text);
    outline: none;
}

.admin-topbar-title,
.admin-topbar-user {
    display: block;
}

.admin-topbar-title {
    font-family: var(--sa-font-display);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.admin-topbar-user {
    margin-top: 0.15rem;
    color: var(--sa-muted);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.15;
}

.admin-topbar-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.admin-topbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.68rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #334155;
    font-family: var(--sa-font-display);
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.admin-topbar-link:hover,
.admin-topbar-link:focus-visible {
    color: var(--sa-primary-dark);
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
    outline: none;
}

.admin-topbar-link.active {
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    border-color: rgba(37, 99, 235, 0.18);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}

/*
 * The action pills always stay together on one line. When the topbar runs
 * out of room (e.g. the wider site-management nav or a long school
 * name), the whole block wraps below the nav and keeps hugging the right.
 */
.admin-topbar-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55rem;
}

/* Keep the three action pills uniform: icon and label centered as one unit. */
.admin-topbar-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/*
 * Below 1280px the one-line topbar cannot hold the site-management controls
 * wider nav even with the brand fully shrunk, so the deliberate stacked
 * layout (brand row, actions row, nav row) takes over for every role.
 */
@media (max-width: 1279.98px) {
    .admin-topbar-card {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .admin-topbar-brand {
        flex: 1 1 100%;
        min-width: 0;
    }

    .admin-topbar-nav {
        justify-content: flex-start;
        order: 3;
        flex: 1 1 100%;
    }

    .admin-topbar-actions {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .admin-layout {
        width: min(100% - 24px, 1180px);
        padding-top: 16px;
        padding-bottom: 32px;
    }

    .admin-topbar {
        position: static;
    }

    .admin-topbar-card,
    .admin-topbar-nav,
    .admin-topbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-topbar-card {
        border-radius: 22px;
    }

    .admin-topbar-link,
    .admin-topbar-actions .btn {
        width: 100%;
    }

    .admin-topbar-nav > .admin-topbar-link {
        justify-content: flex-start;
    }
}


/* Manage dropdown (admin tools menu in the admin topbar) */
.admin-topbar-dropdown {
    position: relative;
    display: inline-flex;
}

.admin-topbar-dropdown-toggle {
    cursor: pointer;
    background: transparent;
    font-size: inherit;
}

.admin-topbar-dropdown-caret {
    font-size: 0.7rem;
    margin-left: 0.1rem;
    transition: transform 0.18s ease;
}

.admin-topbar-dropdown.open .admin-topbar-dropdown-caret {
    transform: rotate(180deg);
}

.admin-topbar-submenu {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 290px;
    padding: 0.5rem;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg, 18px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    z-index: 40;
}

.admin-topbar-submenu::before {
    /* Bridges the gap so the menu does not close while the pointer travels. */
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 0;
    right: 0;
    height: 0.6rem;
}

.admin-topbar-dropdown.open .admin-topbar-submenu,
.admin-topbar-dropdown:hover .admin-topbar-submenu,
.admin-topbar-dropdown:focus-within .admin-topbar-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.admin-topbar-submenu-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.75rem;
    border-radius: 14px;
    color: var(--sa-text);
    text-decoration: none;
    transition: background 0.14s ease, transform 0.14s ease;
}

.admin-topbar-submenu-item:hover,
.admin-topbar-submenu-item:focus-visible {
    background: rgba(37, 99, 235, 0.08);
    outline: none;
    transform: translateY(-1px);
}

.admin-topbar-submenu-item.active {
    background: var(--sa-primary-soft);
}

.admin-topbar-submenu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--sa-primary-soft);
    color: var(--sa-primary-dark);
    font-size: 1rem;
}

.admin-topbar-submenu-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.admin-topbar-submenu-label {
    display: inline-flex;
    align-items: center;
    gap: 0.05rem;
    font-family: var(--sa-font-display);
    font-weight: 900;
    line-height: 1.15;
    color: var(--sa-text);
}

.admin-topbar-submenu-desc {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sa-muted);
}

@media (max-width: 1279.98px) {
    .admin-topbar-dropdown {
        display: block;
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .admin-topbar-dropdown {
        width: 100%;
    }

    .admin-topbar-dropdown-toggle {
        width: 100%;
        justify-content: flex-start;
    }

    /* On mobile the submenu drops into normal flow when opened. */
    .admin-topbar-submenu {
        position: static;
        transform: none;
        min-width: 0;
        width: 100%;
        margin-top: 0.4rem;
        box-shadow: none;
        display: none;
    }

    .admin-topbar-dropdown.open .admin-topbar-submenu {
        display: block;
        transform: none;
    }

    /* Hover should not auto-open on touch layouts; only the .open class does. */
    .admin-topbar-dropdown:not(.open):hover .admin-topbar-submenu,
    .admin-topbar-dropdown:not(.open):focus-within .admin-topbar-submenu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Holiday type badges (used on the Holidays page and elsewhere) */
.holiday-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.holiday-badge-national {
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.22);
}

.holiday-badge-local {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.22);
}

.holiday-badge-school {
    color: #b45309;
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.24);
}

.holiday-badge-other {
    color: #6d28d9;
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.22);
}

.holiday-default-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--sa-muted);
    background: rgba(148, 163, 184, 0.16);
}

/* Holiday banner shown on day-based views (e.g. dashboard selected date) */
.holiday-day-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: var(--sa-radius-lg, 18px);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(14, 165, 233, 0.08));
}

.holiday-day-banner .holiday-day-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--sa-primary);
    color: #fff;
    font-size: 1.25rem;
}

.holiday-day-banner .holiday-day-title {
    font-family: var(--sa-font-display);
    font-weight: 900;
    color: var(--sa-text);
    margin: 0;
    line-height: 1.2;
}

.holiday-day-banner .holiday-day-sub {
    margin: 0.15rem 0 0;
    color: var(--sa-muted);
    font-weight: 600;
    font-size: 0.9rem;
}


/* Support Desk page */
.support-hero-note {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    font-weight: 700;
    line-height: 1.35;
}

.support-hero-note i {
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 1.25rem;
}

.support-contact-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
}

.support-contact-icon,
.support-flow-icon,
.support-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 18px;
}

.support-contact-icon {
    width: 48px;
    height: 48px;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    font-size: 1.35rem;
}

.support-contact-label {
    color: var(--sa-muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.support-contact-value {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 1.15rem;
    font-weight: 900;
}

.support-flow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    height: 100%;
}

.support-flow-item,
.support-panel {
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--sa-shadow-soft);
}

.support-flow-item {
    padding: 1.25rem;
}

.support-flow-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    font-size: 1.45rem;
}

.support-flow-icon.bug,
.support-panel-icon.bug {
    color: #991b1b;
    background: #fee2e2;
}

.support-flow-icon.request,
.support-panel-icon.request {
    color: #075985;
    background: #e0f2fe;
}

.support-flow-item h3 {
    margin: 0 0 0.4rem;
    font-family: var(--sa-font-display);
    font-size: 1.12rem;
    font-weight: 900;
}

.support-flow-item p {
    margin: 0;
    color: var(--sa-muted);
    font-weight: 600;
}

.support-tabs-shell {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--sa-shadow-soft);
}

.support-tabs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.support-tabs {
    display: inline-flex;
    gap: 0.45rem;
    padding: 0.45rem;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
}

.support-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 120px;
    padding: 0.75rem 1.15rem;
    border: 0;
    border-radius: 999px;
    color: var(--sa-muted);
    background: transparent;
    font-weight: 900;
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.support-tab:hover,
.support-tab:focus-visible {
    color: var(--sa-primary-dark);
    transform: translateY(-1px);
}

.support-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.support-tab i {
    font-size: 1rem;
}

.support-tab-content {
    position: relative;
}

.support-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: none;
}

.support-panel[hidden] {
    display: none !important;
}

.support-panel.active {
    animation: supportPanelFade 0.18s ease-out;
}

@keyframes supportPanelFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.support-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.support-panel-icon {
    width: 58px;
    height: 58px;
    font-size: 1.55rem;
}

.support-form .form-control,
.support-form .form-select {
    border-radius: 16px;
}

.support-form textarea.form-control {
    resize: vertical;
}

.support-form .form-text {
    color: var(--sa-muted);
    font-weight: 600;
}

.support-form-note {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin: 1.25rem 0;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    color: var(--sa-muted);
    background: rgba(37, 99, 235, 0.08);
    font-weight: 700;
}

.support-form-note i {
    color: var(--sa-primary-dark);
    flex: 0 0 auto;
}

.support-turnstile-gate {
    margin: 1.25rem 0;
    padding: 1rem;
    border: 1px dashed rgba(37, 99, 235, 0.34);
    border-radius: 20px;
    background: rgba(37, 99, 235, 0.06);
}

.support-turnstile-gate[hidden] {
    display: none !important;
}

.support-turnstile-copy {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    color: var(--sa-text);
}

.support-turnstile-copy i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    font-size: 1.1rem;
}

.support-turnstile-copy strong,
.support-turnstile-copy span {
    display: block;
}

.support-turnstile-copy strong {
    font-family: var(--sa-font-display);
    font-weight: 900;
}

.support-turnstile-copy span {
    color: var(--sa-muted);
    font-weight: 700;
}

.support-turnstile-widget {
    min-height: 70px;
}

.support-turnstile-status {
    min-height: 1.4rem;
    margin: 0.75rem 0 0;
    font-weight: 800;
}

.support-turnstile-status.is-success {
    color: #166534;
}

.support-turnstile-status.is-warning {
    color: #92400e;
}

.support-turnstile-status.is-error {
    color: #991b1b;
}

@media (max-width: 991.98px) {
    .support-flow-grid {
        grid-template-columns: 1fr;
    }

    .support-tabs-header {
        align-items: stretch;
        flex-direction: column;
    }

    .support-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .support-tab {
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .support-panel-header {
        flex-direction: column;
    }

    .support-tabs {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .support-tab {
        width: 100%;
    }
}

/* Unified error / warning pages */
.error-page-shell {
    width: min(1080px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 42px 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-page-layout .admin-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 150px);
}

.error-panel {
    position: relative;
    width: min(100%, 1040px);
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    overflow: hidden;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--sa-shadow);
}

.error-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: var(--error-accent, var(--sa-primary));
    z-index: 2;
}

.error-panel-art {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(37, 99, 235, 0.76)),
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.32), transparent 9rem),
        linear-gradient(145deg, #0f172a 0%, var(--error-accent, var(--sa-primary)) 58%, #0ea5e9 100%);
}

.error-panel-art::before,
.error-panel-art::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    opacity: 0.28;
}

.error-panel-art::before {
    width: 260px;
    height: 260px;
    right: -110px;
    top: -90px;
    background: #ffffff;
}

.error-panel-art::after {
    width: 260px;
    height: 260px;
    left: -112px;
    bottom: -102px;
    border: 38px solid rgba(255, 255, 255, 0.35);
}

.error-code-orb {
    position: relative;
    z-index: 1;
    width: clamp(148px, 21vw, 230px);
    height: clamp(148px, 21vw, 230px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 42px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 34px 70px rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(14px);
    font-family: var(--sa-font-display);
    font-size: clamp(3rem, 8vw, 5.7rem);
    font-weight: 900;
    letter-spacing: -0.08em;
    line-height: 1;
}

.error-code-orb i {
    font-size: clamp(3.8rem, 8vw, 6.4rem);
    letter-spacing: 0;
}

.error-panel-content {
    position: relative;
    z-index: 1;
    padding: clamp(1.55rem, 4.5vw, 3.6rem);
}

.error-title {
    margin: 0 0 0.9rem;
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: clamp(2.15rem, 5vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.error-message {
    max-width: 620px;
    margin: 0;
    color: var(--sa-muted);
    font-size: clamp(1rem, 1.8vw, 1.18rem);
    font-weight: 650;
}

.error-helper-card,
.error-request-card {
    margin-top: 1.15rem;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
}

.error-helper-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    color: #334155;
    font-weight: 760;
}

.error-helper-card i {
    color: var(--error-accent, var(--sa-primary));
    font-size: 1.05rem;
    line-height: 1.45;
}

.error-request-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.95rem 1rem;
}

.error-request-label {
    color: var(--sa-muted);
    font-family: var(--sa-font-display);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.error-request-card code {
    display: block;
    overflow-wrap: anywhere;
    color: #334155;
    background: transparent;
    font-weight: 800;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.45rem;
}

.error-tone-primary {
    --error-accent: var(--sa-primary);
}

.error-tone-warning {
    --error-accent: #d97706;
}

.error-tone-danger {
    --error-accent: var(--sa-danger);
}

.error-tone-success {
    --error-accent: var(--sa-success);
}

.error-tone-warning .soft-pill {
    color: #92400e;
    background: #fef3c7;
}

.error-tone-danger .soft-pill {
    color: #991b1b;
    background: var(--sa-danger-soft);
}

.error-tone-success .soft-pill {
    color: #166534;
    background: var(--sa-success-soft);
}

@media (max-width: 991.98px) {
    .error-page-shell {
        align-items: flex-start;
        padding-top: 24px;
    }

    .error-panel {
        grid-template-columns: 1fr;
    }

    .error-panel-art {
        min-height: 260px;
    }
}

@media (max-width: 575.98px) {
    .error-page-shell {
        width: min(100% - 24px, 1080px);
        padding-top: 18px;
        padding-bottom: 32px;
    }

    .error-panel {
        border-radius: 24px;
    }

    .error-panel-content {
        padding: 1.35rem;
    }

    .error-actions,
    .error-actions .btn {
        width: 100%;
    }
}

/* Student photo upload + scanner verification preview */
.student-photo-upload-panel {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 24px;
    background: rgba(248, 250, 252, 0.82);
}

.student-photo-preview-frame,
.tap-result-photo-wrap {
    flex: 0 0 auto;
}

.student-photo-preview,
.student-photo-placeholder {
    width: 128px;
    height: 128px;
    border-radius: 28px;
}

.student-photo-preview,
.tap-result-photo,
.profile-avatar-photo {
    display: block;
    object-fit: cover;
}

.student-photo-preview {
    border: 4px solid #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
}

.student-photo-placeholder,
.tap-result-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    font-weight: 900;
    letter-spacing: -0.06em;
}

.student-photo-placeholder {
    font-size: 2.4rem;
}

.tap-result-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(190px, 0.55fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.96));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.tap-result-photo,
.tap-result-photo-placeholder {
    width: clamp(132px, 18vw, 190px);
    height: clamp(132px, 18vw, 190px);
    border-radius: 30px;
    border: 5px solid #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
}

.tap-result-photo-placeholder {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
}

.tap-result-name {
    color: var(--sa-text);
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -0.055em;
}

.tap-result-meta {
    color: #475569;
    font-size: 1.05rem;
    font-weight: 800;
}

.tap-result-time {
    display: grid;
    gap: 0.15rem;
}

.tap-result-time strong {
    color: var(--sa-text);
    font-size: 1.15rem;
}

.tap-result-reminder {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 22px;
    color: #1e3a8a;
    background: rgba(219, 234, 254, 0.78);
    font-weight: 800;
}

.tap-result-reminder i {
    font-size: 1.45rem;
    line-height: 1;
}

.profile-avatar-photo {
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .tap-result-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tap-result-reminder {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .student-photo-upload-panel,
    .tap-result-card {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .student-photo-upload-panel {
        flex-direction: column;
    }

    .student-photo-preview,
    .student-photo-placeholder,
    .tap-result-photo,
    .tap-result-photo-placeholder {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Admin student photo reposition tool */
.student-photo-edit-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

.student-photo-edit-trigger:focus-visible {
    outline: 4px solid rgba(37, 99, 235, 0.35);
    outline-offset: 4px;
}

.student-photo-edit-trigger .student-photo-preview,
.student-photo-edit-trigger .student-photo-placeholder {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.student-photo-edit-trigger:hover .student-photo-preview,
.student-photo-edit-trigger:hover .student-photo-placeholder,
.student-photo-edit-trigger:focus-visible .student-photo-preview,
.student-photo-edit-trigger:focus-visible .student-photo-placeholder {
    transform: scale(1.03);
    filter: brightness(0.82);
}

.student-photo-edit-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.45rem;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.82));
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.student-photo-crop-open {
    overflow: hidden;
}

.student-photo-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.student-photo-crop-modal.is-open {
    display: flex;
}

.student-photo-crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.64);
    backdrop-filter: blur(10px);
}

.student-photo-crop-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 720px);
    max-height: min(94vh, 900px);
    overflow: auto;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.32);
}

.student-photo-crop-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.student-photo-crop-stage {
    position: relative;
    width: min(100%, 420px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    background: #e2e8f0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10), 0 18px 40px rgba(15, 23, 42, 0.14);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.student-photo-crop-stage:active {
    cursor: grabbing;
}

.student-photo-crop-stage canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.student-photo-crop-circle {
    position: absolute;
    inset: 9%;
    border: 4px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow:
        0 0 0 999px rgba(15, 23, 42, 0.34),
        0 0 0 1px rgba(15, 23, 42, 0.18),
        0 10px 28px rgba(15, 23, 42, 0.16);
    pointer-events: none;
}

.student-photo-crop-hint {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.72);
    font-size: 0.82rem;
    font-weight: 900;
    pointer-events: none;
}

.student-photo-crop-controls {
    width: min(100%, 520px);
    margin: 1.25rem auto 0;
}

@media (max-width: 575.98px) {
    .student-photo-edit-trigger {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .student-photo-crop-dialog {
        border-radius: 24px;
    }

    .student-photo-crop-header {
        align-items: stretch;
    }
}

/* Admin/student messaging */
.message-unread-badge,
.message-inline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 .45rem;
    border-radius: 999px;
    color: #ffffff;
    background: var(--sa-danger);
    font-family: var(--sa-font-display);
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(220, 38, 38, .22);
}

.admin-topbar-link .message-unread-badge {
    margin-left: .05rem;
}

.admin-topbar-dropdown-toggle .message-unread-badge {
    margin-left: .05rem;
}

.admin-topbar-submenu-label .message-unread-badge {
    margin-left: .35rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .38rem;
    font-size: .66rem;
    vertical-align: middle;
}

.thread-list {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.message-admin-group {
    padding-top: 1.25rem;
    border-top: 1px solid var(--sa-border);
}

.message-admin-group:first-child {
    padding-top: 0;
    border-top: 0;
}

.thread-card {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-md);
    color: var(--sa-text);
    background: rgba(255, 255, 255, .94);
    text-decoration: none;
    box-shadow: var(--sa-shadow-soft);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.thread-card:hover,
.thread-card:focus-visible {
    color: var(--sa-text);
    border-color: rgba(37, 99, 235, .22);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .13);
    transform: translateY(-2px);
    outline: none;
}

.thread-card-unread {
    border-color: rgba(37, 99, 235, .28);
    background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(255, 255, 255, .96));
}

.thread-avatar,
.message-profile-avatar {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 18px;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    font-family: var(--sa-font-display);
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
}

.thread-avatar img,
.message-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thread-card-body {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.thread-card-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: .5rem;
    margin-bottom: .2rem;
    font-family: var(--sa-font-display);
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.thread-card-meta,
.message-meta,
.message-edited-note {
    color: var(--sa-muted);
    font-size: .84rem;
    font-weight: 700;
}

.thread-card-meta {
    display: block;
    overflow-wrap: anywhere;
}

.thread-card-preview {
    display: block;
    max-width: 100%;
    margin: .2rem 0 0;
    color: #475569;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-thread-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 1rem;
}

.message-thread-window {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 62vh;
    min-height: 380px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.15rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--sa-radius-md);
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .08), transparent 16rem),
        #f8fafc;
    scroll-behavior: smooth;
}

.message-row {
    display: flex;
    width: 100%;
    min-width: 0;
    margin-bottom: 1rem;
}

.message-row-own {
    justify-content: flex-end;
}

.message-row-other {
    justify-content: flex-start;
}

.message-bubble-wrap {
    width: min(76%, 760px);
    min-width: 0;
    max-width: 100%;
}

.message-row-own .message-bubble-wrap {
    margin-left: auto;
}

.message-row-other .message-bubble-wrap {
    margin-right: auto;
}

.message-bubble {
    max-width: 100%;
    overflow: hidden;
    padding: .9rem 1rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.message-row-own .message-bubble {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    box-shadow: 0 16px 34px rgba(37, 99, 235, .22);
}

.message-row-other .message-bubble {
    color: #0f172a;
    border-color: rgba(15, 23, 42, .10);
    background: #ffffff;
}

.message-row-own .message-meta,
.message-row-own .message-edited-note {
    color: rgba(255, 255, 255, .78);
}

.message-row-latest .message-bubble {
    outline: 3px solid rgba(37, 99, 235, .13);
}

.message-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-weight: 650;
}

.message-body-deleted {
    color: var(--sa-muted);
    font-style: italic;
}

.message-row-own .message-body-deleted {
    color: rgba(255, 255, 255, .78);
}

.message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .65rem;
}

.message-row-own .message-actions .btn {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
}

.message-edit-form {
    margin-top: .75rem;
}

.message-composer {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 1rem;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-md);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--sa-shadow-soft);
}

.message-empty-state {
    display: flex;
    min-height: 310px;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--sa-muted);
}

.message-empty-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 20px;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    font-size: 1.4rem;
}

@media (max-width: 767.98px) {
    .message-bubble-wrap {
        width: min(92%, 760px);
    }

    .thread-card {
        align-items: flex-start;
    }

    .message-thread-window {
        max-height: 66vh;
        min-height: 330px;
        padding: .8rem;
    }
}

/* Attendance Leaderboards */
.leaderboard-month-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.leaderboard-month-nav {
    display: grid;
    grid-template-columns: 46px minmax(190px, 1fr) 46px;
    align-items: center;
    gap: 0.5rem;
    width: min(100%, 370px);
}

.leaderboard-month-arrow {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.leaderboard-month-tools .form-control,
.leaderboard-month-input {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(248, 250, 252, 0.92);
    color: var(--sa-text);
    min-height: 46px;
}

.leaderboard-current-month-btn {
    flex: 0 0 auto;
    min-width: 100px;
    min-height: 46px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.leaderboard-personal-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.leaderboard-personal-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: 26px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(14, 165, 233, 0.08)), rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.leaderboard-personal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.25);
}

.leaderboard-personal-card > div:last-child {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.leaderboard-personal-label {
    color: var(--sa-muted);
    font-family: var(--sa-font-display);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.leaderboard-personal-card strong {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.leaderboard-personal-card span:last-child {
    color: var(--sa-muted);
    font-weight: 700;
}

.leaderboard-list,
.leaderboard-section-list {
    display: grid;
    gap: 1rem;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.leaderboard-row-own,
.leaderboard-section-card.leaderboard-row-own {
    border-color: rgba(37, 99, 235, 0.28);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.06)), rgba(255, 255, 255, 0.96);
}

.leaderboard-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 19px;
    font-family: var(--sa-font-display);
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #ffffff;
    background: linear-gradient(135deg, #64748b, #334155);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.leaderboard-rank-gold {
    color: #713f12;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
}

.leaderboard-rank-silver {
    color: #334155;
    background: linear-gradient(135deg, #f8fafc, #cbd5e1);
}

.leaderboard-rank-bronze {
    color: #7c2d12;
    background: linear-gradient(135deg, #fed7aa, #fb923c);
}

.leaderboard-rank-standard {
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
}

.leaderboard-avatar {
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sa-primary);
    background: var(--sa-primary-soft);
    font-family: var(--sa-font-display);
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.leaderboard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leaderboard-main {
    min-width: 0;
}

.leaderboard-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.18rem;
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.leaderboard-name a {
    color: inherit;
    text-decoration: none;
}

.leaderboard-name a:hover,
.leaderboard-name a:focus-visible {
    color: var(--sa-primary);
}

.leaderboard-meta {
    color: var(--sa-muted);
    font-weight: 700;
}

.leaderboard-you-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    font-family: var(--sa-font-display);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.leaderboard-score {
    display: grid;
    gap: 0.08rem;
    justify-items: end;
    white-space: nowrap;
}

.leaderboard-score strong {
    color: var(--sa-primary-dark);
    font-family: var(--sa-font-display);
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.leaderboard-score span {
    color: var(--sa-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.leaderboard-metrics {
    grid-column: 3 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.leaderboard-metrics span,
.leaderboard-section-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.65rem;
    border-radius: 999px;
    color: #475569;
    background: rgba(148, 163, 184, 0.14);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.leaderboard-section-card {
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.leaderboard-section-progress {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.leaderboard-section-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--sa-success), #22c55e);
}

.leaderboard-section-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.leaderboard-rules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.leaderboard-rule-card {
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.82);
}

.leaderboard-rule-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    color: var(--sa-primary);
    background: var(--sa-primary-soft);
}

.leaderboard-rule-card strong {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-weight: 900;
}

.leaderboard-rule-card span {
    color: var(--sa-muted);
    font-weight: 650;
    line-height: 1.45;
}

.min-w-0 {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .leaderboard-personal-strip,
    .leaderboard-rules-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .leaderboard-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .leaderboard-avatar {
        display: none;
    }

    .leaderboard-metrics {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .leaderboard-month-tools {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .leaderboard-row {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .leaderboard-score {
        justify-items: start;
        text-align: left;
    }

    .leaderboard-month-tools,
    .leaderboard-month-nav,
    .leaderboard-current-month-btn,
    .leaderboard-personal-card {
        width: 100%;
    }

    .leaderboard-month-nav {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
    }

    .leaderboard-month-tools .leaderboard-month-arrow {
        width: 46px;
    }

    .leaderboard-month-tools .leaderboard-month-input {
        width: 100%;
    }

    .leaderboard-current-month-btn {
        margin-left: 0;
    }

    .leaderboard-personal-card {
        align-items: flex-start;
    }
}

/* Student residential address selector */
.address-entry-card {
    border: 1px solid rgba(35, 54, 92, 0.12);
    border-radius: 1.25rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 28px rgba(30, 45, 74, 0.05);
}

.address-selector-message:empty {
    display: none;
}

/* Keep the longer emergency address easy to scan in the profile grid. */
.profile-detail-wide {
    grid-column: span 2;
}

@media (max-width: 575.98px) {
    .profile-detail-wide {
        grid-column: auto;
    }
}

/* Admin text blast and SMS credit wallet */
.text-blast-credit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 112px;
    padding: 1.05rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(12px);
}

.text-blast-credit-label,
.text-blast-credit-note,
.text-blast-cost-label,
.text-blast-cost-unit,
.text-blast-cost-card small,
.credit-checkout-eyebrow {
    display: block;
    font-family: var(--sa-font-display);
    font-weight: 800;
}

.text-blast-credit-label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.76rem;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.text-blast-credit-value {
    display: block;
    margin-top: 0.1rem;
    font-family: var(--sa-font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: 1;
}

.text-blast-credit-note {
    margin-top: 0.36rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.86rem;
}

.text-blast-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.1rem;
    margin-top: 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    font-weight: 700;
}

.text-blast-hero-meta i {
    margin-right: 0.28rem;
}

.text-blast-wallet-icon {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.78);
}

.text-blast-audience-option,
.credit-payment-option {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    min-height: 104px;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 22px;
    color: var(--sa-text);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.text-blast-audience-option:hover,
.text-blast-audience-option:focus-within,
.credit-payment-option:hover,
.credit-payment-option:focus-within {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10);
    transform: translateY(-1px);
}

.text-blast-audience-option.selected,
.credit-payment-option.selected {
    border-color: rgba(37, 99, 235, 0.52);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.08)), rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.12);
}

.text-blast-audience-option .form-check-input,
.credit-payment-option .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.text-blast-audience-icon,
.credit-payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 16px;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    font-size: 1.2rem;
}

.text-blast-audience-option strong,
.credit-payment-option strong {
    display: block;
    font-family: var(--sa-font-display);
    font-weight: 900;
}

.text-blast-audience-option small,
.credit-payment-option small {
    display: block;
    margin-top: 0.16rem;
    color: var(--sa-muted);
    font-weight: 650;
}

.text-blast-recipient-picker {
    margin: 0 0 1.6rem;
    padding: 1.15rem;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(255, 255, 255, 0.84));
}

.text-blast-directory-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.text-blast-search-field {
    width: min(100%, 310px);
}

.text-blast-search-field .input-group-text,
.text-blast-credit-input-group .input-group-text {
    border-color: rgba(15, 23, 42, 0.10);
    background: rgba(248, 250, 252, 0.95);
    color: var(--sa-muted);
}

.text-blast-recipient-table-wrap {
    max-height: 430px;
    overflow: auto;
    background: rgba(255, 255, 255, 0.88);
}

.text-blast-recipient-table-wrap thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.text-blast-select-column {
    width: 48px;
}

.text-blast-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    white-space: nowrap;
    color: #334155;
    font-family: var(--sa-font-display);
    font-size: 0.9rem;
    font-weight: 800;
}

.text-blast-phone i {
    color: var(--sa-primary);
}

.text-blast-message-input {
    min-height: 148px;
    resize: vertical;
}

.text-blast-cost-card {
    height: 100%;
    min-height: 210px;
    padding: 1.35rem;
    border: 1px solid rgba(37, 99, 235, 0.20);
    border-radius: 24px;
    color: var(--sa-text);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 11rem),
        linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(255, 255, 255, 0.92));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.text-blast-cost-label {
    color: var(--sa-primary-dark);
    font-size: 0.76rem;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.text-blast-cost-card > strong {
    display: block;
    margin-top: 0.38rem;
    font-family: var(--sa-font-display);
    font-size: 2.7rem;
    font-weight: 900;
    line-height: 1;
}

.text-blast-cost-unit {
    margin-top: 0.3rem;
    color: var(--sa-muted);
    font-size: 0.84rem;
}

.text-blast-cost-divider {
    height: 1px;
    margin: 1rem 0;
    background: rgba(15, 23, 42, 0.10);
}

.text-blast-cost-money {
    display: block;
    font-family: var(--sa-font-display);
    font-size: 1.7rem;
    font-weight: 900;
}

.text-blast-cost-card small {
    margin-top: 0.2rem;
    color: var(--sa-muted);
    font-size: 0.78rem;
}

.text-blast-review {
    border-color: rgba(22, 163, 74, 0.22);
}

.text-blast-review-stat {
    min-height: 104px;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.75);
}

.text-blast-review-stat span,
.text-blast-preview-label {
    display: block;
    color: var(--sa-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.text-blast-review-stat strong {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--sa-font-display);
    font-size: 1.8rem;
    font-weight: 900;
}

.text-blast-message-preview {
    padding: 1.15rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: #f8fafc;
}

.text-blast-message-preview p {
    margin-top: 0.55rem;
    color: #334155;
    font-weight: 650;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.text-blast-review-recipient-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.text-blast-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    padding: 0.48rem 0.72rem;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 999px;
    color: #1e3a8a;
    background: rgba(37, 99, 235, 0.08);
    font-size: 0.82rem;
    font-weight: 800;
}

.text-blast-recipient-chip-more {
    color: #475569;
    border-color: rgba(15, 23, 42, 0.10);
    background: rgba(15, 23, 42, 0.05);
}

.credit-checkout-summary {
    padding: 1.45rem;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 13rem),
        rgba(248, 250, 252, 0.94);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.credit-checkout-eyebrow {
    margin-bottom: 1.1rem;
    color: var(--sa-primary-dark);
    font-size: 0.76rem;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.credit-checkout-row,
.credit-checkout-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.credit-checkout-row {
    padding: 0.72rem 0;
    color: #475569;
    font-weight: 700;
}

.credit-checkout-row strong,
.credit-checkout-total strong {
    font-family: var(--sa-font-display);
    font-weight: 900;
}

.credit-checkout-total {
    margin-top: 0.65rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    font-family: var(--sa-font-display);
    font-size: 1.05rem;
    font-weight: 900;
}

.credit-checkout-total strong {
    color: var(--sa-primary-dark);
    font-size: 1.7rem;
}

.credit-checkout-after {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    padding: 0.85rem;
    border-radius: 16px;
    color: #1e3a8a;
    background: rgba(37, 99, 235, 0.09);
    font-size: 0.86rem;
    font-weight: 700;
}

.credit-checkout-after i {
    margin-top: 0.08rem;
    font-size: 1.1rem;
}

@media (max-width: 767.98px) {
    .text-blast-credit-card {
        min-height: 96px;
    }

    .text-blast-directory-actions,
    .text-blast-search-field {
        width: 100%;
    }

    .text-blast-directory-actions .btn {
        flex: 1 1 auto;
    }

    .text-blast-recipient-picker {
        padding: 0.9rem;
    }
}

@media (max-width: 575.98px) {
    .text-blast-credit-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .text-blast-credit-card .btn {
        width: 100%;
    }

    .text-blast-audience-option,
    .credit-payment-option {
        min-height: 88px;
    }
}

/* Protected Site Settings split control: the label opens the settings
   dashboard while the compact chevron opens the matching submenu. */
.admin-topbar-dropdown--split {
    gap: 0;
}

.admin-topbar-dropdown--split .admin-topbar-dropdown-primary {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 0.65rem;
}

.admin-topbar-dropdown--split .admin-topbar-dropdown-split-toggle {
    min-width: 2.55rem;
    margin-left: -1px;
    padding-right: 0.72rem;
    padding-left: 0.55rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.admin-topbar-dropdown--split .admin-topbar-dropdown-primary.active,
.admin-topbar-dropdown--split .admin-topbar-dropdown-split-toggle.active {
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .admin-topbar-dropdown--split {
        display: grid;
        grid-template-columns: max-content max-content minmax(0, 1fr);
        align-items: stretch;
        min-width: 0;
    }

    .admin-topbar-dropdown--split .admin-topbar-dropdown-primary {
        width: auto;
        min-width: 0;
        justify-content: flex-start;
    }

    .admin-topbar-dropdown--split .admin-topbar-dropdown-split-toggle {
        width: auto;
        justify-content: center;
    }

    .admin-topbar-dropdown--split .admin-topbar-submenu {
        grid-column: 1 / -1;
    }
}


/* --------------------------------------------------------------------------
   Super Admin Backup Center: full-window backup activity overlay
   -------------------------------------------------------------------------- */
body.backup-is-running {
    overflow: hidden;
}

.backup-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 1.25rem;
    opacity: 0;
    background:
        radial-gradient(circle at 18% 15%, rgba(96, 165, 250, 0.22), transparent 28rem),
        radial-gradient(circle at 82% 86%, rgba(14, 165, 233, 0.20), transparent 24rem),
        rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.22s ease;
}

.backup-progress-overlay[hidden] {
    display: none;
}

.backup-progress-overlay.is-visible {
    opacity: 1;
}

.backup-progress-window {
    width: min(100%, 610px);
    position: relative;
    overflow: hidden;
    padding: clamp(1.75rem, 4vw, 2.65rem);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 30px;
    color: var(--sa-text);
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 255, 0.96));
    box-shadow:
        0 32px 90px rgba(2, 6, 23, 0.40),
        0 0 0 1px rgba(15, 23, 42, 0.05);
    transform: translateY(10px) scale(0.98);
    transition: transform 0.26s ease;
}

.backup-progress-overlay.is-visible .backup-progress-window {
    transform: translateY(0) scale(1);
}

.backup-progress-window::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #2563eb, #38bdf8, #2563eb);
    background-size: 200% 100%;
    animation: backup-progress-topline 2.8s linear infinite;
}

.backup-progress-shield {
    width: 92px;
    height: 92px;
    position: relative;
    display: grid;
    place-items: center;
    margin: 0 auto 1.35rem;
}

.backup-progress-ring {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, 0.18);
}

.backup-progress-ring--outer {
    border-top-color: var(--sa-primary);
    border-right-color: rgba(14, 165, 233, 0.85);
    animation: backup-progress-spin 2.1s linear infinite;
}

.backup-progress-ring--inner {
    inset: 11px;
    border-style: dashed;
    border-color: rgba(37, 99, 235, 0.35);
    animation: backup-progress-spin-reverse 4.2s linear infinite;
}

.backup-progress-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #0ea5e9);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.28);
    font-size: 1.42rem;
}

.backup-progress-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    color: var(--sa-primary-dark);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.backup-progress-window h2 {
    margin-bottom: 0.6rem;
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: clamp(1.55rem, 4vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    text-align: center;
}

.backup-progress-copy {
    max-width: 440px;
    margin: 0 auto 1.55rem;
    color: var(--sa-muted);
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
}

.backup-progress-steps {
    display: grid;
    gap: 0.75rem;
    padding: 0;
    margin: 0 0 1.4rem;
    list-style: none;
}

.backup-progress-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.78rem;
    align-items: center;
    padding: 0.78rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    color: #64748b;
    background: rgba(248, 250, 252, 0.72);
    transition: border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.backup-progress-step-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #94a3b8;
    background: #eef2f7;
    font-size: 1rem;
    transition: color 0.22s ease, background-color 0.22s ease, transform 0.22s ease;
}

.backup-progress-step strong,
.backup-progress-step small {
    display: block;
}

.backup-progress-step strong {
    margin-bottom: 0.06rem;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.25;
}

.backup-progress-step small {
    font-size: 0.79rem;
    font-weight: 600;
    line-height: 1.3;
}

.backup-progress-step.is-active {
    border-color: rgba(37, 99, 235, 0.36);
    color: #1e3a8a;
    background: rgba(239, 246, 255, 0.94);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.09);
}

.backup-progress-step.is-active .backup-progress-step-icon {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #38bdf8);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.23);
    animation: backup-progress-icon-pulse 1.35s ease-in-out infinite;
}

.backup-progress-step.is-complete {
    border-color: rgba(22, 163, 74, 0.22);
    color: #166534;
    background: rgba(240, 253, 244, 0.92);
}

.backup-progress-step.is-complete .backup-progress-step-icon {
    color: #ffffff;
    background: var(--sa-success);
}

.backup-progress-meter {
    height: 8px;
    overflow: hidden;
    margin-bottom: 0.78rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
}

.backup-progress-meter span {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sa-primary), #38bdf8, var(--sa-primary));
    animation: backup-progress-sweep 1.7s ease-in-out infinite;
}

.backup-progress-message {
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
    color: #1e3a8a;
    font-weight: 800;
    text-align: center;
}

.backup-progress-note {
    color: var(--sa-muted);
    font-size: 0.86rem;
    font-weight: 600;
    text-align: center;
}

#backupCreateButton.is-loading {
    cursor: wait;
    opacity: 0.84;
}

#backupCreateButton.is-loading .bi {
    animation: backup-progress-spin 1s linear infinite;
}

@keyframes backup-progress-topline {
    to {
        background-position: 200% 0;
    }
}

@keyframes backup-progress-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes backup-progress-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes backup-progress-icon-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.09);
    }
}

@keyframes backup-progress-sweep {
    0% {
        transform: translateX(-115%);
    }

    100% {
        transform: translateX(380%);
    }
}

@media (max-width: 575.98px) {
    .backup-progress-overlay {
        align-items: start;
        padding: 0.8rem;
    }

    .backup-progress-window {
        margin-top: 0.55rem;
        padding: 1.45rem 1.1rem;
        border-radius: 24px;
    }

    .backup-progress-shield {
        width: 78px;
        height: 78px;
        margin-bottom: 1rem;
    }

    .backup-progress-icon {
        width: 42px;
        height: 42px;
        border-radius: 15px;
    }

    .backup-progress-step {
        grid-template-columns: 37px 1fr;
        gap: 0.65rem;
        padding: 0.7rem;
    }

    .backup-progress-step-icon {
        width: 37px;
        height: 37px;
        border-radius: 12px;
    }

    .backup-progress-step small {
        font-size: 0.74rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .backup-progress-overlay,
    .backup-progress-window,
    .backup-progress-step,
    .backup-progress-step-icon {
        transition: none;
    }

    .backup-progress-window::before,
    .backup-progress-ring--outer,
    .backup-progress-ring--inner,
    .backup-progress-step.is-active .backup-progress-step-icon,
    .backup-progress-meter span,
    #backupCreateButton.is-loading .bi {
        animation: none;
    }
}

/* Support Desk ticket workflow */
.support-status-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.support-status-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--sa-border);
    border-radius: 20px;
    color: var(--sa-text);
    background: rgba(255, 255, 255, 0.72);
    font-family: var(--sa-font-display);
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.support-status-filter:hover,
.support-status-filter:focus-visible {
    color: var(--sa-text);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: var(--sa-shadow-soft);
    transform: translateY(-2px);
}

.support-status-filter strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    color: #ffffff;
    background: var(--sa-primary-dark);
}

.support-status-filter.active {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
}

.support-status-filter.active strong {
    color: var(--sa-primary-dark);
    background: #ffffff;
}

.support-ticket-card {
    overflow: hidden;
}

.support-ticket-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
}

.support-ticket-heading {
    min-width: 0;
}

.support-ticket-type,
.support-status-pill,
.support-priority-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.72rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.support-ticket-type.bug {
    color: #991b1b;
    background: #fee2e2;
}

.support-ticket-type.feature {
    color: #075985;
    background: #e0f2fe;
}

.support-status-pill.pending {
    color: #92400e;
    background: #fef3c7;
}

.support-status-pill.completed {
    color: #166534;
    background: #dcfce7;
}

.support-status-pill.discarded {
    color: #475569;
    background: #e2e8f0;
}

.support-status-pill.small-status {
    margin: 0 0.15rem;
    padding: 0.25rem 0.48rem;
    font-size: 0.7rem;
    vertical-align: middle;
}

.support-priority-pill.low {
    color: #166534;
    background: #dcfce7;
}

.support-priority-pill.medium {
    color: #92400e;
    background: #fef3c7;
}

.support-priority-pill.high {
    color: #991b1b;
    background: #fee2e2;
}

.support-ticket-detail-label {
    margin-bottom: 0.35rem;
    color: var(--sa-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.support-ticket-page-area {
    margin-bottom: 1rem;
    color: var(--sa-text);
    font-weight: 800;
}

.support-ticket-description {
    padding: 1rem 1.1rem;
    border: 1px solid var(--sa-border);
    border-radius: 18px;
    color: var(--sa-text);
    background: rgba(248, 250, 252, 0.88);
    line-height: 1.62;
    overflow-wrap: anywhere;
}

.support-ticket-attachment {
    display: block;
    margin-top: 1.1rem;
    overflow: hidden;
    border: 1px solid var(--sa-border);
    border-radius: 18px;
    color: var(--sa-primary-dark);
    background: #ffffff;
    font-weight: 900;
    text-decoration: none;
}

.support-ticket-attachment:hover,
.support-ticket-attachment:focus-visible {
    color: var(--sa-primary-dark);
    box-shadow: var(--sa-shadow-soft);
}

.support-ticket-attachment img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    background: #f8fafc;
}

.support-ticket-attachment span {
    display: block;
    padding: 0.85rem 1rem;
    font-size: 0.86rem;
}

.support-owner-update-form {
    height: 100%;
    padding: 1.25rem;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(239, 246, 255, 0.86), rgba(255, 255, 255, 0.9));
}

.support-owner-update-form .form-control,
.support-owner-update-form .form-select {
    border-radius: 15px;
}

.support-ticket-trail {
    padding-top: 1.3rem;
    border-top: 1px solid var(--sa-border);
}

.support-ticket-trail--side {
    height: 100%;
    padding: 1.1rem;
    border: 1px solid var(--sa-border);
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.78);
}

.support-ticket-trail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.support-ticket-timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 1.35rem;
    list-style: none;
}

.support-ticket-timeline::before {
    position: absolute;
    top: 0.25rem;
    bottom: 0.35rem;
    left: 0.3rem;
    width: 2px;
    content: '';
    background: rgba(37, 99, 235, 0.16);
}

.support-ticket-timeline-item {
    position: relative;
    padding: 0 0 1.15rem;
}

.support-ticket-timeline-item:last-child {
    padding-bottom: 0;
}

.support-ticket-timeline-dot {
    position: absolute;
    top: 0.28rem;
    left: -1.12rem;
    width: 0.72rem;
    height: 0.72rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--sa-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
}

.support-ticket-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    align-items: baseline;
    margin-bottom: 0.35rem;
    color: var(--sa-muted);
    font-size: 0.84rem;
}

.support-ticket-timeline-meta strong {
    color: var(--sa-text);
}

.support-ticket-timeline-status {
    color: var(--sa-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.support-ticket-comment {
    margin-top: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-left: 3px solid var(--sa-primary);
    border-radius: 0 14px 14px 0;
    color: var(--sa-text);
    background: rgba(37, 99, 235, 0.07);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.support-ticket-empty-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--sa-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.support-ticket-empty-timeline i {
    color: var(--sa-primary-dark);
}


.support-ticket-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.2rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--sa-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.support-ticket-pagination-summary {
    margin: 0;
    color: var(--sa-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.support-ticket-pagination-summary strong {
    color: var(--sa-text);
    font-weight: 900;
}

.support-ticket-pagination-links {
    gap: 0.35rem;
    align-items: center;
}

.support-ticket-pagination-links .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--sa-border);
    border-radius: 12px;
    color: var(--sa-primary-dark);
    background: #ffffff;
    font-family: var(--sa-font-display);
    font-size: 0.84rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: none;
}

.support-ticket-pagination-links .page-link:hover,
.support-ticket-pagination-links .page-link:focus-visible {
    position: relative;
    z-index: 2;
    border-color: rgba(37, 99, 235, 0.42);
    color: var(--sa-primary-dark);
    background: rgba(239, 246, 255, 0.95);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.support-ticket-pagination-links .page-item.active .page-link {
    border-color: transparent;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

.support-ticket-pagination-links .page-item.disabled .page-link {
    color: #94a3b8;
    background: rgba(248, 250, 252, 0.9);
    opacity: 0.85;
}

.support-ticket-pagination-ellipsis {
    border-color: transparent !important;
    color: var(--sa-muted) !important;
    background: transparent !important;
}

@media (max-width: 767.98px) {
    .support-ticket-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .support-ticket-pagination nav {
        max-width: 100%;
        overflow-x: auto;
    }

    .support-ticket-pagination-links {
        width: max-content;
    }

    .support-ticket-pagination-word {
        display: none;
    }

    .support-status-filter-row {
        grid-template-columns: 1fr;
    }

    .support-ticket-trail-heading {
        flex-direction: column;
    }
}


/* Insights & Rankings */
.insights-jump-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.insights-jump-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 999px;
    color: #334155;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    font-family: var(--sa-font-display);
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.insights-jump-link:hover,
.insights-jump-link:focus-visible,
.insights-jump-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24);
}

.insights-live-note {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    color: #166534;
    background: var(--sa-success-soft);
    font-size: 0.8rem;
    font-weight: 800;
}

.insights-overview-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.4fr) repeat(3, minmax(180px, 1fr));
    gap: 1rem;
}

.insights-overview-grid-student {
    grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.35fr);
}

.insight-primary-card,
.insight-kpi-card,
.insight-panel,
.insights-section-heading {
    border: 1px solid rgba(15, 23, 42, 0.09);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.insight-primary-card {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    min-height: 168px;
    padding: 1.25rem;
    border-radius: 26px;
    background:
        radial-gradient(circle at 6% 4%, rgba(37, 99, 235, 0.16), transparent 10rem),
        linear-gradient(135deg, rgba(37, 99, 235, 0.11), rgba(14, 165, 233, 0.06)),
        rgba(255, 255, 255, 0.92);
}

.insight-rate-ring {
    --insight-rate: 0%;
    position: relative;
    width: 104px;
    height: 104px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--sa-primary-dark);
    background: conic-gradient(
        var(--sa-primary) 0 var(--insight-rate),
        rgba(148, 163, 184, 0.22) var(--insight-rate) 100%
    );
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.18);
}

.insight-rate-ring::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.insight-rate-ring span {
    position: relative;
    z-index: 1;
    font-family: var(--sa-font-display);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.insight-primary-title {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.insight-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-height: 168px;
    padding: 1.1rem;
    border-radius: 24px;
}

.insight-kpi-card > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.insight-kpi-card strong {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 1.28rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.insight-kpi-card span:last-child {
    color: var(--sa-muted);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.insight-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-success), #22c55e);
    box-shadow: 0 12px 24px rgba(22, 163, 74, 0.2);
}

.insight-kpi-icon-warning {
    color: #92400e;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    box-shadow: 0 12px 24px rgba(245, 158, 11, 0.2);
}

.insight-kpi-icon-neutral {
    color: #ffffff;
    background: linear-gradient(135deg, #334155, #64748b);
    box-shadow: 0 12px 24px rgba(51, 65, 85, 0.18);
}

.insight-panel {
    height: 100%;
    padding: 1.25rem;
    border-radius: 26px;
}

.insight-trend-list {
    display: grid;
    gap: 0.9rem;
}

.insight-trend-row {
    display: grid;
    grid-template-columns: minmax(138px, 0.92fr) minmax(130px, 2.15fr) auto;
    align-items: center;
    gap: 0.85rem;
}

.insight-trend-label {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.insight-trend-label strong {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 0.88rem;
    font-weight: 900;
}

.insight-trend-label span {
    overflow: hidden;
    color: var(--sa-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-trend-track,
.insight-section-track,
.insight-benchmark-track {
    min-width: 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.insight-trend-track {
    height: 13px;
}

.insight-trend-fill,
.insight-section-fill,
.insight-benchmark-fill {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
}

.insight-trend-fill--excellent,
.insight-section-fill--excellent {
    background: linear-gradient(90deg, var(--sa-success), #22c55e);
}

.insight-trend-fill--steady,
.insight-section-fill--steady {
    background: linear-gradient(90deg, var(--sa-primary), #0ea5e9);
}

.insight-trend-fill--watch,
.insight-section-fill--watch {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.insight-trend-rate {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 0.84rem;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.insight-section-chart {
    display: grid;
    gap: 0.95rem;
}

.insight-section-row {
    display: grid;
    gap: 0.38rem;
}

.insight-section-row strong {
    overflow: hidden;
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 0.87rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-section-row > div > span {
    color: var(--sa-primary-dark);
    font-family: var(--sa-font-display);
    font-size: 0.83rem;
    font-weight: 900;
    white-space: nowrap;
}

.insight-section-track {
    height: 10px;
}

.insight-section-row small {
    color: var(--sa-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.insight-benchmark-card {
    display: grid;
    align-content: center;
}

.insight-benchmark-list {
    display: grid;
    gap: 0.95rem;
}

.insight-benchmark-row {
    display: grid;
    grid-template-columns: minmax(105px, 0.9fr) minmax(110px, 2fr) auto;
    align-items: center;
    gap: 0.7rem;
}

.insight-benchmark-row > div:first-child {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.insight-benchmark-row > div:first-child strong {
    color: var(--sa-text);
    font-size: 0.83rem;
    font-weight: 900;
}

.insight-benchmark-row > div:first-child span {
    overflow: hidden;
    color: var(--sa-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-benchmark-track {
    height: 12px;
}

.insight-benchmark-fill--you {
    background: linear-gradient(90deg, var(--sa-success), #22c55e);
}

.insight-benchmark-fill--section {
    background: linear-gradient(90deg, var(--sa-primary), #0ea5e9);
}

.insight-benchmark-fill--school {
    background: linear-gradient(90deg, #64748b, #94a3b8);
}

.insight-benchmark-row > strong {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 0.82rem;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.insight-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.7rem;
}

.insight-day-cell {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    min-height: 84px;
    padding: 0.8rem 0.45rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    color: #475569;
    background: rgba(248, 250, 252, 0.86);
    font-family: var(--sa-font-display);
    font-size: 1.1rem;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    cursor: help;
}

.insight-day-number {
    color: inherit;
    font-size: 0.86rem;
    line-height: 1;
}

.insight-day-cell > i {
    font-size: 1.05rem;
}

.insight-day-cell--complete {
    color: #166534;
    border-color: rgba(22, 163, 74, 0.22);
    background: linear-gradient(145deg, rgba(220, 252, 231, 0.98), rgba(255, 255, 255, 0.88));
}

.insight-day-cell--flagged {
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.25);
    background: linear-gradient(145deg, rgba(254, 243, 199, 0.98), rgba(255, 255, 255, 0.88));
}

.insight-day-cell--holiday {
    color: #6d28d9;
    border-color: rgba(124, 58, 237, 0.22);
    background: linear-gradient(145deg, rgba(237, 233, 254, 0.98), rgba(255, 255, 255, 0.88));
}

.insight-day-cell--pending {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.22);
    background: linear-gradient(145deg, rgba(219, 234, 254, 0.98), rgba(255, 255, 255, 0.88));
}

.insight-day-cell--absent {
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.18);
    background: linear-gradient(145deg, rgba(254, 226, 226, 0.98), rgba(255, 255, 255, 0.88));
}

.insight-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
}

.insight-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--sa-muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.insight-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.insight-legend-swatch--complete {
    background: var(--sa-success);
}

.insight-legend-swatch--flagged {
    background: #f59e0b;
}

.insight-legend-swatch--holiday {
    background: #7c3aed;
}

.insight-legend-swatch--pending {
    background: var(--sa-primary);
}

.insight-legend-swatch--absent {
    background: var(--sa-danger);
}

.insight-mini-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.insight-mini-metrics > div {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
    padding: 0.85rem;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.88);
}

.insight-mini-metrics span {
    color: var(--sa-muted);
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.2;
}

.insight-mini-metrics strong {
    overflow: hidden;
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insights-inline-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.8rem;
    border-radius: 16px;
    color: #1d4ed8;
    background: rgba(219, 234, 254, 0.78);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.insights-section-heading {
    padding: 1.25rem 1.4rem;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(14, 165, 233, 0.04)),
        rgba(255, 255, 255, 0.76);
}

@media (max-width: 1199.98px) {
    .insights-overview-grid {
        grid-template-columns: minmax(300px, 1.4fr) repeat(2, minmax(180px, 1fr));
    }

    .insights-overview-grid-student {
        grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.35fr);
    }
}

@media (max-width: 991.98px) {
    .insights-overview-grid,
    .insights-overview-grid-student {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .insight-primary-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .insights-overview-grid,
    .insights-overview-grid-student {
        grid-template-columns: 1fr;
    }

    .insight-primary-card {
        grid-column: auto;
    }

    .insight-trend-row {
        grid-template-columns: minmax(105px, 1fr) minmax(80px, 1.45fr) auto;
        gap: 0.55rem;
    }

    .insight-trend-label span {
        font-size: 0.7rem;
    }

    .insight-benchmark-row {
        grid-template-columns: minmax(88px, 1fr) minmax(70px, 1.3fr) auto;
        gap: 0.5rem;
    }

    .insight-day-grid {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 0.5rem;
    }

    .insight-day-cell {
        min-height: 72px;
        padding: 0.65rem 0.35rem;
    }
}

@media (max-width: 449.98px) {
    .insight-primary-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .insight-rate-ring {
        width: 92px;
        height: 92px;
    }

    .insight-trend-row {
        grid-template-columns: 1fr auto;
    }

    .insight-trend-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .insight-section-row strong {
        max-width: 210px;
    }

    .insight-mini-metrics {
        grid-template-columns: 1fr;
    }
}


/* Attendance Charts */
.chart-view-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.chart-view-switch-item {
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;
    min-height: 46px;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 999px;
    color: #334155;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    font-family: var(--sa-font-display);
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.chart-view-switch-item:hover,
.chart-view-switch-item:focus-visible,
.chart-view-switch-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24);
}

.attendance-chart-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
}

.attendance-chart-filter .attendance-chart-select {
    width: min(100%, 420px);
    min-height: 46px;
    padding-right: 2.6rem;
}

.attendance-chart-filter .leaderboard-month-input {
    min-height: 46px;
}

.attendance-chart-month-number {
    font-size: clamp(1rem, 2vw, 1.38rem) !important;
    letter-spacing: -0.045em;
}

.attendance-rate-highlight,
.section-chart-summary {
    display: grid;
    gap: 0.12rem;
    min-width: 176px;
    padding: 0.95rem 1.05rem;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 20px;
    color: var(--sa-primary-dark);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.11), rgba(14, 165, 233, 0.06));
}

.attendance-rate-highlight span,
.section-chart-summary span {
    color: var(--sa-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.attendance-rate-highlight strong,
.section-chart-summary strong {
    color: var(--sa-primary-dark);
    font-family: var(--sa-font-display);
    font-size: 1.72rem;
    font-weight: 900;
    letter-spacing: -0.07em;
    line-height: 1;
}

.attendance-rate-highlight small,
.section-chart-summary small {
    color: var(--sa-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.attendance-chart-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.attendance-chart-kpi {
    display: grid;
    gap: 0.26rem;
    min-height: 130px;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
}

.attendance-chart-kpi span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--sa-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.attendance-chart-kpi span i {
    color: var(--sa-primary);
}

.attendance-chart-kpi strong {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 1.44rem;
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 1.05;
}

.attendance-chart-kpi small {
    color: var(--sa-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
}

.student-attendance-chart-wrap {
    min-width: 0;
    overflow-x: auto;
    padding: 1.35rem 0.35rem 0.15rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.45);
    border-bottom: 1px dashed rgba(148, 163, 184, 0.45);
}

.student-attendance-chart {
    display: flex;
    align-items: flex-end;
    gap: clamp(0.45rem, 1.5vw, 1rem);
    min-width: max-content;
    min-height: 270px;
    padding: 0 0.45rem;
}

.student-attendance-chart-item {
    display: grid;
    grid-template-rows: 210px auto;
    gap: 0.55rem;
    width: clamp(34px, 5vw, 56px);
    text-align: center;
}

.student-attendance-chart-bar-area {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 210px;
    padding: 0.26rem;
    border-radius: 14px 14px 6px 6px;
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent calc(25% - 1px),
            rgba(148, 163, 184, 0.16) calc(25% - 1px),
            rgba(148, 163, 184, 0.16) 25%
        ),
        rgba(248, 250, 252, 0.9);
}

.student-attendance-chart-bar {
    display: block;
    width: 100%;
    min-height: 8px;
    border-radius: 10px 10px 4px 4px;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
    transition: transform 160ms ease, filter 160ms ease;
}

.student-attendance-chart-bar:hover {
    filter: brightness(1.04);
    transform: translateY(-3px);
}

.student-attendance-chart-bar--complete {
    background: linear-gradient(180deg, #34d399, var(--sa-success));
}

.student-attendance-chart-bar--holiday {
    background: linear-gradient(180deg, #a78bfa, #7c3aed);
}

.student-attendance-chart-bar--flagged {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.student-attendance-chart-bar--pending {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.student-attendance-chart-bar--absent {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
}

.student-attendance-chart-day {
    overflow: hidden;
    color: var(--sa-muted);
    font-size: 0.71rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

.attendance-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--sa-muted);
    font-size: 0.79rem;
    font-weight: 800;
}

.attendance-chart-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.attendance-chart-swatch--complete { background: var(--sa-success); }
.attendance-chart-swatch--holiday { background: #7c3aed; }
.attendance-chart-swatch--flagged { background: #f59e0b; }
.attendance-chart-swatch--pending { background: #2563eb; }
.attendance-chart-swatch--absent { background: #94a3b8; }

.attendance-chart-caption {
    display: flex;
    align-items: flex-start;
    gap: 0.48rem;
    color: var(--sa-muted);
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.45;
}

.attendance-chart-caption i {
    color: var(--sa-primary);
    margin-top: 0.08rem;
}


.student-yearly-trend-divider {
    height: 1px;
    margin: 2rem 0;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.5), transparent);
}

.student-yearly-trend {
    min-width: 0;
}

.attendance-year-highlight {
    display: grid;
    gap: 0.12rem;
    min-width: 176px;
    padding: 0.95rem 1.05rem;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(14, 165, 233, 0.06));
}

.attendance-year-highlight span {
    color: var(--sa-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.attendance-year-highlight strong {
    color: var(--sa-success);
    font-family: var(--sa-font-display);
    font-size: 1.72rem;
    font-weight: 900;
    letter-spacing: -0.07em;
    line-height: 1;
}

.attendance-year-highlight small {
    color: var(--sa-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.student-yearly-trend-chart-wrap {
    overflow-x: auto;
    padding: 0.35rem 0 0.15rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.45);
    border-bottom: 1px dashed rgba(148, 163, 184, 0.45);
}

.student-yearly-trend-chart {
    display: block;
    width: 100%;
    min-width: 700px;
    height: auto;
    overflow: visible;
}

.student-yearly-trend-grid-line {
    stroke: rgba(148, 163, 184, 0.34);
    stroke-dasharray: 4 8;
    vector-effect: non-scaling-stroke;
}

.student-yearly-trend-y-label,
.student-yearly-trend-x-label {
    fill: var(--sa-muted);
    font-family: var(--sa-font-body);
    font-size: 16px;
    font-weight: 800;
}

.student-yearly-trend-x-label--current {
    fill: var(--sa-primary);
}

.student-yearly-trend-line {
    fill: none;
    stroke: var(--sa-primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
    vector-effect: non-scaling-stroke;
}

.student-yearly-trend-point {
    fill: var(--sa-primary);
    stroke: #ffffff;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
    transition: r 160ms ease, fill 160ms ease;
}

.student-yearly-trend-point:hover,
.student-yearly-trend-point:focus {
    fill: var(--sa-success);
    r: 9;
}

.student-yearly-trend-point--unavailable {
    fill: #cbd5e1;
    stroke: #ffffff;
}

.student-yearly-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

.student-yearly-trend-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--sa-muted);
    font-size: 0.79rem;
    font-weight: 800;
}

.student-yearly-trend-legend-line {
    display: inline-block;
    width: 24px;
    height: 0;
    border-top: 4px solid var(--sa-primary);
    border-radius: 999px;
}

.student-yearly-trend-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: var(--sa-primary);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}

.student-yearly-trend-legend-dot--unavailable {
    background: #cbd5e1;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.3);
}

.section-student-bar-chart {
    display: grid;
    gap: 0.9rem;
}

.section-student-bar-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.15fr) minmax(150px, 2.4fr) auto;
    align-items: center;
    gap: 0.9rem;
}

.section-student-bar-label {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.section-student-bar-label a {
    overflow: hidden;
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 0.88rem;
    font-weight: 900;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-student-bar-label a:hover,
.section-student-bar-label a:focus-visible {
    color: var(--sa-primary);
    text-decoration: underline;
}

.section-student-bar-label span {
    overflow: hidden;
    color: var(--sa-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-student-bar-track {
    height: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.section-student-bar-fill {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
}

.section-student-bar-fill--excellent { background: linear-gradient(90deg, var(--sa-success), #22c55e); }
.section-student-bar-fill--steady { background: linear-gradient(90deg, var(--sa-primary), #0ea5e9); }
.section-student-bar-fill--watch { background: linear-gradient(90deg, #f59e0b, #f97316); }

.section-student-bar-rate {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 0.88rem;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}


.attendance-chart-month-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.attendance-student-search-control {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
    min-width: min(100%, 280px);
    max-width: min(100%, 620px);
}

.attendance-student-search-button {
    display: inline-flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-height: 46px;
    padding-right: 0 !important;
    padding-left: 0 !important;
    white-space: nowrap;
}

.attendance-selected-student {
    display: grid;
    flex: 1 1 18rem;
    gap: 0.08rem;
    min-width: 0;
    max-width: none;
    padding: 0.56rem 0.8rem;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.86);
}

.attendance-selected-student span {
    color: var(--sa-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.attendance-selected-student strong,
.attendance-selected-student small {
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
}

.attendance-selected-student strong {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.16;
}

.attendance-selected-student small {
    color: var(--sa-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}

.student-search-modal[hidden] {
    display: none !important;
}

.student-search-modal {
    position: fixed;
    z-index: 1080;
    inset: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    overflow-y: auto;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(6px);
}

.student-search-modal-open {
    overflow: hidden;
}

.student-search-modal-dialog {
    width: min(100%, 720px);
    max-height: min(760px, calc(100vh - 2.5rem));
    overflow: auto;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.34);
}

.student-search-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.student-search-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0 !important;
}

.student-search-input-wrap {
    position: relative;
}

.student-search-input-wrap > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 1rem;
    color: var(--sa-muted);
    transform: translateY(-50%);
}

.student-search-input-wrap .form-control {
    min-height: 52px;
    padding-left: 2.8rem;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: none;
}

.student-search-input-wrap .form-control:focus {
    border-color: var(--sa-primary);
    box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.12);
}

.student-search-status {
    min-height: 1.25rem;
    margin-top: 0.72rem;
    color: var(--sa-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.student-search-results {
    display: grid;
    gap: 0.62rem;
}

.student-search-result {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 16px;
    color: var(--sa-text);
    background: rgba(248, 250, 252, 0.82);
    text-align: left;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.student-search-result:hover,
.student-search-result:focus-visible {
    border-color: rgba(37, 99, 235, 0.44);
    background: rgba(239, 246, 255, 0.94);
    outline: none;
    transform: translateY(-1px);
}

.student-search-result strong {
    font-family: var(--sa-font-display);
    font-size: 0.94rem;
    font-weight: 900;
}

.student-search-result span {
    color: var(--sa-muted);
    font-size: 0.77rem;
    font-weight: 700;
}

@media (max-width: 1199.98px) {
    .attendance-chart-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .attendance-chart-filter {
        width: 100%;
        justify-content: stretch;
    }

    .attendance-chart-filter .attendance-chart-select,
    .attendance-chart-filter .leaderboard-month-input,
    .attendance-chart-month-tools,
    .attendance-student-search-control {
        width: 100%;
    }

    .attendance-chart-month-tools {
        justify-content: stretch;
    }

    .attendance-chart-month-tools .leaderboard-month-nav {
        flex: 1 1 100%;
        width: 100%;
    }

    .attendance-chart-month-tools .leaderboard-current-month-btn {
        width: 100%;
    }

    .attendance-student-search-control {
        max-width: none;
    }

    .attendance-selected-student {
        width: 100%;
        max-width: none;
    }

    .attendance-rate-highlight,
    .section-chart-summary,
    .attendance-year-highlight {
        width: 100%;
    }

    .student-yearly-trend-chart {
        min-width: 650px;
    }

    .section-student-bar-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem 0.7rem;
    }

    .section-student-bar-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .section-student-bar-rate {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 479.98px) {
    .attendance-chart-kpis {
        grid-template-columns: 1fr;
    }

    .student-attendance-chart-item {
        width: 38px;
    }
}

/*
    Public landing page (index.php) — news & announcements bulletin
*/
.landing-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.25rem;
    margin-bottom: 1.5rem;
    padding: 0.9rem 1.2rem;
    border: 1px solid var(--sa-border);
    border-radius: 26px;
    background: var(--sa-surface);
    box-shadow: var(--sa-shadow-soft);
    backdrop-filter: blur(18px);
}

.landing-topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--sa-text);
    text-decoration: none;
}

.landing-topbar-brand:hover {
    color: var(--sa-text);
}

.landing-topbar-title {
    display: block;
    font-family: var(--sa-font-display);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.landing-topbar-tagline {
    display: block;
    color: var(--sa-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.landing-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.announcement-list {
    display: grid;
    gap: 1.25rem;
}

.announcement-card--pinned {
    border: 1px solid rgba(37, 99, 235, 0.32);
    box-shadow: 0 18px 44px rgba(37, 99, 235, 0.15);
}

.announcement-pinned-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.72rem;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    font-family: var(--sa-font-display);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.announcement-meta .announcement-pinned-chip i {
    color: #ffffff;
}

.announcement-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 1.1rem;
    color: var(--sa-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.announcement-meta i {
    color: var(--sa-primary);
}

.announcement-title {
    font-family: var(--sa-font-display);
    letter-spacing: -0.03em;
}

.landing-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.75rem;
}

.landing-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 44px;
    height: 44px;
    padding: 0 0.95rem;
    border: 1px solid var(--sa-border);
    border-radius: 999px;
    color: var(--sa-text);
    background: var(--sa-surface-strong);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    font-family: var(--sa-font-display);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

a.landing-page-link:hover,
a.landing-page-link:focus {
    color: var(--sa-primary-dark);
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--sa-primary-soft);
    transform: translateY(-1px);
}

.landing-page-link.active {
    color: #ffffff;
    border: 0;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

.landing-page-link.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.landing-page-gap {
    padding: 0 0.15rem;
    color: var(--sa-muted);
    font-family: var(--sa-font-display);
    font-weight: 800;
}

.landing-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 1.2rem;
    margin-top: 2.25rem;
    color: var(--sa-muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
}

.landing-footer a {
    font-weight: 800;
    text-decoration: none;
}

/* Shared role-aware footer */
.site-footer {
    --site-footer-max-width: 1180px;
    --site-footer-gutter: 32px;
    width: min(var(--site-footer-max-width), calc(100% - var(--site-footer-gutter)));
    margin: 0 auto;
    padding: 0 0 32px;
    color: var(--sa-text);
}

.site-footer--layout-admin {
    --site-footer-max-width: 1360px;
}

.site-footer--layout-login {
    --site-footer-max-width: 1120px;
    --site-footer-gutter: 28px;
}

.site-footer--layout-error {
    --site-footer-max-width: 1080px;
}

.site-footer-card {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: var(--sa-radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--sa-shadow-soft);
    backdrop-filter: blur(18px);
}

.site-footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) repeat(2, minmax(190px, 0.85fr));
    gap: 2rem;
    padding: 2rem;
}

.site-footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--sa-text);
    text-decoration: none;
}

.site-footer-brand-link:hover,
.site-footer-brand-link:focus-visible {
    color: var(--sa-text);
}

.site-footer-school-name,
.site-footer-purpose {
    display: block;
}

.site-footer-school-name {
    font-family: var(--sa-font-display);
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.site-footer-purpose {
    margin-top: 0.18rem;
    color: var(--sa-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.site-footer-summary {
    max-width: 37rem;
    margin: 1rem 0 0;
    color: var(--sa-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.site-footer-heading {
    margin: 0 0 0.75rem;
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.site-footer-links {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.site-footer-link i {
    width: 1rem;
    color: var(--sa-primary);
    text-align: center;
}

.site-footer-link:hover,
.site-footer-link:focus-visible,
.site-footer-link[aria-current="page"] {
    color: var(--sa-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.22rem;
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.5rem;
    padding: 1rem 2rem;
    border-top: 1px solid var(--sa-border);
    color: var(--sa-muted);
    background: rgba(248, 250, 252, 0.74);
    font-size: 0.82rem;
    font-weight: 700;
}

.site-footer-operational-note {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.site-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 36px;
    padding: 0.32rem 0.4rem 0.32rem 0.72rem;
    border: 1px solid var(--sa-border);
    border-radius: 999px;
    color: var(--sa-text);
    background: var(--sa-surface-strong);
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.site-theme-toggle:hover {
    border-color: rgba(37, 99, 235, 0.36);
    box-shadow: 0 9px 22px rgba(37, 99, 235, 0.13);
    transform: translateY(-1px);
}

.site-theme-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}

.site-theme-toggle-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    white-space: nowrap;
}

.site-theme-toggle-copy i {
    color: var(--sa-primary);
    font-size: 0.88rem;
}

.site-theme-toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 999px;
    background: #cbd5e1;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    transition: background-color 0.18s ease;
}

.site-theme-toggle-thumb {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease;
}

.site-theme-toggle[aria-checked="true"] .site-theme-toggle-track {
    background: var(--sa-primary);
}

.site-theme-toggle[aria-checked="true"] .site-theme-toggle-thumb {
    transform: translateX(18px);
}

.site-footer--compact .site-footer-grid {
    padding: 1.55rem 1.7rem;
}

/* Public policy, notice, accessibility, and contact pages */
.information-page-shell {
    width: min(1180px, calc(100% - 32px));
}

.information-topbar {
    margin-bottom: 1.25rem;
}

.information-hero {
    margin-bottom: 1.25rem;
}

.information-hero .page-subtitle {
    max-width: 800px;
}

.information-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.55rem;
    overflow-x: auto;
    border: 1px solid var(--sa-border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
    scrollbar-width: thin;
}

.information-nav-link {
    flex: 0 0 auto;
    padding: 0.7rem 0.95rem;
    border-radius: 15px;
    color: #475569;
    font-family: var(--sa-font-display);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.information-nav-link:hover,
.information-nav-link:focus-visible {
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
}

.information-nav-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

.information-content {
    display: grid;
    gap: 1.25rem;
}

.information-article {
    padding: clamp(1.5rem, 4vw, 3rem);
}

.information-article > section + section {
    margin-top: 2.15rem;
    padding-top: 2.15rem;
    border-top: 1px solid var(--sa-border);
}

.information-article h2,
.information-contact-card h2 {
    margin: 0 0 0.75rem;
    font-family: var(--sa-font-display);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.information-article h3,
.information-mini-card h3,
.information-callout h3,
.information-steps h3 {
    margin: 0 0 0.28rem;
    font-family: var(--sa-font-display);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.information-article p,
.information-article li,
.information-contact-card p {
    color: #475569;
    line-height: 1.7;
}

.information-article li + li {
    margin-top: 0.45rem;
}

.information-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    font-size: 0.82rem;
    font-weight: 800;
}

.information-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.1rem;
}

.information-mini-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.82);
}

.information-mini-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    color: var(--sa-primary);
    background: var(--sa-primary-soft);
    font-size: 1.1rem;
}

.information-mini-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.student-privacy-lead {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.student-privacy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    border-radius: 28px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #06b6d4);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.22);
    font-size: 2rem;
}

.student-privacy-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.student-privacy-list li {
    display: flex;
    gap: 0.75rem;
    margin: 0;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(219, 234, 254, 0.52);
}

.student-privacy-list i {
    color: var(--sa-primary);
    font-size: 1.1rem;
}

.information-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.15rem;
    border-radius: 20px;
}

.information-callout > i {
    flex: 0 0 auto;
    font-size: 1.3rem;
}

.information-callout p {
    margin: 0;
}

.information-callout--blue {
    color: var(--sa-primary-dark);
    background: rgba(219, 234, 254, 0.72);
}

.information-callout--amber {
    color: #92400e;
    background: rgba(254, 243, 199, 0.82);
}

.information-steps {
    display: grid;
    gap: 0.9rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.information-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    margin: 0;
    padding: 1rem;
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.86);
}

.information-steps li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #ffffff;
    background: var(--sa-primary);
    font-family: var(--sa-font-display);
    font-weight: 900;
}

.information-steps p {
    margin: 0;
}

.information-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.information-contact-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.information-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1rem;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    font-size: 1.35rem;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.2);
}

.information-contact-icon--privacy {
    background: linear-gradient(135deg, #0f766e, #0d9488);
    box-shadow: 0 14px 30px rgba(13, 148, 136, 0.2);
}

.information-contact-details {
    display: grid;
    gap: 0.7rem;
    margin: 1.25rem 0 0;
    font-style: normal;
}

.information-contact-details a,
.information-contact-details span {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: #334155;
    font-weight: 800;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.information-contact-details a:hover,
.information-contact-details a:focus-visible {
    color: var(--sa-primary-dark);
    text-decoration: underline;
}

.information-contact-details i {
    margin-top: 0.16rem;
    color: var(--sa-primary);
}

.information-contact-pending,
.information-admin-prompt {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 18px;
    color: #92400e;
    background: rgba(254, 243, 199, 0.78);
    font-weight: 700;
    line-height: 1.5;
}

.information-admin-prompt {
    align-items: center;
    margin-top: 0;
    border: 1px solid rgba(37, 99, 235, 0.14);
    color: #1e3a8a;
    background: rgba(219, 234, 254, 0.82);
}

.information-admin-prompt div {
    flex: 1 1 auto;
}

@media (max-width: 991.98px) {
    .site-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .site-footer--layout-admin {
        --site-footer-gutter: 24px;
    }

    .site-footer--layout-information {
        --site-footer-gutter: 20px;
    }

    .information-page-shell {
        width: min(100% - 20px, 1180px);
    }

    .site-footer-grid,
    .site-footer--compact .site-footer-grid,
    .information-card-grid,
    .student-privacy-list,
    .information-contact-grid {
        grid-template-columns: 1fr;
    }

    .site-footer-brand {
        grid-column: auto;
    }

    .site-footer-grid {
        gap: 1.5rem;
        padding: 1.4rem;
    }

    .site-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        padding: 1rem 1.4rem;
    }

    .student-privacy-lead {
        align-items: flex-start;
        flex-direction: column;
    }

    .information-admin-prompt {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .site-footer--layout-standard,
    .site-footer--layout-login {
        --site-footer-gutter: 20px;
    }

    .site-footer--layout-error {
        --site-footer-gutter: 24px;
    }

    .site-footer-card {
        border-radius: 22px;
    }
}

/*
    Rich announcement content — shared by the public landing page cards and
    the WYSIWYG editing surface so authors see exactly what readers get.
*/
.announcement-body {
    color: #1e293b;
    font-size: 1.02rem;
    line-height: 1.65;
    overflow-wrap: break-word;
}

.announcement-body > :last-child {
    margin-bottom: 0;
}

.announcement-body h2,
.announcement-body h3,
.announcement-body h4 {
    margin: 1.4rem 0 0.6rem;
    font-family: var(--sa-font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.announcement-body > h2:first-child,
.announcement-body > h3:first-child,
.announcement-body > h4:first-child {
    margin-top: 0;
}

.announcement-body h2 {
    font-size: 1.5rem;
}

.announcement-body h3 {
    font-size: 1.25rem;
}

.announcement-body h4 {
    font-size: 1.08rem;
}

.announcement-body p {
    margin: 0 0 0.85rem;
}

.announcement-body ul,
.announcement-body ol {
    margin: 0 0 0.85rem;
    padding-left: 1.4rem;
}

.announcement-body li {
    margin-bottom: 0.3rem;
}

.announcement-body blockquote {
    margin: 0 0 0.85rem;
    padding: 0.7rem 1.1rem;
    border-left: 4px solid var(--sa-primary);
    border-radius: 0 16px 16px 0;
    background: var(--sa-primary-soft);
    color: #1e3a8a;
    font-weight: 600;
}

.announcement-body blockquote p:last-child {
    margin-bottom: 0;
}

.announcement-body hr {
    margin: 1.25rem 0;
    border: 0;
    border-top: 2px dashed rgba(37, 99, 235, 0.28);
    opacity: 1;
}

.announcement-body a {
    color: var(--sa-primary);
    font-weight: 700;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.announcement-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.35rem 0 0.85rem;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

/*
    Announcement management (announcements.php + forms)
*/
.status-published {
    color: #166534;
    background: var(--sa-success-soft);
}

.status-draft {
    color: #92400e;
    background: var(--sa-warning-soft);
}

.btn-sa-danger {
    color: #ffffff !important;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border: 0;
    box-shadow: 0 14px 28px rgba(220, 38, 38, 0.24);
}

.btn-sa-danger:hover,
.btn-sa-danger:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, #b91c1c, #991b1b);
    transform: translateY(-1px);
}

/*
    Themed confirmation dialog (replaces the browser confirm() popup)
*/
.sa-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.sa-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

body.sa-modal-open {
    overflow: hidden;
}

.sa-modal {
    width: min(460px, 100%);
    padding: 2.1rem 1.9rem;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);
    background: var(--sa-surface-strong);
    box-shadow: var(--sa-shadow);
    text-align: center;
    transform: translateY(14px) scale(0.97);
    transition: transform 0.18s ease;
}

.sa-modal-overlay.open .sa-modal {
    transform: none;
}

.sa-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 22px;
    color: var(--sa-danger);
    background: var(--sa-danger-soft);
    font-size: 1.7rem;
}

.sa-modal-icon--primary {
    color: var(--sa-primary);
    background: var(--sa-primary-soft);
}

.sa-modal-title {
    margin-bottom: 0.6rem;
    font-family: var(--sa-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.sa-modal-message {
    margin-bottom: 1.6rem;
    color: var(--sa-muted);
    font-weight: 500;
    line-height: 1.55;
}

.sa-modal-subject {
    margin-bottom: 0.5rem;
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.sa-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.announcement-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 260px;
    margin: 0;
    padding: 0.85rem 1.1rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.9);
}

.announcement-option .form-check-input {
    flex: 0 0 auto;
    float: none;
    margin: 0.2rem 0 0;
}

/*
    WYSIWYG editor (add/update announcement)
*/
.wysiwyg-shell {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 22px;
    background: #ffffff;
}

.wysiwyg-shell:focus-within {
    border-color: rgba(37, 99, 235, 0.58);
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.13);
}

.wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
}

.wysiwyg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    color: #475569;
    background: transparent;
    font-size: 1.05rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wysiwyg-btn:hover {
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
}

.wysiwyg-btn.active {
    color: #ffffff;
    background: var(--sa-primary);
}

.wysiwyg-btn-busy {
    pointer-events: none;
}

.wysiwyg-btn-busy i {
    animation: wysiwyg-upload-spin 0.9s linear infinite;
}

@keyframes wysiwyg-upload-spin {
    to {
        transform: rotate(360deg);
    }
}

.wysiwyg-btn-unlink {
    position: relative;
}

.wysiwyg-btn-unlink::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 20px;
    background: currentColor;
    transform: rotate(45deg);
}

.wysiwyg-divider {
    align-self: stretch;
    width: 1px;
    margin: 0.3rem 0.35rem;
    background: rgba(15, 23, 42, 0.12);
}

.wysiwyg-surface {
    min-height: 280px;
    max-height: 560px;
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
    outline: none;
    background: #ffffff;
}

.wysiwyg-surface:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}

/* Dark theme ------------------------------------------------------------- */
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .scanner-card,
html[data-theme="dark"] .table-shell,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .profile-detail,
html[data-theme="dark"] .attendance-summary-card,
html[data-theme="dark"] .attendance-day-card,
html[data-theme="dark"] .attendance-session-card,
html[data-theme="dark"] .admin-topbar-card,
html[data-theme="dark"] .admin-topbar-submenu,
html[data-theme="dark"] .support-contact-card,
html[data-theme="dark"] .support-flow-item,
html[data-theme="dark"] .support-panel,
html[data-theme="dark"] .support-tabs-shell,
html[data-theme="dark"] .error-panel,
html[data-theme="dark"] .student-photo-crop-dialog,
html[data-theme="dark"] .thread-card,
html[data-theme="dark"] .message-bubble,
html[data-theme="dark"] .message-row-other .message-bubble,
html[data-theme="dark"] .message-composer,
html[data-theme="dark"] .leaderboard-row,
html[data-theme="dark"] .leaderboard-section-card,
html[data-theme="dark"] .address-entry-card,
html[data-theme="dark"] .text-blast-audience-option,
html[data-theme="dark"] .credit-payment-option,
html[data-theme="dark"] .text-blast-recipient-table-wrap,
html[data-theme="dark"] .text-blast-review-stat,
html[data-theme="dark"] .support-status-filter,
html[data-theme="dark"] .support-status-filter.active strong,
html[data-theme="dark"] .support-ticket-attachment,
html[data-theme="dark"] .support-ticket-pagination,
html[data-theme="dark"] .support-ticket-pagination-links .page-link,
html[data-theme="dark"] .insights-jump-link,
html[data-theme="dark"] .insight-kpi-card,
html[data-theme="dark"] .insight-panel,
html[data-theme="dark"] .insights-section-heading,
html[data-theme="dark"] .chart-view-switch-item,
html[data-theme="dark"] .attendance-chart-kpi,
html[data-theme="dark"] .student-search-modal-dialog,
html[data-theme="dark"] .student-search-input-wrap .form-control,
html[data-theme="dark"] .site-footer-card,
html[data-theme="dark"] .information-nav,
html[data-theme="dark"] .information-mini-card,
html[data-theme="dark"] .information-steps li,
html[data-theme="dark"] .announcement-option,
html[data-theme="dark"] .wysiwyg-shell,
html[data-theme="dark"] .wysiwyg-surface {
    border-color: var(--sa-border);
    background: var(--sa-surface-strong);
}

html[data-theme="dark"] .recent-tap-item,
html[data-theme="dark"] .student-privacy-list li,
html[data-theme="dark"] .thread-card-unread,
html[data-theme="dark"] .leaderboard-row-own,
html[data-theme="dark"] .leaderboard-section-card.leaderboard-row-own,
html[data-theme="dark"] .insight-primary-card {
    border-color: var(--sa-border);
    background:
        linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(14, 165, 233, 0.045)),
        var(--sa-surface-strong);
}

html[data-theme="dark"] .site-footer-bottom,
html[data-theme="dark"] .wysiwyg-toolbar,
html[data-theme="dark"] .table thead th {
    border-color: var(--sa-border);
    color: var(--sa-muted);
    background: rgba(30, 41, 59, 0.82);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .form-check-input {
    border-color: var(--sa-border);
    color: var(--sa-text);
    background-color: rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled {
    color: var(--sa-muted);
    background-color: rgba(30, 41, 59, 0.78);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .wysiwyg-surface:empty::before {
    color: #8293aa;
    opacity: 1;
}

html[data-theme="dark"] .site-footer-link,
html[data-theme="dark"] .information-nav-link,
html[data-theme="dark"] .information-article p,
html[data-theme="dark"] .information-article li,
html[data-theme="dark"] .information-contact-card p,
html[data-theme="dark"] .information-contact-details a,
html[data-theme="dark"] .information-contact-details span,
html[data-theme="dark"] .announcement-body,
html[data-theme="dark"] .wysiwyg-btn,
html[data-theme="dark"] .summary-card-label,
html[data-theme="dark"] .leaderboard-metrics span,
html[data-theme="dark"] .leaderboard-section-stats span,
html[data-theme="dark"] .insights-jump-link,
html[data-theme="dark"] .chart-view-switch-item {
    color: var(--sa-muted);
}

html[data-theme="dark"] .information-callout--blue,
html[data-theme="dark"] .information-admin-prompt {
    border-color: rgba(96, 165, 250, 0.25);
    color: #bfdbfe;
    background: rgba(30, 64, 175, 0.24);
}

html[data-theme="dark"] .information-callout--amber,
html[data-theme="dark"] .information-contact-pending {
    color: #fde68a;
    background: rgba(146, 64, 14, 0.28);
}

html[data-theme="dark"] .status-in,
html[data-theme="dark"] .insights-live-note {
    color: #86efac;
}

html[data-theme="dark"] .status-out {
    color: #fecdd3;
}

html[data-theme="dark"] .status-warn {
    color: #fde68a;
    background: var(--sa-warning-soft);
}

html[data-theme="dark"] .status-neutral {
    color: var(--sa-muted);
    background: var(--sa-surface-inset);
}

/* Blue-black inset surfaces that were previously fixed to light gray. */
html[data-theme="dark"] .attendance-session-toggle,
html[data-theme="dark"] .attendance-manual-refresh-btn,
html[data-theme="dark"] .attendance-session-row-time,
html[data-theme="dark"] .attendance-session-row-missing .tap-dot,
html[data-theme="dark"] .attendance-session-row-missing .attendance-session-row-time,
html[data-theme="dark"] .attendance-session-note,
html[data-theme="dark"] .attendance-time,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .sms-log-table-shell .dt-layout-row:first-child,
html[data-theme="dark"] .sms-log-table-shell .dt-layout-row:last-child,
html[data-theme="dark"] .error-helper-card,
html[data-theme="dark"] .error-request-card,
html[data-theme="dark"] .student-photo-upload-panel,
html[data-theme="dark"] .student-photo-crop-stage,
html[data-theme="dark"] .leaderboard-rule-card,
html[data-theme="dark"] .text-blast-message-preview,
html[data-theme="dark"] .backup-progress-step,
html[data-theme="dark"] .backup-progress-step-icon,
html[data-theme="dark"] .support-status-pill.discarded,
html[data-theme="dark"] .support-ticket-description,
html[data-theme="dark"] .support-ticket-attachment img,
html[data-theme="dark"] .support-ticket-trail--side,
html[data-theme="dark"] .support-ticket-pagination-links .page-item.disabled .page-link,
html[data-theme="dark"] .insight-day-cell,
html[data-theme="dark"] .insight-mini-metrics > div,
html[data-theme="dark"] .attendance-selected-student,
html[data-theme="dark"] .student-search-result,
html[data-theme="dark"] .section-chip,
html[data-theme="dark"] .summary-help-close,
html[data-theme="dark"] .attendance-date-controls {
    border-color: var(--sa-border);
    color: var(--sa-muted);
    background: var(--sa-surface-muted);
}

html[data-theme="dark"] .attendance-session-summary {
    border-color: var(--sa-border);
    background: linear-gradient(135deg, var(--sa-surface-muted), var(--sa-surface-strong));
}

html[data-theme="dark"] .attendance-session-row + .attendance-session-row {
    border-color: var(--sa-border);
}

html[data-theme="dark"] .empty-state {
    border-style: dashed;
}

html[data-theme="dark"] .summary-help-btn,
html[data-theme="dark"] .summary-help-dialog {
    border-color: var(--sa-border);
    color: var(--sa-text);
    background: var(--sa-surface-strong);
}

html[data-theme="dark"] .summary-help-btn:hover,
html[data-theme="dark"] .summary-help-btn:focus-visible,
html[data-theme="dark"] .summary-help-close:hover,
html[data-theme="dark"] .summary-help-close:focus-visible {
    color: var(--sa-text);
    background: var(--sa-surface-inset);
}

html[data-theme="dark"] .summary-help-header {
    border-color: var(--sa-border);
}

html[data-theme="dark"] .summary-help-body {
    color: var(--sa-muted);
}

html[data-theme="dark"] .insight-rate-ring::before {
    background: var(--sa-surface-strong);
    box-shadow: inset 0 0 0 1px var(--sa-border);
}

html[data-theme="dark"] .tap-result-card,
html[data-theme="dark"] .leaderboard-personal-card,
html[data-theme="dark"] .text-blast-audience-option.selected,
html[data-theme="dark"] .credit-payment-option.selected,
html[data-theme="dark"] .text-blast-recipient-picker,
html[data-theme="dark"] .text-blast-cost-card,
html[data-theme="dark"] .backup-progress-window,
html[data-theme="dark"] .support-owner-update-form {
    border-color: var(--sa-border);
    color: var(--sa-text);
    background:
        linear-gradient(135deg, rgba(96, 165, 250, 0.11), rgba(14, 165, 233, 0.04)),
        var(--sa-surface-strong);
}

html[data-theme="dark"] .insight-day-cell--complete {
    color: #86efac;
    background: linear-gradient(145deg, rgba(22, 101, 52, 0.34), var(--sa-surface-muted));
}

html[data-theme="dark"] .insight-day-cell--flagged {
    color: #fde68a;
    background: linear-gradient(145deg, rgba(146, 64, 14, 0.34), var(--sa-surface-muted));
}

html[data-theme="dark"] .insight-day-cell--holiday {
    color: #c4b5fd;
    background: linear-gradient(145deg, rgba(91, 33, 182, 0.32), var(--sa-surface-muted));
}

html[data-theme="dark"] .insight-day-cell--pending {
    color: #bfdbfe;
    background: linear-gradient(145deg, rgba(30, 64, 175, 0.34), var(--sa-surface-muted));
}

html[data-theme="dark"] .insight-day-cell--absent {
    color: #fecdd3;
    background: linear-gradient(145deg, rgba(159, 18, 57, 0.3), var(--sa-surface-muted));
}

html[data-theme="dark"] .session-status-completed {
    color: #86efac;
}

html[data-theme="dark"] .session-status-short_pair,
html[data-theme="dark"] .session-status-missing_in,
html[data-theme="dark"] .session-status-missing_out,
html[data-theme="dark"] .session-status-unknown {
    color: #fde68a;
    background: var(--sa-warning-soft);
}

html[data-theme="dark"] .session-status-invalid_time {
    color: #fecdd3;
}

html[data-theme="dark"] .attendance-warning,
html[data-theme="dark"] .support-status-pill.pending,
html[data-theme="dark"] .support-priority-pill.medium,
html[data-theme="dark"] .error-tone-warning .soft-pill {
    border-color: rgba(251, 191, 36, 0.26);
    color: #fde68a;
    background: var(--sa-warning-soft);
}

html[data-theme="dark"] .attendance-error,
html[data-theme="dark"] .support-flow-icon.bug,
html[data-theme="dark"] .support-panel-icon.bug,
html[data-theme="dark"] .support-ticket-type.bug,
html[data-theme="dark"] .support-priority-pill.high {
    border-color: rgba(251, 113, 133, 0.24);
    color: #fecdd3;
    background: var(--sa-danger-soft);
}

html[data-theme="dark"] .support-flow-icon.request,
html[data-theme="dark"] .support-panel-icon.request,
html[data-theme="dark"] .support-ticket-type.feature {
    border-color: rgba(96, 165, 250, 0.24);
    color: #bfdbfe;
    background: var(--sa-primary-soft);
}

html[data-theme="dark"] .support-status-pill.completed,
html[data-theme="dark"] .support-priority-pill.low {
    border-color: rgba(74, 222, 128, 0.24);
    color: #86efac;
    background: var(--sa-success-soft);
}

html[data-theme="dark"] .bg-white {
    background-color: var(--sa-surface-strong) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--sa-text) !important;
}

html[data-theme="dark"] .text-secondary {
    color: var(--sa-muted) !important;
}

html[data-theme="dark"] .site-theme-toggle {
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
}

/* Student Directory ------------------------------------------------------ */
.student-directory-refine {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 0.75rem;
    width: min(100%, 420px);
}

.student-directory-select-label {
    display: grid;
    gap: 0.35rem;
    color: var(--sa-muted);
    font-family: var(--sa-font-display);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.student-directory-select-label .form-select {
    min-height: 44px;
    color: var(--sa-text);
    font-family: var(--sa-font-body);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}

.student-directory-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.student-directory-filter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid var(--sa-border);
    border-radius: 18px;
    color: var(--sa-text);
    background: var(--sa-surface-muted);
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.student-directory-filter:hover,
.student-directory-filter:focus-visible {
    border-color: rgba(37, 99, 235, 0.3);
    background: var(--sa-primary-soft);
    transform: translateY(-1px);
    outline: none;
}

.student-directory-filter.active {
    border-color: rgba(37, 99, 235, 0.38);
    background: var(--sa-primary-soft);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.11);
}

.student-directory-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: var(--sa-primary-dark);
    background: var(--sa-surface-strong);
    font-size: 1rem;
}

.student-directory-filter-copy {
    display: grid;
    min-width: 0;
    font-family: var(--sa-font-display);
    line-height: 1.15;
}

.student-directory-filter-copy > span {
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-directory-filter-copy small {
    margin-top: 0.2rem;
    overflow: hidden;
    color: var(--sa-muted);
    font-family: var(--sa-font-body);
    font-size: 0.73rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-directory-filter > strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.55rem;
    border-radius: 999px;
    color: var(--sa-primary-dark);
    background: var(--sa-surface-strong);
    font-family: var(--sa-font-display);
    font-size: 0.84rem;
    font-weight: 900;
}

.student-directory-summary {
    min-height: 1.25rem;
    margin: 0 0.5rem 0.85rem;
    color: var(--sa-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.student-directory-table-shell {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.15rem;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.student-directory-table-shell .dt-container {
    min-width: 100%;
}

.student-directory-table-shell .dt-layout-row {
    margin: 0;
}

.student-directory-table-shell .dt-layout-row:not(.dt-layout-table) {
    gap: 0.85rem 1.25rem;
    padding: 1rem 1.25rem;
}

.student-directory-table-shell .dt-layout-row:first-child {
    margin-bottom: 0.9rem;
    border: 1px solid var(--sa-border);
    border-radius: 16px;
    background: var(--sa-surface-muted);
}

.student-directory-table-shell .dt-layout-row:last-child {
    margin: 0.9rem 0 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--sa-border);
    border-radius: 16px;
    background: var(--sa-surface-muted);
}

.student-directory-table-shell .dt-layout-table {
    padding: 0;
}

.student-directory-table-shell #studentDirectoryTable {
    min-width: 1050px;
}

.student-directory-table-shell #studentDirectoryTable > :not(caption) > * > * {
    padding: 0.9rem 0.85rem;
    vertical-align: middle;
}

.student-directory-table-shell #studentDirectoryTable > :not(caption) > * > :first-child {
    padding-left: 1.25rem;
}

.student-directory-table-shell #studentDirectoryTable > :not(caption) > * > :last-child {
    padding-right: 1.25rem;
}

.student-directory-row:focus-visible {
    position: relative;
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: -3px;
}

.student-directory-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 200px;
}

.student-directory-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 2px solid var(--sa-surface-strong);
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sa-primary), #0284c7);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.17);
    font-family: var(--sa-font-display);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.035em;
}

.student-directory-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-directory-person-copy {
    display: grid;
    min-width: 0;
}

.student-directory-name {
    color: var(--sa-text);
    font-family: var(--sa-font-display);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
}

.student-directory-name:hover,
.student-directory-name:focus-visible {
    color: var(--sa-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.student-directory-person-copy small {
    margin-top: 0.18rem;
    color: var(--sa-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.student-directory-assignment,
.student-directory-year {
    color: var(--sa-text);
    font-weight: 700;
    white-space: nowrap;
}

.student-status-graduated {
    color: #6d28d9;
    background: #ede9fe;
}

.student-directory-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    text-decoration: none;
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.student-directory-open:hover,
.student-directory-open:focus-visible {
    color: #ffffff;
    background: var(--sa-primary);
    transform: translate(1px, -1px);
    outline: none;
}

.student-directory-empty-state {
    display: grid;
    justify-items: center;
    padding: 3rem 1.5rem;
}

.student-directory-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 1rem;
    border-radius: 20px;
    color: var(--sa-primary-dark);
    background: var(--sa-primary-soft);
    font-size: 1.45rem;
}

html[data-theme="dark"] .student-directory-filter,
html[data-theme="dark"] .student-directory-table-shell .dt-layout-row:first-child,
html[data-theme="dark"] .student-directory-table-shell .dt-layout-row:last-child {
    border-color: var(--sa-border);
    background: var(--sa-surface-muted);
}

html[data-theme="dark"] .student-directory-filter:hover,
html[data-theme="dark"] .student-directory-filter:focus-visible,
html[data-theme="dark"] .student-directory-filter.active {
    border-color: rgba(96, 165, 250, 0.36);
    background: var(--sa-primary-soft);
}

html[data-theme="dark"] .student-directory-filter-icon,
html[data-theme="dark"] .student-directory-filter > strong {
    background: var(--sa-surface-strong);
}

html[data-theme="dark"] .student-status-graduated {
    color: #d8b4fe;
    background: rgba(126, 34, 206, 0.24);
}

@media (max-width: 1199.98px) {
    .student-directory-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .student-directory-refine {
        width: 100%;
    }

    .student-directory-table-shell {
        padding: 0.8rem;
    }

    .student-directory-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-directory-filter:first-child {
        grid-column: 1 / -1;
    }

    .student-directory-table-shell .dt-layout-row:not(.dt-layout-table) {
        align-items: stretch;
        padding: 0.9rem 1rem;
    }

    .student-directory-table-shell .dt-layout-row:last-child {
        margin: 0.75rem 0 0;
        padding: 0.85rem;
    }

    .student-directory-table-shell .dt-layout-cell,
    .student-directory-table-shell .dt-search,
    .student-directory-table-shell .dt-search input,
    .student-directory-table-shell .dt-length {
        width: 100%;
        min-width: 0;
    }

    .student-directory-table-shell .dt-layout-end {
        margin-left: 0 !important;
    }
}

@media (max-width: 479.98px) {
    .student-directory-refine,
    .student-directory-filter-grid {
        grid-template-columns: 1fr;
    }

    .student-directory-filter:first-child {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-theme-toggle,
    .site-theme-toggle-track,
    .site-theme-toggle-thumb,
    .student-directory-filter,
    .student-directory-open {
        transition: none;
    }
}