/**
 * BIBH Classroom Suite - Common Styles
 *
 * Design tokens extracted from BIBH Elementor kit:
 *   Primary:   #3F8170 (teal green)
 *   Secondary: #91D1DB (light blue)
 *   Accent:    #F3D76A (warm yellow)
 *   Text:      #3D3D3D (dark grey)
 *   Dark:      #203D48 (navy)
 *   Lime:      #D2E08C
 *   Neutral:   #CBCCCB
 *   Font:      "League Spartan", sans-serif
 *   Radius:    pill (49px) for buttons/badges, 16px for cards
 *   Container: 1140px
 */

/* === CSS Custom Properties === */
:root {
    --bibh-primary: #3F8170;
    --bibh-primary-dark: #346b5d;
    --bibh-primary-light: #e8f5f0;
    --bibh-secondary: #91D1DB;
    --bibh-secondary-light: #d4eef3;
    --bibh-accent: #F3D76A;
    --bibh-accent-light: #fdf5d9;
    --bibh-text: #3D3D3D;
    --bibh-text-light: #666666;
    --bibh-text-muted: #888888;
    --bibh-dark: #203D48;
    --bibh-lime: #D2E08C;
    --bibh-neutral: #CBCCCB;
    --bibh-neutral-light: #f4f5f4;
    --bibh-white: #ffffff;
    --bibh-border: #e2e5ea;
    --bibh-danger: #dc2626;
    --bibh-danger-light: #fef2f2;
    --bibh-success: #049F84;
    --bibh-success-light: #ecfdf5;
    --bibh-warning: #FFA700;
    --bibh-warning-light: #fffbeb;
    --bibh-radius-sm: 8px;
    --bibh-radius-md: 30px;

    /* Stacking order, so the layers stop being guessed one file at a time.
       A toast reports what just happened, very often about the modal that is
       still open, so it has to sit ABOVE every overlay. It used to be 9000
       against a 99999 modal, which put every "pick a chapter" warning behind
       the dialog that raised it. */
    --bibh-z-modal: 99999;
    --bibh-z-toast: 100100;
    --bibh-radius-pill: 30px;
    --bibh-font: "League Spartan", sans-serif;
    --bibh-shadow-sm: 0 1px 3px rgba(32, 61, 72, 0.08);
    --bibh-shadow-md: 0 4px 12px rgba(32, 61, 72, 0.1);
    --bibh-shadow-lg: 0 8px 30px rgba(32, 61, 72, 0.15);
    /* Student-dashboard card shadow (design mockup --shadow-strong). */
    --bibh-shadow-strong: 0 6px 20px rgba(32, 61, 72, 0.16);
    --bibh-container: 1140px;

    /* Student-dashboard activity colours - reusable tokens so a per-subsite
       override layer can re-skin the tiles later without touching home.css. */
    --bibh-act-quiz: #00b2ff;
    --bibh-act-flash: #f32201;
    --bibh-act-video: #049f84;
    --bibh-act-terms: #ffde5c;
    --bibh-act-past: #ffa700;
    --bibh-act-lab: #94e3ff;

    /* === ANSWER-BUTTON TYPE SCALE (house rule) ==========================
       Gavin's audit raised "the answer text is too small" three separate
       times, in three different apps, and it has come back after every
       previous fix because each app sized its own buttons by hand.

       So it is a RULE now, not a value. Every app that puts a tappable
       answer in front of a student sizes it from these tokens and never
       hard-codes a font-size on an answer button again. Changing the
       number here changes it in the quiz player, Take 10, Blitz (phone
       AND projector), Exam Corner and Flashcards at once.

       --bibh-answer-font-min is the FLOOR. Nothing that a student taps to
       answer may ever compute smaller than this, at any viewport. If a
       layout cannot fit the text at this size, the layout gives way (fewer
       columns, shorter tiles), not the type.

       Projector is its own token: a phone is 300mm from your face and a
       projector is 8m from the back row, so they are not the same problem
       and must not share a number. */
    --bibh-answer-font-min: 20px;
    --bibh-answer-font: clamp(20px, 2.15vw, 30px);
    --bibh-answer-font-projector: clamp(28px, 2.9vw, 58px);
    /* Vertical breathing room between answer buttons (Q-07). */
    --bibh-answer-gap: 22px;
}

/* === Override Astra theme table border colour within plugin scope === */
.bibh-hub td,
.bibh-hub th,
.bibh-suite td,
.bibh-suite th {
    border-color: var(--bibh-border) !important;
}

