/**
 * assets/css/components.css
 * Component-level styles, added incrementally as each component is built.
 * Currently covers: site header brand/logo/tagline, WhatsApp button (Step 2.1).
 */

/* ---------------------------------------------------------------------------
   HEADER — BASE ROW LAYOUT (Step 15.6)
   Real bug found on an actual phone (not just the DevTools emulator): the
   header's logo/name/tagline and the hamburger toggle were stacking on
   separate lines instead of sitting side by side, and a separate 480px rule
   was then force-truncating the name to fit ("...Om-Albraa Quran & AR...").
   Root cause: `.site-header` was never actually given `display:flex` by
   anything in this stylesheet — that was expected to come from
   assets/css/layout.css (see the Step 15.3 note below), but evidently isn't
   reaching the browser on the live site. Rather than patch around a file
   this session can't see, `.site-header` now owns its own base row layout
   here: logo+name+tagline on one side (free to wrap onto a second line —
   no more ellipsis truncation, so the full center name always shows), the
   hamburger pinned to the other side and vertically centered against
   however many lines the brand text takes. Works whether or not
   layout.css ends up defining `.site-header` too, since these are loaded
   last and match on the same selector.
--------------------------------------------------------------------------- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: var(--space-3);
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex: 1 1 auto;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   HEADER BRAND
--------------------------------------------------------------------------- */
.site-header__logo {
    height: 40px;
    width: auto;
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
}

/* Step 15.10: the 72px mobile logo (Step 15.7) was eating so much of
   `.site-header__brand`'s width that the center name itself was wrapping
   onto 3 lines instead of 2 (name spilling to a 2nd line + tagline on a
   3rd). Sized down to 40px — same as desktop — which frees up the width
   the text needs to fit its title on 2 lines: name on one line (or wrapping
   to at most 2) plus the tagline. Still scoped to the same 768px breakpoint
   as everything else in this file. */
@media (max-width: 768px) {
    .site-header__logo {
        height: 40px;
    }
}

.site-header__brand-text {
    display: flex;
    flex-direction: column;
    line-height: var(--lh-tight);
    min-width: 0;
}

.site-header__name {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    color: var(--color-text);
}

.site-header__tagline {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   WHATSAPP BUTTON (reusable across header, hero, jobs, pricing, etc.)
--------------------------------------------------------------------------- */
.whatsapp-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: background-color var(--transition-fast);
}

.whatsapp-button:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-inverse);
}

.whatsapp-button--header {
    /* header-specific tweaks, if any, added here as the design evolves */
}

/* ---------------------------------------------------------------------------
   ICON-ONLY WHATSAPP BUTTON (Step 15.3)
   Used by the header and floating buttons (includes/whatsapp.php) instead of
   the icon + text pill: a small circular button with the official WhatsApp
   glyph, background locked to WhatsApp's own green so it stays instantly
   recognizable regardless of the site's primary color. The text label is
   still in the DOM (for screen readers) but visually hidden here — see
   .whatsapp-button__label below.
--------------------------------------------------------------------------- */
.whatsapp-button--icon-only {
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    flex: 0 0 auto;
    background-color: #25D366;
}

.whatsapp-button--icon-only:hover {
    background-color: #1DA851;
}

.whatsapp-button--icon-only .whatsapp-button__icon {
    width: 24px;
    height: 24px;
    color: #ffffff;
}

/* Visually hidden but still readable by screen readers/assistive tech —
   standard "sr-only" pattern (content removed from layout flow, clipped to
   1px, so it never affects the button's circular size). */
.whatsapp-button--icon-only .whatsapp-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .whatsapp-button--icon-only {
        width: 40px;
        height: 40px;
    }

    .whatsapp-button--icon-only .whatsapp-button__icon {
        width: 22px;
        height: 22px;
    }
}

/* ---------------------------------------------------------------------------
   SITE HEADER — SMALL-SCREEN LAYOUT SAFETY (Step 15.3, superseded 15.6)
   The truncation rules that used to live here (forcing the name/tagline
   onto one line with an ellipsis) were removed once `.site-header` got its
   own proper base flex layout above (Step 15.6) — the name now wraps onto
   a second line instead of being cut off, which is what actually shows the
   center's full name on narrow phones.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   SOCIAL BAR (Step 15.5)
   Reported bug: the icon-only WhatsApp button living inside
   `.site-header__actions` (see whatsapp_header_button() in
   includes/whatsapp.php) still crowds/covers the center name on narrow
   phones. Fix: hide that button under 768px and show this bar instead —
   includes/header.php renders it (via render_social_bar(), see
   includes/social_links.php) as a sibling right after `</header>`, so it
   sits between the header and the hero section instead of competing for
   space inside the header itself. Right-aligned and only as tall as the
   icons themselves, so it reads as a slim strip, not a full-width section
   of its own — and it lists every configured network (WhatsApp plus
   whatever the center adds in Admin Settings), not just WhatsApp.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .site-header__actions .whatsapp-button--header {
        display: none;
    }
}

.social-bar {
    display: none;
}

@media (max-width: 768px) {
    .social-bar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
    }
}

.social-bar__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    color: #ffffff;
    transition: opacity var(--transition-fast);
}

.social-bar__link:hover {
    opacity: 0.85;
}

.social-bar__link--whatsapp  { background-color: #25D366; }
.social-bar__link--facebook  { background-color: #1877F2; }
.social-bar__link--instagram { background-color: #E1306C; }
.social-bar__link--youtube   { background-color: #FF0000; }

/* ---------------------------------------------------------------------------
   SIDEBAR NAV LINKS + ICONS (Step 2.2)
--------------------------------------------------------------------------- */
.sidebar__nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sidebar__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: currentColor;
}

