/**
 * SmartSchool - Stylesheet
 * المدرسة الذكية - ملف التنسيقات
 */

:root {
    /* Cairo — a clean, modern Arabic/Latin sans-serif, in one unified family
       for body copy and headings alike (weight alone tells them apart). */
    --font-sans: 'Cairo', system-ui, Tahoma, Arial, sans-serif;
    --font-arabic: 'Cairo', system-ui, Tahoma, Arial, sans-serif;
    --font-heading: 'Cairo', system-ui, Tahoma, Arial, sans-serif;

    /* Broadsheet inks — fixed brand constants, not re-tinted per theme,
       reserved for the plate-style decorative touches (colour swatches,
       chart accents) rather than body chrome. */
    --ink-cyan: #0088b0;
    --ink-magenta: #d6006c;
    --ink-yellow: #edbb00;

    /* Rounded (curved) throughout the app - buttons, cards, inputs, modals,
       badges and tables all draw from these three tokens, so this one change
       re-rounds every corner in the product at once. */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Ink-tinted so shadows read as pressed-paper depth, not a generic grey. */
    --shadow-sm: 0 1px 2px rgba(32, 30, 29, 0.14);
    --shadow-md: 0 3px 10px -1px rgba(32, 30, 29, 0.16), 0 2px 4px -1px rgba(32, 30, 29, 0.08);
    --shadow-lg: 0 12px 32px -4px rgba(32, 30, 29, 0.22), 0 4px 8px -2px rgba(32, 30, 29, 0.10);

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

/*
 * Palette: Navy & Sky — matches the school's own reference design (see the
 * design PDF this was reskinned against): a dark-navy sidebar and a light
 * blue-grey page ground, cards in plain white, sky-blue for primary actions.
 *
 * The --accent-* names are historical (they predate this palette); each one is
 * now a semantic slot rather than a literal colour:
 *   accent-blue   -> primary / brand      accent-green  -> success
 *   accent-red    -> danger               accent-orange -> warning
 *   accent-purple -> informational
 * The primary sits at a navy dark enough that white-on-accent clears 7:1
 * contrast (WCAG AAA for normal text).
 */
[data-theme="light"],
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f4f6fb;
    --bg-tertiary: #e8edf5;
    --bg-elevated: #ffffff;

    --text-primary: #16233a;
    --text-secondary: #45526b;
    --text-tertiary: #6b7688;
    --text-muted: #90969f;

    --border-color: rgba(26, 58, 91, 0.14);
    --border-light: rgba(26, 58, 91, 0.07);

    --accent-blue: #1a3a5b;
    --accent-blue-light: #e8f2fb;
    --accent-blue-hover: #14304c;
    --accent-blue-active: #0f2438;
    --accent-green: #0fb880;
    --accent-green-light: #e0f9ee;
    --accent-red: #ef4444;
    --accent-red-light: #fde2e2;
    --accent-orange: #f49e0a;
    --accent-orange-light: #fdf2c6;
    --accent-purple: #7c6fd1;
    --accent-purple-light: #efecfb;

    --brand-indigo: #1a3a5b;
    --brand-orange: #f49e0a;

    --sidebar-bg: #1a3a5b;
    --sidebar-text: #dbe6f2;
    --sidebar-active: #e8f2fb;
    --sidebar-active-text: #14304c;
    --sidebar-hover: rgba(255, 255, 255, 0.08);
}

/*
 * Dark theme: the same navy family on a dark ground. Accents lighten so
 * they clear 7:1 against the dark surfaces; the sidebar stays navy (already
 * dark) rather than going darker still, so light/dark mode read as one brand.
 */
[data-theme="dark"] {
    --bg-primary: #182338;
    --bg-secondary: #101828;
    --bg-tertiary: #212e46;
    --bg-elevated: #1c2942;

    --text-primary: #eef2f9;
    --text-secondary: #c3ccdb;
    --text-tertiary: #8f9bb0;
    --text-muted: #6b7688;

    --border-color: rgba(219, 230, 242, 0.14);
    --border-light: rgba(219, 230, 242, 0.08);

    --accent-blue: #6ea6e8;
    --accent-blue-light: rgba(110, 166, 232, 0.18);
    --accent-blue-hover: #93c0f5;
    --accent-blue-active: #c0dcfb;
    --accent-green: #3fd39a;
    --accent-green-light: rgba(63, 211, 154, 0.18);
    --accent-red: #ff6b6b;
    --accent-red-light: rgba(255, 107, 107, 0.18);
    --accent-orange: #ffb648;
    --accent-orange-light: rgba(255, 182, 72, 0.18);
    --accent-purple: #a79bea;
    --accent-purple-light: rgba(167, 155, 234, 0.18);

    --brand-indigo: #6ea6e8;
    --brand-orange: #ffb648;

    --sidebar-bg: #0f2038;
    --sidebar-text: #c3d3e6;
    --sidebar-active: #1e3a5c;
    --sidebar-active-text: #eef2f9;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-arabic);
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* RTL / LTR Support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Keyboard focus ring for anything actionable that doesn't already define
   its own focus treatment (buttons, links, tabs, checkboxes/radios). Mouse
   and touch users never see it; keyboard users always do. Inputs/selects
   keep their dedicated box-shadow ring from .form-control:focus below. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN SCREEN (شاشة تسجيل الدخول)
   ═══════════════════════════════════════════════════════════════ */

/* The rest of the app now rounds from the shared --radius-* tokens too; the
   login shell keeps its own larger, hand-picked radius (and floating-card
   presentation) since a hero entry screen earns a more dramatic curve than
   the compact controls those tokens size everywhere else. */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    padding: 24px;
}

.login-shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: 100%;
    max-width: 1080px;
    min-height: 600px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--bg-primary);
    animation: slideUp 0.5s ease;
}

.login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 16px;
}

.login-card .form-control,
.login-card .btn {
    border-radius: 12px;
}

/* The design canvas's login branding panel, now carrying the school's own
   classroom photo (Logo/login.jpg) rather than a flat colour: a dark scrim
   keeps the swatch row and tagline legible over any photo, and the halftone
   overlay ties it back to the Broadsheet print treatment. */
