/* --- Pandarek EFL - Global Stylesheet --- */
:root {
    /* ─── BRAND TOKEN SPINE (CI) ───────────────────────────────────────────
       Single source of truth for brand color. Components must reference these
       semantic tokens (var(--brand), var(--reward)…), never a raw hex, so a
       rebrand is a one-place edit here + per-theme overrides in
       themes_config.json (emitted as .theme-<key> blocks by header.php).
       --brand aliases --primary-color, and every theme overrides
       --primary-color, so --brand automatically tracks the active theme. */
    /* 2026-07-26: pivoted from teal-anchored to blue-led per the actual approved
       mockup (pixel-sampled, not eyeballed — see chat history) — blue and teal
       are equal partners there, blue leading (nav, headings), teal still owning
       the "create/generate" semantic (see --brand-fixed below, which stays teal
       on purpose). This --primary-color is what "brand" means everywhere that
       isn't specifically a create/generate action.
       2026-08: blue family retuned per the finalized Canva brand kit (pixel-exact
       hex from the kit's own color palette, not resampled).
       2026-08 (later same month): the brand kit changed again -- #3269B4 replaced
       with #4684a9, the accent actually in use across the platform's real pages
       by this point (confirmed against the live CI, not resampled from the deck). */
    --primary-color: #4684a9;   /* light-mode / default brand */
    --primary-hover: #396c8b;
    --brand: var(--primary-color);
    --brand-hover: var(--primary-hover);
    /* Theme-INDEPENDENT brand anchor: for the few elements meant to read as the
       same brand color in every theme (e.g. the "constant" create FAB), where
       tracking the active theme's --primary-color would break contrast. Still a
       one-place rebrand edit, just not theme-reactive. Deliberately kept SEPARATE
       from --primary-color/--brand -- the "create/generate" accent (teacher card,
       "create" FAB) stays visually distinct from the blue used for general
       nav/primary UI.
       2026-07-26: deep teal retired platform-wide. Repointed to #2E7D5B, the
       green endpoint of --brand-gradient (#55B58F) darkened for accessibility --
       #55B58F itself only clears ~2.5:1 contrast for white text (fails WCAG AA,
       which needs 4.5:1 for normal text / 3:1 for large text or UI components),
       and this token is used directly as a solid button background with white
       text in several places, so the literal gradient-endpoint green cannot be
       used as-is. #2E7D5B clears ~5.0:1 against white. Hover is a darker step
       of the same green for a visible but subtle press/hover state.
       2026-08: retuned to the finalized Canva kit's teal (#6ADACB), which is even
       lighter than the retired #55B58F (~1.7:1 against white -- fails outright).
       Same fix, same target ratio: darkened along the same hue/saturation to
       #1E7B6E (~5.1:1, computed, not eyeballed) so --brand-fixed keeps clearing
       WCAG AA as a solid white-text fill. Hover is the same proportional
       lightness step down as the previous #2E7D5B -> #235F45 pair. */
    --brand-fixed: #1E7B6E;
    --brand-fixed-hover: #165A51;
    --brand-deep: #063E38;      /* Teal 900 — deep fills, headers, on-teal text */
    --brand-tint: #E6F5F2;      /* Teal 050 — selected rows, tinted backgrounds */
    /* Signature gradient, pixel-exact from the finalized Canva brand kit. 2026-08:
       simplified from the old 3-stop navy->blue->green sweep to a 2-stop blue-only
       gradient (dark -> light) -- the kit treats teal as a separate accent color
       now (see --brand-fixed above), not blended into the headline/CTA gradient.
       Apply var(--brand-gradient) directly on `background` (works for solid fills,
       and for gradient text via -webkit-background-clip). */
    --brand-gradient: linear-gradient(90deg, #1250A4 0%, #7EB4FD 100%);
    /* Guest-facing marketing gradient ONLY (5-page onboarding journey, landing
       pages) — logged-in work areas (dashboards, editors, players) stay flat,
       no gradient. 2026-08: retuned to the finalized Canva kit's light blue/teal
       (previously sampled from Martynka's 2026-07-25 mockup); intentionally
       separate from --brand since this is decorative, not the UI action color. */
    --guest-bg-blue: #79AAF9;
    --guest-bg-teal: #6ADACB;
    --guest-bg-pale: #E1EAFB;
    /* 2026-07-26: amber retired platform-wide -- the approved mockups have no
       gold/amber anywhere, the rebrand is blue/green only now. Token names
       kept (nothing else has to change at call sites) but repointed into the
       new --brand-gradient's green endpoint instead of deleted outright,
       which would've left every var(--reward) usage resolving to nothing.
       2026-08: gradient endpoint is now blue (see --brand-gradient above), so
       this fallback follows it rather than pointing at a green that no longer
       exists in the gradient. */
    --reward: var(--brand-gradient-to, #7EB4FD);       /* was amber #F5A524 -- XP / streak / progress */
    --reward-strong: var(--guest-bg-teal, #6ADACB);    /* was amber #FFB84D (dark canvas) */
    --on-brand: var(--on-primary, #ffffff); /* readable text on --brand */
    /* Base page fill — a real fallback token, not a hardcoded value other
       files have to fight with !important. Per-theme --page-bg overrides it. */
    --page-bg: #f8f9fa;
    /* ─────────────────────────────────────────────────────────────────────── */
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --warning-color: #ff9800;
    --info-color: #17a2b8;
    --white-bg: #ffffff;
    --on-primary: #ffffff; /* readable text color on top of --primary-color; dark themes with a light primary override this */
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --font-family: 'Inter', sans-serif;
    /* Unified typography system (matches header.php's inline :root, which is what
       actually wins in the cascade -- kept in sync here rather than deleted so
       this file doesn't silently drift into describing a font system nobody uses). */
    --font-ui: 'Nunito Sans', "Segoe UI", system-ui, sans-serif;
    --font-voice: Georgia, "Times New Roman", serif;
    --font-hand: 'Baloo Paaji', "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    --font-display: 'Baloo Paaji', "Bricolage Grotesque", sans-serif;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --border-radius: 8px;
    --card-border-radius: 12px;
    /* --- UX FIX: Standardize container width --- */
    --container-width: 1200px; /* Max width for general content containers */
}

/* Applies var(--brand-gradient) as gradient text -- for headline accents and
   any other text that should carry the signature navy->blue->green sweep. */
.brand-gradient-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    /* !important: pages commonly set their own `.some-card h2 { color: ... }`
       (e.g. index.php's .card-panel h2) at higher specificity than a single
       class selector -- without this, that rule wins the color property and
       silently hides the gradient (clip-text needs color:transparent to show
       the background through the glyphs). */
    color: transparent !important;
}

/* Guest-facing marketing gradient background (5-page onboarding journey, landing
   pages). Pure CSS + %-based positioning so it scales correctly at any viewport
   size/aspect ratio — no raster image, no cropping/stretching artifacts.
   Apply to guest/marketing page wrappers only; never on logged-in work areas. */
/* THE one platform-wide brand wash. Promoted verbatim from index.php's .guest-bg-svg,
   which was the only place the real artwork ever rendered -- this class used to carry a
   weaker hand-written 3-gradient imitation of it, so "the wash" meant two different things
   depending on the page. It is now one definition; index.php's local copy is deleted.

   Painted on ::before/::after at z-index:-1 rather than on body's own background:
   - position:fixed pins it to the viewport, so it never scrolls away or stretches
     vertically on a long page (the bug that made it invisible on lesson_library.php).
   - z-index:-1 puts it behind ALL in-flow content automatically, so no page needs to opt
     its own containers into a z-index to stay on top (index.php had to do exactly that).
   - NOT background-attachment:fixed on body, which does the same job but forces a
     full-viewport repaint on every scroll frame and visibly hung Chrome on this page. */
/* body's own background MUST stay transparent here -- ::before/::after below sit at
   z-index:-1, and negative-z-index descendants paint underneath in-flow block backgrounds,
   so any opaque colour on body itself hides the wash entirely. Forced with !important in
   header.php's inline block, which is the last stylesheet in <head> and carries its own
   !important body-background rule; this declaration just keeps the two files agreeing. */
.guest-bg { background-color: transparent; }
/* Gradient base: insurance only. Normally invisible under the raster, but it paints on
   the first frame instead of flashing white while the 22 KB asset lands, and if that
   asset ever 404s the page still looks deliberate. Percentage-anchored, so unlike the
   raster it composes correctly at any aspect ratio. */
.guest-bg::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 62% 45% at 0% 100%,   var(--guest-bg-blue) 0%, rgba(121,170,249,0) 72%),
        radial-gradient(ellipse 62% 45% at 100% 100%, var(--guest-bg-teal) 0%, rgba(106,218,203,0) 72%),
        radial-gradient(ellipse 65% 32% at 100% 0%,   var(--guest-bg-pale) 0%, rgba(220,231,252,0) 72%),
        #F5FAFF;
}
/* --wash is set inline on <body> by header.php (asset_url() lives there). Stretched
   100% 100%, NOT cover: the blobs sit in the corners of a 16:9 export, so cover crops
   every one of them out of frame on a portrait phone. Stretching is invisible here
   precisely because the artwork is a heavy blur with no hard edges. */
.guest-bg::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--wash) center / 100% 100% no-repeat;
}