/* === Reset for plugin scope === */
.bibh-hub {
    max-width: var(--bibh-container);
    margin: 0 auto;
    padding: 24px 16px;
    font-family: var(--bibh-font);
    font-weight: 300;
    line-height: 1.6;
    color: var(--bibh-text);
}

.bibh-hub *,
.bibh-hub *::before,
.bibh-hub *::after {
    box-sizing: border-box;
}

/* === Typography === */
.bibh-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--bibh-dark);
    letter-spacing: -0.01em;
}

.bibh-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bibh-text-light);
    margin: 0 0 14px;
}

.bibh-text-muted {
    font-size: 0.85rem;
    color: var(--bibh-text-muted);
    font-weight: 300;
}

.bibh-help-text {
    font-size: 0.8rem;
    color: var(--bibh-text-muted);
    margin: 6px 0 0;
    font-weight: 300;
}

/* === Layout === */
.bibh-section {
    margin-bottom: 36px;
}

.bibh-subsection {
    margin-top: 32px;
}

.bibh-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.bibh-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bibh-quick-links {
    margin-bottom: 20px;
}

/* === Grid === */
.bibh-grid {
    display: grid;
    gap: 20px;
}

.bibh-grid--classrooms {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* === Cards === */
.bibh-card {
    background: var(--bibh-white);
    border: 1px solid var(--bibh-border);
    border-radius: var(--bibh-radius-md);
    padding: 20px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bibh-card:hover {
    box-shadow: var(--bibh-shadow-md);
    transform: translateY(-1px);
}

.bibh-card__body {
    margin-bottom: 14px;
}

.bibh-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 6px 0 8px;
    color: var(--bibh-dark);
}

.bibh-card__title a {
    color: var(--bibh-dark);
    text-decoration: none;
    transition: color 0.15s;
}

.bibh-card__title a:hover {
    color: var(--bibh-primary);
}

.bibh-card__desc {
    font-size: 0.9rem;
    color: var(--bibh-text-light);
    margin: 4px 0 0;
    font-weight: 300;
}

.bibh-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.bibh-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--bibh-neutral-light);
}

.bibh-card__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--bibh-neutral-light);
}

/* === Form card === */
.bibh-form-card {
    background: var(--bibh-primary-light);
    border: 1px dashed var(--bibh-primary);
    border-radius: var(--bibh-radius-md);
    margin-bottom: 24px;
}

.bibh-form-card:hover {
    box-shadow: none;
    transform: none;
}

.bibh-form-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--bibh-dark);
}

/* === Badges === */
.bibh-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: var(--bibh-radius-pill);
    background: var(--bibh-dark);;
    color: #ffffff;
}

.bibh-badge--type {
    background: var(--bibh-secondary-light);
    color: var(--bibh-dark);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    text-decoration: none;
}

a.bibh-badge--type:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* === Shared by attribution === */
.bibh-shared-by {
    font-size: 0.85rem;
    color: var(--bibh-success);
    font-weight: 500;
}

/* === Buttons === */
.bibh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: var(--bibh-radius-pill);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.4;
    font-family: var(--bibh-font);
}

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

.bibh-btn--primary:hover {
    color: #ffffff !important;
    background: var(--bibh-primary-dark);
    border-color: var(--bibh-primary-dark);
    box-shadow: var(--bibh-shadow-sm);
}

.bibh-btn--secondary {
    background: var(--bibh-white);
    color: var(--bibh-dark);
    border-color: var(--bibh-border);
}

.bibh-btn--secondary:hover {
    background: var(--bibh-neutral);
    border-color: var(--bibh-neutral);
}

.bibh-btn--accent {
    background: var(--bibh-accent);
    color: var(--bibh-dark);
    border-color: var(--bibh-accent);
    font-weight: 600;
}

.bibh-btn--accent:hover {
    background: #e8cb55;
    box-shadow: var(--bibh-shadow-sm);
}

.bibh-btn--danger {
    color: var(--bibh-danger);
    border-color: #fca5a5;
    background: var(--bibh-white);
}

.bibh-btn--danger:hover {
    background: var(--bibh-danger-light);
    color: var(--bibh-danger);
}

.bibh-btn--sm {
    padding: 5px 14px;
    font-size: 0.8rem;
}

/* Icon-only pill - square proportions, no horizontal text padding */
.bibh-btn--icon-only {
    padding: 9px 12px;
    gap: 0;
}