/* ---------------------------------------------------------------------------
   SIDEBAR COLLAPSE/EXPAND — ICON RAIL (Step 15.11)
   `.sidebar__toggle` (button markup in includes/sidebar.php) toggles
   `.sidebar--collapsed` on the `<aside>` itself and `.page-wrapper--sidebar-
   collapsed` on the parent grid (layout.css) via initSidebarAccordion() in
   assets/js/main.js. Previously this only shrank `.sidebar__nav`'s height
   (a vertical accordion) while the sidebar's own column stayed a fixed
   width — per feedback that didn't actually give the page content any more
   room. Now collapsing narrows the whole rail to 60px (matching
   `.page-wrapper--sidebar-collapsed` in layout.css) so main content expands
   into the freed space, with the nav links and toggle label faded out
   (rather than display:none, so the width transition stays smooth) and
   just the toggle button left as a centered icon to reopen it.
--------------------------------------------------------------------------- */
.sidebar {
    transition: padding var(--transition-base);
}

.sidebar__toggle:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.sidebar__toggle-label,
.sidebar__nav {
    transition: opacity var(--transition-fast);
}

.sidebar__nav ul {
    overflow: hidden;
}

.sidebar--collapsed {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.sidebar--collapsed .sidebar__toggle {
    justify-content: center;
}

.sidebar--collapsed .sidebar__toggle-label {
    display: none;
}

.sidebar--collapsed .sidebar__toggle-icon {
    transform: rotate(-90deg);
}

.sidebar--collapsed .sidebar__nav {
    opacity: 0;
    pointer-events: none;
    /* Content is still laid out (not display:none) for exactly as long as
       the width transition takes, then removed from flow entirely so it
       can't be tabbed into or overflow the 60px rail once collapsed. */
    transition: opacity var(--transition-fast), visibility 0s var(--transition-base);
    visibility: hidden;
}

/* ---------------------------------------------------------------------------
   SIDEBAR — SMALL-SCREEN SAFETY NET (Step 15.4)
   Reported bug: on narrow screens the desktop `.sidebar` (an unordered list
   of nav links, see includes/sidebar.php) was rendering in normal page flow
   instead of being replaced by the hamburger + `.mobile-menu` panel, so both
   navs showed at once and the page looked like the raw, unstyled desktop
   markup. `.sidebar`'s base display/positioning belongs to layout.css (it
   owns `.page-wrapper`'s side-by-side grid), so this rule doesn't touch that
   — it only guarantees the sidebar is hidden under the same 768px breakpoint
   every other mobile-only/desktop-only rule in this file already uses.
   Loaded after layout.css, so this applies regardless of layout.css's own
   rules for `.sidebar` (or their absence).
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sidebar {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------
   MOBILE MENU TOGGLE + PANEL (Step 2.3)
   Toggle button is desktop-hidden; only shown under the 768px breakpoint,
   where it replaces the (also-hidden-there) desktop sidebar navigation.
   Bug fix (Step 15.2): this block used to be keyed off `.hamburger-toggle`,
   a class that was never actually present in includes/header.php's markup
   (the real button uses `.mobile-menu-toggle`, per assets/js/main.js's
   querySelector and includes/header.php's <button> class). That mismatch
   meant the button was never hidden on desktop/tablet and its inline SVG
   icon had no explicit size, so it could render at the browser's default
   SVG intrinsic size on every breakpoint. Renamed every selector below to
   `.mobile-menu-toggle` to match the real markup, and replaced the old
   (equally unused — header.php's icon is one static SVG, not three
   `.hamburger-toggle__bar` elements) hamburger-morph rules with simple
   icon sizing instead.
--------------------------------------------------------------------------- */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.mobile-menu-toggle svg {
    width: 22px;
    height: 22px;
}

.mobile-menu-toggle:hover {
    background-color: var(--color-primary-light);
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
}

/* ---------------------------------------------------------------------------
   MOBILE MENU PANEL (Step 2.3)
   Bug fix (Step 15.2): includes/sidebar.php has rendered `#mobile-menu` /
   `.mobile-menu__nav` since Step 2.3, but no CSS ever styled them — the
   panel had no positioning, sizing, or link styles, so opening it (JS
   removes the `hidden` attribute) would have dropped an unstyled `<nav>`
   into normal page flow instead of showing an overlay panel. Added: a
   fixed full-height slide-in panel from the right, hidden outside the
   mobile breakpoint (defense in depth alongside the `hidden` attribute
   assets/js/main.js already manages), plus nav-link styling reusing the
   sidebar's look, plus a scrim behind it so the underlying page content
   is visibly dimmed while it's open.
--------------------------------------------------------------------------- */
.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 200;
        width: min(320px, 85vw);
        height: 100vh;
        overflow-y: auto;
        background-color: var(--color-surface);
        box-shadow: var(--shadow-lg);
        padding: var(--space-5) var(--space-4);
        transform: translateX(100%);
        transition: transform var(--transition-base);
    }

    .mobile-menu.is-open {
        transform: translateX(0);
    }

    /* Dim the page behind the open panel; sits below the panel (z-index 200)
       but above everything else, including the floating WhatsApp button
       (already hidden while the menu is open, per the rule below). */
    .mobile-menu.is-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background-color: rgba(31, 42, 36, 0.4);
    }
}