/* --- General Body & Layout --- */
*, *::before, *::after { box-sizing: border-box; }
/* Re-alias the semantic brand tokens ON <body>. Themes override --primary-color
   on body (via the .theme-<key> class header.php puts there), and CSS resolves a
   custom-property var() reference at its DECLARING element — so `--brand:
   var(--primary-color)` written on :root would freeze at the root value and
   never track the theme. Declaring it here, on the same element the theme class
   lands on, makes --brand correctly follow the active theme's --primary-color. */
body {
    --brand: var(--primary-color);
    --brand-hover: var(--primary-hover);
    --on-brand: var(--on-primary, #ffffff);
}
body {
    font-family: var(--font-family);
    background-color: var(--page-bg, #f8f9fa);
    color: var(--text-color);
    margin: 0;
    /* * FIX: Removed padding-top: 70px;
     * This padding is now applied to .main-content via a desktop media query
     * to prevent the "glitch line" (FOUC) on mobile.
     */
    padding-bottom: 80px; /* Space for the fixed mobile footer */
    padding: 0;
    margin: 0;
}
/* Main container for page content */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Header & Footer --- */
.main-header {
    width: 100%;
    background: var(--white-bg);
    height: 70px;
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    border-radius: 0px 0px 15px 15px;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-decoration: none; }
.main-nav { display: flex; align-items: center; gap: 0.9rem; }
.main-nav a {
    text-decoration: none;
    /* MODIFICATION: Changed from --text-muted to --text-dark to allow themes to work */
    color: var(--text-dark);
    font-weight: 500;
}
.mobile-menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; }

/* Footer: single quiet row, pinned to the bottom of the viewport when the page
   is short and flowing after content when it's tall -- the `position:sticky;
   top:100vh` trick does this without forcing every page's <body> into a flex
   column (too risky across the platform). It needs a full-height scroll area to
   push against, which .main-content provides below. */
.main-footer {
    position: sticky;
    top: 100vh;
    padding: 0.9rem 0;
    color: var(--text-muted);
}
.main-footer .footer-content {
    display: flex;
    /* Zawija sie na waskich ekranach zamiast wystawac poza viewport. Do 2026-09-03
       stalo tu flex-wrap:nowrap ratowane zjezdzajacym clampem font-size -- przy
       szesciu pozycjach clamp dochodzil do dolnej granicy 0.72rem i rzad i tak
       przepelnial dokument (zmierzone na produkcji przy 390px: scrollWidth 434 vs
       clientWidth 390, ten sam nadmiar co na <html>, wiec to on przewijal w poziomie
       CALA strone). Wrap jest bezwarunkowy, nie schowany za breakpointem, bo
       szerokosc tego rzedu zalezy tez od dlugosci nazwy szkoly przy white-labelu. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.55rem;
    row-gap: 0.35rem;
    /* Dotyczy juz tylko pojedynczej pozycji: etykieta nie lamie sie w srodku
       ("Zasady dla uczniow"), ale rzad jako calosc moze przejsc do drugiej linii. */
    white-space: nowrap;
    font-size: clamp(0.72rem, 2.6vw, 0.85rem);
    line-height: 1;
}
.main-footer .footer-content a { color: inherit; text-decoration: none; font-weight: 500; }
.main-footer .footer-content a:hover { color: var(--brand); text-decoration: underline; }
.main-footer .footer-sep { opacity: 0.4; }
/* Po zawinieciu kropka-separator potrafi wyladowac na koncu linii, gdzie nie ma
   juz czego oddzielac. Ponizej progu, od ktorego rzad i tak nie miesci sie
   w jednej linii, znika na rzecz szerszej przerwy. */
@media (max-width: 600px) {
    .main-footer .footer-content { column-gap: 0.85rem; }
    .main-footer .footer-sep { display: none; }
}

/* Socials: wlasny wiersz nad rzedem prawnym, bo na telefonie nie ma juz w nim
   miejsca -- sam zawija sie do dwoch linii (patrz komentarz w footer.php). Tokeny sa te
   same, ktorych uzywa rzad wyzej -- --text-muted i --brand -- wiec na wszystkich
   13 motywach wychodzi to samo, co reszta stopki. Celowo NIE dotykam
   --card-bg-default / --card-border / --text-dark: public_profile.php nadpisuje
   je paleta wlasciciela profilu, wiec stopka przyjelaby tam losowe kolory. */
.main-footer .footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}
.main-footer .footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 34px to minimalny sensowny cel dotykowy; sama ikona ma 20px, reszta to
       obszar klikalny, ktory nie powieksza wizualnie wiersza. */
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity .15s ease, color .15s ease, transform .15s ease;
}
.main-footer .footer-social-link svg { display: block; }
.main-footer .footer-social-link:hover,
.main-footer .footer-social-link:focus-visible {
    color: var(--brand);
    opacity: 1;
    transform: translateY(-1px);
    text-decoration: none;
}
/* Give short pages a full-height content area so the sticky footer has room to
   sit at the very bottom instead of floating mid-screen. */