.login-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    padding: 48px;
    /* Fixed dark scrim + light text regardless of the app's own light/dark
       theme — like --sidebar-bg/-text, a photo panel reads as its own
       constant surface rather than re-tinting with the page around it. */
    background:
        linear-gradient(180deg, rgba(32, 30, 29, 0.15) 0%, rgba(32, 30, 29, 0.82) 100%),
        url('login.jpg') center / cover no-repeat;
    color: #ece8e8;
}

.login-brand-swatches {
    display: flex;
    gap: 6px;
}

.login-brand-swatches span {
    width: 46px;
    height: 12px;
}

.login-brand-tagline {
    margin: 0;
    max-width: 26ch;
    font-family: var(--font-heading);
    font-size: 26px;
    line-height: 1.45;
}

@media (max-width: 860px) {
    .login-shell {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 20px;
    }

    .login-brand-panel {
        display: none;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo-image {
    display: block;
    width: min(100%, 230px);
    height: auto;
    margin: 0 auto 16px;
}

.login-logo h1 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.login-logo p {
    font-size: 14px;
    color: var(--text-tertiary);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;
    transition: all var(--transition-fast);
    outline: none;
}

.form-control:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Wraps a password .form-control so a show/hide toggle can sit inside it
   without the input's own padding needing to know the toggle is there. */
.password-field {
    position: relative;
}

.password-field .form-control {
    padding-inline-end: 44px;
}

.password-toggle {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

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

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c837a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 40px;
}

[dir="ltr"] select.form-control {
    background-position: right 14px center;
    padding-left: 14px;
    padding-right: 40px;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS (الأزرار)
   ═══════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.btn-primary:hover {
    background: var(--accent-blue-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    background: var(--accent-blue-active);
    transform: none;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.btn-success {
    background: var(--accent-green);
    color: white;
    border-color: var(--accent-green);
}

.btn-danger {
    background: var(--accent-red);
    color: white;
    border-color: var(--accent-red);
}

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

.btn-ghost.btn-danger {
    background: transparent;
    color: var(--accent-red);
    border-color: transparent;
}

.btn-ghost.btn-danger:hover {
    background: var(--accent-red);
    color: white;
}

.btn-ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 14px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

.btn-block {
    width: 100%;
}

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

/* ═══════════════════════════════════════════════════════════════
   LAYOUT (التخطيط)
   ═══════════════════════════════════════════════════════════════ */

.app-layout {
    display: flex;
    direction: ltr;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 100;
    transform: none;
    transition: transform var(--transition-normal);
    direction: rtl;
}

[dir="ltr"] .sidebar {
    left: 0;
    right: auto;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-logo {
    width: 40px;
    height: 40px;
    padding: 3px;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    color: white;
    line-height: 1.3;
}

.sidebar-title span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.guardian-student-picker {
    margin: 0 0 18px;
}

.guardian-student-picker > label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.guardian-student-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.guardian-student-option small {
    grid-column: 2;
    color: var(--text-tertiary);
    font-size: 13px;
}

.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* studentLink()/teacherLink()/subjectLink() - a name shown as a reference in
   some other page's table, wired to open that record's own detail view. */
.entity-link {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: inherit;
}

.entity-link:hover {
    text-decoration: underline;
}

.attachment-link {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    padding: 5px 9px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--accent-blue);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* filePicker()'s styled stand-in for a raw <input type="file"> - see its
   doc comment in app.js. The input itself is .sr-only; this is just the
   label-button and the echoed filename beside it. */
.file-picker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.file-picker-name {
    max-width: 200px;
    overflow: hidden;
    font-size: 13px;
    color: var(--text-tertiary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.behavior-list {
    display: grid;
    gap: 12px;
}

.behavior-entry {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-inline-start: 3px solid var(--accent-purple);
    border-radius: var(--radius-sm);
}

.behavior-entry-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.behavior-entry-head time {
    margin-inline-start: auto;
    color: var(--text-tertiary);
    font-size: 13px;
}

.behavior-entry p {
    color: var(--text-secondary);
    white-space: pre-wrap;
}

.behavior-entry small {
    display: block;
    margin-top: 6px;
    color: var(--text-tertiary);
}

.notification-wrap {
    position: relative;
}

.notification-toggle {
    position: relative;
}

.notification-toggle > span {
    font-size: 18px;
    line-height: 1;
}

.notification-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 1px 4px;
    border-radius: 10px;
    background: var(--accent-red);
    color: white;
    font-size: 11px;
    line-height: 14px;
}

.notification-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    width: min(360px, calc(100vw - 32px));
    max-height: 420px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

[dir="ltr"] .notification-menu {
    right: auto;
    left: 0;
}

.notification-menu-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
}

.notification-item {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-primary);
    text-align: start;
    cursor: pointer;
}

.notification-item:hover,
.notification-item.unread {
    background: var(--accent-blue-light);
}

.notification-item strong,
.notification-item span,
.notification-item time {
    display: block;
}

.notification-item span {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 14px;
}

.notification-item time {
    margin-top: 6px;
    color: var(--text-tertiary);
    font-size: 12px;
}

.notification-empty {
    padding: 20px 14px;
    color: var(--text-tertiary);
    text-align: center;
}

.program-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}

.program-row span,
.program-row small {
    color: var(--text-tertiary);
    font-size: 13px;
}

.program-row small {
    grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY (المعرض)
   ═══════════════════════════════════════════════════════════════ */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* An event's own gallery, embedded inside its modal - narrower cards so the
   section stays a compact strip rather than competing with the programme
   above it for the modal's height. */
.gallery-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.gallery-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-fast);
}

.gallery-card:hover {
    box-shadow: var(--shadow-md);
}

.gallery-card-image-wrap {
    position: relative;
}

.gallery-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--bg-tertiary);
    cursor: zoom-in;
}

.gallery-card-visibility {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
}

.gallery-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
}

.gallery-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.gallery-card-meta {
    font-size: 12px;
    color: var(--text-tertiary);
}

.gallery-card-body .btn {
    margin-top: 4px;
}

/* showImageLightbox() - a gallery photo at its natural size over a dark
   scrim, independent of the .modal-overlay system since there is nothing to
   submit here. */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
    background: rgba(20, 18, 18, 0.9);
    animation: lightboxFadeIn 0.15s ease;
}