.mobile-menu__nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mobile-menu__nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-menu__nav a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.mobile-menu__close {
    display: block;
    margin-left: auto;
    margin-bottom: var(--space-5);
    width: 36px;
    height: 36px;
    font-size: var(--fs-xl);
    line-height: 1;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
}

.mobile-menu__close:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* ---------------------------------------------------------------------------
   SITE FOOTER (Step 15.9)
   includes/footer.php's markup (.site-footer / .site-footer__inner /
   .site-footer__contact / .site-footer__social / .site-footer__copyright)
   has rendered real contact info since Step 17.1b but was never actually
   styled anywhere in this file — it fell back to the browser's default
   block layout, so the email/social row and the copyright line both sat
   flush to the start edge instead of reading as a centered footer. Adding
   the missing rules here: everything stacks and centers, with the
   email + social icons sharing one centered row once there's room.
--------------------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-8);
    padding: var(--space-6) var(--space-4);
    text-align: center;
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 1280px;
    margin: 0 auto;
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

@media (min-width: 480px) {
    .site-footer__contact {
        flex-direction: row;
        justify-content: center;
    }
}

.site-footer__email {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-decoration: none;
}

.site-footer__email:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.site-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-footer__social-link:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.site-footer__copyright {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   FLOATING WHATSAPP BUTTON (Step 2.3) — mobile only
   Reuses the base .whatsapp-button styles; this modifier repositions it as a
   fixed circular pill in the bottom-right corner, above the mobile menu but
   below the mobile menu overlay so it doesn't float over the open panel.
--------------------------------------------------------------------------- */
.whatsapp-button--floating {
    display: none;
}

@media (max-width: 768px) {
    .whatsapp-button--floating {
        display: inline-flex;
        position: fixed;
        bottom: var(--space-5);
        right: var(--space-5);
        z-index: 150;
        box-shadow: var(--shadow-lg);
    }

    /* Hide the floating button while the full mobile menu is open, so the
       two mobile-only controls never visually overlap. */
    body.mobile-menu-open .whatsapp-button--floating {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   HERO SECTION (Step 3.1)
   Two distinct states, per the brief: an uploaded image (no text overlay) or
   a clean text-only fallback when no hero image is configured/enabled.
--------------------------------------------------------------------------- */
.hero {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hero--image .hero__picture {
    display: block;
    width: 100%;
}

.hero__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

.hero--text .hero__fallback {
    background-color: var(--color-primary-light);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.hero__fallback-title {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-3);
}

.hero__fallback-subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-md);
}

@media (max-width: 768px) {
    .hero__image {
        max-height: 320px;
    }

    .hero--text .hero__fallback {
        padding: var(--space-8) var(--space-4);
    }
}

/* ---------------------------------------------------------------------------
   ADMIN — SHARED FORM STYLES (Step 3.2)
   Minimal, reusable admin form chrome (no dedicated admin CSS file per the
   locked folder structure). Every future admin CRUD page (Phases 4-13)
   should reuse these classes rather than inventing new ones. Admin pages are
   intentionally self-contained HTML (no shared admin header/nav yet) — a
   proper admin layout partial is deferred until Phase 12 (Admin
   Authentication) gives us a real page to wrap it around.
--------------------------------------------------------------------------- */
.admin-body {
    background-color: var(--color-bg);
}

.admin-main {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
}

.admin-main--dashboard {
    max-width: 960px;
}

/* Shared admin navigation (Step 17.1) — includes/admin_nav.php */
.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.admin-nav__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
}

.admin-nav__extra {
    display: flex;
    gap: var(--space-1);
}

.admin-nav__link {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--color-text);
    text-decoration: none;
}

.admin-nav__link:hover {
    background-color: var(--color-surface);
}

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

.admin-nav__link--ghost {
    color: var(--color-text-muted);
}

.admin-dashboard__welcome {
    color: var(--color-text-muted);
}

.admin-alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
}

