/* ==========================================================================
   Bluebonnet Family Portal - Stylesheet
   Brand tokens match css/shared.css (admin dashboards).
   All components from the original Squarespace app, re-skinned.
   ========================================================================== */

:root {
    /* Primary Brand Colors (matching brand.md & css/shared.css) */
    --primary-blue: #130e36;
    --secondary-purple: #423e5e;

    /* Status Colors */
    --success-green: #1e7d3c;
    --error-red: #c0392b;
    --warning-orange: #e67e22;

    /* Neutral Colors */
    --bg-light: #f9f9f9;
    --border-grey: #ddd;
    --text-dark: #333333;
    --text-medium: #666666;
    --card-bg: #ffffff;

    /* Status Column Header Colors (semantic, preserved from original) */
    --col-not-checked-in: #c1c1c1;
    --col-checked-in: #346438;
    --col-checked-out: #943c3c;

    /* Program Chip Colors (global — reference via var(--program-*) in CSS or
       SharedModule.programColor() in JS) */
    --program-primary-morning: #c1f5f0;
    --program-primary-extended-day: #ffe0cc;
    --program-elementary: #ffeab6;

    /* Design Tokens */
    --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --shadow-1: 0 2px 6px rgba(19, 14, 54, 0.06);
    --shadow-2: 0 10px 30px rgba(19, 14, 54, 0.08);
    --shadow-3: 0 20px 60px rgba(0, 0, 0, 0.3);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --z-header: 1000;
    --z-nav: 1500;
    --z-scanner: 2000;
    --z-scanner-ui: 2005;
    --z-scanner-back: 2010;
    --z-popup: 2020;
    --z-loader: 2030;
    --z-notification: 2110; /* Above the photo lightbox (2060) + crop (2070) + custom modals (2100) so delete/download toasts stay visible */
    --z-submitting: 2040;
    --z-lightbox: 2060;
    --z-crop: 2070;
    --z-custom-modal: 2100;
    --z-menu-overlay: 3000;
    --z-menu: 3005;
    --z-modal: 10000;
}

/* --- Self-hosted display font (Merriweather) --- */
@font-face {
    font-family: 'Merriweather';
    src: url('../vendor/fonts/merriweather/merriweather-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('../vendor/fonts/merriweather/merriweather-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('../vendor/fonts/merriweather/merriweather-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --- Base & Layout --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Keyboard focus visibility --- */
:focus-visible {
    outline: 2px solid var(--secondary-purple, #423e5e);
    outline-offset: 2px;
}

#ss-container {
    height: 100%;
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.view-container {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center login/reset views */
    padding: 20px 15px;
    overflow-y: auto;
}

#dashboard-container {
    height: 100%;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

.dashboard-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-view { animation: view-fade 180ms ease; }

@keyframes view-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.container {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    border: 1px solid var(--border-grey);
    width: 100%;
    max-width: 900px;
    padding: 35px 25px;
    margin: 20px auto;
}

#dashboard-container .container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
    padding: 25px 20px 96px;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* --- Headers & Typography --- */
h1 {
    color: var(--primary-blue);
    text-align: center;
    margin-bottom: 8px;
    font-size: 26px;
    font-weight: 700;
    font-family: var(--font-display);
}

h2 {
    font-size: 22px;
    color: var(--primary-blue);
    margin-bottom: 20px;
    font-weight: 700;
    font-family: var(--font-display);
}

.login-logo {
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.subtitle {
    color: var(--text-medium);
    text-align: center;
    margin-bottom: 25px;
    font-size: 14px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: var(--text-medium);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--border-grey);
}

/* --- Portal Header Bar (Matching Admin Dashboard) --- */
.dashboard-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-blue);
    color: white;
    padding: 16px 24px;
    padding-top: calc(16px + env(safe-area-inset-top));
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.welcome-text {
    font-size: 20px;
    color: white;
    font-weight: 700;
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    gap: 10px;
}

.welcome-logo {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* "Return to Teacher" — top bar escape hatch for a director in the Dev
   Parent view (directors don't have the Admin change-view menu). */
.return-to-teacher-btn {
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 12px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-lg);
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.return-to-teacher-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.hamburger-menu {
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
}

.hamburger-menu:hover {
    background: rgba(255, 255, 255, 0.15);
}

.hamburger-menu svg {
    width: 26px;
    height: 26px;
    stroke: white;
}

/* --- Form Components --- */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 14px;
}

input, textarea, select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border-grey);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(19, 14, 54, 0.1);
}

textarea { resize: vertical; }

.error {
    color: var(--error-red);
    font-size: 14px;
    margin-top: 8px;
    text-align: center;
    display: none;
}

.error.show { display: block; }

.forgot-password-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--primary-blue);
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}

.forgot-password-link:hover { text-decoration: underline; }

.password-field { position: relative; }

.password-field input { padding-right: 46px; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: none;
    border: none;
    color: var(--text-medium);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.password-toggle svg { width: 20px; height: 20px; }

.password-toggle:hover { color: var(--primary-blue); }

/* --- Buttons --- */
.btn {
    width: auto;
    padding: 13px 20px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-block { width: 100%; }

.btn:hover:not(:disabled) { background: var(--secondary-purple); }
.btn:active:not(:disabled) { transform: scale(0.99); }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary { background: #e8e8e8; color: var(--text-dark); }
.btn-secondary:hover:not(:disabled) { background: #ddd; }

.btn-google {
    background: #ffffff;
    color: var(--text-dark);
    border: 1px solid var(--border-grey);
}

.btn-google:hover:not(:disabled) {
    background: #f7f7f7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-google svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.btn-green { background: var(--success-green); color: white; }
.btn-green:hover { background: #218838; }

.btn-red { background: var(--error-red); color: white; }
.btn-red:hover { background: #c0392b; }

.btn-skip { background: var(--error-red); color: white; border: none; }
.btn-skip:hover { background: #c0392b; }

/* Unified QR button — used everywhere a QR action exists: parent Home +
   Check in tabs (Generate QR Code) and the teacher Scan QR Code button.
   Centered and narrower than the full-width .btn, taller with the icon on
   top inside a translucent circle. The label always matches the action. A
   fixed width keeps the two labels the same size regardless of text length. */
.btn-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    width: 300px;
    margin: 0 auto;
}

.btn-qr .btn-qr-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.btn-qr .btn-qr-icon svg {
    width: 26px;
    height: 26px;
}

/* --- Slide-In Menu --- */
.slide-in-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background: white;
    box-shadow: none;
    z-index: var(--z-menu);
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.slide-in-menu.show {
    right: 0;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
}

.slide-in-menu-header {
    padding: 20px;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-display);
    background: var(--primary-blue);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-menu-btn {
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 0 4px;
}

.slide-in-menu-content {
    flex-grow: 1;
    overflow-y: auto;
    padding-top: 10px;
}

.menu-version {
    padding: 12px 20px;
    font-size: 12px;
    color: var(--text-medium);
    border-top: 1px solid var(--border-grey);
    text-align: center;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 15px;
    color: var(--text-dark);
    cursor: pointer;
    border-bottom: 1px solid var(--border-grey);
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.15s ease;
}

.menu-item:hover { background-color: var(--bg-light); }

.menu-item.btn-signout {
    color: var(--error-red);
    font-weight: 600;
}

.menu-item-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item-icon svg { width: 20px; height: 20px; }

.menu-item.btn-signout .menu-item-icon { color: var(--error-red); }

.menu-account {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-grey);
}

.menu-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-blue);
    color: white;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
}

.menu-account-info { min-width: 0; }

.menu-account-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-account-email {
    font-size: 12px;
    color: var(--text-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--z-menu-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-overlay.show { opacity: 1; visibility: visible; }

/* --- Dashboard Sections & Cards --- */
.section { margin-bottom: 25px; }

.section-title {
    font-size: 17px;
    color: var(--primary-blue);
    margin-bottom: 14px;
    font-weight: 700;
    font-family: var(--font-display);
}

.students-list, .checkin-history {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid var(--border-grey);
}

.checkin-history { max-height: 300px; overflow-y: auto; }

.student-item {
    background: white;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    border: 1px solid var(--border-grey);
    display: flex;
    justify-content: space-between;
    align-items: center;
    word-break: break-word;
}

.status-student-list .student-item { justify-content: center; gap: 8px; }
.student-item:last-child { margin-bottom: 0; }

/* Picker rows (classroom list, photo pickers): 1fr | auto | 1fr grid so the
   name sits in the TRUE middle of the row — flex's "auto margins" centering
   only centers within the leftover space beside the trailing chips, which
   visually shifts the name left. */
.classroom-student {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 6px;
}

.classroom-student .student-name {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    text-align: center;
    min-width: 0;
}

.classroom-student .student-row-trailing {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.student-name {
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 16px;
}

/* Right-side cluster in picker rows (photo count chip, schedule chip,
   disabled hint) — one group so the centered name never gets pushed around. */
.student-row-trailing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.student-classroom, .student-schedule {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
}

.empty-state {
    text-align: center;
    padding: 30px;
    color: var(--text-medium);
}

.checkin-item {
    flex-direction: column;
    align-items: flex-start;
    background: white;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-sm);
    padding: 12px 15px;
    margin-bottom: 10px;
}

.checkin-item:last-child { margin-bottom: 0; }

.checkin-header {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 15px;
}

.checkin-details-body {
    font-size: 14px;
    color: var(--text-medium);
    padding-left: 10px;
    border-left: 2px solid var(--border-grey);
}

/* --- Modals (QR Code, Test QR) --- */
/* All .modal elements share one enter/exit: the overlay fades while the
   content card slides up and settles. Exit is the subtler reverse. Modals
   toggle only .show (no JS timers needed) — visibility flips instantly on
   open and is deferred until the fade finishes on close. */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 220ms;
}

.modal.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}

.modal-content {
    background: white;
    border-radius: var(--radius-lg);
    padding: 30px;
    width: 90%;
    max-width: 420px;
    text-align: center;
    border: 1px solid var(--border-grey);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(10px) scale(0.97);
    opacity: 0;
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1), opacity 220ms ease;
}

.modal.show .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-buttons .btn { flex: 1; }

#qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto 0;
    padding: 20px;
    background: #ffffff !important;
    border-radius: var(--radius-xl);
    border: 6px solid #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    width: fit-content;
    max-width: 100%;
}

#qrcode img {
    display: block !important;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

/* --- Teacher Scanner --- */
#scanner-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: var(--z-scanner);
    display: none;
}

#video-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.back-button {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-scanner-back);
    padding: 12px 24px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: 600;
    min-width: 150px;
    font-size: 15px;
    transition: background 0.2s ease;
}