@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-image {
    max-width: min(90vw, 1100px);
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.lightbox-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 90vw;
    text-align: center;
}

.lightbox-caption {
    color: #ece8e8;
    font-size: 15px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    inset-inline-end: 24px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ece8e8;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Weekly stars (نجوم الأسبوع) - a card grid on the announcements board,
   see renderWeeklyStars() in app.js. */
.stars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.stars-card {
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.stars-card-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.stars-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.stars-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.table-filter {
    padding: 0 16px 12px;
}

.table-filter .form-control {
    max-width: 360px;
}

.table-directory-filters {
    align-items: center;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 2px;
    border: none;
    background: none;
    width: 100%;
    font-family: inherit;
}

.nav-item:hover {
    /* The same pill the active state commits to, just translucent - a hover
       previews the colour a click lands on, instead of an unrelated tint. */
    background: var(--sidebar-hover);
    color: white;
}

.nav-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
}

.nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
}

.nav-item.active svg {
    opacity: 1;
}

/* Nav grown past a flat list of ~20 items across every module this app now
   ships; group headers (design canvas v2's collapsible sidebar sections)
   give the list scannable landmarks without adding a second navigation
   surface. */
.nav-group + .nav-group {
    margin-top: 10px;
}

.nav-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 14px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sidebar-text);
    opacity: 0.55;
    cursor: pointer;
}

.nav-group-header:hover {
    opacity: 0.85;
}

.nav-group-header svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.nav-group-header[aria-expanded="false"] svg {
    transform: rotate(-90deg);
}

[dir="ltr"] .nav-group-header[aria-expanded="false"] svg {
    transform: rotate(90deg);
}

.nav-group-header span {
    flex: 1;
    text-align: right;
}