.admin-alert--success {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.admin-alert--error {
    background-color: #FBEAE8;
    color: var(--color-danger);
}

/* Same visual treatment as .admin-alert, under the class names the
   login/settings/reset-password forms actually use for inline messages. */
.admin-form__success {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.admin-form__error {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    font-size: var(--fs-sm);
    background-color: #FBEAE8;
    color: var(--color-danger);
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.admin-form__group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.admin-form__group legend {
    font-weight: var(--fw-semibold);
    padding: 0 var(--space-2);
}

.admin-form__preview {
    max-width: 240px;
    max-height: 140px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.admin-form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.admin-form__hint {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.admin-form__input,
.admin-form__textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    resize: vertical;
}

.admin-form__input:focus-visible,
.admin-form__textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.admin-form__submit {
    align-self: flex-start;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.admin-form__submit:hover {
    background-color: var(--color-primary-dark);
}

/* ---------------------------------------------------------------------------
   ADMIN LOGIN (Step 14.1) — admin/login.php
--------------------------------------------------------------------------- */
.admin-login-body {
    background-color: var(--color-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-login {
    width: 100%;
    padding: var(--space-6) var(--space-5);
}

.admin-login__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.admin-login__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    text-align: center;
    margin-bottom: var(--space-2);
}

.admin-login__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.admin-login__input {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    font-family: var(--font-body);
    font-size: var(--fs-base);
}

.admin-login__input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.admin-login__error {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    background-color: #FBEAE8;
    color: var(--color-danger);
}

.admin-login__submit {
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.admin-login__submit:hover {
    background-color: var(--color-primary-dark);
}

.admin-login__forgot {
    text-align: center;
    font-size: var(--fs-sm);
}

.admin-login__forgot-link {
    background: none;
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.admin-login__forgot-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.admin-login__card {
    width: 100%;
    max-width: 360px;
    margin: var(--space-5) auto 0;
    padding: var(--space-6);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ---------------------------------------------------------------------------
   MODAL OVERLAY (Step 14.1) — reusable for the forgot-password panel
   (admin/login.php) and the change-password panel (admin/settings.php).
   Rendered in the DOM at all times; JS just toggles the "is-open" class so
   these pages work with no framework and a few lines of vanilla JS.
--------------------------------------------------------------------------- */
.admin-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: 100;
}

.admin-modal-overlay.is-open {
    display: flex;
}

.admin-modal {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-6);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.admin-modal__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    padding-right: var(--space-8);
}

.admin-modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 32px;
    height: 32px;
    line-height: 1;
    font-size: var(--fs-xl);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    background: none;
}

.admin-modal__close:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.admin-modal__text {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   ABOUT SECTION (Step 4.1)
--------------------------------------------------------------------------- */
.about__title {
    margin-bottom: var(--space-5);
}

.about__description {
    color: var(--color-text);
    margin-bottom: var(--space-6);
    max-width: 70ch;
}

.about__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.about__card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.about__card-title {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-2);
}

@media (max-width: 768px) {
    .about__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   PROGRAMS SECTION (Step 5.1)
--------------------------------------------------------------------------- */
.programs__title {
    margin-bottom: var(--space-6);
}

.programs__empty {
    color: var(--color-text-muted);
}

.programs__category {
    margin-bottom: var(--space-8);
}

.programs__category:last-child {
    margin-bottom: 0;
}

.programs__category-title {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-4);
}

.programs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.program-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.program-card__image {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.program-card__body {
    padding: var(--space-4);
}

.program-card__name {
    margin-bottom: var(--space-2);
}

.program-card__description {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

@media (max-width: 1024px) {
    .programs__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .programs__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   ADMIN — LIST / TABLE VIEW (Step 5.2)
   First admin page with a list view (previous CRUD pages — Hero, About —
   were single-row forms only). Reuses .admin-body/.admin-main/.admin-alert
   from Step 3.2; adds table + toolbar + status badge + inline action forms.
   Later CRUD phases (Teachers, Jobs, Pricing, Policies, Students, Classes)
   should reuse these same classes rather than inventing new ones.
--------------------------------------------------------------------------- */
.admin-main--list {
    max-width: 900px;
}

.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
}

.admin-btn {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.admin-btn:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-inverse);
}

.admin-btn--link {
    background: none;
    color: var(--color-primary);
    padding: 0;
    font-weight: var(--fw-medium);
}

.admin-btn--link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.admin-list-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Bug fix (Step 15.2): admin list tables (Jobs/Policies/Programs/Teachers/
   Classes/Students) have several columns and no minimum column widths, so on
   narrow phone viewports they were overflowing the .admin-main container and
   causing the whole admin page to scroll horizontally. Wrap the <table> in
   an element with this class (see the 6 admin/*.php list views) so only the
   table itself scrolls — same pattern already used for the public Pricing
   tables via .pricing-table__wrapper. The table keeps its own border/radius/
   overflow:hidden for corner-clipping; this wrapper only adds the scroll. */
.admin-table-wrapper {
    overflow-x: auto;
}

.admin-list-table th,
.admin-list-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
}

.admin-list-table th {
    background-color: var(--color-bg);
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
}

.admin-list-table tr:last-child td {
    border-bottom: none;
}

.admin-list__empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
}

.admin-badge {
    display: inline-block;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}

.admin-badge--active {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.admin-badge--inactive {
    background-color: var(--color-border);
    color: var(--color-text-muted);
}

.admin-badge--alert {
    /* Step 9 — same tint/token pair as .admin-alert--error above, reused
       rather than introducing a new color for the "Review Recommended"
       alert badges on admin/evaluation-alerts.php (no new branding). */
    background-color: #FBEAE8;
    color: var(--color-danger);
}

.admin-list__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    white-space: nowrap;
}

.admin-list__actions form {
    display: inline;
}

/* ---------------------------------------------------------------------------
   ADMIN REORDER BUTTONS (Step 9.2 — policies up/down)
--------------------------------------------------------------------------- */
.admin-reorder {
    display: flex;
    gap: var(--space-1);
}

.admin-reorder__btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: 1;
}

.admin-reorder__btn:hover:not(:disabled) {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.admin-reorder__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.admin-form__thumb {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------------
   TEACHERS SECTION (Step 6.1)
   Same grouped-grid pattern as Programs (Step 5.1): a title, then one
   sub-heading + card grid per group (Male / Female here, vs. per-category
   there). Reuses .programs__grid's responsive column logic at the same
   breakpoints for consistency.
--------------------------------------------------------------------------- */
.teachers__title {
    margin-bottom: var(--space-6);
}

.teachers__empty {
    color: var(--color-text-muted);
}

.teachers__group {
    margin-bottom: var(--space-8);
}

.teachers__group:last-child {
    margin-bottom: 0;
}

.teachers__group-title {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-4);
}

.teachers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.teacher-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

/* Step 6.3: fixed circular frame, centered above the card body. Uses
   object-fit: contain (not cover) so the uploaded photo is never cropped —
   any empty space inside the circle is filled by the frame's background
   instead of cutting off part of the image. No border, per design request. */
.teacher-card__photo-wrap {
    width: 140px;
    height: 140px;
    margin: var(--space-5) auto 0;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--color-primary-light);
    flex-shrink: 0;
}

.teacher-card__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.teacher-card__photo--placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-primary-light);
}

.teacher-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.teacher-card__name {
    margin-bottom: var(--space-1);
}

.teacher-card__specialization {
    color: var(--color-primary-dark);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
}

/* Step 6.3: description ("qualifications") clamped to 3 lines by default —
   with up to 20 teachers on the page, showing the full text for everyone
   would make the section very long. JS (assets/js/main.js) reveals the
   Read more button only when the text actually overflows 3 lines, and
   toggles the --expanded class to show/hide the rest. */
.teacher-card__qualifications {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0;
}

.teacher-card__qualifications--expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.teacher-card__more-btn {
    display: none; /* shown by JS only when the text is actually clamped */
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    cursor: pointer;
}

.teacher-card__more-btn:hover,
.teacher-card__more-btn:focus-visible {
    color: var(--color-primary);
}

.teacher-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
}

@media (max-width: 1024px) {
    .teachers__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .teachers__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   ADMIN — CHECKBOX MULTI-SELECT LIST (Step 6.2b)
   Used for Teachers' "Assigned Programs" field. Plain checkboxes in a
   scrollable box — no library, per the "no unnecessary dependencies" rule.
   Reuse for any future admin many-to-many field (e.g. if Pricing/Policies
   ever need something similar).
--------------------------------------------------------------------------- */
.admin-form__checkbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 220px;
    overflow-y: auto;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
}

/* ---------------------------------------------------------------------------
   JOBS SECTION (Step 7.1)
   Stacked list rather than a grid (job.program-card/teacher-card grid) —
   postings carry more text (description/requirements) so a card grid would
   cramp readability. Reuses .admin-btn for the Apply link's look when the
   method is email; the WhatsApp variant comes styled from
   render_whatsapp_button() via includes/whatsapp.php (Step 2.1/11.1).
--------------------------------------------------------------------------- */
.jobs__title {
    margin-bottom: var(--space-6);
}

.jobs__empty {
    color: var(--color-text-muted);
}

.jobs__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.job-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.job-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.job-card__title {
    margin: 0;
}

.job-card__type {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    color: var(--color-primary-dark);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}

.job-card__description {
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.job-card__requirements {
    margin-bottom: var(--space-4);
}

.job-card__requirements h4 {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.job-card__requirements p {
    color: var(--color-text);
    font-size: var(--fs-sm);
}

.job-card__apply-link {
    display: inline-block;
}

/* ---------------------------------------------------------------------------
   PRICING SECTION (Step 8.1)
   One simple table per program group, "General" group (plans with a null
   program_id, per Step 0.2 Decisions Log) rendered last. Deliberately plain
   — no card styling like Programs/Teachers, since tabular duration/
   frequency/price data reads better as an actual table.
--------------------------------------------------------------------------- */
.pricing__title {
    margin-bottom: var(--space-6);
}

.pricing__empty {
    color: var(--color-text-muted);
}

.pricing__group {
    margin-bottom: var(--space-8);
}

.pricing__group:last-child {
    margin-bottom: 0;
}

.pricing__group-title {
    color: var(--color-primary-dark);
    margin-bottom: var(--space-3);
}

.pricing-table__wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-surface);
}

.pricing-table th,
.pricing-table td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.pricing-table th {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.pricing-table tr:last-child td {
    border-bottom: none;
}

.pricing-table__description-row td {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    padding-top: 0;
}

/* ---------------------------------------------------------------------------
   POLICIES SECTION (Step 9.1)
   Native <details>/<summary> accordion — no JS, fully keyboard-operable,
   correct expanded/collapsed semantics out of the box. First item starts
   open (rendered with the `open` attribute in policies.php) so visitors
   see there's content here without needing to click anything first.
--------------------------------------------------------------------------- */
.policies__title {
    margin-bottom: var(--space-6);
}

.policies__empty {
    color: var(--color-text-muted);
}

.policies__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.policy-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
}

.policy-item__summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary-dark);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Custom chevron instead of the default browser marker, so it matches the
   site's visual language and can be rotated on open/close. */
.policy-item__summary::-webkit-details-marker {
    display: none;
}

.policy-item__summary::after {
    content: "+";
    font-weight: 400;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-left: var(--space-3);
}

.policy-item[open] .policy-item__summary::after {
    content: "−";
}

.policy-item__content {
    margin-top: var(--space-3);
    color: var(--color-text);
}

/* ---------------------------------------------------------------------------
   STUDENT SCHEDULE LOOKUP (schedule.php)
   Previously had zero CSS at all, so the Student ID form and the Upcoming
   Classes <table> rendered with no borders/spacing — cells ran together
   into what looked like unstructured wrapped text. Styled to match the
   existing pricing-table / admin-list-table pattern already used elsewhere
   on the site (bordered surface card, striped header row, ruled rows).
--------------------------------------------------------------------------- */
.schedule-page {
    max-width: 760px;
}

.schedule-page > h1 {
    margin-bottom: var(--space-5);
}

.schedule-form {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.schedule-form__label {
    display: block;
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-2);
}

.schedule-form__row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.schedule-form__input {
    flex: 1 1 220px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    background-color: var(--color-bg);
}

.schedule-form__input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.schedule-form__submit {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    transition: background-color var(--transition-fast);
}

.schedule-form__submit:hover {
    background-color: var(--color-primary-dark);
}

.schedule-form__hint {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.schedule-result {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.schedule-result--error {
    text-align: center;
}

.schedule-result--error p {
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
}

.schedule-result__greeting {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    margin-bottom: var(--space-2);
}

.schedule-result__tz-note {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-4);
}

.schedule-next-lesson {
    background-color: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.schedule-next-lesson__heading {
    font-size: var(--fs-base);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-3);
}

.schedule-next-lesson__date {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-lg);
    margin-bottom: var(--space-1);
}

.schedule-next-lesson__time {
    font-weight: var(--fw-medium);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-2);
}