.back-button:hover { background: var(--secondary-purple); }

#scanner-message {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 12px 18px;
    border-radius: 8px;
    text-align: center;
    z-index: var(--z-scanner-ui);
    pointer-events: none;
    white-space: nowrap;
}

#scanner-notification {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background-color: var(--error-red);
    padding: 12px 18px;
    border-radius: 8px;
    text-align: center;
    z-index: var(--z-scanner-ui);
    pointer-events: none;
    display: none;
}

#scanner-canvas { display: none; }

/* --- Teacher Checkin Status Section --- */
.activity-toggle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.activity-toggle { display: flex; }

.toggle-btn {
    background: white;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.toggle-btn:first-child {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    border-right-width: 1px;
}

.toggle-btn:last-child {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-left-width: 1px;
}

.toggle-btn.active {
    background: var(--primary-blue);
    color: white;
}

#check-in-toggle, #check-out-toggle {
    padding: 12px 30px;
    font-size: 17px;
}

.checkin-status-columns {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.status-column { flex: 1; min-width: 0; }

.status-column-header {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    color: white;
}

#not-checked-in-column .status-column-header {
    background-color: var(--col-not-checked-in);
    color: var(--text-dark);
}

#checked-in-column .status-column-header {
    background-color: var(--col-checked-in);
}

#checked-out-column .status-column-header {
    background-color: var(--col-checked-out);
}

.status-student-list {
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: 8px;
    padding: 10px;
    height: 300px;
    overflow-y: auto;
}

.status-student-list .student-item { cursor: pointer; }

/* --- Centered Popups (Scan Success, Manual Flows) --- */
#success-popup,
#manual-checkin-popup,
#manual-sibling-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background-color: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-grey);
    box-shadow: var(--shadow-3);
    padding: 30px;
    display: none;
    z-index: var(--z-popup);
    max-height: 85vh;
    overflow-y: auto;
}

#success-popup h2,
#manual-checkin-popup h2,
#manual-sibling-popup h2 {
    margin-top: 0;
    text-align: center;
    color: var(--primary-blue);
    font-size: 22px;
}

#manual-checkin-header,
#modal-header,
#manual-sibling-header {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--text-medium);
}

#child-list,
#manual-parent-list,
#manual-sibling-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    width: 100%;
}

.child-select-btn {
    width: 100%;
    padding: 18px;
    margin-bottom: 12px;
    background: white;
    border: 2px solid var(--border-grey);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s;
    position: relative;
    color: var(--text-dark);
}

.child-select-btn:hover {
    background: var(--bg-light);
}

.child-select-btn.selected {
    background: var(--primary-blue);
    color: white;
    border-color: transparent;
}

.child-select-btn input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.btn-parent-select { border-color: var(--primary-blue); }

.popup-buttons {
    display: flex;
    gap: 15px;
    width: 100%;
    margin-top: 20px;
}

.popup-buttons .btn { flex: 1; }

#manual-other-person-group { margin-top: 15px; }

/* --- Authorized Pickup Identity Confirmation (Driver's License) --- */
#dl-confirm-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background-color: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-grey);
    box-shadow: var(--shadow-3);
    padding: 30px;
    display: none;
    z-index: var(--z-popup);
    max-height: 85vh;
    overflow-y: auto;
}

#dl-confirm-popup h2 {
    margin-top: 0;
    text-align: center;
    color: var(--primary-blue);
    font-size: 22px;
}

#dl-confirm-header {
    text-align: center;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--text-medium);
}

#dl-confirm-chip {
    display: block;
    width: fit-content;
    margin: 0 auto 15px;
}

.dl-confirm-preview {
    position: relative;
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-md);
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

.dl-confirm-preview .spinner {
    position: absolute;
    margin: 0;
}

#dl-confirm-img {
    max-width: 100%;
    max-height: 45vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

#dl-confirm-fallback {
    text-align: center;
    color: var(--text-medium);
    padding: 20px;
    font-size: 14px;
}

/* --- Authorization chips (Occasional / Blanket) --- */
.auth-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    background: #e8edff;
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    vertical-align: middle;
}

.auth-chip-blanket {
    background: #e6f7e6;
    color: #1e7e34;
    border-color: #1e7e34;
}

.auth-person-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* --- Person switcher + QR views in the Parent QR Modal --- */
/* Pill tabs: "Me" + one pill per authorized pickup person (initials avatar +
   first name). The row scrolls horizontally so any number of people (0 to
   6+) fit without breaking the modal layout, and every person is visible at
   a glance — no hidden dropdown. Centered when it fits; `safe` falls back to
   left-align + scroll on overflow so the Me pill stays reachable. */
.qr-person-picker {
    display: flex;
    justify-content: safe center;
    gap: 8px;
    overflow-x: auto;
    margin-top: 18px;
    padding: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.qr-person-picker::-webkit-scrollbar { display: none; }

.qr-person-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px 5px 5px;
    background: #fff;
    border: 1.5px solid var(--border-grey);
    border-radius: var(--radius-pill);
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 100ms ease;
}

.qr-person-pill:active { transform: scale(0.96); }

.qr-person-pill.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
}

.qr-person-pill-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef0f7;
    color: var(--primary-blue);
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
    transition: background-color 160ms ease, color 160ms ease;
}

.qr-person-pill.active .qr-person-pill-avatar {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* The QR display is a stacked grid — every person's view occupies the same
   cell, so the container holds one constant height and switching people is a
   180ms directional crossfade instead of a layout jump. Inactive views are
   invisible and hidden from screen readers. The pickup view mirrors the
   parent's own QR card treatment exactly.
   IMPORTANT: the views must stay inert unless the modal is open — the static
   me view carries .active from page load (and keeps it after the modal
   closes), so without the #qrModal.show gate its explicit
   visibility:visible / pointer-events:auto would sit over the center of the
   app at z-index 10000 and eat every click there. */
#qrModal .qr-display {
    display: grid;
    min-height: 400px;
}

.qr-person-view,
.qr-person-view.active {
    grid-area: 1 / 1;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--enter-y, 6px));
    pointer-events: none;
    transition:
        opacity 180ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s linear 180ms;
}

#qrModal.show .qr-person-view.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 180ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s;
}

.auth-qr-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* The selected person's name — the view's heading, in the brand display font. */
.auth-qr-name {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 20px;
}

.qr-person-view .auth-qr-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto 0;
    padding: 20px;
    background: #ffffff !important;
    border-radius: var(--radius-xl);
    border: 6px solid #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    width: fit-content;
    max-width: 100%;
}

.qr-person-view .auth-qr-container img {
    display: block !important;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

/* --- Custom Alert & Confirm & Prompt Modals --- */
#submitting-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-submitting);
}

#custom-alert,
#custom-confirm,
#custom-prompt,
#dismissalRevokeModal,
#admin-edit-account-modal,
#admin-new-account-modal,
#admin-edit-email-modal,
#admin-preview-email-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-custom-modal); /* Above the photo lightbox (2060) and crop modal (2070) */
}

.custom-modal-content {
    width: 92%;
    max-width: 420px;
    background-color: white;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border-grey, #e5e7eb);
    box-shadow: var(--shadow-3, 0 10px 25px rgba(0, 0, 0, 0.15));
    padding: 26px 22px;
    text-align: center;
}

.custom-modal-content--wide {
    max-width: 560px;
    text-align: left;
}

.custom-modal-content--wide .form-group label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    font-size: 14px;
}

.custom-modal-content--wide textarea {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.45;
}

.custom-modal-message {
    margin-bottom: 22px;
    font-size: 15.5px;
    color: var(--text-dark);
    line-height: 1.5;
}

.custom-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

.custom-modal-buttons .btn {
    flex: 1;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Recent Check-ins / Check-outs (slide-in view on the check-in page) --- */
.recent-checkins-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

/* The view fills the page scrollport; the title stays fixed and only the
   table rows scroll (the wrap is the scroll container, sticky thead inside). */
#recentCheckinsView {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#recentCheckinsView .section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
}

.recent-checkins-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-grey);
    border-radius: 10px;
    background: #fff;
}