.main-content { min-height: 100dvh; }

/* --- Forms & Buttons --- */
.form-control {
    width: 100%;
    padding: 0.5rem 0.5rem;
    font-size: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box; /* Ensure padding doesn't add to total width */
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 0.8rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    margin-bottom: 1rem;
}
.btn-primary { background-color: var(--primary-color); color: var(--on-primary, #fff); border-color: var(--primary-color); }
.btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { background-color: #dc3545; color: white; border-color: #dc3545; }
.btn-danger:hover { background-color: #c82333; border-color: #c82333; }
.btn-secondary { background-color: var(--secondary-color); color: white; border-color: var(--secondary-color); }
.btn-secondary:hover { background-color: #545b62; border-color: #545b62; }
.btn-success { background-color: var(--success-color); color: white; border-color: var(--success-color); }
.btn-success:hover { background-color: #218838; border-color: #218838; }

/* --- Authentication Pages (Login/Register) & General Wrapper for Management Pages --- */
.wrapper {
    /* Updated for student management page to allow vertical stacking of panels */
    display: block; /* Overrides display: flex from original .wrapper in auth pages */
    /* --- UX FIX: Standardize page width --- */
    max-width: 1200px; /* Adjusted for student management page content */
    margin: 20px auto; /* Centers the content and provides top/bottom margin */
    padding: 0; /* Consistent padding */
}

/* Vertically-centered auth pages (login/reset): fills the space under the fixed
   header and centers the card, so it never sits stranded near the top. */
.auth-viewport {
    min-height: calc(100dvh - 95px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-box {
    background-color: var(--white-bg);
    padding: 2.5rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: 1px solid var(--medium-gray);
    /* For auth pages, maintain centering */
    margin: 0 auto; /* Ensures auth-box is centered if wrapper is block */
}

.auth-box h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.auth-subtext {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.input-container {
    margin-bottom: 1.5rem;
    text-align: left;
}

.input-container label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Error and success messages */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    text-align: left;
    font-size: 0.9rem;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    text-align: left;
    font-size: 0.9rem;
}
.info-message {
    background-color: #e7f3fe; /* Light blue */
    color: #004085; /* Dark blue */
    border: 1px solid #b3d7ff; /* Medium blue */
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    text-align: left;
    font-size: 0.9rem;
}


/* --- Lesson Library Page (Teacher) --- */
.lib-toolbar-wrapper { background-color: var(--white-bg); }
.filter-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.filter-controls .form-control { padding: 0.5rem 1rem; font-size: 0.9rem; }
#lesson-list-container { display: flex; flex-direction: column; margin-top: 1rem; }

/* --- Bulk Actions Bar (Teacher) --- */
.bulk-actions-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #e9ecef;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    flex-grow: 1;
    min-height: 85px;
}
.bulk-checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; cursor: pointer; }
.bulk-buttons { display: flex; gap: 0.5rem; }

/* --- Lesson Tile (Teacher) --- */
.lesson-list-item-wrapper { display: flex; align-items: center; gap: 1rem; }
.tile-checkbox-container { flex-shrink: 0; width: 20px; text-align: center; }
.lesson-tile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 1rem; background-color: var(--white-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); flex-grow: 1; }
.lesson-tile-info { min-width: 0; }
.lesson-title { font-weight: 600; white-space: normal; word-break: break-word; }
.lesson-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem; }
.tag { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; background-color: #f0f3f5; }
.meta-stat { display: flex; align-items: center; gap: 0.35rem; }
.lesson-tile-actions { display: flex; gap: 0.5rem; }
/* Refined .btn-icon styles for better consistency and hover */
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%; /* Make them circular for icons */
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-flex; /* Use flex to center SVG */
    align-items: center;
    justify-content: center;
    width: 32px; /* Fixed size for icons */
    height: 32px;
}
.btn-icon:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Subtle hover background */
}
.btn-icon svg {
    width: 20px; /* Standard icon size */
    height: 20px;
}
.btn-icon.success { color: var(--success-color); }
.btn-icon.success:hover { color: #218838; }
.btn-icon.primary { color: var(--primary-color); } /* New style for password reset icon */
.btn-icon.primary:hover { color: var(--primary-hover); }


/* --- Modals (General) --- */
.dashboard-modal, .modal-overlay { /* Combined selectors for consistency */
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.dashboard-modal.active, .modal-overlay.is-open { display: flex; } /* Activation classes */
.dashboard-modal-content, .modal-content { /* Combined selectors for consistency */
    background-color: var(--white-bg);
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 90vw; /* Default max-width for modals */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--box-shadow);
}
.dashboard-modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); position: relative; }
.dashboard-modal-header h3 { margin: 0; font-size: 1.25rem; } /* Corrected typo: 1.25rm to 1.25rem */
.dashboard-modal-body { padding: 1.5rem; overflow-y: auto; }
.dashboard-modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 0.5rem; }
.close-modal-btn { background: none; border: none; font-size: 2rem; font-weight: 300; line-height: 1; color: var(--text-color); text-shadow: none; opacity: .5; cursor: pointer; position: absolute; top: 50%; right: 1.5rem; padding: 0; transform: translateY(-50%); }
.close-modal-btn:hover { opacity: .8; }

/* --- Teacher Modals (Specific overrides/additions) --- */
.dashboard-modal-content.large, .modal-content.large-modal { max-width: 700px; }
.table-container { width: 100%; max-height: 60vh; overflow-y: auto; }
.styled-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--white-bg); }
.styled-table th, .styled-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.styled-table th { font-weight: 600; position: sticky; top: 0; /* Changed from -25px to 0 for better stickiness */ background-color: var(--white-bg); z-index: 1; }
.styled-table .talent-icon { font-size: 1.2rem; cursor: help; }
#student-list-body { display: flex; flex-direction: column; gap: 1rem; padding: 0 1.5rem 1rem; } /* This looks like a specific modal list structure */
.student-list-header { padding: 0.5rem; border-bottom: 1px solid var(--border-color); }
.student-list-header label, .student-info { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
.student-list { max-height: 300px; overflow-y: auto; }
.student-list-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--light-gray); }
.student-list-item:last-child { border-bottom: none; }
.student-list-item:hover { background-color: var(--light-gray); }
.status-indicator { display: flex; align-items: center; position: relative; cursor: help; flex-shrink: 0; height: 24px; justify-content: flex-end; min-width: 24px; }
.status-icon-svg { width: 24px; height: 24px; flex-shrink: 0; }
#stat-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    width: 100%;
}
.stat-bar-left {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.stat-bar-right {
    text-align: right;
}

/* --- STYLES FOR STUDENT DASHBOARD --- */
.student-dashboard-wrapper { max-width: 1200px; margin: 1rem auto; font-family: 'Inter', sans-serif; margin-top: 5rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1rem; margin-top: 5rem; }
.stat-card { background-color: var(--white-bg); padding: 0.75rem; border-radius: var(--card-border-radius); box-shadow: var(--box-shadow); text-align: center; border: 1px solid var(--medium-gray); }
.stat-value { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; margin: 0; color: var(--primary-color); }
.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0; }
#stat-avg-score { color: var(--success-color); }
#stat-percentage { color: var(--info-color); }