.schedule-next-lesson__program {
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.schedule-next-lesson__teacher {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.schedule-upcoming__heading {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-4);
}

.schedule-upcoming__empty {
    color: var(--color-text-muted);
}

.schedule-upcoming__wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.schedule-upcoming__table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-surface);
}

.schedule-upcoming__table th,
.schedule-upcoming__table td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.schedule-upcoming__table th {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    font-weight: var(--fw-semibold);
}

.schedule-upcoming__table tr:last-child td {
    border-bottom: none;
}

/* Start Class / Join Class button — styled to look like a clear, tappable
   rectangular button in Zoom's signature blue when the class is joinable,
   and a muted, clearly-disabled grey pill when it isn't yet time. */
.schedule-join-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    background-color: #2D8CFF; /* Zoom blue */
    color: #ffffff;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-fast);
}

.schedule-join-btn:hover,
.schedule-join-btn:focus-visible {
    background-color: #2681EF;
    color: #ffffff;
    text-decoration: none;
}

.schedule-join-btn--disabled {
    background-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.schedule-join-btn--disabled:hover {
    background-color: var(--color-border);
}

.schedule-join-btn--small {
    margin-top: 0;
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
}

/* RTL support (site strings.php includes an Arabic set) — flip text
   alignment so the table reads naturally right-to-left. */
[dir="rtl"] .schedule-form__label,
[dir="rtl"] .schedule-upcoming__table th,
[dir="rtl"] .schedule-upcoming__table td {
    text-align: right;
}

@media (max-width: 640px) {
    .schedule-upcoming__table th,
    .schedule-upcoming__table td {
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------
 * Step 6 — Student Evaluation UI (schedule.php, "Rate Your Lessons")
 * Reuses the same tokens/surfaces as .schedule-result / .schedule-form
 * above it on the same page — no new branding, per original_spec.md
 * section 35. Mobile-first: the lesson list is a single column that
 * becomes a responsive grid only on wider screens, and every tappable
 * control (rating buttons, integrity choices) keeps a real 44px+ touch
 * target per section 36 (Accessibility).
 * --------------------------------------------------------------------- */
.eval-section {
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-surface) 48%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.eval-section__heading {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-1);
    color: var(--color-primary-dark);
}

.eval-section__subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-4);
}