.recent-checkins-end {
    font-size: 12px;
}

.recent-checkins-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.recent-checkins-table th {
    position: sticky;
    top: 0;
    background: var(--bg-light);
    text-align: left;
    padding: 9px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-medium);
    border-bottom: 1px solid var(--border-grey);
    white-space: nowrap;
}

.recent-checkins-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-grey);
    color: var(--text-dark);
    vertical-align: top;
}

.recent-checkins-table tbody tr:last-child td {
    border-bottom: none;
}

/* Mobile-friendly cells: the date sits under the student name, the actor's
   name under each time (relationship stripped client-side), the teacher's
   name under the checkout person. Compact text avoids horizontal scroll. */
.recent-checkins-student {
    min-width: 120px;
}

.recent-checkins-name {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    word-break: break-word;
}

.recent-checkins-date {
    font-size: 11px;
    color: var(--text-medium);
    margin-top: 2px;
}

.recent-checkins-time {
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.recent-checkins-person {
    font-size: 11px;
    color: var(--text-medium);
    margin-top: 2px;
    word-break: break-word;
}

.recent-checkins-teacher {
    font-size: 10px;
    color: var(--text-light, #9a9a9a);
    margin-top: 1px;
    font-style: italic;
    word-break: break-word;
}

.recent-checkins-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-medium);
}

/* --- Loader & Notification --- */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-loader);
}

#notification {
    position: fixed;
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    border-radius: var(--radius-md);
    color: white;
    z-index: var(--z-notification);
    text-align: center;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, bottom 0.4s ease;
}

#notification.show {
    bottom: calc(104px + env(safe-area-inset-bottom));
    opacity: 1;
    visibility: visible;
}

#notification.success { background: var(--success-green); }
#notification.error { background: var(--error-red); }

/* --- Spinner --- */
.spinner {
    display: none;
    width: 40px;
    height: 40px;
    margin: 20px auto;
    border: 4px solid var(--border-grey);
    border-top: 4px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner.show { display: block; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Photos --- */
.photo-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.photo-tabs::-webkit-scrollbar { display: none; }

.photo-tab, .student-chip, .classroom-chip {
    background: white;
    border: 1.5px solid var(--border-grey);
    border-radius: var(--radius-pill);
    color: var(--text-dark);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.photo-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 14px;
}

.photo-tab:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.photo-tab.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    min-height: 60px;
}

.photo-thumb {
    aspect-ratio: 1;
    border: 1px solid var(--border-grey);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-light);
    box-shadow: var(--shadow-1);
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.photo-thumb:hover { transform: scale(1.02); }

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-load-more {
    display: flex;
    min-width: 160px;
    margin: 20px auto 0;
}

.upload-form {
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-lg);
    padding: 15px;
}

.upload-form .form-group { margin-bottom: 15px; }

.student-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.student-chip {
    padding: 9px 16px;
    font-size: 14px;
}

.student-chip.selected {
    background: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    color: white !important;
}

.classroom-filter {
    width: 100%;
    padding: 11px 14px;
    background: white;
    border: 1.5px solid var(--border-grey);
    border-radius: 8px;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.photo-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    border: 2px dashed var(--border-grey);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    color: var(--text-medium);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.photo-picker:hover,
.photo-picker.has-file {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.photo-picker svg { width: 26px; height: 26px; flex-shrink: 0; }

.photo-queue {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    align-items: flex-start;
}

/* Three queue thumbnails per row, filling the panel width. The wrapper
   reserves space for the white name pill that straddles the top edge of
   the photo below. */
.queue-item-wrap {
    position: relative;
    width: calc((100% - 16px) / 3);
    padding-top: 12px;
}

/* Student name pill: white chip, horizontally centered, vertically centered
   on the top edge of the photo (its bottom half covers the photo). Matches
   the gallery label typography (12px / 600). Clicks pass through the pill. */
.queue-item-student {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    max-width: calc(100% - 8px);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong, #333);
    line-height: 1.3;
    background: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-grey);
    background: white;
    cursor: pointer;
}

.queue-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.queue-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.queue-hint {
    font-size: 12px;
    color: var(--text-medium);
    margin-top: 10px;
    text-align: center;
}

/* --- How to download the app (teacher menu reference page) --- */
.install-help-intro {
    font-size: 14px;
    color: var(--text-medium);
    line-height: 1.5;
    margin-bottom: 12px;
}

.install-help-device-banner {
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.3);
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.install-help-section {
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 12px;
}

.install-help-section.is-this-device {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
}

.install-help-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.install-symbol {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.install-symbol-inline {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--primary-blue);
    vertical-align: -2px;
}

.install-help-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}

.install-help-sub {
    font-size: 12px;
    color: var(--text-medium);
    margin-top: 2px;
    line-height: 1.4;
}

.install-help-steps {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark);
}

.install-help-steps li {
    margin-bottom: 6px;
}

.install-help-share {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-grey);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.install-help-share-text {
    font-size: 13px;
    color: var(--text-medium);
    line-height: 1.4;
}

/* --- Photo Editor (dark, full-screen — Google/Apple Photos style) --- */
#photoEditorModal {
    position: fixed;
    inset: 0;
    /* One layer above the edit-info modal (same base z-index — the editor is
       opened FROM it) */
    z-index: calc(var(--z-crop) + 1);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    animation: editor-fade-in 0.18s ease-out;
}

@keyframes editor-fade-in {
    from { opacity: 0; transform: scale(0.985); }
    to { opacity: 1; transform: scale(1); }
}

.photo-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--text-dark);
}

.photo-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    gap: 12px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-grey);
}

.photo-editor-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
}



.photo-editor-icon {
    background: none;
    border: none;
    color: var(--text-dark);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.photo-editor-icon svg { width: 22px; height: 22px; }

.photo-editor-icon:hover { background: rgba(19, 14, 54, 0.08); }

.photo-editor-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    background: #f3f4f6;
}

.crop-img-wrap {
    position: absolute;
    transition: opacity 0.15s ease;
}

.crop-img-wrap img {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: center center;
    display: block;
    max-width: none;
    max-height: none;
    user-select: none;
    -webkit-user-drag: none;
}

.photo-editor-stage:not(.ready) .crop-img-wrap { opacity: 0; }

.crop-box {
    position: absolute;
    cursor: move;
    touch-action: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}

.crop-box-grid {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.crop-box.adjusting .crop-box-grid { opacity: 1; }

.crop-grid-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.crop-grid-v1 { left: 33.33%; top: 0; width: 1px; height: 100%; }
.crop-grid-v2 { left: 66.66%; top: 0; width: 1px; height: 100%; }
.crop-grid-h1 { top: 33.33%; left: 0; height: 1px; width: 100%; }
.crop-grid-h2 { top: 66.66%; left: 0; height: 1px; width: 100%; }

.crop-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.crop-handle {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 2;
    touch-action: none;
}

/* Handles: 14px visual glyph centered in a 28px box; pointer hit-testing
   pads another 12px in JS, so the effective tap target is ~52px. */
.crop-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid var(--primary-blue);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.crop-handle-nw { left: -14px; top: -14px; cursor: nwse-resize; }
.crop-handle-n  { left: 50%; top: -14px; margin-left: -14px; cursor: ns-resize; }
.crop-handle-ne { right: -14px; top: -14px; cursor: nesw-resize; }
.crop-handle-e  { right: -14px; top: 50%; margin-top: -14px; cursor: ew-resize; }
.crop-handle-se { right: -14px; bottom: -14px; cursor: nwse-resize; }
.crop-handle-s  { left: 50%; bottom: -14px; margin-left: -14px; cursor: ns-resize; }
.crop-handle-sw { left: -14px; bottom: -14px; cursor: nesw-resize; }
.crop-handle-w  { left: -14px; top: 50%; margin-top: -14px; cursor: ew-resize; }

.photo-editor-controls {
    position: relative;
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #ffffff;
    border-top: 1px solid var(--border-grey);
}

.photo-editor-student-select {
    background: #f3f4f6;
    border: 1px solid var(--border-grey);
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    padding: 6px 14px;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
    max-width: 160px;
    text-overflow: ellipsis;
    transition: background 0.12s ease;
}

.photo-editor-student-select:hover {
    background: #e5e7eb;
}

.crop-tools {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
}

#photoEditorStudentPicker {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

#photoEditorStudentPicker .student-picker-trigger {
    margin-bottom: 0;
}

.photo-editor-picker-narrow {
    max-width: 160px;
    margin: 0 auto;
    width: 100%;
}

.photo-editor-picker-narrow .student-picker-trigger {
    height: 32px;
    padding: 4px 12px;
    font-size: 13px;
    margin-bottom: 0;
    border-radius: 16px;
}

.crop-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: var(--text-dark);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    width: 64px;
    flex-shrink: 0;
    transition: background 0.12s ease, opacity 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.crop-tool-btn svg {
    width: 22px;
    height: 22px;
    color: var(--primary-blue);
}

.crop-tool-btn:hover {
    background: rgba(19, 14, 54, 0.05);
}

.crop-tool-btn:active {
    opacity: 0.7;
    background: rgba(19, 14, 54, 0.1);
}

.photo-editor-caption-wrap input {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-grey);
    background: #f9fafb;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.photo-editor-caption-wrap input::placeholder { color: var(--text-medium); }