[dir="ltr"] .nav-group-header span {
    text-align: left;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 14px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Main Content */
.main-content {
    flex: 0 1 calc(100% - 260px);
    min-width: 0;
    width: calc(100% - 260px);
    margin-left: 0;
    margin-right: 260px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    direction: rtl;
}

[dir="ltr"] .main-content {
    margin-left: 260px;
    margin-right: 0;
    direction: ltr;
}

/* Top Bar */
.top-bar {
    height: 64px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.top-bar-title {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

.icon-btn.active {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

/* The account's own name/role/avatar in the top bar, next to logout - the
   same identity the sidebar footer shows, surfaced where it's always
   visible rather than only at the very bottom of a long nav list. */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 6px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    max-width: 220px;
}

.topbar-user:hover {
    background: var(--accent-blue-light);
    border-color: var(--accent-blue);
}

.topbar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.topbar-user-avatar-image {
    object-fit: cover;
}

.topbar-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
}

.topbar-user-role {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-tertiary);
}

@media (max-width: 720px) {
    .topbar-user-name { display: none; }
    .topbar-user { padding: 5px; border-radius: 50%; }
}

/* Page Content */
.page-content {
    flex: 1;
    padding: 24px;
    max-width: 1400px;
    width: 100%;
}

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.eyebrow {
    color: var(--accent-blue);
    font-size: 13px;
    font-weight: 700;
    /* No uppercase/tracking: that's a Latin-typography convention and reads
       oddly over Arabic script, so the Arabic-friendly Broadsheet override
       drops both here rather than force them onto this alphabet. */
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 2px;
}

.section-title {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 700;
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.report-summary {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
}

.report-summary span {
    color: var(--text-secondary);
    display: block;
    font-size: 14px;
}

.report-summary strong {
    color: var(--accent-blue);
    display: block;
    font-size: 26px;
    margin-top: 4px;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.table-empty {
    color: var(--text-tertiary);
    padding: 32px !important;
    text-align: center !important;
}

.activity-list {
    padding: 4px 20px;
}

.activity-row {
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

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

.activity-row>div {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.activity-row strong {
    font-size: 14px;
}

.activity-row span:not(.activity-dot) {
    color: var(--text-secondary);
    font-size: 13px;
}

.activity-row time {
    color: var(--text-tertiary);
    font-size: 12px;
    white-space: nowrap;
}

.activity-dot {
    background: var(--accent-blue);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS & STATS (البطاقات والإحصائيات)
   ═══════════════════════════════════════════════════════════════ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--text-muted);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-icon.blue {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.stat-icon.green {
    background: var(--accent-green-light);
    color: var(--accent-green);
}

.stat-icon.orange {
    background: var(--accent-orange-light);
    color: var(--accent-orange);
}

.stat-icon.purple {
    background: var(--accent-purple-light);
    color: var(--accent-purple);
}

.stat-icon.red {
    background: var(--accent-red-light);
    color: var(--accent-red);
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Broadsheet's misregistered-plate numeral: the design canvas's headline
   treatment for a dashboard's top-line KPI figures. Three offset copies in
   the press inks (cyan/magenta/yellow, no black — the dark core comes from
   their multiply overlap) sit over a "paper" copy that keeps the real text
   for assistive tech and backs the plates on whatever ground it's placed on.
   Reserved for the admin overview's headline count — everyday stat cards
   keep their plain tone-coloured number so metric type stays scannable
   at a glance. Markup: .cmyk-num > .paper (real text) + 2x .plate (aria-hidden).
   See _ds/broadsheet .../styles.css for the source construction. */
.cmyk-num {
    --cmyk-num-ground: var(--bg-primary);
    position: relative;
    display: inline-block;
    line-height: 0.9;
    background: var(--cmyk-num-ground);
}
.cmyk-num .paper {
    color: var(--cmyk-num-ground);
    text-shadow: 0.036em 0.025em 0 var(--cmyk-num-ground), -0.031em -0.023em 0 var(--cmyk-num-ground);
}
.cmyk-num .plate {
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
    user-select: none;
}
.cmyk-num .plate-c { color: var(--ink-cyan); }
.cmyk-num .plate-m { color: var(--ink-magenta); translate: 0.036em 0.025em; }
.cmyk-num .plate-y { color: var(--ink-yellow); translate: -0.031em -0.023em; }

.stat-delta {
    font-size: 13px;
    color: var(--accent-green);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* The admin overview's headline row: kpiPlain()'s boxless counterpart to
   .stat-card above - see its doc comment in app.js. */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.kpi-plain .stat-value {
    font-size: 40px;
}

.kpi-plain-meta {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Content Card */
.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   TABLES (الجداول)
   ═══════════════════════════════════════════════════════════════ */

.table-responsive {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.data-table th,
.data-table td {
    padding: 12px 16px;
    text-align: start;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}

.data-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    /* Arabic-friendly: no uppercase/tracking (see .eyebrow). */
    text-transform: none;
    letter-spacing: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* The nowrap default above is right for a typical cell (a date, a badge, a
   short name) but wrong for a column that can legitimately hold a long,
   variable list (linked students, say): unwrapped, one such cell forces the
   whole table absurdly wide and every other column gets crushed into the
   sliver that's left. This lets just that column wrap onto its own lines
   instead, so the table stays a sane width. */
.data-table td.cell-wrap {
    max-width: 260px;
    white-space: normal;
}

.data-table tr:hover td {
    background: var(--bg-secondary);
}

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

/* ═══════════════════════════════════════════════════════════════
   BADGES & TAGS (الشارات)
   ═══════════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
}

.badge-blue {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.badge-green {
    background: var(--accent-green-light);
    color: var(--accent-green);
}

.badge-red {
    background: var(--accent-red-light);
    color: var(--accent-red);
}

.badge-orange {
    background: var(--accent-orange-light);
    color: var(--accent-orange);
}

.badge-purple {
    background: var(--accent-purple-light);
    color: var(--accent-purple);
}

/* ═══════════════════════════════════════════════════════════════
   SCHEDULE GRID (شبكة الدوام)
   ═══════════════════════════════════════════════════════════════ */

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

.schedule-grid {
    display: grid;
    /* Overridden inline with the school's real working-day count; these are
       only the fallback when no schedule is rendered yet. */
    grid-template-columns: 84px repeat(5, minmax(140px, 1fr));
    gap: 1px;
    background: var(--border-color);
    min-width: 780px;
}

.sg-header {
    background: var(--bg-secondary);
    padding: 12px 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sg-time {
    background: var(--bg-secondary);
    padding: 10px 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.sg-time strong {
    font-size: 15px;
    color: var(--text-secondary);
}

.sg-time span {
    font-size: 11px;
    letter-spacing: 0.2px;
    /* Times stay left-to-right even in an RTL layout. */
    direction: ltr;
    unicode-bidi: isolate;
}

.sg-cell {
    background: var(--bg-primary);
    padding: 6px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sg-lesson {
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sg-lesson:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-sm);
}

.sg-lesson .subject-name {
    font-weight: 600;
    font-size: 13px;
}

.sg-lesson .teacher-name {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
}

.sg-break {
    background: var(--bg-tertiary);
    grid-column: 2 / -1;
    padding: 8px;
    text-align: center;
    font-size: 13px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   FORMS (النماذج)
   ═══════════════════════════════════════════════════════════════ */

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.form-section {
    margin-bottom: 24px;
}

.form-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   TABS (التبويبات)
   ═══════════════════════════════════════════════════════════════ */

.tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    width: fit-content;
}

.tab-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL (النافذة المنبثقة)
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    transition: transform var(--transition-normal);
}

.modal-overlay.active .modal {
    transform: scale(1);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--accent-red-light);
    color: var(--accent-red);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* confirmDialog() — a themed stand-in for window.confirm() so a delete or
   bulk action doesn't suddenly break out to an unstyled, unlocalised native
   dialog in the middle of an otherwise fully themed, RTL-aware app. */
.modal-confirm {
    max-width: 400px;
}

.confirm-dialog-message {
    white-space: pre-line;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS (التنبيهات)
   ═══════════════════════════════════════════════════════════════ */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.alert-success {
    background: var(--accent-green-light);
    color: var(--accent-green);
}

.alert-error {
    background: var(--accent-red-light);
    color: var(--accent-red);
}

.alert-warning {
    background: var(--accent-orange-light);
    color: var(--accent-orange);
}

.alert-info {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

/* ═══════════════════════════════════════════════════════════════
   LOADING (التحميل)
   ═══════════════════════════════════════════════════════════════ */

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    flex-direction: column;
    gap: 16px;
    color: white;
}

.loading-overlay .spinner {
    width: 40px;
    height: 40px;
    border-width: 3px;
    border-top-color: white;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE (الحالة الفارغة)
   ═══════════════════════════════════════════════════════════════ */

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-tertiary);
}

.empty-state svg {
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty-state h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 15px;
    margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST (الإشعارات)
   ═══════════════════════════════════════════════════════════════ */

.toast-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[dir="ltr"] .toast-container {
    left: auto;
    right: 20px;
}

.toast {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    /* flex-start, not center: an error toast can carry detail lines below the
       message, and centring would float the icon into the middle of them. */
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.45;
    animation: slideIn 0.3s ease;
    max-width: 420px;
}

.toast svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[dir="ltr"] .toast {
    animation: slideInLtr 0.3s ease;
}

@keyframes slideInLtr {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (التجاوب مع الجوال)
   ═══════════════════════════════════════════════════════════════ */

.mobile-toggle {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

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

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(100%);
    }

    [dir="ltr"] .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        flex: 1 1 auto;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    [dir="ltr"] .main-content {
        margin-right: 0;
    }

    .mobile-toggle {
        display: flex;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .top-bar {
        padding: 0 16px;
    }

    .page-content {
        padding: 16px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .login-card {
        padding: 24px;
    }

    .page-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .page-toolbar .btn {
        width: 100%;
    }

    .section-title {
        font-size: 19px;
    }

    .reports-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

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

    .tabs {
        max-width: 100%;
        overflow-x: auto;
        width: 100%;
    }

    .tab-btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 420px) {
    .top-bar-title {
        font-size: 17px;
    }

    .top-bar-actions {
        gap: 4px;
    }

    .page-content {
        padding: 12px;
    }

    .card-header,
    .card-body {
        padding: 14px;
    }

    .report-summary {
        padding: 12px;
    }

    .report-summary strong {
        font-size: 22px;
    }

    .activity-row {
        align-items: flex-start;
    }

    .activity-row time {
        white-space: normal;
    }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES (أدوات مساعدة)
   ═══════════════════════════════════════════════════════════════ */

.hidden {
    display: none !important;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.text-sm {
    font-size: 14px;
}

.text-lg {
    font-size: 17px;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.text-secondary {
    color: var(--text-secondary);
}

.text-tertiary {
    color: var(--text-tertiary);
}

.w-full {
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════════
   FORM & TABLE COMPONENTS (مكونات النماذج والجداول)
   ═══════════════════════════════════════════════════════════════ */

/* Visible to screen readers only - used for labels on compact controls. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.form-control-sm {
    padding: 6px 10px;
    font-size: 14px;
    width: 74px;
}

.form-color {
    padding: 4px;
    height: 44px;
    cursor: pointer;
}

/* Day / period selector chips */
.chip-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 15px;
    user-select: none;
    transition: all var(--transition-fast);
}

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

.chip input {
    accent-color: var(--accent-blue);
    cursor: pointer;
}

.chip-active {
    background: var(--accent-blue-light);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    font-weight: 600;
}

.chip:focus-within {
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

.check-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 15px;
}

.check-control input {
    accent-color: var(--accent-blue);
    cursor: pointer;
}

.colour-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
}

.row-muted {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

/* Curriculum picker rows */
.subject-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 52vh;
    overflow-y: auto;
}

.subject-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

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

.subject-row-fields {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.inline-label {
    font-size: 13px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.login-footer {
    margin-top: 18px;
    text-align: center;
}

/* Shown only on paper - identifies which schedule was printed. */
.print-title {
    display: none;
}

@media (max-width: 560px) {
    .subject-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EMPLOYEE PROFILE (الملف الشخصي للموظف)
   ═══════════════════════════════════════════════════════════════ */

.profile-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}

.profile-identity .card-body {
    text-align: center;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, var(--brand-indigo), var(--accent-purple));
}

.profile-name {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
}

.profile-subtitle {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--text-tertiary);
}

.profile-badges {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.profile-school {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--text-tertiary);
}

/* Label/value pairs on the profile cards */
.detail-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.detail-row dt {
    font-size: 14px;
    color: var(--text-tertiary);
    flex: 0 0 auto;
}

.detail-row dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: end;
    /* Emails, phone numbers and dates stay LTR inside an RTL page. */
    direction: ltr;
    unicode-bidi: plaintext;
    word-break: break-word;
}

/* Teaching-load meter */
.load-bar {
    height: 10px;
    margin-top: 16px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.load-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width var(--transition-base, 0.2s) ease;
}

.load-green { background: var(--accent-green); }
.load-orange { background: var(--accent-orange); }
.load-red { background: var(--accent-red); }

.notice-card {
    border-left: 3px solid var(--accent-orange);
}

[dir="rtl"] .notice-card {
    border-left: 1px solid var(--border-color);
    border-right: 3px solid var(--accent-orange);
}

.notice-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--text-primary);
}

.notice-card p {
    margin: 0;
    font-size: 15px;
    color: var(--text-secondary);
}

.notice-inline {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--accent-red-light, rgba(239, 68, 68, 0.12));
    color: var(--accent-red);
    font-size: 14px;
}

.profile-timetable-header {
    margin-top: 20px;
}

/* A slot holding more than one lesson is a real clash, not a layout artefact. */
.sg-cell-conflict {
    outline: 2px solid var(--accent-red);
    outline-offset: -2px;
}

@media (max-width: 900px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ROLES & PERMISSION MATRIX (مصفوفة الصلاحيات)
   ═══════════════════════════════════════════════════════════════ */

.key-chip {
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    /* An identifier is always Latin, even inside an RTL table. */
    direction: ltr;
    unicode-bidi: isolate;
}

.row-note {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-tertiary);
}

.perm-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.matrix-table th.matrix-role {
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
}

.matrix-table .matrix-group td {
    background: var(--bg-tertiary);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

.matrix-table .matrix-permission {
    padding-inline-start: 24px;
    color: var(--text-secondary);
    font-size: 14px;
}

.matrix-table .matrix-cell {
    text-align: center;
}

.matrix-yes {
    color: var(--accent-blue);
    font-weight: 700;
}

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

.matrix-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Checkbox grid inside the role editor */
.permission-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 10px;
    max-height: 46vh;
    overflow-y: auto;
    padding: 4px;
}

.permission-group {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.permission-group legend {
    padding: 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE PICTURE (صورة الملف الشخصي)
   ═══════════════════════════════════════════════════════════════ */

.profile-avatar-image {
    object-fit: cover;
    /* Overrides the flex centring used by the initial-letter fallback. */
    display: block;
    padding: 0;
}

.profile-name-en {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--text-tertiary);
    direction: ltr;
    unicode-bidi: plaintext;
}

.profile-bio {
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.user-avatar-image {
    object-fit: cover;
    display: block;
    padding: 0;
}

.avatar-editor {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.avatar-editor .profile-avatar {
    width: 72px;
    height: 72px;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-tertiary);
}

/* No picture chosen yet: show the empty frame, not a broken-image icon. */
.avatar-editor .profile-avatar.is-empty {
    visibility: hidden;
}

.avatar-editor-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.avatar-editor-actions .form-hint {
    margin-top: 0;
}

/* The file input is hidden; its <label> is the visible control. */
label.btn {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   STUDENTS, MARKS & SCHOOLS (الطلاب والدرجات والمدارس)
   ═══════════════════════════════════════════════════════════════ */

.school-switcher {
    margin-inline-start: 12px;
}

.school-switcher select {
    min-width: 150px;
    max-width: 220px;
}

.school-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.school-card-active {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue) inset;
}

.school-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.school-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.school-meta {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-tertiary);
    direction: ltr;
    unicode-bidi: plaintext;
}

/* showSchoolProfileModal()'s read-only identity header. */
.school-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.school-profile-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}

.school-profile-logo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    font-size: 26px;
    font-weight: 700;
}

.school-profile-motto {
    margin-top: 2px;
    color: var(--text-secondary);
    font-style: italic;
}

.school-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.school-stats div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.school-stats strong {
    font-size: 19px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.school-stats span {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
}

.school-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* ─── Students ─────────────────────────────────────────────────── */

.student-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--bg-tertiary);
}

.student-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-blue);
    background: var(--accent-blue-light);
}

/* ─── Marks entry grid ─────────────────────────────────────────── */

.marks-table th.mark-column,
.report-table th.mark-column {
    text-align: center;
    white-space: nowrap;
}

.mark-column-meta {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    direction: ltr;
    unicode-bidi: isolate;
}

.mark-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.mark-input {
    width: 66px;
    padding: 6px 4px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color var(--transition-fast);
}

.mark-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

.mark-input:disabled {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

/* Out of range: flagged as you type, before any request is made. */
.mark-input.mark-invalid {
    border-color: var(--accent-red);
    background: var(--accent-red-light);
}

/* The number spinners steal width and are useless for marks. */
.mark-input::-webkit-outer-spin-button,
.mark-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.mark-input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.mark-total {
    font-weight: 700;
}

.mark-pass { color: var(--accent-green); }
.mark-fail { color: var(--accent-red); }
.mark-empty { color: var(--text-muted); }

/* ─── Report card ──────────────────────────────────────────────── */

.report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 16px;
    flex-wrap: wrap;
}

.report-student {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
}

.report-meta {
    margin: 3px 0 0;
    font-size: 14px;
    color: var(--text-tertiary);
}

.report-average {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    font-size: 14px;
}

.report-average strong {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.report-table tfoot td {
    border-top: 2px solid var(--border-color);
    background: var(--bg-secondary);
}

.report-footnote {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* ─── Guardian portal ──────────────────────────────────────────── */

.child-strip {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.child-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
    cursor: pointer;
    flex: 0 0 auto;
    font-family: inherit;
    text-align: start;
    transition: all var(--transition-fast);
}

.child-chip:hover {
    border-color: var(--accent-blue);
}

.child-chip-active {
    border-color: var(--accent-blue);
    background: var(--accent-blue-light);
}

.child-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--bg-tertiary);
}

.child-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, var(--brand-indigo), var(--accent-purple));
}

.child-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.child-chip-text strong {
    font-size: 15px;
    color: var(--text-primary);
}

.child-chip-text span {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ─── Memberships ──────────────────────────────────────────────── */

.membership-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.membership-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

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

.membership-row select {
    min-width: 150px;
    max-width: 220px;
}

.plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plain-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

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

    .school-switcher select {
        max-width: 120px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ERROR FEEDBACK (رسائل الأخطاء)
   ═══════════════════════════════════════════════════════════════ */

/* The input a failed save actually objected to. */
.field-invalid,
.form-control.field-invalid {
    border-color: var(--accent-red);
    background: var(--accent-red-light);
}

.field-invalid:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px var(--accent-red-light);
}

.field-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-red);
}

/* Toasts carry a message, optional detail lines and a log reference. */
.toast-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.toast-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    opacity: 0.85;
}

.toast-lines li::before {
    content: '‚2';
    margin-inline-end: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   LEARNING MODULE (الحصص، الوظائف، الأنشطة، الامتحانات، المراسلة)
   Layout classes for public/learning.js. Buttons, badges, cards, tables and
   forms reuse the components above; only what is new to that module is here.
   ═══════════════════════════════════════════════════════════════ */

.page-heading {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
}

/* — detail views (a lesson, a homework sheet, an exam...) — */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    padding: 16px 20px;
}

.detail-label {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.prose-block {
    padding: 0 20px 16px;
}

.prose-block h4 {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px;
}

.prose-block p {
    margin: 0;
    white-space: pre-wrap;
}

.cell-sub {
    display: block;
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent-blue);
    cursor: pointer;
    text-align: start;
}

.link-button:hover {
    text-decoration: underline;
}

.subject-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-inline-end: 4px;
    flex: none;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 0;
}

.checkbox-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px 12px;
}

.option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.card-warning {
    border-inline-start: 3px solid var(--accent-orange);
}

.inline-warning {
    font-size: 14px;
    color: var(--accent-orange);
    margin: 0 0 10px;
}

/* — tabs (My Learning) — */
.tab-bar {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.tab:hover {
    color: var(--text-primary);
}

.tab-active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    font-weight: 600;
}

/* — work cards (a pupil's homework/exam/lesson/revision tiles) — */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.work-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.work-card.is-overdue {
    border-inline-start: 3px solid var(--accent-red);
}

.work-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.work-head strong {
    flex: 1;
    min-width: 0;
}

.work-body {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.work-feedback {
    font-size: 14px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin: 0;
}

.work-score {
    font-size: 15px;
    margin: 0;
}

.work-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

/* — placement/diagnostic level cards — */
.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.level-card {
    border: 1px solid var(--border-color);
    border-inline-start: 3px solid var(--text-muted);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

.level-card.level-excellent,
.level-card.level-good { border-inline-start-color: var(--accent-green); }
.level-card.level-fair { border-inline-start-color: var(--accent-orange); }
.level-card.level-weak { border-inline-start-color: var(--accent-red); }

.level-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.level-head strong {
    flex: 1;
}

.level-score {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* — exam builder & marking — */
.question-list {
    list-style: none;
    margin: 0;
    padding: 0 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.question-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

.question-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.question-body {
    margin: 0 0 10px;
    font-size: 16px;
}

.option-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.option-list li {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 15px;
}

.option-list li.is-correct {
    border-color: var(--accent-green);
    background: var(--accent-green-light);
}

.option-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.option-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 15px;
}

.option-choice:has(input:checked) {
    border-color: var(--accent-blue);
    background: var(--accent-blue-light);
}

.answer-block {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-top: 8px;
}

.answer-block.is-correct {
    background: var(--accent-green-light);
}

.answer-block p {
    margin: 2px 0 0;
}

.answer-cell {
    max-width: 280px;
    white-space: pre-wrap;
    font-size: 14px;
}

.mark-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.mark-row .form-control {
    width: auto;
    flex: 1;
}

.topic-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.topic-bar {
    display: grid;
    grid-template-columns: 110px 1fr 40px;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.topic-name {
    color: var(--text-secondary);
}

.topic-track {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: block;
}

.topic-fill {
    display: block;
    height: 100%;
}

.topic-fill.topic-green { background: var(--accent-green); }
.topic-fill.topic-orange { background: var(--accent-orange); }
.topic-fill.topic-red { background: var(--accent-red); }
.topic-fill.topic-blue { background: var(--accent-blue); }

/* ═══════════════════════════════════════════════════════════════
   ADMIN DASHBOARD OVERVIEW (لوحة معلومات المدير)
   ═══════════════════════════════════════════════════════════════ */

/* Home ‹ group ‹ page - see renderBreadcrumb()'s doc comment in app.js.
   Currently only the dashboard uses this; kept generic so any other page
   can adopt it later without rework. */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 10px;
}

.breadcrumb-item.is-current {
    color: var(--text-secondary);
}

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

.dashboard-header {
    margin-bottom: 24px;
}

.dashboard-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dashboard-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-search {
    position: relative;
    display: flex;
    align-items: center;
}

.dashboard-search svg {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

.dashboard-search input {
    width: 260px;
    max-width: 60vw;
    padding: 10px 14px;
    padding-inline-start: 36px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: all var(--transition-fast);
}

.dashboard-search input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

@media (max-width: 560px) {
    .dashboard-search input {
        width: 100%;
        max-width: none;
    }
}

.dashboard-columns {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 24px;
    align-items: start;
}

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

.dashboard-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

/* Centred icon-badge tile, matching the design canvas's dashboard mockup -
   a plain (borderless) tinted surface rather than the bordered white card
   most of the app's tiles use, since a row of six of these reads as one
   quick-action strip rather than six separate cards. */
.shortcut-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: center;
    font: inherit;
    transition: all var(--transition-fast);
}

.shortcut-tile:hover {
    border-color: var(--accent-blue);
}

.shortcut-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    color: var(--accent-blue);
}

.shortcut-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.shortcut-meta {
    font-size: 12px;
    color: var(--text-tertiary);
}

.dashboard-alerts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.alert-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: none;
    border: none;
    padding: 0;
    text-align: start;
    font: inherit;
    cursor: pointer;
}

.alert-row svg {
    color: var(--accent-orange);
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-text {
    display: block;
    font-size: 15px;
    color: var(--text-primary);
}

.alert-meta {
    display: block;
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.topic-value {
    text-align: end;
    color: var(--text-tertiary);
}

/* — sitting a paper — */
.exam-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.exam-bar-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.exam-clock {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent-red);
}

.exam-questions .question-item {
    scroll-margin-top: 90px;
}

.result-hero {
    text-align: center;
    padding: 12px 20px 4px;
}

.result-score {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 700;
}

/* — chat — */
.chat-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    height: calc(100vh - 160px);
    min-height: 420px;
}

.chat-sidebar {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
}

.thread-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    flex: 1;
}

.thread-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    text-align: start;
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
}

.thread-item:hover {
    background: var(--bg-tertiary);
}

.thread-item.is-active {
    background: var(--accent-blue-light);
}

.thread-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
}

