/**
 * 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;
}

/* === Text selection ==========================================================
   Moving quickly around the hub selected the interface: a double click on a
   panel header, or a drag that started on a tile, painted headings, topic pills
   and activity buttons blue (Ashton, 2 Sep 2026). Individual controls had been
   given user-select:none one at a time as each was noticed, which was never
   going to catch up.

   So the chrome opts OUT by default and real content opts back IN below. The
   rule is scoped to the hub's own wrappers, so nothing outside the suite, and
   nothing in wp-admin, is affected.

   Anything a person might reasonably want to copy has to be listed below. If
   something turns out to be missing, give it .bibh-selectable rather than
   unpicking this. */
.bibh-suite,
.bibh-hub,
.bibh-qbt,
.bibh-mcq-hub {
    -webkit-user-select: none;
    user-select: none;
}

/* Content, not chrome. Form fields need selection to be usable at all; the
   review answers, question text and the people lists are the things anyone
   actually copies out of here. */
.bibh-suite input,
.bibh-suite textarea,
.bibh-suite select,
.bibh-suite [contenteditable],
.bibh-hub input,
.bibh-hub textarea,
.bibh-hub select,
.bibh-qbt input,
.bibh-qbt textarea,
.bibh-qbt select,
.bibh-mcq-hub input,
.bibh-mcq-hub textarea,
.bibh-mcq-hub select,
.bibh-qr__qtitle,
.bibh-qr__tx,
.bibh-qr__nm,
.bibh-cset__person-who,
.bibh-selectable,
.bibh-selectable * {
    -webkit-user-select: text;
    user-select: text;
}

/* === 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;
}

/* ── Co-teaching badge ───────────────────────────────────────────────────────
   A shared class says so on its own card. Lime rather than the action green,
   deliberately: the badge states a fact and must never read as a button sitting
   next to "View Students". Faces before words, because the question a teacher
   actually has is "who?", and two initials answer it without a click. */
.bibh-coteach {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 12px 3px 5px;
    border-radius: 999px;
    background: #EDF4DC;
    border: 1px solid var(--bibh-lime, #D2E08C);
    font-family: var(--bibh-font);
    font-size: 0.75rem;
    font-weight: 600;
    color: #4A6112;
    line-height: 1.4;
    white-space: nowrap;
}

.bibh-coteach__faces {
    display: inline-flex;
}

/* The border is the badge's own fill, so overlapping circles read as separate
   people rather than one blurred shape. */
.bibh-coteach__face {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    border: 2px solid #EDF4DC;
    letter-spacing: 0.02em;
}

.bibh-coteach__face + .bibh-coteach__face {
    margin-left: -8px;
}

/* A teacher can paint a card any of eight colours, four of them dark enough to
   need white ink. The lime fill fails on several: it disappears on the lime
   card, and goes muddy on red, green and navy. So on a coloured card the badge
   becomes a solid white pill with navy text, which is legible on all eight, and
   a faint navy hairline keeps its edge on the two palest ones where white on
   white would otherwise float. The faces ring in white to match. */
.bibh-card--colored .bibh-coteach {
    background: #fff;
    border-color: rgba(32, 61, 72, 0.18);
    color: var(--bibh-dark, #203D48);
}

.bibh-card--colored .bibh-coteach__face {
    border-color: #fff;
}