.photo-editor-caption-wrap input:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(19, 14, 54, 0.12);
}

.photo-editor-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.photo-editor-buttons .btn {
    min-width: 180px;
    height: 44px;
    font-size: 15px;
}

/* Aspect Ratio Floating Popover */
.aspect-popover {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 12px;
    z-index: 50;
    background: #ffffff;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 160px;
    padding: 4px;
    animation: editor-fade-in 0.15s ease-out;
}

.aspect-popover-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aspect-chip-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: background 0.12s ease;
}

.aspect-chip-btn:hover {
    background: #f3f4f6;
}

.aspect-chip-btn.active {
    background: var(--primary-blue);
    color: #ffffff;
    font-weight: 600;
}

.aspect-icon-rect {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Light modals (edit info + unsent-photos prompt) --- */
#photoEditInfoModal,
#photoQueueLeaveModal,
#adminImpersonateModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-crop);
    padding: 16px;
    animation: editor-fade-in 0.16s ease-out;
}

/* --- Impersonate Modal --- */
.impersonate-modal-content {
    max-width: 560px;
    gap: 16px;
}

.impersonate-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.impersonate-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}

.impersonate-modal-header .photo-editor-icon {
    color: var(--text-dark);
}

.impersonate-modal-header .photo-editor-icon:hover {
    background: rgba(0, 0, 0, 0.06);
}

.impersonate-search-wrap input {
    width: 100%;
    box-sizing: border-box;
}

.impersonate-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.impersonate-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-medium);
}

.impersonate-recent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 480px) {
    .impersonate-recent-grid {
        grid-template-columns: 1fr;
    }
}

.impersonate-recent-card {
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.impersonate-recent-card:hover {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
}

.impersonate-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.impersonate-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.impersonate-card-email {
    font-size: 11px;
    color: var(--text-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.impersonate-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 2px;
}

.impersonate-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.impersonate-list-item:hover {
    background: #f0f4ff;
    border-color: #c7d2fe;
}

.impersonate-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.impersonate-item-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.impersonate-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.impersonate-item-email {
    font-size: 12px;
    color: var(--text-medium);
}

.crop-modal-content {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 90vh;
    overflow-y: auto;
}

.crop-modal-content h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-dark);
    text-align: center;
}

.crop-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.crop-modal-buttons .btn {
    min-width: 120px;
}

/* --- Caption lines under grid thumbnails ---
   The square aspect + border moves onto the <img> so the caption can sit
   beneath it inside the same grid cell. */
.photo-thumb.has-caption-line {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    border: none;
    background: none;
    box-shadow: none;
}

.photo-thumb.has-caption-line:hover { transform: none; }

.photo-thumb.has-caption-line img {
    /* Override the base .photo-thumb img { height: 100% } — in a grid row the
       cell stretches to the tallest sibling, and 100% height makes the image
       fill the whole cell, pushing the caption down to the next row. Keep the
       image's natural square height so the caption sits right under it. */
    height: auto;
    aspect-ratio: 1;
    border: 1px solid var(--border-grey);
    border-radius: 8px;
    background: var(--bg-light);
    box-shadow: var(--shadow-1);
    transition: transform 0.15s ease;
}

.photo-thumb.has-caption-line:hover img { transform: scale(1.02); }

/* Student name pill ABOVE grid thumbnails (teacher + admin photo feeds):
   white chip straddling the photo's top edge — the same visual language as
   the upload-queue name pills. Clicks pass through to the thumbnail. */
.photo-thumb-student {
    position: relative;
    z-index: 2;
    align-self: center;
    margin-bottom: -14px;
    max-width: calc(100% - 8px);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong, #333);
    line-height: 1.3;
    background: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.photo-thumb-caption {
    font-size: 12px;
    font-style: italic;
    color: var(--text-medium);
    line-height: 1.3;
    text-align: center;
    /* Full text always visible — no line clamp. pre-line keeps the line
       breaks the teacher typed in the inline editor. */
    white-space: pre-line;
    word-break: break-word;
    transition: color 0.15s ease;
}

.photo-thumb-caption.is-empty {
    color: var(--text-light, #9a9a9a);
}

.photo-thumb-caption.is-editable {
    cursor: pointer;
    color: var(--primary-blue);
}

.photo-thumb-caption.is-editable.is-empty {
    font-weight: 400;
    color: var(--text-light, #9a9a9a);
    border-bottom: 1px dashed var(--border-grey);
    padding-bottom: 1px;
}

/* --- Feed Inline Quick Caption Editor --- */
.photo-thumb-caption.is-editing {
    display: block !important;
    overflow: visible !important;
    font-style: normal;
    cursor: default;
    position: relative;
    margin-top: 4px;
    /* The dashed "empty caption" underline reads as a boxed input container —
       drop it while editing (the input itself is borderless). */
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.inline-caption-wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inline-caption-text-input {
    background: transparent;
    border: none;
    font-size: 13px;
    font-family: inherit;
    font-style: normal;
    color: var(--text-dark);
    caret-color: var(--primary-blue);
    width: 100%;
    text-align: center;
    outline: none;
    padding: 0;
    margin: 0;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    box-shadow: none;
}

.inline-caption-actions-overlay {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 100;
    pointer-events: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.inline-caption-action-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.1s ease, background 0.15s ease;
}

.inline-caption-action-btn:hover {
    background: rgba(0, 0, 0, 0.85);
}

.inline-caption-action-btn:active {
    transform: scale(0.9);
}

/* --- Queue badges (cropped / captioned indicators) --- */
.queue-badge {
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}

.queue-badge-crop { left: auto; right: 3px; bottom: 3px; }

.queue-badge-crop svg { width: 11px; height: 11px; }

/* Queue caption line: tappable inline "Tap to add caption" — same editor as
   the grid thumbnails. */
.queue-item-caption {
    margin-top: 4px;
    font-size: 11px;
    font-style: italic;
    color: var(--text-medium);
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.15s ease;
}

.queue-item-caption.is-empty {
    color: var(--text-light, #9a9a9a);
}

.queue-item-caption.is-editing {
    display: block !important;
    overflow: visible !important;
    font-style: normal;
    cursor: default;
    position: relative;
    margin-top: 4px;
}

/* Queue thumbs fade in as they are added (motion: subtle, 150ms) */
.queue-item {
    animation: queue-item-in 0.16s ease-out;
}

@keyframes queue-item-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: #e8e8e8;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 15px 0;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary-blue);
    border-radius: var(--radius-sm);
    transition: width 0.2s ease;
}

#photoLightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--z-lightbox);
    padding: 20px;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
}

.lightbox-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
}

.lightbox-viewport {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
}

.lightbox-track {
    display: flex;
    width: 300%;
    height: 100%;
    will-change: transform;
}

.lightbox-slide {
    flex: 0 0 33.3333%;
    width: 33.3333%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.lightbox-slide-content {
    /* The caption's lower limit (counter/uploader/actions ≈ 124px up + margin).
       The image itself is NOT limited by this — a tall vertical photo still
       expands under the bar; only the caption depegs and pins here. */
    --lightbox-bar-zone: calc(140px + env(safe-area-inset-bottom, 0px));
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: 100%;
}

.lightbox-slide-content img {
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    transition: opacity 150ms ease;
}

/* While a new photo's bytes load, the previous frame fades out — a deleted
   or paged-away photo can never linger on screen (setSlideSrc adds/removes
   this class; the persistent 'load' listener fades the photo back in). */
.lightbox-slide-content img.src-swapping {
    opacity: 0;
}

/* Caption pegged to its photo: inside the slide, directly under the image —
   it travels with the photo during swipes. For a tall vertical photo whose
   bottom extends under the info bar, the slide gets `.is-tall` (measured in
   JS) and the caption depegs: it pins just above the bar's text while the
   image keeps expanding below it. A subtle drop shadow keeps the text
   readable over bright photo areas. */
.lightbox-slide-caption {
    flex-shrink: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    margin-top: 10px;
    max-width: 90%;
    word-break: break-word;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.75);
}

.lightbox-slide.is-tall .lightbox-slide-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--lightbox-bar-zone);
    margin-top: 0;
    max-width: 100%;
    /* Above the full-height image (the image carries a stacking context via
       will-change: transform, so a plain positioned element would paint
       beneath it). */
    z-index: 2;
}

/* Student name above the photo (teachers/admins only). Single line (nowrap)
   — no overflow clip, so the drop shadow feathers naturally instead of
   being cut off into hard lines at the box edges. For tall vertical photos
   it depegs like the caption and pins below the app header — the JS sets
   --lightbox-name-top from the header's measured height. */
.lightbox-slide-student {
    flex-shrink: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    max-width: 90%;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.75);
}

.lightbox-slide-student:empty {
    display: none;
}

.lightbox-slide.is-tall .lightbox-slide-student {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--lightbox-name-top, 79px);
    margin-bottom: 0;
    max-width: 100%;
    /* Above the full-height image — see the caption's z-index note. */
    z-index: 3;
}

.lightbox-counter {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    margin-top: 12px;
}

/* The counter/uploader/actions bar overlays the bottom of the full-height
   photo area (Google Photos style) so the image itself stays dead-center on
   screen. pointer-events pass through the bar so the swipe area beneath it
   still works; only the action buttons themselves are interactive. */
.lightbox-bottom-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.32) 55%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 10;
}