.bibh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Inputs === */
.bibh-input {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 300;
    border: 1px solid var(--bibh-border);
    border-radius: 30px !important;
    font-family: var(--bibh-font);
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bibh-white);
    color: var(--bibh-text);
}

.bibh-input:focus {
    outline: none;
    border-color: var(--bibh-primary);
    box-shadow: 0 0 0 3px rgba(63, 129, 112, 0.15);
}

textarea.bibh-input {
    resize: vertical;
}

/* === Form groups === */
.bibh-form-group {
    margin-bottom: 14px;
}

.bibh-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--bibh-dark);
}

.bibh-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* === Tables === */
.bibh-table-wrap {
    overflow-x: auto;
    border-radius: var(--bibh-radius-md);
    border: 1px solid var(--bibh-border);
}

.bibh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.bibh-table th,
.bibh-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--bibh-neutral-light);
}

.bibh-table th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bibh-text-light);
    background: var(--bibh-neutral-light);
}

.bibh-table td {
    vertical-align: middle;
}

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

.bibh-link {
    color: var(--bibh-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

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

/* === Tabs === */
.bibh-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.bibh-tabs--sm {
    margin-bottom: 14px;
}

.bibh-tab {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--bibh-primary);
    background: none;
    color: var(--bibh-text-muted);
    font-family: var(--bibh-font);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}


.bibh-tab--active {
    color: #ffffff;
    background-color: var(--bibh-primary);
    font-weight: 600;
}

/* === Breadcrumb === */
.bibh-breadcrumb {
    margin-bottom: 20px;
    font-size: 0.85rem;
    font-weight: 400;
}

.bibh-breadcrumb a {
    color: var(--bibh-primary);
    text-decoration: none;
}

.bibh-breadcrumb a:hover {
    text-decoration: underline;
}

.bibh-breadcrumb__sep {
    margin: 0 8px;
    color: var(--bibh-neutral);
}

/* === Notes === */
.bibh-notes {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--bibh-neutral-light);
}

.bibh-notes__title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bibh-text-muted);
    margin: 0 0 10px;
}

.bibh-note {
    padding: 10px 14px;
    background: var(--bibh-neutral-light);
    border-radius: var(--bibh-radius-sm);
    margin-bottom: 8px;
}

.bibh-note__author {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bibh-dark);
}

.bibh-note__date {
    font-size: 0.75rem;
    color: var(--bibh-text-muted);
    margin-left: 8px;
    font-weight: 300;
}

.bibh-note__text {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--bibh-text);
    font-weight: 300;
}

/* === Notices === */
.bibh-notice {
    padding: 14px 18px;
    border-radius: var(--bibh-radius-pill);
    font-size: 0.9rem;
    margin-bottom: 16px;
    font-weight: 400;
}

.bibh-notice--warning {
    background: var(--bibh-warning-light);
    border: 1px solid var(--bibh-warning);
    color: #92400e;
}

.bibh-notice--error {
    background: var(--bibh-danger-light);
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.bibh-notice--success {
    background: var(--bibh-success-light);
    border: 1px solid var(--bibh-success);
    color: #065f46;
}

/* === Empty state === */
.bibh-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--bibh-text-muted);
    background: var(--bibh-neutral-light);
    border-radius: var(--bibh-radius-md);
    border: 1px dashed var(--bibh-neutral);
}

.bibh-empty p {
    font-weight: 300;
}

/* === Upload list === */
.bibh-upload-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* === Modal === */
.bibh-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(32, 61, 72, 0.5);
    z-index: var(--bibh-z-modal, 99999);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.bibh-modal__content {
    background: var(--bibh-white);
    border-radius: var(--bibh-radius-md);
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--bibh-shadow-lg);
}

.bibh-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--bibh-neutral-light);
}

.bibh-modal__header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bibh-dark);
}

/* Astra styles bare <button>s with a min-width, padding and a drop shadow, so
   this close control rendered as a wide shadowed slab with an x floating in it.
   Resetting background and border was not enough: the shadow and the min-width
   came through anyway. Stated via .bibh-modal__header so the selector carries
   two classes and outclasses Astra's button:hover, and repeated on the
   interactive states because that is where Astra reasserts the shadow.
   In common.css, so all four modals get it. */
.bibh-modal__header .bibh-modal__close,
.bibh-modal__header .bibh-modal__close:hover,
.bibh-modal__header .bibh-modal__close:focus,
.bibh-modal__header .bibh-modal__close:active,
.bibh-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--bibh-text-muted);
    line-height: 1;
    transition: color 0.15s, background-color 0.15s;
}

