@import './base.css?v=20260721c';

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');

:root {
    --primary-color: #fefffb;
    --secondary-color: #aac65d;
    --accent-color: #137980;
    --white: #ffffff;
    --light-gray: #f7f7f7;
    --dark-gray: #d5e0eb;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --border-radius: 15px;
}

[data-theme="dark"] {
    --primary-color: #1a1a1a;
    --secondary-color: #8ba83f;
    --accent-color: #4a9ba5;
    --white: #2d2d2d;
    --light-gray: #333333;
    --dark-gray: #555555;
    --shadow: 0 4px 20px rgba(255,255,255,0.1);
}

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

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--light-gray);
    color: var(--accent-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

.header {
    background: var(--primary-color);
    height: 70px;
    padding: 0 2rem;
    border-bottom: 2px solid var(--accent-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: var(--shadow);
}

.nav-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-button {
    background: none;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Tajawal', sans-serif;
    font-weight: 500;
    transition: background 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.back-button:hover {
    background: var(--accent-color);
    color: var(--primary-color);
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle {
    background: none;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, color 0.3s ease;
}

.theme-toggle:hover {
    background: var(--accent-color);
    color: var(--primary-color);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1rem;
    overflow: hidden;
    border: 2px solid var(--accent-color);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-content {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Quick Actions - Enhanced Card Layout */
.quick-actions {
    margin-bottom: 3rem;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.5rem;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.action-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid transparent;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--secondary-color);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.action-card:hover::before {
    transform: translateX(0);
}

.action-card:hover {
    transform: translateY(-5px);
    border-color: var(--secondary-color);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.action-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: var(--accent-color);
    transition: color 0.3s ease, transform 0.3s ease;
}

.action-card:hover .action-icon {
    color: var(--secondary-color);
    transform: scale(1.1);
}

.action-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--accent-color);
}

.action-description {
    font-size: 0.95rem;
    opacity: 0.8;
    line-height: 1.5;
}

/* Statistics Section - Simplified */
.stats-section {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.stat-card {
    background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--secondary-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
}

.stat-value {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
}

.stat-label {
    color: #666;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Files Section - Card-based Layout */
.files-section {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    box-shadow: var(--shadow);
}

.files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.paused-upload-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    color: #7a5b00;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.paused-upload-banner i {
    font-size: 1.2rem;
    color: #b28900;
}

.paused-upload-banner span {
    flex: 1;
    min-width: 200px;
}

.paused-upload-banner-actions {
    display: flex;
    gap: 0.5rem;
}

.filter-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select {
    padding: 0.6rem 1rem;
    border: 2px solid var(--dark-gray);
    border-radius: 8px;
    font-family: inherit;
    background: var(--white);
    color: var(--accent-color);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.filter-select:focus {
    border-color: var(--secondary-color);
    outline: none;
}

.btn {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Tajawal', sans-serif;
    font-weight: 600;
    /* Shared by .btn-primary/-secondary/-danger, whose :hover rules only ever
       change these three. */
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary {
    background: var(--secondary-color);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

.btn-secondary:hover {
    background: var(--accent-color);
    color: var(--white);
}

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

.btn-danger:hover {
    background: #c82333;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Files Grid Layout */
.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.file-card {
    background: var(--white);
    border: 2px solid var(--dark-gray);
    border-radius: 12px;
    padding: 1rem;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    /* Column + auto-margin on the actions: cards in a row are stretched to the
       tallest one by the grid, and without this the shorter card's buttons
       floated in its middle. */
    display: flex;
    flex-direction: column;
}

.file-card:hover {
    border-color: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* The thumbnail box. The sizing properties were written inline by
   js/teacher-videos.js on every card; only the background-image and the cursor
   still are. Keeping them here is what lets the mobile block swap the fixed
   height for an aspect ratio — an inline style would win over it. */
.file-card-header {
    display: flex;
    align-items: start;
    gap: 1rem;
    margin-bottom: 0.75rem;
    position: relative;
    /* Aspect ratio, not a fixed height, at every width. A 180px minimum on a
       column that is ~320px wide is a 16:9 thumbnail with dead space under it;
       tying the height to the column keeps the proportion right and takes the
       slack out of the top of the card. */
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 auto;
}

/* An <img>, not the header's own background-image: a background-image is
   fetched and decoded the instant it lands in the DOM, with no way to defer
   it. Every card rebuilds on every upload (renderFiles() rebuilds the whole
   grid via innerHTML), so a teacher with a large library forced every single
   thumbnail to load at once, right on top of whatever memory the upload
   itself was still holding — `loading="lazy" decoding="async"` here is what
   lets the browser skip the ones off-screen, the same rule already applied to
   every other generated <img> grid on the platform. */
.file-card-header .file-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.file-icon-large {
    width: 60px;
    height: 60px;
    background: var(--secondary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.8rem;
    flex-shrink: 0;
}

.file-info {
    flex: 1;
}

.file-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent-color);
    margin-bottom: 0.25rem;
    /* One long title alone decided the height of its whole grid row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.file-description {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Two columns, not one nowrap row.
 *
 * This was `display: flex; gap: 1.5rem` with no wrap, holding four or five
 * items. They could never fit across a ~320px column, so each one shrank to
 * its minimum width and its label wrapped internally — "أ. محمد عبد الرحمن"
 * over three lines, five times over. That single rule was most of the height
 * complained about; a grid gives every item a real column and one line. */
.file-meta {
    display: grid;
    /* auto-fit, not a fixed column count: the card is 210px wide in a two-up
       tablet grid and 390px on a desktop, and the right answer is one column
       in the first case and two in the second. Letting the grid decide from
       the space it actually has removes the per-breakpoint column overrides
       that used to fight each other. */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.35rem 0.75rem;
    margin: 0.75rem 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--dark-gray);
    border-bottom: 1px solid var(--dark-gray);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    min-width: 0;
}

/* Truncate rather than wrap: the icon already says what the value is, so a
   long teacher name losing its tail costs nothing, while wrapping costs a
   whole extra row across the card. */
.meta-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meta-icon {
    color: var(--secondary-color);
}

/* The markup here is three children — a div of up to three buttons, a div that
   is usually empty, and the delete button. With `space-between` and no wrap the
   inner div squeezed its buttons into a narrow box and they stacked vertically,
   adding another two rows to the card. Wrapping at this level and flattening
   the inner divs lets the buttons flow across the full width instead. */
.file-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    /* Pins the row to the bottom of a stretched card. */
    margin-top: auto;
    padding-top: 0.75rem;
}

.file-actions > div {
    display: contents;
}

/* Push delete to the far edge of whichever line it lands on. */
.file-actions > .file-delete-btn {
    margin-inline-start: auto;
}

.file-actions .btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.status-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-active {
    background: var(--success-color);
    color: var(--white);
}

.status-processing {
    background: var(--warning-color);
    color: var(--white);
}

.status-draft {
    background: var(--info-color);
    color: var(--white);
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--white);
    width: 100%;
    max-width: 600px;
    border-radius: var(--border-radius);
    padding: 2rem;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--dark-gray);
    padding-bottom: 1rem;
}

.modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-color);
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--dark-gray);
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: var(--danger-color);
}

.modal-body {
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid var(--dark-gray);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--secondary-color);
    outline: none;
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/* Share Modal Specific */
.share-options {
    margin-bottom: 1.5rem;
}

.share-option {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 8px;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.share-option:hover {
    background: var(--dark-gray);
}

.share-option input[type="radio"] {
    margin-left: 1rem;
}

.students-list {
    max-height: 300px;
    overflow-y: auto;
    border: 2px solid var(--dark-gray);
    border-radius: 8px;
    padding: 1rem;
}

.student-item {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    margin-bottom: 0.5rem;
    background: var(--light-gray);
    border-radius: 6px;
    transition: background 0.3s ease;
}

.student-item:hover {
    background: var(--dark-gray);
}

.student-checkbox {
    width: 20px;
    height: 20px;
    margin-left: 1rem;
    cursor: pointer;
}

.student-name {
    flex: 1;
    font-weight: 500;
}

.student-class {
    font-size: 0.9rem;
    color: #666;
}

/* Upload Progress */
.upload-progress {
    display: none;
    margin-top: 1rem;
}

.progress-bar {
    width: 100%;
    height: 30px;
    background: var(--light-gray);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: var(--secondary-color);
    width: 0%;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
}

/* Interactive Video Options */
.video-platform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.platform-option {
    padding: 1.5rem;
    border: 2px solid var(--dark-gray);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.platform-option:hover {
    border-color: var(--secondary-color);
    background: var(--light-gray);
}

.platform-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--accent-color);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #666;
}

.empty-icon {
    font-size: 4rem;
    color: var(--dark-gray);
    margin-bottom: 1rem;
}

.empty-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-description {
    margin-bottom: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-content {
        padding: 1rem;
    }

    .header {
        padding: 0 1rem;
    }

    .page-title {
        font-size: 1.2rem;
    }

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

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

    /* Two cards per row on a phone, same as the student grid.
     *
     * This was a single full-width column, which made every card a tall
     * rectangle: a 180px thumbnail, then a title, a description, up to five meta
     * rows and four action buttons stacked down it. Halving the width alone
     * would make that worse, so the card is compacted to match — the thumbnail
     * scales with the column and the text is clamped. */
    .files-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    /* Grid stretches both cards in a row to the taller one; without this the
       shorter card's buttons float mid-card instead of lining up with its
       neighbour's. */
    .file-card {
        padding: 0.7rem;
        display: flex;
        flex-direction: column;
    }

    .file-card .file-actions {
        margin-top: auto;
    }

    .file-card-header {
        aspect-ratio: 16 / 9;
        min-height: 0;
        margin-bottom: 0.6rem;
    }

    .file-title {
        font-size: 0.9rem;
        line-height: 1.35;
        /* Two lines, then ellipsis — otherwise one long title alone decides how
           tall the row is, and its neighbour is padded out to match. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .file-description {
        font-size: 0.78rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Column count is auto-fit in the base rule; only the spacing tightens. */
    .file-meta {
        gap: 0.2rem 0.5rem;
        margin: 0.6rem 0;
        padding: 0.6rem 0;
    }

    .file-meta .meta-item {
        font-size: 0.72rem;
        gap: 0.3rem;
    }

    /* Four labelled buttons will not fit across a half-width card, so they wrap
       two-up. The labels stay: these are destructive and irreversible actions
       (حذف, إرسال) and an unlabelled icon is the wrong place to save space. */
    .file-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        /* Stretch, not centre: "أكواد الدخول" wraps to two lines and is taller
           than the button beside it, which centring left visibly misaligned. */
        align-items: stretch;
    }

    .file-actions > div {
        display: contents;
    }

    .file-actions .btn {
        flex: 1 1 calc(50% - 0.35rem);
        justify-content: center;
        padding: 0.4rem 0.25rem;
        font-size: 0.72rem;
        gap: 0.25rem;
        /* Undo the desktop `nowrap`. With it, "أكواد الدخول" had a min-content
           width wider than half a ~160px card, so flex could not fit two per
           row and put every button on a line of its own — four stacked rows,
           which is most of why the card was a tall sliver. Letting the label
           wrap to two short lines is what makes the 2-up row possible. */
        white-space: normal;
    }

    /* Delete goes back into the flow; the desktop auto-margin would strand it
       alone on the last row. */
    .file-actions > .file-delete-btn {
        margin-inline-start: 0;
    }

    /* Undo the desktop ellipsis too. Truncating to one line is right at 320px
       where the label has room to be read; in a 150px column it turned every
       value into rubble ("…er 3 أ", "١١ م…"). Wrapping costs a line and keeps
       the meaning. */
    .file-meta .meta-item span {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .files-header {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-controls {
        width: 100%;
    }

    .user-info span {
        display: none;
    }

    .modal-content {
        padding: 1.5rem;
    }
}
.video-modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Darkened from 0.9 to carry the same visual weight the blur below used to
       add, now that the blur itself is desktop-only. */
    background-color: rgba(15, 15, 15, 0.95);
    justify-content: center;
    align-items: center;
}

/* backdrop-filter is a desktop-only garnish: a full-viewport blur re-composites
   every frame while the backdrop's opacity animates open/closed, which is the
   modal jank reported on mid-range Android. Gating it here means phones skip
   the blur entirely instead of paying for it and never noticing it's there. */
@media (min-width: 900px) {
    .video-modal {
        backdrop-filter: blur(4px);
    }
}

.video-modal.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.video-modal-content {
    background-color: #111;
    padding: 1rem;
    border-radius: 12px;
    max-width: 900px;
    width: 90%;
    color: #fff;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.video-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    text-align: center;
}

.video-container {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

#videoPlayer {
    width: 100%;
    height: auto;
    border-radius: 10px;
    outline: none;
    background: #000;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 16px;
    color: #fff;
    font-size: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: 0.3s;
}

.close-btn:hover {
    color: #f33;
}

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


/* --- Video Modal --- */
.video-modal {
    position: fixed;
    inset: 0;
    /* Darkened from 0.85 — see the blur-gating comment on the first .video-modal
       block above. */
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

/* Desktop-only blur; see the comment above the first .video-modal rule. */
@media (min-width: 900px) {
    .video-modal {
        backdrop-filter: blur(6px);
    }
}

.video-modal.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.video-dialog {
    background: #000;
    border-radius: 15px;
    max-width: 900px;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

.video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: #111;
    color: #fff;
    border-bottom: 1px solid #222;
}

.video-header h3 {
    font-size: 1.2rem;
    margin: 0;
}

.video-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s;
}

.video-close:hover {
    transform: scale(1.2);
    color: #f44336;
}

.video-body {
    position: relative;
    background: #000;
}

.video-player {
    width: 100%;
    height: 500px;
    border: none;
    background: #000;
    outline: none;
}

.thumbnail-preview img {
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    max-width: 150px;
    height: auto;
    transition: transform 0.2s ease;
}
.thumbnail-preview img:hover {
    transform: scale(1.05);
}

/* ===========================================
   إصلاحات التجاوب للشاشات الصغيرة جداً (أقل من 480px)
   =========================================== */

@media (max-width: 470px) {
    /* 1. ضبط الهيدر لمنع تداخل اللوجو مع الأزرار */
    .header {
        height: auto;
        padding: 10px 0.8rem;
        flex-direction: column; /* تحويل العناصر لتكون فوق بعضها */
        gap: 10px;
    }

    .nav-group, .header-actions {
        width: 100%;
        justify-content: center; /* توسيط العناصر في الموبايل */
        gap: 0.5rem;
    }

    .page-title {
        font-size: 1.1rem;
        text-align: center;
    }

    /* 2. ضبط أزرار التحكم لتناسب المساحة الضيقة */
    .back-button {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }

    .theme-toggle {
        width: 35px;
        height: 35px;
    }

    /* 3. تصغير كروت الإحصائيات (Stats) */
    .stat-card {
        padding: 1.2rem;
    }

    .stat-value {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.9rem;
    }

    /* 4. إصلاح شبكة الملفات (Files Grid) */
    .main-content {
        padding: 0.8rem; /* تقليل الهامش الخارجي للمحتوى */
    }

    /* One column below 470px.
     *
     * Two-up is right down to about 470px and wrong below it. At 336px the
     * grid gives each card ~131px of usable width, and a single action button
     * needs ~70px even with its label wrapped — so two never fit on a row and
     * all four stack, one per line. Add five meta rows each wrapping onto two
     * lines and the card becomes the 700px sliver it was.
     *
     * A single 310px card is not the tall rectangle it used to be either: the
     * thumbnail is an aspect ratio now rather than a flat 180px, the meta sits
     * two-across, and the buttons fit two-up. It ends up shorter than the
     * two-up card it replaces, and readable. */
    .files-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .file-card {
        padding: 0.75rem;
    }

    .file-icon-large {
        width: 45px;
        height: 45px;
        font-size: 1.4rem;
    }

    /* These three continue the two-up card from the 768px block rather than
       overriding it — this query is a subset of that one and comes later, so
       anything left at the old full-width sizes would win here. */
    .file-title {
        font-size: 0.85rem;
    }

    .file-meta {
        gap: 0.3rem 0.7rem;
        padding: 0.6rem 0;
        margin: 0.6rem 0;
    }

    .file-meta .meta-item {
        font-size: 0.78rem;
    }

    /* 5. ضبط أزرار الأكشن (تحرير، حذف، مشاركة) */
    .file-actions {
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .file-actions .btn {
        /* Two per row on the full-width card. `1 1` so a row of two shares the
           width evenly, and the basis is under half so the pair always fits
           rather than breaking onto separate lines. */
        flex: 1 1 calc(50% - 0.5rem);
        justify-content: center;
        padding: 0.45rem 0.4rem;
        font-size: 0.78rem;
    }

    /* 6. إصلاح المودال (Modals) */
    .modal-content {
        padding: 1.2rem;
        width: 95%;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions .btn {
        width: 100%; /* جعل أزرار الحفظ والإلغاء بعرض كامل */
    }

    /* 7. إصلاح مشغل الفيديو */
    .video-dialog {
        width: 98%;
    }

    .video-player {
        height: 250px; /* تقليل الارتفاع ليناسب شاشات الموبايل */
    }
}

/* لمنع ظهور شريط التمرير الأفقي تماماً */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/**/

.upload-progress {
    display: none;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 1rem 0;
}

.progress-bar {
    width: 100%;
    height: 24px;
    background: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    border-radius: 12px;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.85rem;
    min-width: 40px;
}

.upload-details {
    text-align: center;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.btn-danger {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-danger:hover {
    background: #c82333;
}

/**/

/* ============================================
   SELECT ALL STUDENTS
   ============================================ */

.select-all-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(170, 198, 93, 0.1), rgba(19, 121, 128, 0.08));
    border-radius: 10px;
    border: 2px solid var(--accent-color, #137980);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.select-all-container:hover {
    background: linear-gradient(135deg, rgba(170, 198, 93, 0.2), rgba(19, 121, 128, 0.15));
    border-color: var(--secondary-color, #aac65d);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(19, 121, 128, 0.15);
}

[data-theme="dark"] .select-all-container {
    background: linear-gradient(135deg, rgba(139, 168, 63, 0.15), rgba(74, 155, 165, 0.12));
    border-color: var(--accent-color, #4a9ba5);
}

[data-theme="dark"] .select-all-container:hover {
    background: linear-gradient(135deg, rgba(139, 168, 63, 0.25), rgba(74, 155, 165, 0.2));
    box-shadow: 0 2px 8px rgba(74, 155, 165, 0.25);
}

/* Select All Checkbox */
.select-all-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-color, #137980);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
}

.select-all-checkbox:indeterminate {
    opacity: 0.8;
}

/* Select All Label */
.select-all-label {
    flex: 1;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.select-all-text {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent-color, #137980);
}

[data-theme="dark"] .select-all-text {
    color: var(--accent-color, #4a9ba5);
}

/* Selected Count Badge */
.selected-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: #888;
    background: var(--white, #ffffff);
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid #ddd;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
}

.selected-count.has-selection {
    background: var(--accent-color, #137980);
    color: #fff;
    border-color: var(--accent-color, #137980);
    font-weight: 600;
}

[data-theme="dark"] .selected-count {
    background: var(--light-gray, #333);
    color: #aaa;
    border-color: var(--dark-gray, #555);
}

[data-theme="dark"] .selected-count.has-selection {
    background: var(--accent-color, #4a9ba5);
    color: #fff;
    border-color: var(--accent-color, #4a9ba5);
}

/* ============================================
   STUDENTS SEARCH
   ============================================ */

.students-search-container {
    position: relative;
    margin-bottom: 8px;
}

.students-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 0.9rem;
    pointer-events: none;
}

[data-theme="dark"] .students-search-icon {
    color: #777;
}

.students-search-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: 'Tajawal', sans-serif;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: var(--white, #fff);
    color: var(--text-color, #333);
    box-sizing: border-box;
}

.students-search-input:focus {
    border-color: var(--accent-color, #137980);
    box-shadow: 0 0 0 3px rgba(19, 121, 128, 0.1);
}

[data-theme="dark"] .students-search-input {
    background: var(--light-gray, #333);
    border-color: var(--dark-gray, #555);
    color: #eee;
}

[data-theme="dark"] .students-search-input:focus {
    border-color: var(--accent-color, #4a9ba5);
    box-shadow: 0 0 0 3px rgba(74, 155, 165, 0.15);
}

/* ============================================
   STUDENTS DIVIDER
   ============================================ */

.students-divider {
    height: 1px;
    background: linear-gradient(to left, transparent, #ddd, transparent);
    margin: 4px 0 8px;
}

[data-theme="dark"] .students-divider {
    background: linear-gradient(to left, transparent, #555, transparent);
}

/* ============================================
   STUDENTS LIST
   ============================================ */

.students-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
    border: 1px solid #eee;
    border-radius: 10px;
    background: var(--white, #fff);
}

[data-theme="dark"] .students-list {
    border-color: var(--dark-gray, #555);
    background: var(--light-gray, #333);
}

/* Scrollbar */
.students-list::-webkit-scrollbar {
    width: 6px;
}

.students-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.students-list::-webkit-scrollbar-thumb {
    background: var(--secondary-color, #aac65d);
    border-radius: 3px;
}

.students-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color, #137980);
}

/* Student Items */
.student-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    transition: background 0.2s ease;
    margin: 2px 4px;
}

.student-item:hover {
    background: rgba(19, 121, 128, 0.05);
}

[data-theme="dark"] .student-item:hover {
    background: rgba(74, 155, 165, 0.1);
}

.student-item.selected {
    background: rgba(19, 121, 128, 0.1);
}

[data-theme="dark"] .student-item.selected {
    background: rgba(74, 155, 165, 0.18);
}

.student-item .student-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color, #137980);
    cursor: pointer;
    flex-shrink: 0;
}

.student-item.hidden-by-search {
    display: none;
}

/* No Results */
.no-students-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    color: #999;
    font-size: 0.9rem;
}

.no-students-found i {
    font-size: 1.5rem;
    opacity: 0.5;
}

[data-theme="dark"] .no-students-found {
    color: #777;
}
/* Engagement settings toggles in edit modal */
.engagement-setting {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.45rem 0;
    font-size: 0.95rem;
}
.engagement-setting input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Helper text under a setting (platform restriction, edit modal) */
.form-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary, #6b7280);
}

/* ============================================
   WATCH ANALYTICS MODAL
   ============================================ */
.wa-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
}
.wa-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 0.85rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary, #888);
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: inherit;
}
.wa-tab.active { color: var(--accent-color, #137980); border-bottom-color: var(--accent-color, #137980); }

.wa-panel { display: none; }
.wa-panel.active { display: block; }

.wa-loading, .wa-empty { text-align: center; padding: 2rem 1rem; color: var(--text-secondary, #888); }

.wa-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.25rem;
}
.wa-stat {
    background: var(--bg-secondary, rgba(0,0,0,0.04));
    border-radius: 12px;
    padding: 0.9rem 0.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.wa-stat i { color: var(--accent-color, #137980); font-size: 1.1rem; }
.wa-stat-num { font-size: 1.35rem; font-weight: 800; color: var(--text-primary, #1a1a1a); }
.wa-stat-label { font-size: 0.72rem; color: var(--text-secondary, #888); }

.wa-subtitle {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary, #1a1a1a);
}
.wa-subtitle i { color: #f5a623; }

.wa-top-list { display: flex; flex-direction: column; gap: 0.5rem; }
.wa-top-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-secondary, rgba(0,0,0,0.03));
    border-radius: 10px;
}
.wa-top-rank {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--accent-color, #137980);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
}
.wa-top-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.wa-top-title { font-weight: 600; font-size: 0.88rem; color: var(--accent-color, #137980); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.4rem; }
.wa-top-meta { display: flex; gap: 1rem; font-size: 0.76rem; color: #777; }
.wa-top-meta i { margin-inline-end: 0.2rem; }

.wa-type { flex-shrink: 0; font-size: 0.85rem; }
.wa-type.yt { color: #ff0000; }
.wa-type.vid { color: var(--accent-color, #137980); }

.wa-hist-list { display: flex; flex-direction: column; gap: 0.85rem; }
.wa-hist-row { display: flex; gap: 0.7rem; align-items: flex-start; }
.wa-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wa-hist-main { flex: 1; min-width: 0; }
.wa-hist-head { display: flex; align-items: center; justify-content: space-between; }
.wa-hist-name { font-weight: 600; font-size: 0.9rem; }
.wa-hist-pct { font-weight: 700; font-size: 0.85rem; color: var(--accent-color, #137980); }
.wa-hist-pct.done { color: var(--success-color, #28a745); }
.wa-hist-video { font-size: 0.82rem; color: var(--text-primary, #333); margin: 0.15rem 0; display: flex; align-items: center; gap: 0.35rem; }
.wa-hist-meta { display: flex; gap: 1rem; font-size: 0.74rem; color: var(--text-secondary, #888); flex-wrap: wrap; }
.wa-hist-meta i { margin-inline-end: 0.2rem; }
.wa-done { color: var(--success-color, #28a745); }

.wa-guest-note {
    display: flex; align-items: flex-start; gap: 0.5rem;
    background: var(--bg-secondary, rgba(0,0,0,0.06));
    border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.9rem;
    font-size: 0.78rem; line-height: 1.5; color: var(--text-secondary, #888);
}
.wa-guest-note i { margin-top: 0.15rem; color: var(--accent-color, #137980); flex-shrink: 0; }
.wa-avatar-guest {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-secondary, rgba(0,0,0,0.08)); color: var(--text-secondary, #888);
    font-size: 1.05rem;
}
.wa-hist-row-guest .wa-hist-name { font-style: italic; }

.wa-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.1rem; font-size: 0.85rem; }
.wa-page-btn, .wa-stats-page-btn {
    background: var(--bg-secondary, rgba(0,0,0,0.06));
    border: none; border-radius: 8px; width: 34px; height: 34px; cursor: pointer;
    color: var(--text-primary, #333);
}
.wa-page-btn:disabled, .wa-stats-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.grades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.grade-card {
    padding: 1rem;
    border: 2px solid var(--light-gray, #e0e0e0);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.grade-card.selected {
    border-color: var(--secondary-color, #137980);
    background: var(--light-gray, #e0e0e0);
}

/* Queued scheduled send, shown when the share modal reopens on a file whose
   audience is waiting for a date. It has no MediaShare rows behind it yet, so
   without this the modal looks like nothing was ever set up. */
.share-pending-notice {
    margin-top: .75rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    font-size: .9rem;
    line-height: 1.7;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .35);
    color: var(--text-color, #333);
}

.share-pending-notice i {
    margin-inline-end: .35rem;
    color: #d97706;
}