.eval-section--empty .eval-section__subtitle {
    margin-bottom: 0;
}

.eval-lesson-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .eval-lesson-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.eval-lesson-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.eval-lesson-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(15, 30, 24, 0.1);
}

.eval-lesson-card.is-rated {
    opacity: 0.92;
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.eval-lesson-card__chip {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
}

.eval-lesson-card__program {
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-1);
}

.eval-lesson-card__meta {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.eval-lesson-card__btn {
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(11, 83, 71, 0.25);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.eval-lesson-card__btn:hover,
.eval-lesson-card__btn:focus-visible {
    background-color: var(--color-primary-dark);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    transform: translateY(-1px);
}

.eval-lesson-card__btn:disabled {
    background-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.eval-lesson-card__badge {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-dark);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    border: 1px solid var(--color-primary);
}

/* ---- Modal shell ---- */
.eval-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

@media (min-width: 640px) {
    .eval-modal {
        align-items: center;
    }
}

.eval-modal[hidden] {
    display: none;
}

.eval-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 30, 24, 0.5);
    animation: eval-fade-in 180ms ease-out;
}

.eval-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: 92vh;
    overflow-y: auto;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    padding: var(--space-6) var(--space-5) var(--space-5);
    animation: eval-slide-up 220ms ease-out;
}