.thread-preview {
    font-size: 13px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-main {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-message {
    max-width: 70%;
    align-self: flex-start;
}

.chat-message.is-mine {
    align-self: flex-end;
}

.chat-author {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.chat-bubble {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 8px 12px;
    font-size: 15px;
    white-space: pre-wrap;
}

.chat-message.is-mine .chat-bubble {
    background: var(--accent-blue);
    color: var(--bg-primary);
}

.chat-time {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.chat-message.is-mine .chat-time {
    text-align: end;
}

.chat-closed {
    text-align: center;
    padding: 12px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.chat-composer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
}

.chat-composer .form-control {
    flex: 1;
    resize: none;
}

/* — lesson videos — */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 0 20px 16px;
}

.video-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-tertiary);
}

.video-embed .video-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-meta {
    padding: 10px 12px;
}

.video-link {
    display: block;
    padding: 10px 12px;
    font-size: 14px;
}

/* — help page — */
.help-group-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 24px 0 10px;
}

.help-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 4px 16px;
}

.help-item summary {
    padding: 12px 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.help-item summary::-webkit-details-marker {
    display: none;
}

.help-item summary::before {
    content: '›';
    display: inline-block;
    margin-inline-end: 8px;
    transition: transform var(--transition-fast);
}

.help-item[open] summary::before {
    transform: rotate(90deg);
}

.help-item p {
    margin: 0 0 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* — announcement banner (dashboard) — */
.announcement-banner-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.announcement-banner {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border-inline-start: 4px solid var(--accent-blue);
    background: var(--accent-blue-light);
    font-size: 15px;
}

.announcement-banner span {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.announcement-banner.announcement-important {
    border-inline-start-color: var(--accent-orange);
    background: var(--accent-orange-light);
}

.announcement-banner.announcement-urgent {
    border-inline-start-color: var(--accent-red);
    background: var(--accent-red-light);
}

/* — honour roll — */
.honor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.honor-list {
    padding: 6px 20px 16px;
}

.honor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}

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

.honor-medal {
    width: 28px;
    text-align: center;
    font-size: 17px;
    flex: none;
}

.honor-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.honor-average {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--accent-blue);
}

/* — bulk selection bar (any data-table) — */
.bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--accent-blue-light);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-md);
    font-size: 15px;
}