#photoLightboxCounter {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    margin-top: 8px;
}

#photoLightboxUploader {
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
    font-size: 13px;
    text-align: center;
    max-width: 90%;
    min-height: 1em;
}

.lightbox-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 16px;
}

.lightbox-action {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.lightbox-action svg { width: 26px; height: 26px; }

.lightbox-action:hover { opacity: 0.75; }

.lightbox-action.favorited { color: #ff4d6d; }

.lightbox-action.favorited svg { fill: currentColor; }

.lightbox-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 16px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
}

.lightbox-close svg { width: 28px; height: 28px; }

.lightbox-close:hover { opacity: 0.75; }

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.lightbox-arrow:hover { background: rgba(255, 255, 255, 0.3); }

.lightbox-arrow svg { width: 26px; height: 26px; }

#photoLightboxPrev { left: 12px; }

#photoLightboxNext { right: 12px; }

.lightbox-delete {
    color: #ff6b6b;
}

.lightbox-delete:hover { color: #ff8787; }

/* Touch-first: swipe replaces the on-screen arrows. Hide them on touch
   devices so the photo gets the full width and no chrome sits over the
   swipe zones. The inline `style.display = 'flex'` the JS sets is overridden
   here with !important. */
@media (hover: none) and (pointer: coarse) {
    .lightbox-arrow { display: none !important; }
}

/* --- Tuition Hub --- */
#tuitionOverview {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 24px;
}

.tuition-section {
    margin-bottom: 0 !important;
}

.tuition-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.tuition-balance-total {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}

.tuition-section .section-title {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-blue);
}

.tuition-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-grey, #e5e7eb);
    border-radius: 12px;
    padding: 2px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Auto-Pay Card Button (replaces Pay Tuition button when subscribed) */
.tuition-autopay-btn {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 12px;
    padding: 14px 16px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tuition-autopay-btn:hover {
    background: #dcfce7;
    border-color: #4ade80;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

.tuition-autopay-btn:active {
    transform: translateY(0);
}

.tuition-autopay-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tuition-autopay-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    stroke: #16a34a;
}

.tuition-autopay-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tuition-autopay-title {
    font-weight: 700;
    font-size: 15px;
    color: #166534;
}

.tuition-autopay-sub {
    font-size: 13px;
    color: #15803d;
    line-height: 1.4;
}

.tuition-autopay-action {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #15803d;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tuition-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 4px;
    border: none;
    border-bottom: 1px solid var(--border-grey, #f1f5f9);
    background: none;
    text-align: left;
    font: inherit;
    color: var(--text-dark);
}

.tuition-row:last-child { border-bottom: none; }

.tuition-row-btn { cursor: pointer; border-radius: 8px; padding: 10px 6px; }

.tuition-row-btn:hover { background: var(--bg-light); }

.tuition-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tuition-row-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

.tuition-row-sub {
    font-size: 12px;
    color: var(--text-medium);
}

.tuition-row-amount {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-dark);
    white-space: nowrap;
}

.tuition-row-side {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tuition-row-chevron {
    font-size: 20px;
    color: var(--text-medium);
    line-height: 1;
}

.tuition-pay-btn {
    margin: 2px 0 0;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
}

/* Balance, upcoming, and recent lists: bounded scroll areas inside cards (taller boxes) */
#tuitionBalanceList,
#tuitionUpcoming,
#tuitionPaidList {
    max-height: 160px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

#tuitionBalanceList:hover,
#tuitionUpcoming:hover,
#tuitionPaidList:hover,
#tuitionBalanceList:focus-within,
#tuitionUpcoming:focus-within,
#tuitionPaidList:focus-within {
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

#tuitionBalanceList::-webkit-scrollbar,
#tuitionUpcoming::-webkit-scrollbar,
#tuitionPaidList::-webkit-scrollbar {
    width: 4px;
    background: transparent;
}

#tuitionBalanceList::-webkit-scrollbar-thumb,
#tuitionUpcoming::-webkit-scrollbar-thumb,
#tuitionPaidList::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}

#tuitionBalanceList:hover::-webkit-scrollbar-thumb,
#tuitionUpcoming:hover::-webkit-scrollbar-thumb,
#tuitionPaidList:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
}

/* Future installments haven't happened yet — next one slightly muted,
   later ones more so. Recent payments keep full opacity. */
.tuition-row-next { opacity: 0.85; }
.tuition-row-later { opacity: 0.67; }

.tuition-receipt-toolbar {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    align-items: center !important;
    margin: 0 auto 16px !important;
    max-width: 920px !important;
    width: 100% !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
}

.tuition-receipt-toolbar .back-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    margin: 0 0 0 -8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--primary-blue) !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color 160ms ease, transform 100ms ease !important;
}

.tuition-receipt-toolbar .back-chevron:hover {
    background: rgba(19, 14, 54, 0.08) !important;
}

.tuition-receipt-toolbar .back-chevron:active {
    transform: scale(0.92) !important;
}

.tuition-receipt-toolbar .back-chevron svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}

.tuition-receipt-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tuition-receipt-actions .btn {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 42px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.tuition-receipt-toolbar-spacer {
    width: 44px !important;
    height: 44px !important;
    margin: 0 -8px 0 0 !important;
}

/* --- Report/Note form header: minimal chevron inline with the title --- */
.form-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.form-header .section-title { margin-bottom: 0; }

.back-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -10px;   /* optical — chevron hugs the left edge, title stays put */
    border: none;
    background: transparent;
    color: var(--primary-blue);
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms ease, transform 100ms ease;
}

.back-chevron svg { width: 24px; height: 24px; }

.back-chevron:hover { background: rgba(19, 14, 54, 0.06); }
.back-chevron:active { transform: scale(0.92); }

/* Report/Note sub-view navigation: the entering view slides in from the side
   it lives on — forms from the right (forward), lists from the left (back).
   Exits are instant (display toggle); the incoming slide covers the swap so
   it reads as a continuous push/pop. Replays whenever the element's display
   flips from none. Reduced-motion is handled by the global block.
   The list animation targets the inner .section only — animating the whole
   list view would transform the fixed .bottom-action-bar along with it
   (a transformed ancestor becomes the containing block for fixed children),
   making the Add Note / Accident Report button flash at the top before
   snapping to the bottom. */
#reportFormView, #noteFormView, #noteEditFormView, #recentCheckinsView {
    animation: subview-forward 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
#reportListView > .section, #notesListView > .section {
    animation: subview-back 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes subview-forward {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes subview-back {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: translateX(0); }
}

/* --- In-app Receipt (mirrors the n8n emailed PDF receipt) --- */
.tuition-receipt-page {
    padding: 8px 8px 32px;
}

.tuition-receipt {
    border: 1px solid #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: white;
    padding: 30px;
    max-width: 920px;
    margin: 0 auto;
}

.tuition-receipt-header {
    text-align: center;
    border-bottom: 2px solid #130e36;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.tuition-receipt-logo {
    max-width: 250px;
    height: auto;
    margin-bottom: 15px;
}

.tuition-receipt-header h2 {
    color: #130e36;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tuition-receipt-details {
    width: 100%;
    margin-bottom: 30px;
    border-collapse: collapse;
}

.tuition-receipt-details td {
    padding: 5px 0;
    font-size: 15px;
    color: #333;
}

.tuition-receipt-details td.tuition-receipt-label {
    font-weight: bold;
    color: #666;
    width: 150px;
}

.tuition-receipt-groups { margin-bottom: 10px; }

.tuition-receipt-group { margin-bottom: 20px; }

.tuition-receipt-child {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    color: #130e36;
    font-size: 18px;
    margin-bottom: 8px;
}

.tuition-receipt-line {
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    color: #666;
    margin-bottom: 6px;
    font-size: 15px;
}

.tuition-receipt-line.tuition-receipt-discount {
    color: var(--success-green);
    font-size: 13px;
}

.tuition-receipt-divider {
    border-top: 1px solid #ddd;
    margin: 20px 0 10px 0;
}

.tuition-receipt-total {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    color: #130e36;
    font-size: 20px;
    padding-top: 10px;
}

.tuition-receipt-footer {
    text-align: center;
    margin-top: 50px;
    color: #777;
    font-size: 13px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.tuition-receipt-footer p { margin: 0 0 8px; }

/* --- Accident Reports & Updates --- */
.report-button-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    background: white;
    border: 1.5px solid var(--border-grey);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--text-dark);
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.report-button-card:hover {
    border-color: var(--primary-blue);
}

.report-button-card svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--primary-blue);
}

.report-button-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.report-button-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.report-button-title {
    font-weight: 700;
    font-size: 16px;
}

.report-button-sub {
    font-size: 13px;
    color: var(--text-medium);
}

.report-button-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: var(--border-grey);
}

.report-button-card.is-disabled:hover {
    border-color: var(--border-grey);
}

.report-button-card.is-disabled svg {
    color: var(--text-medium);
}

.report-row-detail {
    display: block;
    font-size: 13px;
    color: var(--text-medium);
    margin-top: 4px;
    line-height: 1.5;
}

.report-ack-state {
    color: var(--success-green);
    font-weight: 600;
}

.report-ack-pending {
    color: #b45309;
    font-weight: 600;
}

.report-card {
    background: white;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-1);
}