@media (min-width: 640px) {
    .eval-modal__dialog {
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        animation: eval-scale-in 200ms ease-out;
    }
}

.eval-modal__dialog:focus {
    outline: none;
}

.eval-modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}

.eval-modal__close:hover,
.eval-modal__close:focus-visible {
    background-color: var(--color-border);
    color: var(--color-text);
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.eval-modal__title {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-3);
    padding-right: var(--space-8);
    color: var(--color-primary-dark);
}

.eval-modal__progress {
    margin-bottom: var(--space-5);
}

.eval-modal__progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.eval-modal__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-pill);
    transition: width var(--transition-base);
}

.eval-modal__progress-label {
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
}

/* ---- Intro ---- */
.eval-intro__hero {
    margin-bottom: var(--space-3);
}

.eval-intro__tagline {
    display: inline-block;
    margin: 0;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.eval-intro__lesson {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #f7fbf9 100%);
    border: 1px solid rgba(15, 110, 92, 0.18);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.eval-intro__lesson-program {
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-1);
    font-size: var(--fs-md);
}

.eval-intro__lesson-meta {
    color: var(--color-primary-dark);
    font-size: var(--fs-sm);
    margin: 0;
}

.eval-intro__privacy {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.eval-intro__privacy-summary {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

.eval-intro__privacy-toggle {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    padding: 0;
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.eval-intro__privacy-toggle:hover,
.eval-intro__privacy-toggle:focus-visible {
    color: var(--color-primary-dark);
}

.eval-intro__privacy-detail {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed, 1.5);
}

/* ---- Question step ---- */
.eval-step {
    animation: eval-fade-in 160ms ease-out;
}

.eval-question__text {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-5);
    line-height: var(--lh-tight);
    color: var(--color-text);
}

.eval-scale-wrap {
    margin-bottom: var(--space-5);
}

.eval-scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.eval-scale__btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: 52px;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.eval-scale__btn:hover,
.eval-scale__btn:focus-visible {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    outline: none;
}

.eval-scale__btn.is-selected {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(15, 110, 92, 0.28);
}

.eval-scale__btn.is-selected.is-low {
    background-color: #c45c4a;
    border-color: #c45c4a;
}

.eval-scale__btn.is-selected.is-mid {
    background-color: #c18a2e;
    border-color: #c18a2e;
}

.eval-scale__btn.is-selected.is-high {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.eval-scale__labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-2);
}

.eval-scale__selected {
    margin: var(--space-2) 0 0;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-dark);
}

.eval-scale__selected.is-low {
    color: #a3483a;
}

.eval-scale__selected.is-mid {
    color: #9a6e20;
}

