/* Reusable component states shared by the PHP screens. */
.app-shell { min-height: 100dvh; background: var(--color-canvas); }
.app-shell .site-header { width: calc(100% - 48px); max-width: 1440px; padding-bottom: 16px; }
.app-shell .site-footer { max-width: 1440px; }
.app-shell main { width: calc(100% - 48px); max-width: 1440px; margin: 0 auto; }
.app-shell .app-sidebar { background: var(--color-paper); }
.app-shell .brand { letter-spacing: -.025em; }
.app-shell .brand-logo { width: 38px; height: 38px; }
.app-shell .site-footer { margin-top: 20px; }

.status, .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: .66rem;
    font-weight: 700;
}
.status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ''; }
.status-warning, .badge-upcoming { background: var(--color-accent-soft); color: var(--color-warning); }
.status-error, .badge-expired { background: #f5e1d9; color: var(--color-danger); }
.loading-block {
    min-height: 1rem;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--color-canvas-deep), var(--color-paper), var(--color-canvas-deep));
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s ease-in-out infinite;
}
@keyframes loading-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.error-state { padding: 18px; border-radius: var(--radius-card); background: #f5e1d9; color: var(--color-danger); }
.empty-state {
    padding: 30px 22px;
    border: 1px dashed rgba(18, 63, 66, .25);
    border-radius: var(--radius-card);
    background: rgba(255, 254, 250, .7);
    color: var(--color-muted);
}
.empty-state strong { display: block; margin-bottom: 4px; color: var(--color-primary-strong); font-family: var(--font-display); font-size: 1.2rem; }
.empty-inline { padding: 25px 0 5px; color: var(--color-muted); font-size: .9rem; }
.data-table-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper); }
.data-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .82rem; }
.data-table th, .data-table td { padding: 13px 16px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.data-table th { background: var(--color-canvas-deep); color: var(--color-muted); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: 0; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(11, 47, 50, .48); }
.modal-panel { width: min(100%, 560px); max-height: min(720px, calc(100vh - 40px)); overflow: auto; padding: 26px; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: min(360px, calc(100% - 40px)); padding: 13px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); color: var(--color-ink); }
.toast-success { border-color: #9abca4; }
.toast-error { border-color: #dfaa99; color: var(--color-danger); }
.text-button { border: 0; background: transparent; color: var(--color-primary); cursor: pointer; font-weight: 700; }
.ai-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 18px; }
.ai-card, .ai-guidance, .school-picker-grid > *, .quiz-question { padding: 22px; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper); }
.assistant-response, .ai-answer { padding: 18px; border-radius: var(--radius-control); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.ai-form { display: grid; gap: 12px; }
.video-frame { overflow: hidden; border-radius: var(--radius-card); background: var(--color-primary-strong); }
.video-frame iframe, .video-frame video { display: block; width: 100%; min-height: 340px; border: 0; }

@media (min-width: 1101px) {
    .app-shell .site-header { padding-left: 280px; }
    .app-shell main, .app-shell .site-footer { width: calc(100% - 320px); max-width: 1180px; margin-right: 24px; margin-left: 286px; }
}
@media (max-width: 1100px) { .app-sidebar { top: 76px; left: 16px; } }
@media (max-width: 850px) { .ai-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .app-shell .site-header, .app-shell main { width: calc(100% - 32px); }
    .app-shell .site-header { flex-wrap: wrap; gap: 12px; }
    .app-shell .nav-toggle { display: inline-flex; margin-left: auto; }
    .app-shell .top-nav { order: 3; justify-content: flex-end; width: 100%; }
    .app-shell .top-nav a:first-child { display: inline-flex; }
    .video-frame iframe, .video-frame video { min-height: 230px; }
}
@media (prefers-reduced-motion: reduce) { .loading-block { animation: none; } }