.report-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.report-type-tag {
    background: var(--primary-blue);
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.report-type-tag[data-type="accident"] {
    background: #b71c1c;
}

.report-alert-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--error-red);
    color: white;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.report-ack-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--success-green);
    color: white;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.report-ack-message {
    font-size: 12px;
    font-weight: 600;
    color: var(--success-green);
    margin: 2px 0 6px;
}

.report-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.report-card-text {
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.5;
    margin: 0 0 8px;
}

.report-card-meta {
    font-size: 13px;
    color: var(--text-medium);
    margin-bottom: 4px;
}

.report-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-medium);
}

.report-ack-btn {
    margin: 12px auto 0;
    display: flex;
    min-width: 140px;
}

/* --- Parent Updates feed: compact tap-to-expand cards --- */
.report-card-expandable {
    padding: 0;
    overflow: hidden;
}

.report-card-summary {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    color: var(--text-dark);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.report-card-summary-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.report-card-summary .report-card-title {
    margin-bottom: 0;
    font-size: 15px;
}

.report-card-summary .report-card-meta {
    margin-bottom: 0;
}

.report-card-chevron {
    display: flex;
    flex-shrink: 0;
    color: var(--text-medium);
    transition: transform 0.2s ease;
}

.report-summary-status {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.report-summary-status.report-ack-state { background: #e2f7e8; }
.report-summary-status.report-ack-pending { background: #fff3e0; }

.report-card.expanded .report-card-chevron { transform: rotate(180deg); }

.report-card-details {
    display: none;
    padding: 4px 16px 14px;
    border-top: 1px solid #f0f0f0;
}

.report-card.expanded .report-card-details { display: block; }

/* --- Amendment Cards --- */
.amendment-tag,
.report-type-tag[data-type="amendment"] {
    background: #0284c7;
}

.amendment-diff-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 14px 0 10px;
}

.amendment-chip-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.amendment-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-medium);
    text-align: center;
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
}

.amendment-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 12px;
    min-height: 48px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    line-height: 1.3;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    width: 100%;
}

.amendment-chip.chip-prog-morning {
    background: var(--program-primary-morning, #c1f5f0);
}

.amendment-chip.chip-prog-extended {
    background: var(--program-primary-extended-day, #ffe0cc);
}

.amendment-chip.chip-prog-elementary {
    background: var(--program-elementary, #ffeab6);
}

.amendment-chip.chip-prog-afterschool {
    background: #ffd4e0;
}

.amendment-chip.chip-plan-discounted {
    background: #d1c4e9;
}

.amendment-chip.chip-plan-installments {
    background: #ffccbc;
}

.amendment-chip.chip-neutral {
    background: #f3f4f6;
    color: #374151;
}

.amendment-prompt-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.5;
    margin: 14px 0 4px;
}

.amendment-prompt-text.amendment-prompt-waiting {
    color: #b45309;
    font-weight: 600;
}

.amendment-prompt-text.amendment-prompt-completed {
    color: var(--success-green);
    font-weight: 600;
}

.amendment-arrow {
    color: var(--text-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    height: 48px;
    flex-shrink: 0;
}

.amendment-action-row {
    margin-top: 14px;
}

.amendment-ack-btn {
    width: 100%;
    margin-top: 4px;
}

.report-ack-waiting {
    font-size: 13px;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

.ack-waiting-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    display: inline-block;
    flex-shrink: 0;
}

/* --- Parent Home --- */
/* Needs-attention card (rendered only when there are unacknowledged updates) */
.home-attention-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff7ed;
    border: 1px solid #f5cba7;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.home-attention-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--warning-orange);
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.home-attention-text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
}

.home-attention-card .tuition-row-chevron {
    color: var(--warning-orange);
}

/* Recent photos (grouped per child — tap anywhere → Photos tab) */
.home-photo-strip {
    min-height: 60px;
    cursor: pointer;
}

.home-photo-group {
    margin-bottom: 14px;
}

.home-photo-group:last-child {
    margin-bottom: 0;
}

.home-photo-child-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.home-photo-child-classroom {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-lg);
}

.home-photo-grid, .photo-scroll-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.home-photo-grid::-webkit-scrollbar, .photo-scroll-row::-webkit-scrollbar { display: none; }

.home-photo-thumb {
    width: 110px;
    flex-shrink: 0;
    scroll-snap-align: start;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-grey);
    background: var(--bg-light);
    box-shadow: var(--shadow-1);
}

.photo-scroll-thumb {
    width: 110px;
    flex-shrink: 0;
    scroll-snap-align: start;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-grey);
    background: var(--bg-light);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.photo-scroll-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recent-photos-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 14px 0 8px;
}

.student-gallery-card {
    padding: 4px 0 16px;
    border-top: 1px solid #eee;
    margin-top: 16px;
}

.student-gallery-card .recent-photos-heading {
    margin-top: 12px;
}

.empty-state--compact {
    padding: 16px;
    font-size: 13px;
}

/* --- Shared student picker (My Classroom template; forms + photos reuse it) --- */
.student-picker-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    background: white;
    border: 1.5px solid var(--border-grey);
    border-radius: var(--radius-sm);
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
    -webkit-tap-highlight-color: transparent;
}

.student-picker-trigger:focus-visible {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(19, 14, 54, 0.1);
}

.student-picker-trigger.has-student {
    border-color: var(--primary-blue);
}

.student-item.is-selected {
    border-color: var(--primary-blue) !important;
    font-weight: 700;
}

.student-picker-close-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 0;
    margin-top: 6px;
    background: transparent;
    border: none;
    color: var(--text-medium);
    cursor: pointer;
}

.student-picker-close-chevron:hover {
    color: var(--primary-blue);
}

.student-picker-trigger .student-picker-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-picker-trigger .student-picker-label.placeholder {
    color: var(--text-medium);
    font-weight: 500;
}

/* Picker mode: collapsed chip → animated expand (chips fixed, list scrolls).
   Default opens downward below the trigger; `.opens-up` (computed at open
   time when the trigger sits near the bottom of the viewport) flips the
   layout so the panel expands upward above it. */
.student-picker.mode-picker {
    display: flex;
    flex-direction: column;
}

.student-picker.mode-picker.opens-up {
    flex-direction: column-reverse;
}

.student-picker.mode-picker .student-picker-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.student-picker.mode-picker .student-picker-body.open { grid-template-rows: 1fr; }

.student-picker.mode-picker .student-picker-body-inner {
    overflow: hidden;
    min-height: 0;
}

.student-picker.mode-picker .student-select-list {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 8px;
}

/* Full mode (My Classroom): the list fills the view and scrolls under the
   fixed classroom chips. */
.student-picker.mode-full {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.student-picker.mode-full .student-picker-body,
.student-picker.mode-full .student-picker-body-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.student-picker.mode-full .student-select-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* #classroomPicker is the wrapper buildStudentPicker renders the mode-full
   picker into. It must be the flex link in the height chain
   (#teacherClassroomView → .section → #classroomPicker → picker → list), or
   the mode-full picker's flex:1 never bounds the list and the page scrolls
   instead of just the list. */
#teacherClassroomView #classroomPicker {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.student-picker-classrooms { margin-bottom: 8px; }

.student-select-list {
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-md);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-select-list .student-item {
    justify-content: center;
    gap: 8px;
}

.student-item.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.student-item.is-disabled .student-name {
    color: var(--text-medium);
}

.student-disabled-hint {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-medium);
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    white-space: nowrap;
}

/* Photo-count chip in the teacher student picker rows — semitransparent so
   the pastel classroom card shows through; camera icon + 30-day upload count.
   Lives in the right-side trailing group (see .student-row-trailing), so the
   name stays centered and the chip holds its own padding off the row edge. */
.student-photo-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-blue);
    background: rgba(255, 255, 255, 0.32);
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    white-space: nowrap;
}

.student-photo-count svg {
    width: 12px;
    height: 12px;
    flex: none;
}

.student-item.is-disabled .student-photo-count {
    color: var(--text-medium);
}

.report-button-card.expanded .tuition-row-chevron { transform: rotate(90deg); }

.report-button-card .tuition-row-chevron { transition: transform 0.2s ease; }

/* --- Bottom Navigation --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: #ffffff;
    border-top: 1px solid var(--border-grey);
    box-shadow: 0 -2px 12px rgba(19, 14, 54, 0.08);
    z-index: var(--z-nav);
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 4px 8px;
    background: none;
    border: none;
    color: var(--text-medium);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-item svg { width: 24px; height: 24px; }

.nav-item.active { color: var(--primary-blue); }

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-blue);
}

.nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    background: var(--error-red);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .container { padding: 30px 20px; }
    h1 { font-size: 22px; }
    .welcome-text { font-size: 17px; }
    .checkin-status-columns { gap: 8px; }
    .status-column-header { font-size: 12px; padding: 8px 4px; }
    .child-select-btn { padding: 15px; font-size: 16px; }
    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    .photo-tab { padding: 9px 14px; font-size: 13px; }
    .lightbox-arrow { width: 42px; height: 42px; }
    #photoLightbox { padding: 8px; }
    .lightbox-close {
        top: calc(env(safe-area-inset-top, 0px) + 12px);
        right: 10px;
    }
}

/* --- Print: receipt only, matching the PDF margins --- */
@media print {
    @page { margin: 20mm; }
    body * { visibility: hidden; }
    #tuitionReceiptBody, #tuitionReceiptBody * { visibility: visible; }
    #tuitionReceiptBody {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        width: 100%;
    }
    #tuitionReceiptBody .tuition-receipt-page { padding: 0; }
    #tuitionReceiptBody .tuition-receipt { max-width: 100%; box-shadow: none; }
}