.filters-panel { display: none; flex-wrap: wrap; gap: 1rem; padding: 0.75rem; background-color: var(--white-bg); border: 1px solid var(--medium-gray); border-radius: var(--card-border-radius); margin-bottom: 1.5rem; }
.assignments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }

.assignment-card { background-color: var(--white-bg); border-radius: var(--card-border-radius); box-shadow: var(--box-shadow); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--medium-gray); overflow: hidden; }
.assignment-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }

.card-body { padding: 1rem 1.25rem; position: relative; background-color: var(--white-bg); }
.card-title-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.card-title-details { flex-grow: 1; }
.author-message { font-size: 0.85rem; color: var(--text-color); margin-top: 0.25rem; }
.card-title { font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.3; }
.card-subject { display: inline-block; padding: 0.4rem 0.8rem; border-radius: 16px; font-size: 0.8rem; font-weight: 600; margin-bottom: 0; }
.image-placeholder { width: 100%; height: 120px; background-color: var(--light-gray); border-radius: 8px; margin: 1rem 0; display: grid; place-items: center; color: var(--text-muted); }
.card-stats-list { list-style: none; padding: 0.75rem 1.25rem; margin: 0; font-size: 0.85rem; background-color: rgba(248, 249, 250, 0.5); border-top: 1px solid var(--border-color); }
.card-stats-list li { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--medium-gray); }
.card-stats-list li:last-child { border-bottom: none; }
.card-stats-list strong { color: var(--text-color); }
.card-footer { padding: 0.75rem 1.25rem; background-color: var(--white-bg); border-top: 1px solid var(--border-color); margin-top: auto; }
.progress-bar-container { margin-bottom: 0.5rem; }
.progress-bar { width: 100%; height: 6px; background-color: var(--medium-gray); border-radius: 3px; overflow: hidden; }
.progress-bar-fill { height: 100%; background-color: var(--success-color); border-radius: 3px; }
.score-details { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.25rem; }
.footer-actions { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; }
.footer-actions .btn-icon:first-child { justify-self: start; }
.footer-actions .btn-icon:last-child { justify-self: end; }
.avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background-color: var(--medium-gray); flex-shrink: 0; }
#no-results-message { text-align: center; padding: 4rem 2rem; background-color: var(--white-bg); border: 1px solid var(--medium-gray); border-radius: var(--card-border-radius); width: 100%; grid-column: 1 / -1; }
#no-results-message p { font-size: 1.1rem; color: var(--text-muted); }