.bibh-modal__header .bibh-modal__close:hover,
.bibh-modal__header .bibh-modal__close:focus,
.bibh-modal__close:hover {
    color: var(--bibh-dark);
    background-color: transparent !important;
    box-shadow: none;
}

.bibh-modal__body {
    padding: 24px;
}

.bibh-modal__footer {
    padding: 14px 24px;
    border-top: 1px solid var(--bibh-neutral-light);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* === Student checklist (add students modal) === */
.bibh-student-checklist {
    max-height: 300px;
    overflow-y: auto;
}

.bibh-student-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bibh-neutral-light);
}

.bibh-student-check:last-child {
    border-bottom: none;
}

.bibh-student-check label {
    flex: 1;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 400;
}

.bibh-student-check .bibh-text-muted {
    font-size: 0.8rem;
}

.bibh-student-check--assigned {
    opacity: 0.5;
}

/* === Progress bar === */
.bibh-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bibh-neutral-light);
    border-radius: var(--bibh-radius-pill);
    overflow: hidden;
    margin: 10px 0;
}

.bibh-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bibh-primary), var(--bibh-secondary));
    width: 0;
    transition: width 0.3s ease;
    border-radius: var(--bibh-radius-pill);
}

/* === Loading === */
.bibh-loading {
    text-align: center;
    color: var(--bibh-text-muted);
    padding: 20px;
    font-weight: 300;
}

/* === Clickable cards (stretched link) === */
.bibh-card--clickable {
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

.bibh-card--clickable:hover {
    box-shadow: var(--bibh-shadow-lg);
    transform: translateY(-2px);
}

.bibh-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Keep inner links/buttons above the stretched link overlay */
.bibh-card--clickable .bibh-card__footer,
.bibh-card--clickable .bibh-card__actions,
.bibh-card--clickable .bibh-btn {
    position: relative;
    z-index: 2;
}

/* === Resource sections - teacher vs student === */
.bibh-resource-section {
    margin-bottom: 28px;
}

.bibh-resource-section:last-child {
    margin-bottom: 0;
}

.bibh-resource-section__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bibh-neutral-light);
}

.bibh-resource-section__heading svg {
    flex-shrink: 0;
}

.bibh-resource-section__heading--teacher {
    color: var(--bibh-primary);
    border-bottom-color: var(--bibh-primary);
}

.bibh-resource-section__heading--student {
    color: var(--bibh-secondary);
    border-bottom-color: var(--bibh-secondary);
}

/* Teacher resource cards - primary accent */
.bibh-card--resource-teacher {
    border-left: 4px solid var(--bibh-primary);
    background: var(--bibh-primary-light);
}

/* Student resource cards - secondary accent */
.bibh-card--resource-student {
    border-left: 4px solid var(--bibh-secondary);
    background: var(--bibh-white);
}

/* Teacher badge */
.bibh-badge--teacher-resource {
    background: var(--bibh-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--bibh-radius-pill);
}

/* Student badge */
.bibh-badge--student-resource {
    background: var(--bibh-secondary);
    color: var(--bibh-dark);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--bibh-radius-pill);
}