/* --- Admin (account lifecycle, all-students, system) --- */
.menu-section-label {
    padding: 14px 20px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #666;
}

.change-view-item { font-weight: 700; }

.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
}

.admin-filter-input {
    flex: 1;
    min-width: 180px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.admin-filter-select {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: #fff;
}

.admin-filter-input:focus, .admin-filter-select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(19, 14, 54, 0.1);
}

/* In-app chip selectors (replace native <select> — no OS picker popup) */
.admin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

/* Photo filter row: the My/All photos chips and the classroom dropdown chip
   share one line. The scope container is display:contents so its buttons
   flow in the row; the classroom container keeps a real box (position
   relative) for its dropdown menu. */
.photo-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

#teacherPhotosScopeChips {
    display: contents;
}

/* Classroom filter for the Recent Photos feed (admin/director): a single
   "All classrooms" chip whose chevron pops a mini dropdown. */
#teacherPhotosClassroomChips {
    position: relative;
    display: inline-flex;
    margin: 0;
}

/* Uploader ("Teacher") filter for the same feed — same chip/dropdown look. */
#teacherPhotosUploaderChips {
    position: relative;
    display: inline-flex;
    margin: 0;
}

.classroom-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.classroom-filter-trigger .chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.15s ease;
}

.classroom-filter-trigger.open .chevron {
    transform: rotate(180deg);
}

.classroom-filter-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--border-grey);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: 4px;
    display: flex;
    flex-direction: column;
}

.classroom-filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

/* 30-day photo count chip inside dropdown options ("Mountain Laurel  [15]"). */
.filter-option-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-medium);
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-option-count svg {
    width: 12px;
    height: 12px;
    flex: none;
}

.classroom-filter-option:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
}

.classroom-filter-option.active {
    color: var(--primary-blue);
    background: rgba(13, 110, 253, 0.08);
}

.admin-chip {
    padding: 7px 12px;
    border: 1px solid #ddd;
    border-radius: var(--radius-pill);
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-chip:hover { border-color: var(--primary-blue); color: var(--primary-blue); }

.admin-chip.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
}

.admin-audit-advanced {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.admin-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-top: 4px;
}

/* In-app dropdown (button + styled popup) — replaces native <select> for
   long/dynamic option lists. */
.admin-dropdown {
    position: relative;
    min-width: 160px;
}

.admin-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.admin-dropdown-toggle:hover { border-color: var(--primary-blue); }

.admin-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
}

.admin-dropdown-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 14px;
    color: #333;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.admin-dropdown-item:hover { background: #f2f0fb; }

.admin-dropdown-item.active {
    background: var(--primary-blue);
    color: #fff;
}

.admin-filter-bar .btn { padding: 10px 18px; }

.admin-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    cursor: pointer;
}

.admin-row-check {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-top: 2px;
    cursor: pointer;
}

.admin-select-all input,
.admin-row-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-blue);
    cursor: pointer;
}

.admin-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #d8e0f0;
    border-radius: 8px;
    background: #f4f7ff;
}

.admin-bulk-count {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-blue);
}

.admin-bulk-bar .btn { padding: 8px 14px; min-height: 40px; }

.admin-system-actions { justify-content: center; }