/* --- Mobile Filter Footer (Student) --- */
.mobile-filter-footer { display: flex; gap: 0.75rem; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--white-bg); padding: 0.75rem 1rem; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 1000; }
.mobile-search-wrapper { flex-grow: 1; position: relative; }
.mobile-search-wrapper .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 16px; height: 16px; }
.mobile-search-wrapper .form-control { width: 100%; padding: 0.75rem 0.75rem 0.75rem 2.5rem; border-radius: 20px; border: 1px solid var(--medium-gray); }
.mobile-filter-btn { background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--text-muted); transition: transform 0.3s ease; display: grid; place-items: center; }
.mobile-filter-btn svg { width: 22px; height: 22px; }
.status-toggle-radial { display: flex; background-color: var(--medium-gray); border-radius: 20px; padding: 3px; }
.status-btn { padding: 0.4rem 1rem; border: none; background-color: transparent; color: var(--text-muted); font-weight: 500; font-size: 0.85rem; border-radius: 18px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }
.status-btn.active.new { background-color: var(--warning-color); color: white; }
.status-btn.active.completed { background-color: var(--success-color); color: white; }

/* --- Student Dashboard Modals --- */
/* (These styles are copied from previous version, check for redundancy with general modal styles) */
/* .modal-overlay, .modal-content styles are now handled by common styles above. */
.btn-icon.hidden { display: none; }