/* === Classroom Cards === */
.bibh-card--classroom {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bibh-card--classroom:hover {
    box-shadow: var(--bibh-shadow-lg);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

/* Group code pill in classroom card footer */
.bibh-classroom-code {
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--bibh-text-muted);
    background: var(--bibh-neutral-light);
    border: 1px solid var(--bibh-border);
    border-radius: var(--bibh-radius-sm);
    padding: 2px 8px;
}

@media (max-width: 640px) {
    .bibh-hub {
        padding: 16px 12px;
    }

    .bibh-title {
        font-size: 1.4rem;
    }

    .bibh-header {
        flex-direction: column;
    }

    .bibh-grid--classrooms {
        grid-template-columns: 1fr;
    }

    .bibh-tabs {
        overflow-x: auto;
    }

    .bibh-tab {
        padding: 8px 14px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .bibh-btn {
        padding: 8px 18px;
    }

    .bibh-table th:nth-child(2),
    .bibh-table td:nth-child(2) {
        display: none;
    }

    /* Launch fix L-14: every modal was exactly 32px too wide.
       .bibh-modal__content is `width: 100%` of the full-screen .bibh-modal
       flex container, and this rule then added `margin: 16px` OUTSIDE that
       100%, so the box measured viewport + 32px and hung off the right edge -
       what Ashton saw on the "Assign to Classroom" sheet (live test
       2026-08-19). The inset belongs to the backdrop, not to the panel: as
       padding on .bibh-modal it comes OUT of the 100% instead of being added
       to it, and the panel then fits by construction at any width. */
    .bibh-modal {
        /* Declared, not inherited: the border-box reset above is scoped to
           `.bibh-hub *`, and a modal moved to <body> would sit outside it and
           add the padding to the inset instead of taking it out. */
        box-sizing: border-box;
        padding: 16px;
    }
    .bibh-modal__content {
        margin: 0;
        max-height: 90vh;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   Side-by-side panels - shared between teacher and student views
   ══════════════════════════════════════════════════════════════════════════ */

.bibh-side-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
    margin-bottom: 28px;
}

.bibh-side-panel {
    border-radius: var(--bibh-radius-md);
    border: 1px solid var(--bibh-border);
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.bibh-side-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 10px;
}

.bibh-side-panel__header--teal {
    background: var(--bibh-primary);
    color: #fff;
}

.bibh-side-panel__header--navy {
    background: #1b2e3c;
    color: #fff;
}

.bibh-side-panel__title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 7px;
}

.bibh-side-panel__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bibh-side-panel__subtitle {
    font-size: 0.78rem;
    opacity: 0.6;
    font-weight: 400;
}

.bibh-side-panel__body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bibh-side-panel__empty p {
    font-size: 0.88rem;
    color: var(--bibh-text-muted);
    margin: 4px 0 10px;
}

.bibh-side-panel__list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.bibh-side-panel__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--bibh-bg-soft, #f8fafb);
    font-size: 0.84rem;
}

.bibh-side-panel__item-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bibh-dark);
    text-decoration: none;
    font-weight: 500;
}

.bibh-side-panel__item-title:hover {
    color: var(--bibh-primary);
    text-decoration: underline;
}

.bibh-side-panel__item-size {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.bibh-side-panel__overflow {
    font-size: 0.78rem;
    color: var(--bibh-text-muted);
    margin: 0 0 10px;
    padding-left: 4px;
}

.bibh-side-panel__footer {
    margin-top: auto;
    padding-top: 10px;
}

@media (max-width: 700px) {
    .bibh-side-panels {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   Resource rows - shared between teacher and student views
   ══════════════════════════════════════════════════════════════════════════ */

/* Single-column upload list (My Folder) */
.bibh-folder-list {
    border: 1px solid var(--bibh-border);
    border-radius: var(--bibh-radius-md);
    overflow: hidden;
    background: #fff;
    margin-top: 20px;
}

.bibh-folder-list .bibh-resource-row:last-child {
    border-bottom: none;
}

/* Override margin-top on the resources page; panels shrink to content height */
.bibh-resources-panels {
    margin-top: 0;
    align-items: start;
}

/* Row wrapper */
.bibh-resource-row {
    border-bottom: 1px solid var(--bibh-border);
}

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

/* Top flex row */
.bibh-resource-row__top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
}

/* Left content area */
.bibh-resource-row__left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Meta strip: badge + sharer + date */
.bibh-resource-row__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Student name in the meta strip (navy panel) */
.bibh-resource-row__sharer {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bibh-primary);
}

/* Resource title link */
.bibh-resource-row__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bibh-dark);
    text-decoration: none;
    line-height: 1.3;
    display: block;
}

.bibh-resource-row__title:hover {
    color: var(--bibh-primary);
    text-decoration: underline;
}

/* Description text */
.bibh-resource-row__desc {
    font-size: 0.82rem;
    color: var(--bibh-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Right actions column */
.bibh-resource-row__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-top: 2px;
}

/* ── Inline notes block ── */
.bibh-resource-notes {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    padding: 4px 0 4px 10px;
    border-left: 2px solid var(--bibh-primary);
}

.bibh-resource-note {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.bibh-resource-note__author {
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--bibh-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.bibh-resource-note__text {
    font-size: 0.81rem;
    color: var(--bibh-text-muted);
    line-height: 1.4;
}

/* Delete × button on each note (teacher views only - hidden for students via no markup) */
.bibh-resource-note__delete {
    flex-shrink: 0;
    background: none !important;
    border: none;
    padding: 0 2px;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--bibh-text-muted);
    cursor: pointer;
    transition: color 0.15s;
    box-shadow: none !important;
}

.bibh-resource-note__delete:hover,
.bibh-resource-note__delete:focus {
    background: none !important;
    color: var(--bibh-danger, #dc2626);
    box-shadow: none !important;
    outline: none;
}

input[type="text"] {
    border-radius: 30px;
}