.bulk-bar span {
    font-weight: 600;
    margin-inline-end: auto;
}

.stats-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .chat-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .chat-sidebar {
        max-height: 240px;
    }
}

.toast-reference {
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.12);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    /* A reference is Latin even on an RTL page - it gets read out loud. */
    direction: ltr;
    unicode-bidi: isolate;
}

.toast-close {
    align-self: flex-start;
    padding: 0 2px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    flex: 0 0 auto;
}

.toast-close:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCHABLE SELECT (قائمة قابلة للبحث)
   ═══════════════════════════════════════════════════════════════ */

.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.combo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 190px;
    flex: 1 1 190px;
    max-width: 280px;
}

.combo-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.combo-control {
    position: relative;
}

/* A plain <select> filter, labelled the same way a .combo is - a small
   caption above the control rather than relying on its own first option
   ("All") to carry the field's name too. Sized the same as .combo so the
   two line up when a filter bar mixes both kinds of control. */
.filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 190px;
    flex: 1 1 190px;
    max-width: 280px;
}

.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}

/* .form-control-sm's 74px default is sized for compact table-cell inputs
   (a score, a confidence rating) - never right for a <select>, whose text
   ("All", a status name...) needs real room, so every select gets its
   container's full width back everywhere (filter bars, modals, table
   cells alike). A non-select control (a date picker) only gets the same
   treatment when it's standing in a .combo/.filter-field, where the
   wrapper's own label already promises it the full width. A bare filter
   or toolbar control that isn't wrapped in either (a search box) gets the
   same 190-280px sizing those wrappers use, so a filter bar reads as one
   consistent row instead of a mix of full-size and pinched controls. */