/* --- Progress Modal Specific Styles --- */
#progress-summary-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}
.progress-summary-item {
    text-align: left;
}
.progress-summary-item.talent-summary {
    text-align: right;
}
.progress-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.progress-value.positive {
    color: var(--success-color);
}
.progress-value.negative {
    color: #dc3545;
}
.progress-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}
.talent-indicator {
    font-size: 2rem;
}
.progress-graph-container {
    width: 100%;
    position: relative;
    height: 300px;
    margin-bottom: 1rem;
}
#progress-dates-container {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* --- Create Lesson Page Specific Styles --- */
.create-lesson-container {
    /* --- UX FIX: Standardize page width --- */
    max-width: 1200px;
    margin: 2rem auto;
    padding: 1rem;
}

.create-lesson-container .panel {
    background-color: var(--white-bg);
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 2.5rem;
}

/* --- STYLES FOR MANUAL FLASHCARD CREATOR --- */
/* (Added this section header for clarity) */
.flashcard-creator-container { 
    /* --- UX FIX: Standardize page width --- */
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 1.5rem; 
}

.create-lesson-container .auth-subtext {
    text-align: center;
    margin-bottom: 2.5rem;
    line-height: 1.5;
}

.input-container {
    display: block;
    margin-bottom: 1.5rem;
    text-align: left;
}

.input-container label {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.input-container textarea.form-control {
    resize: vertical;
    min-height: 100px;
    max-height: 300px;
}

#prompt-output-container {
    margin-top: 2rem;
}

.searchable-dropdown {
    position: relative;
}

.searchable-dropdown-options {
    display: none;
    position: absolute;
    background-color: var(--white-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}

.searchable-dropdown-options.visible {
    display: block;
}

.searchable-dropdown-options div {
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.searchable-dropdown-options div:hover {
    background-color: var(--light-gray);
}

#teacher-subject-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#teacher-subject-buttons .btn {
    padding: 0.5rem 1rem;
}

@media (max-width: 600px) {
    .create-lesson-container {
        padding: 0.75rem;
        margin: 1rem auto;
    }

    .create-lesson-container .panel {
        padding: 1.5rem;
    }

    .create-lesson-container h2 {
        font-size: 1.5rem;
    }

    .create-lesson-container .input-container {
        margin-bottom: 1.25rem;
    }

    .create-lesson-container .button-container {
        flex-direction: column;
        gap: 0.75rem;
    }

    .button-container .btn {
        width: 100%;
        min-width: 0;
    }
}

/* Matches student_dashboard.css's max-width:768px mobile cutoff exactly -- was
   min-width:992px, leaving a 769-991px gap where neither this nor the mobile rule
   applied, and the (hover:hover) gate meant even wide touchscreen/2-in-1 devices could
   get stuck on the broken mobile layout. Plain width match now, no capability gate. */
@media (min-width: 769px) {
    .filters-panel { display: flex; }
    .mobile-filter-footer { display: none; }
    body { padding-bottom: 0; }

    .main-content {
        padding-top: 5px;
    }
}

/* --- ZMIANA: Usunięcie globalnego padding-top na mobilnych stronach studenta --- */
@media (max-width: 768px) {
    body {
        padding-top: 0 !important; /* Force removal of top padding */
        padding-bottom: 80px; /* Keep space for the bottom nav */
    }

    .main-content, 
    .wrapper, 
    .container,
    .student-dashboard-wrapper {
                margin-top: 0 
    }
}
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1rem; margin-top: 1rem; }