.eval-integrity__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.eval-integrity__btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.eval-integrity__btn:hover,
.eval-integrity__btn:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.eval-integrity__btn.is-selected {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.eval-comment__hint {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.eval-comment__label {
    display: block;
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.eval-comment__textarea {
    width: 100%;
    min-height: 110px;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-family: var(--font-body);
    background-color: var(--color-bg);
    resize: vertical;
    margin-bottom: var(--space-5);
}

.eval-comment__textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

.eval-thankyou {
    text-align: center;
    padding: var(--space-5) 0 var(--space-2);
    animation: eval-scale-in 220ms ease-out;
}

.eval-thankyou__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: linear-gradient(145deg, var(--color-primary-light), #d8efe8);
    color: var(--color-primary-dark);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    box-shadow: 0 6px 16px rgba(15, 110, 92, 0.16);
}

.eval-thankyou__title {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-2);
    color: var(--color-primary-dark);
}

.eval-thankyou__message {
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.eval-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.eval-loading__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: eval-spin 0.7s linear infinite;
}

.eval-loading__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.eval-error {
    color: var(--color-danger);
    background-color: rgba(214, 69, 69, 0.08);
    border: 1px solid rgba(214, 69, 69, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--fs-sm);
}

/* ---- Shared action row / buttons across every step ---- */
.eval-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.eval-actions--split {
    justify-content: space-between;
}

.eval-actions__cluster {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.eval-btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.eval-btn--lg {
    min-height: 52px;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.eval-btn--primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: 0 2px 0 rgba(11, 83, 71, 0.25);
}

.eval-btn--primary:hover,
.eval-btn--primary:focus-visible {
    background-color: var(--color-primary-dark);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    transform: translateY(-1px);
}

.eval-btn--primary:disabled {
    background-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.eval-btn--secondary {
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.eval-btn--secondary:hover,
.eval-btn--secondary:focus-visible {
    border-color: var(--color-primary);
}

.eval-btn--ghost {
    background-color: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.eval-btn--ghost:hover,
.eval-btn--ghost:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    background-color: var(--color-primary-light);
}

/* Keep legacy text-button class if any leftover markup exists, but never look like a bare link */
.eval-btn--text {
    background-color: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.eval-btn--text:hover,
.eval-btn--text:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    text-decoration: none;
    background-color: var(--color-primary-light);
}

body.eval-modal-open {
    overflow: hidden;
}

@keyframes eval-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes eval-slide-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes eval-scale-in {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

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

@media (prefers-reduced-motion: reduce) {
    .eval-modal__overlay,
    .eval-modal__dialog,
    .eval-step,
    .eval-thankyou,
    .eval-loading__spinner,
    .eval-lesson-card,
    .eval-scale__btn,
    .eval-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------
 * teacher-perf (Step 7 — "My Teaching Performance" section on
 * teacher-schedule.php). Reuses the same surface/border/radius tokens as
 * .eval-section above and the .schedule-* blocks elsewhere in this file —
 * no new colors or fonts were introduced (see PROJECT_INSTRUCTIONS.md
 * "لغة الواجهة والتصميم تتبع الهوية البصرية الحالية للموقع").
 * --------------------------------------------------------------------- */
.teacher-perf-section {
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.teacher-perf-section__heading {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-4);
    color: var(--color-text);
}

.teacher-perf-not-enough {
    padding: var(--space-4);
    background-color: var(--color-primary-light);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.teacher-perf-not-enough__title {
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-1);
}

.teacher-perf-not-enough__message {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.teacher-perf-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.teacher-perf-stat {
    padding: var(--space-4);
    background-color: var(--color-primary-light);
    border-radius: var(--radius-md);
    text-align: center;
}

.teacher-perf-stat__value {
    display: block;
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-dark);
    line-height: var(--lh-tight);
}

.teacher-perf-stat__label {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.teacher-perf-stat--status .teacher-perf-stat__value {
    font-size: var(--fs-md);
}

.teacher-perf-stat--status[data-status-tier="low"] .teacher-perf-stat__value {
    color: var(--color-danger);
}

.teacher-perf-subheading {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: var(--space-6) 0 var(--space-3);
    color: var(--color-text);
}

.teacher-perf-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.teacher-perf-breakdown__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.teacher-perf-breakdown__label {
    flex: 0 0 auto;
    width: 40%;
    font-size: var(--fs-sm);
    color: var(--color-text);
}

.teacher-perf-breakdown__bar-track {
    flex: 1 1 auto;
    height: 8px;
    background-color: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.teacher-perf-breakdown__bar-fill {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
}

.teacher-perf-breakdown__score {
    flex: 0 0 auto;
    width: 3em;
    text-align: right;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
}

.teacher-perf-trend__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.teacher-perf-trend__tab {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.teacher-perf-trend__tab:hover,
.teacher-perf-trend__tab:focus-visible {
    border-color: var(--color-primary);
}

.teacher-perf-trend__tab.is-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.teacher-perf-trend__display {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-4);
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
}

.teacher-perf-trend__stat-value {
    display: block;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.teacher-perf-trend__stat-label {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.teacher-perf-feedback {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.teacher-perf-feedback__item {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg);
    border-inline-start: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--color-text);
}

.teacher-perf-feedback__date {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.teacher-perf-feedback__empty {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.teacher-perf-policy {
    margin-top: var(--space-6);
    padding: var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}

.teacher-perf-policy__title {
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-1);
    font-size: var(--fs-sm);
}

.teacher-perf-policy__text {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
 * admin-filter-bar (Step 19 — Zoom Attendance report filters)
 * Simple inline filter row: label + control pairs followed by a submit
 * button, wrapping on narrow screens. Reuses the same spacing/radius/
 * border tokens as the rest of the admin form controls.
 * --------------------------------------------------------------------- */
.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background-color: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.admin-filter-bar label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-1);
}

.admin-filter-bar select,
.admin-filter-bar input[type="date"] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.admin-filter-bar .admin-btn {
    border: none;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
 * Step 8 — Admin Teacher Performance page. Extends admin-filter-bar with
 * number/text inputs and a checkbox group (Status filter); adds a small
 * stat-card summary strip and styling for the comparison table's
 * teacher-selection checkboxes. Reuses admin-list-table / admin-badge /
 * admin-table-wrapper / admin-alert as-is — no changes to those rules.
 * --------------------------------------------------------------------- */
.admin-filter-bar input[type="number"],
.admin-filter-bar input[type="text"] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    width: 9rem;
}

.admin-filter-bar__checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    padding: var(--space-2) 0;
}

.admin-filter-bar__checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: normal;
    margin-bottom: 0;
}

.admin-perf-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.admin-perf-summary__card {
    flex: 1 1 220px;
    padding: var(--space-4);
    background-color: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.admin-perf-summary__value {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    display: block;
}

.admin-perf-summary__label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.admin-perf-table__select-col {
    text-align: center;
    width: 3rem;
}

.admin-perf-table__na {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.admin-perf-comparison {
    margin-top: var(--space-8);
}