.admin-dev-launch {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.admin-account-list,
.admin-student-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-account-row {
    padding: 14px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
}

.admin-account-row.row-inactive { opacity: 0.75; background: #fafafa; }

.admin-account-row-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.admin-account-main { flex: 1; min-width: 0; }

.admin-actions-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.admin-actions-toggle:hover { border-color: #bbb; color: #333; }

.admin-actions-toggle.expanded { transform: rotate(180deg); }

.admin-account-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 15px;
}

.admin-account-email { font-size: 13px; color: #666; margin-top: 2px; word-break: break-all; }

.admin-account-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
}

.admin-account-meta em { font-style: italic; color: #c0392b; }

.admin-account-meta em.invite-failed { color: #c0392b; font-weight: 600; }
.admin-account-meta em.invite-sent { color: #1e7d3c; }
.admin-account-meta em.invite-expired { color: #9a6b1f; font-weight: 600; }

.admin-accounts-meta {
    margin-top: 10px;
    font-size: 12px;
    color: #888;
    text-align: center;
}

.admin-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.btn-sm { padding: 7px 12px; font-size: 12px; min-height: 40px; }

.role-badge,
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.role-badge.role-admin { background: #130e36; color: #fff; }
.role-badge.role-teacher { background: #efe9ff; color: #5b3bb0; }
.role-badge.role-parent { background: #e8f4ff; color: #1a6bb5; }

.status-badge.status-active { background: #e2f7e8; color: #1e7d3c; }
.status-badge.status-inactive { background: #fdeaea; color: #c0392b; }
.status-badge.status-pw-set { background: #e2f7e8; color: #1e7d3c; }
.status-badge.status-pw-unset { background: #fdf3e2; color: #9a6b1f; }

.media-release-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.media-release-badge.media-release-ok { background: #e2f7e8; color: #1e7d3c; }
.media-release-badge.media-release-no { background: #fdecea; color: var(--error-red); }
.media-release-badge.media-release-pending { background: #f1f1f3; color: #777; }

.admin-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    cursor: pointer;
}

.admin-toggle-row input { width: 18px; height: 18px; }

.admin-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    margin-bottom: 4px;
}

.admin-checkbox-label input { width: 18px; height: 18px; }

.admin-checkbox-hint {
    display: block;
    font-size: 12px;
    color: var(--text-medium);
    line-height: 1.4;
}

.admin-health-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 16px;
    background: #fff;
}

.admin-health-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
}

.admin-health-row:last-child { border-bottom: none; }

.admin-health-row span { color: #666; }
.admin-health-row strong { text-align: right; }

.admin-audit-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid #f5f5f5;
}

.admin-audit-row:last-child { border-bottom: none; }

.admin-audit-main { min-width: 0; }

.admin-audit-action {
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-audit-meta { color: #888; font-size: 12px; margin-top: 2px; word-break: break-word; }

.admin-audit-time { color: #999; font-size: 11px; white-space: nowrap; margin-left: 12px; }

.feedback-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: 1px;
}

.feedback-badge-issue { background: #fdecea; color: #c0392b; }
.feedback-badge-request { background: #e8f0fe; color: var(--primary-blue); }
.feedback-badge-other { background: #f0f0f0; color: #555; }

.feedback-content {
    color: #333;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    word-break: break-word;
    margin-left: 6px;
}

.feedback-email { margin-left: 8px; }

.admin-report { margin-top: 14px; }

.admin-report .section-title { margin-top: 12px; }

.menu-impersonating-note {
    color: #d32f2f;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 3px;
}

#impersonationBanner {
    position: sticky;
    top: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #b3261e;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

#impersonationBanner .btn {
    padding: 6px 14px;
    font-size: 13px;
    background: #fff;
    color: #b3261e;
    border: none;
    white-space: nowrap;
}

/* ==========================================================================
   Student Detail Card (My Classroom → student tap)
   ========================================================================== */

.detail-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-medium);
    text-align: center;
}

.student-detail-hero {
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin: 14px 0;
    box-shadow: var(--shadow-1);
}

.student-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.student-detail-name {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary-blue);
    font-family: var(--font-display);
}

.student-detail-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.student-detail-chip {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    color: #333;
}

.student-detail-media-row {
    margin-top: 8px;
    text-align: right;
}

.student-detail-facts {
    margin-top: 12px;
    border-top: 1px solid #ececec;
    padding-top: 10px;
}

.student-detail-fact {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
}

.student-detail-fact-label {
    color: var(--text-medium);
    font-weight: 600;
    flex-shrink: 0;
    min-width: 70px;
}

.student-detail-fact-content {
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 0;
}

.student-detail-fact-value {
    color: var(--text-dark);
    overflow-wrap: break-word;
    word-break: normal;
}

.student-detail-fact-value--name {
    font-weight: 500;
}

.student-detail-fact-extra {
    flex-shrink: 0;
    text-align: right;
    color: var(--text-dark);
}

/* Parent phones are the primary reading target, so they render larger
   than everything else in the facts block. */
.student-detail-fact-phone {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: 0.5px;
}

.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 14px 0 24px;
}

.modal-content.form-modal { text-align: left; }

.modal-content.form-modal .modal-title { margin-bottom: 18px; }

.modal-content .modal-subtitle {
    font-size: 14px;
    color: var(--text-medium);
    margin: -10px 0 18px;
}

.form-modal .modal-buttons { justify-content: flex-end; }

.form-modal .modal-buttons .btn { flex: 0 1 auto; min-width: 130px; }

.detail-upload-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

/* ==========================================================================
   Classroom switcher (admin, in-app chips — no system UI)
   ========================================================================== */

.classroom-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.classroom-chip {
    border: 1px solid var(--border-grey);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
}

.classroom-chip.active {
    background: var(--chip-color, #e0e0e0);
    border-color: var(--chip-color, #e0e0e0);
    color: #1a1a2e;
}

/* ==========================================================================
   Classroom student list rows (classroom-colored accent bar)
   ========================================================================== */

/* ==========================================================================
   Classroom student list rows (classroom-colored pastel cards — matches the
   check-in status columns; the list box fits the screen and scrolls
   internally so the page itself never scrolls in this view)
   ========================================================================== */

#teacherClassroomView {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#teacherClassroomView .section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}

.students-list .classroom-student {
    transition: filter 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.students-list .classroom-student:hover {
    filter: brightness(0.96);
    transform: translateX(2px);
}

.students-list .classroom-student:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 1px;
}

.note-item {
    background: white;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(19, 14, 54, 0.05);
}

.note-meta {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-medium);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.note-student {
    color: var(--primary-blue);
}

.note-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dark);
    white-space: pre-wrap;
    word-break: break-word;
}

.note-delete {
    margin-top: 8px;
    background: none;
    border: none;
    color: var(--error-red);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

/* --- Voice notes --- */
.voice-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.voice-preview audio { flex: 1; min-width: 180px; height: 40px; }

.voice-timer {
    font-weight: 700;
    color: var(--error-red);
    font-variant-numeric: tabular-nums;
}

/* Bottom action bars (Notes tab + Reports tab): the card-style action button
   fixed above the bottom nav, with an optional trailing FAB. Each bar lives
   inside its view's list sub-view, so it hides automatically in form/edit
   views. */
#notesListView { padding-bottom: 180px; }
#reportListView { padding-bottom: 150px; }

.bottom-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(249, 249, 249, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--z-nav);
}

.bottom-action-bar .report-button-card {
    flex: 1;
    min-width: 0;
    padding: 16px;
}

.voice-fab {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--error-red);
    color: white;
    border: none;
    box-shadow: 0 6px 20px rgba(192, 57, 43, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.voice-fab svg { width: 26px; height: 26px; }

.voice-fab:hover { background: #a93226; }

.voice-fab:active { transform: scale(0.92); }

/* Recording popup — enter via the Jakub recipe (opacity + rise + blur-in,
   240ms, custom ease-out). Exits are instant (display toggle), which suits
   the modal pattern. Applies to every .modal-content for consistency. */
.voice-record-content {
    max-width: 360px;
}

.modal.show .modal-content {
    animation: popup-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes popup-enter {
    from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.voice-record-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}

.voice-record-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--error-red);
    flex-shrink: 0;
}

.voice-record-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--text-dark);
}

.voice-waveform {
    width: 100%;
    height: 96px;
    display: block;
    margin: 12px auto 4px;
}

.voice-record-timer {
    font-size: 20px;
    text-align: center;
    margin: 4px 0 2px;
}

.voice-record-content .modal-buttons { justify-content: center; }

.note-audio { margin-bottom: 8px; }

.note-audio audio { width: 100%; height: 40px; }

.note-ai-pending {
    font-size: 13px;
    color: var(--text-medium);
    font-style: italic;
    margin-bottom: 8px;
}

.note-ai-block {
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.note-ai-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-medium);
    margin-bottom: 4px;
}

.note-ai-block p {
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.5;
    margin: 0 0 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

.note-ai-block p:last-child { margin-bottom: 0; }

.note-actions {
    display: flex;
    gap: 14px;
    margin-top: 8px;
}

.note-edit {
    margin-top: 8px;
    background: none;
    border: none;
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

/* --- Utilities --- */
.mt-sm { margin-top: var(--space-3) !important; }
.mt-md { margin-top: var(--space-4) !important; }
.mt-lg { margin-top: var(--space-6) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.w-full { width: 100% !important; }
.text-center { text-align: center !important; }
.flex-center { justify-content: center !important; }
.container--narrow { max-width: 500px; }

/* --- Admin Emails tab --- */
.admin-email-card {
    background: white;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 12px;
}

.admin-email-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.admin-email-card-title {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 15px;
}

.admin-email-card-desc {
    font-size: 13px;
    color: var(--text-medium);
    line-height: 1.45;
    margin-bottom: 6px;
}

.admin-email-card-subject {
    font-size: 13px;
    color: var(--text-dark);
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 12px;
    word-break: break-word;
}

.admin-email-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-email-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    background: #e8edff;
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
}

.admin-email-badge.admin-email-badge-custom {
    background: #fff3cd;
    color: #856404;
    border-color: #856404;
}

.admin-email-vars {
    font-size: 12px;
    color: var(--text-medium);
    margin: 2px 0 14px;
    line-height: 1.5;
}

.admin-email-vars code {
    background: #eef0f7;
    color: var(--primary-blue);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
}

.admin-emails-subtitle {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-medium);
    margin: 18px 0 10px;
}

.admin-email-preview-subject {
    font-weight: 700;
    color: var(--text-dark);
    background: var(--bg-light);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 12px;
    word-break: break-word;
    text-align: left;
}

.admin-email-preview-body {
    text-align: left;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-sm);
    padding: 16px;
    max-height: 50vh;
    overflow-y: auto;
    background: #fff;
}

.admin-email-preview-body p { margin: 0 0 12px; }
.admin-email-preview-body a { color: var(--primary-blue); }

/* --- PWA Install Help modal --- */
.install-help-body {
    text-align: left;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-dark);
    margin: 10px 0 4px;
}

.install-help-body ol {
    padding-left: 22px;
    margin: 10px 0;
}

.install-help-body li { margin-bottom: 6px; }

/* --- Dismissal Authorizations (parent-managed) --- */
.report-type-tag[data-type="dismissal"] {
    background: #6b21a8;
}

#dismissalRevokeModal .custom-modal-content .modal-title {
    margin: 0 0 8px;
    font-size: 19px;
}

#dismissalsViewParent .detail-hint {
    margin: 8px 0 18px 0;
}

/* Person cards (manage list) */
.dismissal-person-card {
    background: white;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-1);
}

.dismissal-person-card.revoked {
    background: var(--bg-light);
    opacity: 0.6;
}

.dismissal-person-card.revoked .dismissal-person-name {
    text-decoration: line-through;
}

.dismissal-person-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.dismissal-person-name-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.dismissal-person-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    word-break: break-word;
}

.dismissal-person-meta {
    font-size: 13px;
    color: var(--text-medium);
    margin-bottom: 8px;
}

.dismissal-schedule-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.dismissal-day-chip {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    background: #eef0f7;
    color: var(--primary-blue);
}

.dismissal-any-day {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-medium);
}

.dismissal-person-children {
    font-size: 13px;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.dismissal-dl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.dismissal-dl-thumb {
    width: 64px;
    height: 44px;
    object-fit: cover;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-sm);
}

.dismissal-dl-label {
    font-size: 12px;
    color: var(--text-medium);
}

.dismissal-person-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.dismissal-person-btn { flex: 0 0 auto; }

.dismissal-action-col {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    gap: 3px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 150ms ease, transform 100ms ease;
}

.dismissal-action-col:hover {
    opacity: 0.8;
}

.dismissal-action-col:active {
    transform: scale(0.92);
}

.dismissal-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.dismissal-icon-wrap svg {
    width: 20px;
    height: 20px;
    display: block;
}

.dismissal-edit-icon {
    color: var(--text-medium);
}

.dismissal-action-col:hover .dismissal-edit-icon {
    color: var(--primary-blue);
}

.dismissal-revoke-icon {
    color: #e63946;
}

.dismissal-action-col:hover .dismissal-revoke-icon {
    color: #c9182b;
}

.dismissal-action-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-medium);
    line-height: 1;
}

.dismissal-action-label-red {
    color: #e63946;
}

.dismissal-form-dl-preview-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.dismissal-form-dl-thumb {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius-md);
    display: block;
    box-shadow: var(--shadow-1);
    background: #f8f9fc;
}

.dismissal-form-dl-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e63946;
    color: white;
    border: 2px solid white;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    padding: 0;
    transition: transform 100ms ease, background 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.dismissal-form-dl-remove:hover {
    background: #c9182b;
    transform: scale(1.1);
}

/* Form: weekday schedule chips (hidden checkbox + .selected label, same
   pattern as the shared student chips) */
.dismissal-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dismissal-day-chip-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1.5px solid var(--border-grey);
    border-radius: var(--radius-pill);
    background: white;
    color: var(--text-medium);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.dismissal-day-chip-label input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.dismissal-day-chip-label.selected {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.dismissal-day-chip-label:focus-within {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(19, 14, 54, 0.1);
}

/* Form: Occasional / Blanket radio options */
.dismissal-auth-type {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dismissal-auth-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-grey);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.dismissal-auth-option input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--primary-blue);
}

.dismissal-auth-option.selected {
    border-color: var(--primary-blue);
    background: #f4f3fa;
}

.dismissal-auth-option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dismissal-auth-option-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.dismissal-auth-option-sub {
    font-size: 12px;
    color: var(--text-medium);
}

.dismissal-dl-note {
    font-size: 12px;
    color: var(--text-medium);
    margin-top: 6px;
}

/* Form: sibling multi-select */
.dismissal-siblings-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dismissal-sibling-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-grey);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    -webkit-tap-highlight-color: transparent;
}

.dismissal-sibling-check input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--primary-blue);
}

/* Admin Students view: both parents share one email (second-parent
   approvals are skipped for that family) */
.shared-email-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    background: #f3f3f3;
    color: var(--text-medium);
    border: 1px solid #ccc;
}

/* --- Reduced motion: respect user preference (all animations off, final
   states preserved — the waveform renders a static frame in JS) --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}