@media (max-width: 768px) {
    /* Was 1.5rem, on top of the block above's own margin-top:0 for the same selector
       at the same breakpoint (redundant/conflicting rules, this one wins on source
       order regardless of !important) -- a 24px gap between the viewport edge and the
       navbar, revealing the page's own background colour in a band across the top. */
    .student-dashboard-wrapper {
        margin-top: 0.5rem !important;
        /* The wrapper's own side padding was removed globally so its content matches
           the header's width on desktop (both max-width:1200px boxes with nothing
           inset). On mobile there's no header to match -- content ran flush to the
           screen edges with no gutter at all. Restored here, mobile-only. */
        padding: 0 1rem !important;
    }
}


/* Pulsating animation for the 'To Do' tile */
@keyframes pulsate-color {
  0%, 100% { color: var(--primary-color); transform: scale(1); }
  50% { color: #dc3545; transform: scale(1.05); }
}
#stat-new.pulsating { animation: pulsate-color 2.5s infinite ease-in-out; }

/* Style for inline assignment details in share modal */
.assignment-details-inline { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; margin-left: 0.5rem; }

/* Color-coded subject tags */
.subject-color-1 { background-color: rgba(255, 152, 0, 0.15); color: #b36d00; }
.subject-color-2 { background-color: rgba(0, 123, 255, 0.1); color: #0056b3; }
.subject-color-3 { background-color: rgba(40, 167, 69, 0.1); color: #155724; }
.subject-color-4 { background-color: rgba(108, 117, 125, 0.1); color: #383d41; }
.subject-color-5 { background-color: rgba(220, 53, 69, 0.1); color: #721c24; }
.subject-color-6 { background-color: rgba(23, 162, 184, 0.1); color: #0c5460; }
.subject-color-default { background-color: rgba(232, 232, 232, 0.5); color: #545454; }

/* New styles for expandable student creation section */
.expand-toggle {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary-color);
    cursor: pointer;
    padding: 10px 0;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid var(--primary-color);
    display: block; /* Make it a block element to take full width */
    transition: all 0.3s ease;
}
.expand-toggle:hover {
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
}

.expand-content {
    display: none; /* Hidden by default */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease-out; /* Smooth transition for height and opacity */
}

.expand-content.expanded {
    display: block; /* Change to block when expanded */
    opacity: 1;
    max-height: 1000px; /* Adjust as needed for content height, needs to be larger than actual content */
    transition: all 0.5s ease-in;
}
/* Style for the toggle icon (arrow) */
#toggle-icon {
    display: inline-block;
    margin-left: 10px;
    transition: transform 0.3s ease;
}
.expand-content.expanded + .expand-toggle #toggle-icon { /* Adjust icon when expanded */
    transform: rotate(180deg);
}

/* --- Fix for APK Download Modal Layout --- */
#apk-modal .modal-content {
    display: block;
    overflow-y: auto;
}

aside#skills-container-desktop h3 {
  text-align: center;
  /* Keep any other styles for the h3 here */
}
/* =========================================
   ACTIVITY FEED / SOCIAL WALL STYLES
   (New Component: Does not conflict with assignment-card)
   ========================================= */

/* 1. The Card Container */
.activity-card {
    background: var(--white-bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.activity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

/* Unread State - Subtle Highlight */
.activity-card.unread {
    background: #fffcf0; /* Very light orange/yellow tint */
    border-left: 4px solid #ffd412; /* EduHero Orange */
}

.activity-card.unread::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    background: #ffd412;
    border-radius: 50%;
}

/* 2. Header (Avatar + Name) */
.activity-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.activity-header .avatar-small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
}

.activity-header .meta-info {
    display: flex;
    flex-direction: column;
}

.activity-header .title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1f2937;
}

.activity-header .timestamp {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* 3. Body Text */
.activity-body p {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

/* --- VARIANT: LESSON PREVIEW --- */
.lesson-preview {
    background: #f9fafb;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.lesson-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.lesson-stats .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    background: #dbeafe;
    color: var(--primary-color, #1E6FC7); /* EduHero Blue -- was hardcoded #2563eb, which the
        comment already called "EduHero Blue" but which is not, and never was, the brand blue. */
}

/* --- VARIANT: YOUTUBE PREVIEW --- */
.video-preview .video-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: relative;
    text-decoration: none;
}

.video-preview .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    transition: background 0.2s;
}

.video-preview:hover .play-btn {
    background: #ff0000; /* YouTube Red */
}

/* --- VARIANT: SOCIAL POST --- */
.social-post .post-image {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #eee;
}

/* --- BUTTONS --- */
.btn-action {
    display: block;
    width: 100%;
    text-align: center;
    background: #ffd412;
    color: #1f2937;
    font-weight: 600;
    padding: 8px 0;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.btn-action:hover {
    opacity: 0.9;
}

.btn-text {
    font-size: 0.85rem;
    color: #2d2d2d;
    font-weight: 600;
    text-decoration: none;
}

.btn-text:hover {
    color: var(--text-color);
    text-decoration: underline;
}
/* Make the main Swiper container transparent */
.swiper, 
.swiper-container { /* .swiper-container is for older Swiper versions */
    background: transparent !important;
    background-color: rgba(0,0,0,0) !important; /* Fallback for total transparency */
}

/* Make the internal moving wrapper transparent */
/* This is crucial for the area "between" photos if spaceBetween is used */
.swiper-wrapper {
    background: transparent !important;
    background-color: rgba(0,0,0,0) !important;
}
/* --- Lesson Level Badges (Rounded Rectangle Fix) --- */
.lesson-level {
    display: inline-flex;       /* Pozwala elementowi rosnąć wraz z tekstem */
    align-items: center;
    justify-content: center;
    
    padding: 4px 10px;          /* Odstęp wewnętrzny (margines dla tekstu) */
    border-radius: 6px;         /* Lekko zaokrąglone rogi (zamiast 50% dla koła) */
    
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;             /* Biały tekst */
    line-height: 1.2;
    white-space: nowrap;        /* Zapobiega łamaniu tekstu w środku */
    
    min-width: 32px;            /* Minimalna szerokość dla krótkich "A1" */
    height: auto;               /* Wysokość dopasowana do treści */
    min-height: 24px;           /* Minimalna wysokość */
}

/* Kolory poziomów (upewnij się, że są zdefiniowane) */
.level-green { background-color: #10b981; } /* SP / A1-A2 */
.level-blue  { background-color: #3b82f6; } /* SŚ / B1-B2 */
.level-orange{ background-color: #f59e0b; } /* SW / C1-C2 */
/* ==========================================================================
   GLOBAL THEME ENFORCER: HEADER & NOTIFICATION DRAWER
   ========================================================================== */

/* 1. Main Header */
.main-header {
    background-color: var(--card-bg-default, #ffffff) !important;
    border-bottom: 1px solid var(--card-border, #e2e8f0) !important;
}
.main-header a:not(.btn), .main-header i {
    color: var(--text-dark, #1e293b) !important;
}

/* 2. Notification Drawer Base */
.notification-drawer, .drawer-header, .drawer-footer {
    background-color: var(--card-bg-default, #ffffff) !important;
    border-color: var(--card-border, #e2e8f0) !important;
    color: var(--text-dark, #1e293b) !important;
}
.notification-drawer a, .notification-drawer i, .notification-item-content {
    color: var(--text-dark, #1e293b) !important;
}

/* 3. Individual Notification Items */
.notification-item {
    background-color: var(--card-bg-default, #ffffff) !important;
    border-bottom: 1px solid var(--card-border, #e2e8f0) !important;
    transition: background-color 0.2s ease !important;
}
.notification-item:hover {
    background-color: var(--modal-tile-hover, #f1f5f9) !important;
}

/* 4. Unread Notifications Highlight */
.notification-item.unread {
    background-color: var(--modal-tile-bg, #eff6ff) !important;
    border-left: 4px solid var(--primary-color, #3b82f6) !important;
}
/* --- Midnight/Cyberpunk shell fixes (Phase 1 of forced-dark audit) ---
   The base `body` rule hardcodes a light #f8f9fa background; only the dark themes need the
   tokenized page background so global pages match the ones that already opt in via
   var(--page-bg). Light/default themes are intentionally left byte-identical. */
body.theme-midnight, body.theme-cyberpunk { background-color: var(--page-bg); }