select.form-control-sm {
    width: 100%;
}

.combo .form-control-sm,
.filter-field .form-control-sm {
    width: 100%;
}

.filter-bar > .form-control-sm,
.toolbar-group > .form-control-sm {
    flex: 1 1 190px;
    max-width: 280px;
}

.table-filter .form-control-sm {
    width: 100%;
}

.combo-input {
    width: 100%;
    /* Room for the chevron, on whichever side the writing direction puts it. */
    padding-inline-end: 32px;
    cursor: pointer;
}

.combo-input:focus {
    cursor: text;
}

.combo-toggle {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding: 2px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.combo-open .combo-toggle {
    transform: translateY(-50%) rotate(180deg);
}

.combo-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.combo-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: var(--text-primary);
    cursor: pointer;
}

/* Hover and keyboard focus share one highlight, so the two never disagree. */
.combo-option:hover,
.combo-option.is-active {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.combo-option.is-selected {
    font-weight: 700;
}

.combo-option.is-selected::after {
    content: '\2713';
    color: var(--accent-blue);
    font-weight: 700;
}

.combo-option.is-disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.combo-option-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.combo-empty {
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: var(--text-tertiary);
}

.combo-disabled .combo-input {
    background: var(--bg-tertiary);
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   TERM COUNT (عدد الفصول الدراسية)
   ═══════════════════════════════════════════════════════════════ */

.term-count-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.term-count-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 74px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.term-count-option:hover:not(:disabled) {
    border-color: var(--accent-blue);
}

.term-count-option strong {
    font-size: 20px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.term-count-option span {
    font-size: 12px;
}

.term-count-option.is-active {
    border-color: var(--accent-blue);
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

.term-count-option.is-active strong {
    color: var(--accent-blue);
}

.term-count-option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.row-current {
    background: var(--accent-blue-light);
}

@media (max-width: 640px) {
    .combo {
        max-width: none;
        flex-basis: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ATTENDANCE REGISTER (سجل الحضور)
   ═══════════════════════════════════════════════════════════════ */

/* A radio styled as a tick target: a full column of native radios is hard to
   hit accurately, and gives no colour signal for the status chosen. */
.register-radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.register-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.register-radio span {
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-primary);
    transition: all var(--transition-fast);
}

.register-radio:hover span {
    border-color: var(--text-tertiary);
}

.register-radio input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

.register-radio input:disabled + span {
    background: var(--bg-tertiary);
    cursor: not-allowed;
}

.register-green input:checked + span { border-color: var(--accent-green); background: var(--accent-green); }
.register-red input:checked + span { border-color: var(--accent-red); background: var(--accent-red); }
.register-orange input:checked + span { border-color: var(--accent-orange); background: var(--accent-orange); }
.register-blue input:checked + span { border-color: var(--accent-blue); background: var(--accent-blue); }

.register-note {
    min-width: 130px;
}

/* ═══════════════════════════════════════════════════════════════
   COMPLAINT THREAD (سجل الشكوى)
   ═══════════════════════════════════════════════════════════════ */

.complaint-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.complaint-head > div {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.complaint-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 42vh;
    overflow-y: auto;
    margin-bottom: 16px;
    padding-inline-end: 4px;
}

.complaint-message {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border-inline-start: 3px solid var(--border-color);
}

/* Staff-only notes read differently so nobody posts one by mistake. */
.complaint-message.is-internal {
    background: var(--accent-orange-light);
    border-inline-start-color: var(--accent-orange);
}

.complaint-author {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    font-size: 14px;
}

.complaint-author time {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-inline-start: auto;
}

.complaint-message p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

.complaint-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.complaint-controls .form-group {
    flex: 1 1 160px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES (طباعة الجدول)
   ═══════════════════════════════════════════════════════════════ */

@media print {

    .sidebar,
    .top-bar,
    .mobile-toggle,
    .icon-btn,
    .btn,
    .tabs,
    .nav-tabs {
        display: none !important;
    }

    .main-content {
        margin: 0 !important;
    }

    .page-content {
        padding: 0 !important;
    }

    .schedule-container {
        border: none !important;
        overflow: visible !important;
    }

    .schedule-grid {
        page-break-inside: avoid;
    }

    .sg-lesson {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        background: white !important;
        color: black !important;
    }

    /* The heading is the only way to tell printed schedules apart. */
    .print-title {
        display: block !important;
        margin: 0 0 16px;
        font-size: 19px;
        font-weight: 700;
        text-align: center;
        color: black !important;
    }

    .page-toolbar,
    .toast-container,
    .loading-overlay,
    .modal-overlay,
    .sidebar-overlay {
        display: none !important;
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .schedule-grid {
        min-width: 0 !important;
    }

    .profile-layout {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .permission-matrix,
    .matrix-table {
        max-height: none !important;
        overflow: visible !important;
    }

    /* A report card is the main thing anyone prints from this app. */
    .child-strip,
    .filter-bar,
    .combo-list,
    .school-switcher,
    .report-average select,
    .mark-input {
        display: none !important;
    }

    .report-head {
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
    }

    .report-table tfoot td {
        background: #f4f4f4 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .mark-pass,
    .mark-fail {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .profile-avatar-image,
    .user-avatar-image {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .load-bar-fill,
    .profile-avatar {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @page {
        margin: 12mm;
    }
}