/*
 * Biology Education portal — minimal hand-rolled CSS.
 * 95% of layout is now Tailwind utility classes + daisyUI components.
 * Only put rules here that those genuinely cannot express.
 */

/* daisyUI's .card-body forces ~2rem padding which overrides utility p-* classes
   because of specificity. We use .card-tight on stat tiles where we want the
   padding to actually be small. */
.card-tight > .card-body { padding: 0.6rem 0.75rem !important; }
.card-mini  > .card-body { padding: 0.65rem 0.85rem !important; }

/* daisyUI's .card-body adds `flex-direction: column` which sabotages utility
   classes like flex-row. Force horizontal layout when we ask for it. */
.card-tight > .card-body.flex-row { flex-direction: row !important; }

/* Activity-panel content: a panel's list shows at most ~3 entries; anything
   beyond that gets clipped. Each panel has its own "All →" link in the header
   for the full view, so we don't need an inner scrollbar. */
.panel-list { overflow: hidden; }
.panel-list > li:nth-child(n+4) { display: none; }

/* Generic filter row — drop this class on any wrapper that contains a search
   input + selects + buttons. CSS Grid keeps everything on a single line at
   desktop widths and degrades cleanly. The first child (usually a search
   input) gets 2x width when the layout has >=4 children. */
.filter-row {
    display: grid;
    gap: 0.5rem;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    align-items: end;
}
.filter-row > * { min-width: 0; }
.filter-row > input[type=search] { grid-column: span 2; }
@media (max-width: 1100px) {
    .filter-row {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .filter-row > input[type=search] { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-row > input[type=search] { grid-column: 1 / -1; }
}

/* Backwards-compat alias used by enquiries.php — same layout. */
.enquiry-filter-row { display: grid; gap: 0.5rem;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; align-items: center; }
.enquiry-filter-row > * { min-width: 0; }
@media (max-width: 1100px) {
    .enquiry-filter-row { grid-template-columns: 1fr 1fr 1fr; }
    .enquiry-filter-row > input[type=search] { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .enquiry-filter-row { grid-template-columns: 1fr 1fr; }
    .enquiry-filter-row > input[type=search] { grid-column: 1 / -1; }
}

/* Stat-tile grid — used by render_stat_tile() callers. Keeps every page's
   stat row visually identical: one row of compact pills. */
.stat-tile-row { display: grid; gap: 0.5rem; grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column; }
.stat-tile-row > * { min-width: 0; }
@media (max-width: 900px) { .stat-tile-row { grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Badges should never wrap onto two lines — that turns a small pill into a
   double-tall blob and balloons table-row heights. */
.badge { white-space: nowrap !important; }

/* Table cells holding short metadata — date, source, status, exam board — get
   no-wrap by default so a 2-word value doesn't break across rows. The .table
   class is daisyUI's. */
.table td.nowrap, .table th.nowrap { white-space: nowrap; }
/* Date/time columns are universally short, so apply unconditionally. */
.table td.col-date, .table th.col-date { white-space: nowrap; }
.table td.col-meta, .table th.col-meta { white-space: nowrap; }

/* ---- Calendar (admin/calendar.php) ---- */
.cal-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
}
.cal-dow {
    background: #f9fafb;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    padding: 6px 4px;
}
.cal-cell {
    background: #fff;
    min-height: 96px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.cal-other     { background: #f9fafb; }
.cal-other .cal-day-num { color: #d1d5db; }
.cal-today     { background: #fef9c3; }
.cal-day-num   { font-size: 12px; font-weight: 600; color: #374151; }
.cal-event {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    padding: 2px 6px;
    border-radius: 3px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-event:hover { filter: brightness(0.95); }
.cal-event-green  { background: #d1fae5; color: #065f46; }
.cal-event-blue   { background: #dbeafe; color: #1e3a8a; }
.cal-event-yellow { background: #fef3c7; color: #92400e; }
.cal-event-more {
    font-size: 10px;
    color: #6b7280;
    text-decoration: none;
    padding: 0 6px;
}
.cal-event-more:hover { color: #1f2937; }
.cal-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
}
.cal-dot-green  { background: #10b981; }
.cal-dot-blue   { background: #3b82f6; }
.cal-dot-yellow { background: #f59e0b; }

@media (max-width: 700px) {
    .cal-cell { min-height: 64px; }
    .cal-event { font-size: 10px; padding: 1px 4px; }
}

/* ---- Handwriting / stylus pad on notes textareas (handwriting.js) ---- */
.hw-wrapper {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.hw-wrapper > textarea {
    border: none !important;
    border-radius: 0 !important;
    width: 100%;
    display: block;
    padding: 8px 10px;
    font: inherit;
    background: #fff;
    outline: none;
    resize: vertical;
}
.hw-tabs {
    display: flex;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.hw-tab {
    background: transparent;
    border: 0;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.hw-tab:hover { color: #1f2937; }
.hw-tab-active {
    color: #15803d;
    border-bottom-color: #15803d;
    background: #fff;
}
.hw-draw-pane {
    background: #fff;
}
/* Scrollable container so a tall canvas stays usable without taking over
   the page. Visible height capped; user-resizable vertically. */
.hw-canvas-scroll {
    max-height: 70vh;
    min-height: 240px;
    height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border-bottom: 1px dashed #e5e7eb;
    resize: vertical;          /* drag the bottom-right grip to resize the visible window */
}
.hw-canvas {
    display: block;
    width: 100%;
    /* aspect-ratio is set inline by the script so the canvas reflects its
       current logical pixel size (which grows as the user adds pages). */
    background: #fff;
    cursor: crosshair;
    touch-action: none;       /* let the canvas swallow stylus/touch instead of scrolling */
}
.hw-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
}
.hw-tool {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #4b5563;
}
.hw-tool input[type=color] { width: 28px; height: 24px; padding: 0; border: 1px solid #d1d5db; border-radius: 4px; }
.hw-tool input[type=range] { width: 80px; }
.hw-btn {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
}
.hw-btn:hover { background: #f3f4f6; }
.hw-btn-active { background: #fef3c7; border-color: #f59e0b; color: #92400e; }

/* ---- Extended drawing toolbar (colour swatches, thickness, tools) ----
   On-brand navy #32325d / green #8ebb28. Compact; wraps on tablet/phone;
   buttons are finger-friendly (min 28px touch targets). */
.hw-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    border-right: 1px solid #e5e7eb;
}
.hw-group:last-child { border-right: 0; padding-right: 0; }

/* Colour swatches */
.hw-swatches { gap: 5px; }
.hw-swatch {
    width: 22px; height: 22px; padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cbd0d8;
    cursor: pointer;
}
.hw-swatch-active { box-shadow: 0 0 0 2px #32325d; }   /* navy ring on active */
.hw-swatch-custom {
    display: inline-flex; align-items: center; justify-content: center;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    overflow: hidden;
}
.hw-swatch-custom input[type=color] {
    width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0;
}

/* Thickness presets */
.hw-th {
    width: 30px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #d1d5db; border-radius: 5px; cursor: pointer;
}
.hw-th-active { border-color: #8ebb28; background: #f2f8e7; }   /* green on active */
.hw-th-dot { display: block; border-radius: 50%; background: #32325d; }
.hw-th-thin   { width: 3px;  height: 3px;  }
.hw-th-medium { width: 6px;  height: 6px;  }
.hw-th-thick  { width: 10px; height: 10px; }

/* Tool-mode buttons */
.hw-tool-btn {
    background: #fff; border: 1px solid #d1d5db; border-radius: 5px;
    padding: 4px 8px; font-size: 12px; line-height: 1; color: #374151;
    cursor: pointer; white-space: nowrap;
}
.hw-tool-btn:hover { background: #f3f4f6; }
.hw-tool-active {
    background: #32325d; border-color: #32325d; color: #fff;   /* brand navy active */
}
.hw-undo em { font-style: normal; color: #9ca3af; font-size: 10px; }

/* Touch targets on tablet/phone */
@media (max-width: 900px) {
    .hw-toolbar { gap: 6px; }
    .hw-swatch { width: 26px; height: 26px; }
    .hw-th { width: 34px; height: 30px; }
    .hw-tool-btn, .hw-btn { padding: 6px 10px; }
}

/* When a saved drawing is shown read-only outside an editor */
.hw-image {
    display: block;
    max-width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    margin-top: 6px;
}


/* =====================================================================
   ONE shared accordion component (.acc). Used by EVERY content accordion —
   Reports, Notes, Feedback (typed/handwritten), Files, Action items — so the
   structure and the rotating chevron can never drift. Only the ACCENT colour
   differs, passed per instance as the CSS custom property --acc (defaults to
   brand green). The chevron is the SAME inline SVG used by the lesson-list
   accordions (student/parent lesson rows) — reused verbatim, not a lookalike.

   Single bold border = the LEFT accent bar only. The card is otherwise a
   subtle light outline with a faint wash of the accent (mix via color-mix).
   ===================================================================== */
.acc {
    --acc: #8ebb28;                         /* default accent: brand green */
    background: #fff;
    border: 1px solid #e3e6ea;              /* subtle outline (NOT bold) */
    border-left: 4px solid var(--acc);      /* the ONE bold border */
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.acc:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.acc[open] { box-shadow: 0 4px 16px color-mix(in srgb, var(--acc) 18%, transparent); }
.acc-summary {
    list-style: none; cursor: pointer; user-select: none;
    display: grid; grid-template-columns: 1fr auto 24px; gap: 10px; align-items: center;
    padding: 10px 12px;
    /* faint wash of the accent behind the header */
    background: color-mix(in srgb, var(--acc) 7%, #ffffff);
}
.acc-summary::-webkit-details-marker { display: none; }
.acc-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acc-title { font-weight: 600; color: #1f2937; }
.acc-hint  { font-weight: 400; font-size: 12px; color: #6b7280; }
.acc-meta  { font-size: 12px; color: #6b7280; }
.acc-badges { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: 6px; }
.acc-badge {
    font-size: 11px; font-weight: 600;
    color: color-mix(in srgb, var(--acc) 75%, #333);
    background: color-mix(in srgb, var(--acc) 16%, #fff);
    border-radius: 999px; padding: 1px 8px;
}
/* The chevron — identical circular button + rotation as .lesson-chevron. */
.acc-chevron {
    grid-column: 3; justify-self: end;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: color-mix(in srgb, var(--acc) 14%, #fff);
    color: var(--acc);
    transition: transform .2s ease, background .15s ease;
}
.acc[open] > .acc-summary .acc-chevron { transform: rotate(90deg); }
.acc-body { padding: 12px; border-top: 1px solid #eef0f2; }

/* Reports use the shared .acc with a slightly stronger faint-navy wash + a
   dark bold title, so it reads as the navy family (opposite of a solid fill). */
.sr-acc > .acc-summary { background: color-mix(in srgb, var(--acc) 9%, #ffffff); }
.sr-acc .acc-title { color: #32325d; }

/* ---- Build 4 — "NEW" notification marker + email-pref toggle ---- */
.notify-new-badge {
    display: inline-block;
    font-size: 10px; font-weight: 800; letter-spacing: .05em;
    color: #fff; background: #8ebb28;      /* brand green */
    border-radius: 999px; padding: 1px 8px; text-transform: uppercase;
}
.notify-pref {
    background: #fff; border: 1px solid #e3e6ea; border-radius: 10px;
    padding: 10px 14px; border-left: 4px solid #32325d;   /* navy accent */
}
.notify-pref .checkbox { flex-shrink: 0; }

/* ---- Student reports (Build 3) — body content only; the accordion SHELL is
   the shared .acc component (navy accent). Faint navy wash applied below. ---- */
.sr-section { margin-top: 1.25rem; }
.sr-section-h2 { font-size: 1.25rem; font-weight: 700; color: #32325d; margin-bottom: .6rem; }
.sr-count { color: #6b7280; font-weight: 400; font-size: .95rem; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sr-chip {
    display: inline-flex; align-items: baseline; gap: 6px;
    background: #f4f9e8; border: 1px solid #d9ecb4; border-radius: 999px; padding: 3px 12px;
}
.sr-chip-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #5a7a12; font-weight: 600; }
.sr-chip-value { font-weight: 700; color: #32325d; }
.sr-block { margin-top: 10px; }
.sr-h4 { font-weight: 600; color: #32325d; margin-bottom: 3px; }
.sr-parent-only {
    margin-top: 14px; padding: 10px 12px; border-radius: 8px;
    background: #f6f7fb; border: 1px dashed #32325d;
}
.sr-parent-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #fff; background: #32325d; border-radius: 999px; padding: 1px 8px; margin-left: 6px;
}

/* ---- Lesson accordion (custom because of the unique opened gradient header) ---- */
.lesson-accordion {
    background: #fff; border: 1px solid #e3e6ea; border-radius: 10px;
    margin-bottom: 10px; overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.lesson-accordion:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.lesson-accordion[open] {
    box-shadow: 0 4px 16px rgba(43,138,62,.10);
    border-color: #2b8a3e;
}
.lesson-summary {
    display: grid;
    /* date | title | meta | chevron(right). The chevron sits on the RIGHT. */
    grid-template-columns: 110px 1fr auto 24px;
    gap: 12px; align-items: center;
    /* COMPACT: back to a normal single-row height (was tall after the arrow moved). */
    padding: 9px 14px 9px 16px;
    min-height: 0; line-height: 1.3;
    cursor: pointer; list-style: none; user-select: none;
    background: linear-gradient(to right, #f5faf6 0%, #ffffff 280px);
    border-left: 4px solid #2b8a3e;
}
.lesson-accordion[open] > .lesson-summary {
    background: linear-gradient(to right, #2b8a3e 0%, #1d6b2e 100%);
    color: #fff;
    border-left-color: #1d6b2e;
}
.lesson-summary::-webkit-details-marker { display: none; }
.lesson-chevron {
    grid-column: 4;                     /* right-aligned, last column */
    justify-self: end;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;          /* compact — doesn't inflate the row */
    border-radius: 50%;
    background: #eef5f0; color: #1d6b2e;
    transition: transform .2s ease, background .15s ease;
}
.lesson-accordion[open] > .lesson-summary .lesson-chevron {
    transform: rotate(90deg); background: rgba(255,255,255,.22); color: #fff;
}
/* All four cells pinned to ONE row so the header is a single compact line on
   desktop (was spilling to a 2nd grid row -> tall header). */
.lesson-chevron { grid-row: 1; }
.lesson-date  { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 500; color: #666; }
.lesson-title { grid-column: 2; grid-row: 1; font-weight: 600; }
.lesson-meta  { grid-column: 3; grid-row: 1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lesson-accordion[open] > .lesson-summary .lesson-date,
.lesson-accordion[open] > .lesson-summary .lesson-title { color: #fff; }
.lesson-body { padding: 4px 18px 18px; border-top: 1px solid #e3e6ea; }
.lesson-body h4 { margin: 16px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #666; }
.lesson-body .prose { white-space: pre-wrap; }
.lesson-body .feedback { background: #fffbea; border-left: 3px solid #e8b400; padding: 10px 14px; border-radius: 4px; }

/* Compact "at a glance" info strip — replaces the big details/child card.
   Same facts, a fraction of the space. Wraps cleanly on phones. */
.info-strip {
    display: flex; flex-wrap: wrap; gap: 8px 10px;
    padding: 10px 14px;
    background: #fff; border: 1px solid #e3e6ea; border-radius: 10px;
}
.info-fact {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 4px 10px;
    background: #f5faf6; border: 1px solid #e3ecdf; border-radius: 999px;
    font-size: 13px; white-space: nowrap;
}
.info-label { color: #6b7280; font-weight: 500; }
.info-value { color: #32325d; font-weight: 600; }

/* Parent "Your child" compact row: name + the same fact pills inline. */
.child-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 10px 14px;
    background: #fff; border: 1px solid #e3e6ea; border-radius: 10px;
    border-left: 4px solid #8ebb28;
}
.child-name { font-weight: 700; color: #1d6b2e; margin-right: 4px; }
.child-book-toggle { display: inline-flex; align-items: center; font-size: .8rem; color: #4a4a68; margin-left: auto; }
.child-book-toggle form { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* Responsive 16:9 video wrap (Tailwind aspect-video would also work but keep this self-contained) */
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; margin: 12px 0; background: #000; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Action items list */
.actions { list-style: none; padding: 0; margin: 0; }
.actions li { padding: 6px 0; border-bottom: 1px dashed #e3e6ea; }
.actions li:last-child { border-bottom: 0; }
.action-form { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.action-toggle { background: transparent; border: 0; padding: 0; font-size: 22px; cursor: pointer; color: #666; flex-shrink: 0; line-height: 1; }
.action-toggle.done { color: #2b8a3e; }
.done-text { color: #666; text-decoration: line-through; }

/* Mobile lesson summary stacks vertically */
@media (max-width: 640px) {
    .lesson-summary {
        grid-template-columns: 32px 1fr;
        gap: 4px 10px; padding: 12px 14px 12px 10px;
    }
    .lesson-chevron { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: 2px; }
    .lesson-date  { grid-column: 2; grid-row: 1; }
    .lesson-title { grid-column: 2; grid-row: 2; }
    .lesson-meta  { grid-column: 2; grid-row: 3; margin-top: 2px; }
}

/* Brand colour overrides on top of daisyUI's "emerald" theme.
   daisyUI uses HSL channels for theme colours — we override the channels
   to lock primary/secondary/accent to our exact brand greens.
   Format: --p, --pc, --s, --sc, --a, --ac etc. — H S L (no commas, no %).
*/
[data-theme="emerald"] {
    --rounded-box: 0.75rem;
    --rounded-btn: 0.5rem;
    --p:  138 53% 36%;    /* primary       = #2b8a3e brand green */
    --pc: 0 0% 100%;      /* primary-content = white */
    --s:  211 70% 38%;    /* secondary     = #1e5fa8 */
    --sc: 0 0% 100%;
    --a:  44 100% 46%;    /* accent        = #e8b400 */
    --ac: 0 0% 12%;
    --n:  0 0% 13%;
    --nc: 0 0% 100%;
    --b1: 0 0% 100%;      /* base-100 = white */
    --b2: 220 14% 97%;    /* base-200 */
    --b3: 220 12% 91%;    /* base-300 */
    --bc: 0 0% 13%;       /* base-content = #222 */
    --su: 138 53% 36%;    /* success same as primary */
    --suc: 0 0% 100%;
    --wa: 32 81% 35%;     /* warning #a8640b */
    --wac: 0 0% 100%;
    --er: 0 71% 45%;      /* error #c22 */
    --erc: 0 0% 100%;
    --in: 211 70% 38%;
    --inc: 0 0% 100%;
}

/* ---- Form control sizing fix ----
   daisyUI's small select/input clips descenders on system fonts because the
   inner line-height is too tight. Bump heights so text always sits centred
   and fully visible. Applies to ALL pages — fixes once globally.
*/
.select.select-sm,
.select.select-bordered.select-sm,
.input.input-sm,
.input.input-bordered.input-sm {
    height: 2.5rem;          /* up from daisyUI's 2rem */
    min-height: 2.5rem;
    line-height: 1.4;
    font-size: 0.95rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Default-size selects/inputs: same nudge for consistency */
.select.select-bordered,
.input.input-bordered {
    line-height: 1.5;
}

/* daisyUI adds a chevron with right-padding; make sure long values don't
   overlap the chevron in narrow columns */
.select { padding-inline-end: 2rem; }

/* ---- Brand-aligned overrides for daisyUI buttons / badges / tabs / alerts ----
   Tailwind 2 doesn't generate daisyUI semantic classes from a config (no
   build step), so daisyUI falls back to its emerald defaults. Override
   the surfaces here so everything matches the brand green and uses soft
   pastel fills instead of harsh saturated ones.
*/

/* Solid primary buttons — brand green */
.btn-primary {
    background-color: #2b8a3e !important;
    border-color: #2b8a3e !important;
    color: #fff !important;
}
.btn-primary:hover { background-color: #1d6b2e !important; border-color: #1d6b2e !important; }

/* Outline buttons — soft mint background, green border + green text */
.btn-outline {
    background-color: #ecf7ee !important;
    border-color: #c8e6cd !important;
    color: #1d6b2e !important;
}
.btn-outline:hover {
    background-color: #d4ecda !important;
    border-color: #2b8a3e !important;
    color: #1d6b2e !important;
}

/* Ghost buttons — invisible until hovered */
.btn-ghost { color: #555 !important; }
.btn-ghost:hover { background-color: #ecf7ee !important; color: #1d6b2e !important; }

/* Error buttons — kept red, but fully legible */
.btn-error { background-color: #c22 !important; border-color: #c22 !important; color: #fff !important; }
.btn-error:hover { background-color: #9a1818 !important; border-color: #9a1818 !important; }

/* ============================================================================
 * BRAND BUTTON HOVER FIX (2026-07-16)
 * ============================================================================
 * ROOT CAUSE: daisyUI's `.btn:hover` sets `background-color: var(--btn-color,
 * var(--fallback-b2))` — for a bare `.btn` with a CUSTOM inline brand fill and no
 * `:hover` rule of its own, that override wins on hover and the background falls
 * back to (near-)transparent. That's why "Join lesson" went clear on hover.
 * (Buttons carrying a semantic class — .btn-primary/.btn-outline/.btn-ghost/
 * .btn-error — are already handled above; the victims are the inline-styled ones.)
 *
 * THE FIX — shared, no per-button markup edits: catch ANY `.btn` whose inline
 * style carries a brand fill and give it a deliberate darker-shade hover + active,
 * beating daisyUI's rule (portal.css loads AFTER daisyui.css, and !important seals
 * it). A green button darkens to a darker green; a navy button to a darker navy.
 * NO branded button can ever go transparent on hover.
 */
.btn[style*="#8ebb28"]:hover, .btn[style*="#8EBB28"]:hover {
    background-color: #7ea822 !important; border-color: #7ea822 !important;
}
.btn[style*="#8ebb28"]:active, .btn[style*="#8EBB28"]:active {
    background-color: #6f9420 !important; border-color: #6f9420 !important;
}
.btn[style*="#32325d"]:hover, .btn[style*="#32325D"]:hover {
    background-color: #26264a !important; border-color: #26264a !important;
}
.btn[style*="#32325d"]:active, .btn[style*="#32325D"]:active {
    background-color: #1e1e3b !important; border-color: #1e1e3b !important;
}

/* Reusable brand button classes (preferred going forward over inline styles).
 * .btn-brand-green = green fill; .btn-brand-navy = navy fill. Both keep their own
 * colour on hover/active — a darker shade of the SAME hue, never transparent. */
.btn-brand-green {
    background-color: #8ebb28 !important; border-color: #8ebb28 !important; color: #fff !important; font-weight: 700;
}
.btn-brand-green:hover  { background-color: #7ea822 !important; border-color: #7ea822 !important; color: #fff !important; }
.btn-brand-green:active { background-color: #6f9420 !important; border-color: #6f9420 !important; }
.btn-brand-navy {
    background-color: #32325d !important; border-color: #32325d !important; color: #fff !important; font-weight: 700;
}
.btn-brand-navy:hover  { background-color: #26264a !important; border-color: #26264a !important; color: #fff !important; }
.btn-brand-navy:active { background-color: #1e1e3b !important; border-color: #1e1e3b !important; }

/* ============================================================================
 * "NO RECORDING" flag (Fix 3, 2026-07-16) — shared, admin + parent.
 * Red, bold, unmistakable — for Tyrone's eyes so he doesn't hit record on a
 * student whose parent asked for no recording. Nothing is enforced by it.
 * .norec-flag = the loud pill (today's lessons, student detail). .norec-dot =
 * a compact inline marker for dense lists (the student table).
 */
.norec-flag {
    display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.02em;
    color:#fff; background:#c0392b; border-radius:.4rem; padding:.15rem .5rem;
    white-space:nowrap; vertical-align:middle;
}
.norec-flag-lg { font-size:.82rem; padding:.28rem .7rem; }
.norec-dot {
    display:inline-block; font-size:.66rem; font-weight:800; color:#c0392b;
    background:#fbe3e0; border:1px solid #e6b0a8; border-radius:.35rem;
    padding:.02rem .35rem; margin-left:.35rem; white-space:nowrap; vertical-align:middle;
}

/* Badges — soft pastel fills */
.badge-success   { background-color: #d4ecda !important; color: #1d6b2e !important; border-color: #b6dfbf !important; }
.badge-warning   { background-color: #fff3cd !important; color: #7a5500 !important; border-color: #ffe79b !important; }
.badge-error     { background-color: #f8d7da !important; color: #842029 !important; border-color: #f1b3b9 !important; }
.badge-info      { background-color: #d6e4f0 !important; color: #1e5fa8 !important; border-color: #b3cde6 !important; }
.badge-secondary { background-color: #e7f1fb !important; color: #1e5fa8 !important; border-color: #b3cde6 !important; }
.badge-neutral   { background-color: #e2e3e5 !important; color: #41464b !important; border-color: #cfd0d3 !important; }
.badge-ghost     { background-color: #f0f2f5 !important; color: #555 !important;    border-color: #d8dce2 !important; }

/* Outline badge variants — slightly lighter fill */
.badge-outline.badge-info,    .badge-info.badge-outline    { background: #eaf3fb !important; }
.badge-outline.badge-secondary, .badge-secondary.badge-outline { background: #eef4fc !important; }

/* Tabs — Option B underline style (shared by enquiry-edit + student-detail).
   Inactive = muted text, no fill; active = navy text + 3px green underline.
   No solid fill. Overrides daisyUI's tab-active fill/border. */
.tabs-bordered .tab,
.tabs .tab {
    background-color: transparent !important;
    color: #6b7280;                      /* muted/secondary for inactive */
    border-bottom: 3px solid transparent !important;
    font-weight: 500;
    gap: 6px;                            /* space between icon + label */
    transition: color .12s, border-color .12s;
}
.tabs-bordered .tab:hover,
.tabs .tab:hover { color: #32325d; }
.tab-active, .tabs-bordered .tab-active, .tabs-boxed .tab-active {
    background-color: transparent !important;
    color: #32325d !important;           /* brand navy text */
    border-bottom: 3px solid #8ebb28 !important;  /* brand green underline */
    font-weight: 700;
}
/* Tab icon sizing */
.tab .tab-ico { width: 1.05em; height: 1.05em; flex-shrink: 0; }
/* Count badge on a tab — small pale-green pill */
.tab .tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem;
    font-size: .7rem; font-weight: 700; line-height: 1;
    border-radius: 999px;
    background: #eaf6e0; color: #4f7a10;   /* pale green fill, dark green text */
}

/* Alert variants — soft pastel backgrounds */
.alert-success { background-color: #d4ecda !important; color: #1d6b2e !important; border-color: #b6dfbf !important; }
.alert-warning { background-color: #fff3cd !important; color: #7a5500 !important; border-color: #ffe79b !important; }
.alert-error   { background-color: #f8d7da !important; color: #842029 !important; border-color: #f1b3b9 !important; }
.alert-info    { background-color: #d6e4f0 !important; color: #1e5fa8 !important; border-color: #b3cde6 !important; }

/* Links — primary green */
.link-primary { color: #1d6b2e !important; }
.link-primary:hover { color: #144d20 !important; }

/* Radio + checkbox — brand green when selected */
.radio-primary:checked { background-color: #2b8a3e !important; border-color: #2b8a3e !important; }
.checkbox:checked { background-color: #2b8a3e !important; border-color: #2b8a3e !important; }

/* ---- Stat tiles ----
   Soft mint fill with a coloured left accent stripe so each stat reads
   as a small dashboard card with personality, not a flat grid.
*/
.stats { background-color: transparent !important; gap: 0.75rem; }
.stats > .stat {
    background-color: #ecf7ee !important;
    border: 1px solid #c8e6cd !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.25rem !important;
    position: relative;
    overflow: hidden;
}
.stats > .stat::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #2b8a3e;
}
.stats > .stat .stat-title { color: #1d6b2e !important; font-weight: 600; opacity: .85; }
.stats > .stat .stat-value { color: #1d6b2e !important; }

/* Tile colour variants follow the value text colour, so warning tiles
   get an amber stripe and info tiles a blue stripe. */
.stats > .stat:has(.text-yellow-700) { background-color: #fff8e6 !important; border-color: #f4e1a4 !important; }
.stats > .stat:has(.text-yellow-700)::before { background: #c08400; }
.stats > .stat:has(.text-yellow-700) .stat-title { color: #7a5500 !important; }

.stats > .stat:has(.text-blue-600) { background-color: #eaf3fb !important; border-color: #c4ddf2 !important; }
.stats > .stat:has(.text-blue-600)::before { background: #1e5fa8; }
.stats > .stat:has(.text-blue-600) .stat-title { color: #1e5fa8 !important; }

/* ---- Enquiry "people" block (render_enquiry_people) ----
   Shows the student and the parent on separate, clearly-labelled lines, each
   with their OWN contact details. Student label = brand navy #32325d,
   Parent label = brand green #8ebb28-family. Compact so table rows stay short. */
.enq-people { line-height: 1.35; }
.enq-person { white-space: normal; }
.enq-people:not(.enq-people-compact) .enq-person + .enq-person { margin-top: 3px; }
.enq-people-compact .enq-person { font-size: 0.8125rem; }

.enq-role {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.enq-role.text-neutral { color: #32325d; }   /* Student — brand navy */
.enq-role.text-green-700 { color: #6f9e1f; }  /* Parent — brand green (darkened for contrast) */

.enq-name { color: #1f2937; }
.enq-contacts { font-size: 0.8125rem; }
.enq-people-compact .enq-contacts { font-size: 0.75rem; }
.enq-contact { color: #6b7280; }
.enq-contact:hover { color: #32325d; text-decoration: underline; }

/* On phones, drop the "· contact · contact" onto its own line under the name
   so long emails don't blow out the row width. */
@media (max-width: 640px) {
    .enq-contacts { display: block; }
    .enq-contacts::before { content: none; }
}

/* ---- Enquiry row "Open →" button (admin/enquiries.php) ----
   Solid NAVY (deliberately not green, so it doesn't compete with the green
   primary-action buttons elsewhere). Compact + phone-safe: never wraps, never
   overflows the row. */
.enq-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #32325d;                 /* brand navy */
    color: #fff;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;                 /* keep "Open →" on one line */
    text-decoration: none;
    border: 1px solid #32325d;
    transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.enq-open-btn:hover,
.enq-open-btn:focus-visible {
    background: #26264a;                  /* slightly darker navy */
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);         /* subtle lift */
    box-shadow: 0 2px 6px rgba(50,50,93,.25);
}
.enq-open-btn:active { transform: translateY(0); box-shadow: none; }

/* On narrow screens keep it snug so it never blows out the row. */
@media (max-width: 640px) {
    .enq-open-btn { padding: 7px 14px; font-size: 0.78rem; }
    /* Slightly smaller inside the compact dashboard panel too. */
    .na-enq-row .enq-open-btn { padding: 6px 12px; }
}

/* ---- Dashboard "Needs attention" panel (admin/dashboard.php) ----
   Compact: trim the card padding and vertical rhythm so the panel is no taller
   than it needs to be, while staying readable + on-brand. */
.needs-attention .card-body { padding: 0.85rem 1rem; }
.needs-attention-title { font-size: 1rem; margin-bottom: 0.35rem; }
.needs-attention .na-section { margin-top: 0.6rem; }   /* was mt-4 (1rem) */

/* Priority TILES: responsive auto-fill grid; tiles wrap; one per row on phones.
   Ordered oldest-waiting first (done in the query). Each tile carries an
   escalating "waiting N days" marker: green (fresh) → amber (mid) → red (stale). */
.na-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.6rem;
}
.na-tile {
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;                     /* let long emails truncate, never overflow */
}
/* Left accent edge escalates with the wait band. */
.na-tile-fresh { border-left: 4px solid #8ebb28; }   /* brand green */
.na-tile-mid   { border-left: 4px solid #e0a12b; }   /* amber */
.na-tile-stale { border-left: 4px solid #c0392b; }   /* red */

.na-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; }

/* Waiting marker pill — colour matches the band. */
.na-wait {
    font-size: 0.72rem; font-weight: 700;
    padding: 2px 7px; border-radius: 999px;
    white-space: nowrap;
}
.na-wait-fresh { background: #eef6dc; color: #4e6f13; }   /* green */
.na-wait-mid   { background: #fbeecd; color: #8a5d0e; }   /* amber */
.na-wait-stale { background: #fbe0dc; color: #a12b1c; }   /* red */

.na-status-badge { background: #ececef; color: #32325d; border: 0; }   /* brand navy on light */

.na-tile-name { font-weight: 700; color: #1f2937; font-size: 0.9rem; line-height: 1.2; }
.na-tile-contacts { font-size: 0.78rem; line-height: 1.35; min-width: 0; }
.na-tile-contacts a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.na-tile-phone::before { content: "· "; color: #9ca3af; }
.na-tile-parent { font-size: 0.78rem; color: #6b7280; }
.na-tile-action { margin-top: 0.15rem; }

/* Phones: one tile per row (grid already wraps, but pin the min so a narrow
   viewport doesn't force a too-wide tile that overflows). */
@media (max-width: 640px) {
    .na-tiles { grid-template-columns: 1fr; }
    .na-tile-phone { display: block; }
    .na-tile-phone::before { content: none; }
}

/* ---- Contacts directory — grouped-by-family table (admin/contacts.php) ----
   Each STUDENT is a shaded header row; their PARENT(S) sit indented beneath.
   A green (#8ebb28) left edge runs down the whole family group so it's obvious
   which parents belong to which student. On-brand navy/green, phone-safe. */
.contacts-fam-table { border-collapse: collapse; width: 100%; }
.contacts-fam-table thead th {
    color: #32325d;                    /* brand navy headers */
    font-weight: 700;
    border-bottom: 2px solid #ececef;
}

/* A family group = one <tbody>. The green edge ties the whole group together. */
.contacts-fam-table tbody.fam-group {
    border-left: 4px solid #8ebb28;    /* brand green family edge */
}
/* Gap between family groups so each reads as its own block. */
.contacts-fam-table tbody.fam-group + tbody.fam-group,
.contacts-fam-table tbody.fam-group + tbody.fam-noparent-head {
    border-top: 10px solid transparent;
}

/* Student header row — shaded (surface-2). */
.contacts-fam-table tr.fam-student > td {
    background: #f4f5f8;               /* surface-2 shade */
    border-bottom: 1px solid #e7e8ee;
    font-weight: 500;
}
/* Parent rows — white, indented, lighter. */
.contacts-fam-table tr.fam-parent > td {
    background: #fff;
    border-bottom: 1px solid #f1f2f5;
}
.contacts-fam-table tr.fam-parent .fam-name-cell { padding-left: 1.75rem; position: relative; }
.fam-indent {
    color: #8ebb28;                    /* green ↳ marker */
    font-weight: 700;
    margin-right: 0.35rem;
    margin-left: -1.25rem;
}

/* Cell padding — compact but readable. */
.contacts-fam-table td { padding: 0.5rem 0.75rem; vertical-align: middle; }

/* "No parent linked" section heading. */
.fam-section-head {
    color: #32325d;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0.5rem 0.25rem 0.25rem;
    background: transparent;
}
.contacts-fam-table tbody.fam-noparent-head td { border: 0; }
/* No-parent student groups: keep the shaded header but no green edge (no family). */
.contacts-fam-table tbody.fam-group-noparent { border-left: 4px solid #d7dae1; }

/* Phone: the table already lives in .overflow-x-auto; keep the indent modest. */
@media (max-width: 640px) {
    .contacts-fam-table td { padding: 0.45rem 0.55rem; }
    .contacts-fam-table tr.fam-parent .fam-name-cell { padding-left: 1.4rem; }
    .fam-indent { margin-left: -1rem; }
}

/* ---- Communications INBOX (render_comms_list) ----
   Compact inbox-style list: filter pills + one chronological stream of
   single-line rows (date · type badge · subject) that expand inline on click.
   Brand: navy #32325d, green #8ebb28. Phone-safe (rows never overflow). */

/* Collapsible "Log a communication" card. Open by default; collapses while a
   search is active so results rise to the top. Style the summary as a header. */
.comm-logcard > summary { list-style: none; display: flex; align-items: center; }
.comm-logcard > summary::-webkit-details-marker { display: none; }
.comm-logcard > summary .card-title { color: #32325d; }
.comm-logcard:not([open]) > summary { padding-top: .9rem; padding-bottom: .9rem; }
.comm-logcard > summary:hover .card-title { color: #1d6b2e; }

/* Filter pills — each type has its own colour, matching that type's row badge.
   Default = soft tinted fill with dark readable text; active = stronger fill.
   Scheme: All=navy · Booking=purple · Website=pink · Email=blue · Text=teal ·
   Call=amber · WhatsApp=green · Other=grey. */
.comm-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.comm-pill {
    font-size: 0.8125rem; line-height: 1;
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid #d7dbe0; background: #fff; color: #4b5563;
    cursor: pointer; transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}
.comm-pill:hover { filter: brightness(0.97); }

/* Per-type default (soft) fills for the pills */
.comm-pill-all      { background:#ececef; border-color:#c9c9d4; color:#32325d; }
.comm-pill-booking  { background:#f1eafb; border-color:#d9c6f2; color:#6b3fb0; }
.comm-pill-website  { background:#fce8f1; border-color:#f4c2d8; color:#b03071; }
.comm-pill-email    { background:#e8f1fb; border-color:#c2d8f2; color:#1e5fa8; }
.comm-pill-text     { background:#e3f5f3; border-color:#b6e3dd; color:#0f766e; }
.comm-pill-call     { background:#fdf3dc; border-color:#f2dda0; color:#a8640b; }
.comm-pill-whatsapp { background:#eaf6e0; border-color:#cbe6ac; color:#4f7a10; }
.comm-pill-other    { background:#eef0f2; border-color:#d7dbe0; color:#4b5563; }

/* Active pill = stronger fill of the same hue, white text (navy for All) */
.comm-pill.is-active { font-weight: 600; color: #fff; }
.comm-pill-all.is-active      { background:#32325d; border-color:#32325d; }
.comm-pill-booking.is-active  { background:#7c3aed; border-color:#7c3aed; }
.comm-pill-website.is-active  { background:#db2777; border-color:#db2777; }
.comm-pill-email.is-active    { background:#2563eb; border-color:#2563eb; }
.comm-pill-text.is-active     { background:#0d9488; border-color:#0d9488; }
.comm-pill-call.is-active     { background:#d97706; border-color:#d97706; }
.comm-pill-whatsapp.is-active { background:#65a30d; border-color:#65a30d; }
.comm-pill-other.is-active    { background:#6b7280; border-color:#6b7280; }

/* Row type badge — same colour per type as its pill (soft fill, dark text) */
.comm-badge {
    font-size: 0.6875rem; font-weight: 700; line-height: 1;
    padding: 4px 9px; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent;
}
.comm-badge-booking  { background:#f1eafb; color:#6b3fb0; border-color:#d9c6f2; }
.comm-badge-website  { background:#fce8f1; color:#b03071; border-color:#f4c2d8; }
.comm-badge-email    { background:#e8f1fb; color:#1e5fa8; border-color:#c2d8f2; }
.comm-badge-text     { background:#e3f5f3; color:#0f766e; border-color:#b6e3dd; }
.comm-badge-call     { background:#fdf3dc; color:#a8640b; border-color:#f2dda0; }
.comm-badge-whatsapp { background:#eaf6e0; color:#4f7a10; border-color:#cbe6ac; }
.comm-badge-other    { background:#eef0f2; color:#4b5563; border-color:#d7dbe0; }

/* Inbox container */
.comm-inbox {
    background: #fff; border: 1px solid #e3e6ea; border-radius: 10px;
    overflow: hidden;
}
.comm-item { border-bottom: 1px solid #eef0f2; }
.comm-item:last-child { border-bottom: 0; }

/* Collapsed row line — the whole line is a button */
.comm-rowline {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 14px; background: transparent; border: 0; cursor: pointer;
    text-align: left; font: inherit; color: inherit;
    transition: background .1s;
}
.comm-rowline:hover { background: #f5faf1; }               /* faint brand-green tint */
.comm-item.is-open > .comm-rowline { background: #f5faf1; }

.comm-date {
    font-size: 0.75rem; color: #6b7280; font-weight: 600;
    flex: 0 0 auto; min-width: 72px;
}
.comm-typebadge { flex: 0 0 auto; }
.comm-subject {
    flex: 1 1 auto; min-width: 0;
    font-size: 0.9rem; color: #1f2937; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* never overflow */
}
/* body-preview headlines (no subject) read as lighter/normal weight than a subject */
.comm-subject .comm-hl { color: #32325d; background: #eef7d8; border-radius: 3px; padding: 0 2px; }
.comm-chevron {
    flex: 0 0 auto; color: #9aa2ad; font-size: 1.1rem; line-height: 1;
    transition: transform .15s;
}
.comm-item.is-open .comm-chevron { transform: rotate(90deg); color: #8ebb28; }

/* Expanded detail — hidden until the row is open */
.comm-detail { display: none; padding: 4px 14px 14px; }
.comm-item.is-open .comm-detail { display: block; }

/* Phone: stack date above the badge+subject so long subjects don't crush */
@media (max-width: 640px) {
    .comm-rowline { flex-wrap: wrap; gap: 6px 8px; }
    .comm-date { min-width: 0; order: -1; flex: 1 0 100%; }
    .comm-chevron { margin-left: auto; }
}

/* ---- Planning notes header — a collapsible accordion (student + enquiry) ----
   Collapsed by default (compact title bar); the whole header toggles it open to
   show the FULL note + Edit. On-brand navy #32325d / green #8ebb28. Phone-safe.
   Same markup on admin/student-detail.php and admin/enquiry-edit.php. */
.planning-notes {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-left: 4px solid #8ebb28;      /* brand green accent */
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
/* The accordion header bar — a full-width button that toggles the note. */
.planning-notes-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.planning-notes-head:focus-visible { outline: 2px solid #8ebb28; outline-offset: 2px; border-radius: 6px; }
.planning-notes-chevron {
    display: inline-flex;
    color: #32325d;                      /* brand navy chevron */
    transition: transform .15s ease;
    flex-shrink: 0;
}
/* Chevron points down when collapsed, up when open. */
.planning-notes.is-open .planning-notes-chevron { transform: rotate(180deg); }
.planning-notes-title {
    font-size: 0.95rem; font-weight: 700; color: #32325d;   /* brand navy */
}
.planning-notes-head:hover .planning-notes-title { color: #1d6b2e; }   /* green on hover */
.planning-notes-empty-hint { font-size: 0.8rem; color: #9ca3af; font-style: italic; }

/* When expanded, show the FULL note (no height cap / scroll box). */
.planning-notes-body {
    font-size: 0.9rem; color: #1f2937; line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.planning-notes-editbtn { color: #32325d; }

/* ---- Password show/hide toggle (admin/login.php, admin/password.php) ----
   Client-side only: a small eye button inside the input toggles it between
   type=password and type=text. No server involvement, on-brand navy accent. */
.pw-wrap { position: relative; }
.pw-wrap > input { padding-right: 2.6rem; }   /* room for the eye button */
.pw-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: #32325d; background: #f2f3f7; }   /* brand navy */
.pw-toggle:focus-visible { outline: 2px solid #8ebb28; outline-offset: 1px; }          /* brand green focus */
.pw-toggle .pw-eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye-on  { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye-off { display: inline; }

/* ---- Contacts export + per-person QR (admin/contacts.php) ----
   Export-all button (navy, matches the row Open button family) + a small per-row
   QR button + a click-to-reveal QR modal. On-brand navy/green, phone-safe. */
.contacts-export-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #32325d; color: #fff;
    padding: 6px 14px; border-radius: 8px;
    font-size: 0.82rem; font-weight: 600; line-height: 1;
    white-space: nowrap; text-decoration: none; border: 1px solid #32325d;
    transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.contacts-export-btn:hover, .contacts-export-btn:focus-visible {
    background: #26264a; color: #fff; text-decoration: none;
    transform: translateY(-1px); box-shadow: 0 2px 6px rgba(50,50,93,.25);
}

/* Per-row QR button — light, secondary to the navy Open button. */
.contacts-qr-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fff; color: #32325d;
    padding: 6px 10px; border-radius: 8px;
    font-size: 0.78rem; font-weight: 600; line-height: 1;
    white-space: nowrap; cursor: pointer;
    border: 1px solid #c9c9d4;
    transition: background-color .12s ease, border-color .12s ease;
}
.contacts-qr-btn:hover, .contacts-qr-btn:focus-visible {
    background: #f2f3f7; border-color: #8ebb28;   /* green accent on hover */
}
.contacts-qr-btn:focus-visible { outline: 2px solid #8ebb28; outline-offset: 1px; }

/* QR modal */
.qr-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.qr-modal[hidden] { display: none; }
.qr-modal-backdrop { position: absolute; inset: 0; background: rgba(17,17,30,.55); }
.qr-modal-card {
    position: relative; z-index: 1;
    background: #fff; border-radius: 14px;
    padding: 1.25rem 1.25rem 1rem; width: min(92vw, 340px);
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    text-align: center;
    border-top: 4px solid #8ebb28;   /* brand green */
}
.qr-modal-x {
    position: absolute; top: 8px; right: 10px;
    border: 0; background: transparent; cursor: pointer;
    font-size: 1.1rem; line-height: 1; color: #6b7280; padding: 4px;
}
.qr-modal-x:hover { color: #32325d; }
.qr-modal-name { font-weight: 700; color: #32325d; font-size: 1.02rem; }
.qr-modal-tag  { font-size: 0.78rem; color: #6f9e1f; font-weight: 600; margin-bottom: 0.6rem; }
.qr-modal-img  { display: flex; justify-content: center; align-items: center; min-height: 180px; }
.qr-modal-img svg { width: 220px; height: 220px; max-width: 78vw; max-height: 78vw; }
.qr-loading, .qr-error { color: #9ca3af; font-size: 0.85rem; }
.qr-error { color: #c0392b; }
.qr-modal-help { font-size: 0.78rem; color: #6b7280; margin-top: 0.6rem; }

/* ==========================================================================
   Email queue — "Needs sorting" (admin/email-queue.php)
   Brand navy #32325d + green #8ebb28. No orange anywhere.
   Card-per-email rather than a table: an email has a subject, a preview and a
   file list, none of which sit comfortably in table cells on a phone.
   ========================================================================== */

/* ---- Tabs with counts ---- */
.eq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 1rem 0 0.75rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0;
}
.eq-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    text-decoration: none;
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    transition: background-color .12s ease, color .12s ease;
}
.eq-tab:hover { background: #f3f4f6; color: #32325d; text-decoration: none; }
.eq-tab-active {
    background: #fff;
    color: #32325d;
    font-weight: 600;
    border-color: #e5e7eb;
    border-bottom: 2px solid #fff;
}
.eq-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #e5e7eb;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}
/* Only the pending tab shouts, and only when there is something to do. */
.eq-count-hot { background: #8ebb28; color: #fff; }

/* ---- The list ---- */
.eq-list { display: flex; flex-direction: column; gap: 12px; }

.eq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #32325d;      /* navy edge, as on the contacts groups */
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.eq-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.eq-who { flex: 1 1 320px; }             /* min-w-0 in the markup stops overflow */
.eq-from {
    font-size: 0.8125rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eq-subject {
    font-weight: 600;
    color: #1f2937;
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.eq-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.eq-when { font-size: 0.78rem; color: #6b7280; white-space: nowrap; }
.eq-clip { font-size: 0.8rem; color: #374151; white-space: nowrap; }

.eq-preview {
    margin: 10px 0 0;
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.5;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;               /* keep the card compact */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eq-files { margin: 8px 0 0; padding: 0; list-style: none; }
.eq-files li { font-size: 0.8125rem; color: #374151; overflow-wrap: anywhere; }

.eq-reason {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    color: #6b7280;
    background: #f9fafb;
    border-left: 3px solid #d1d5db;
    padding: 6px 10px;
    border-radius: 0 6px 6px 0;
}
.eq-reason strong { color: #374151; }

.eq-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.eq-actions .inline { display: inline; margin: 0; }

/* ---- The person picker ---- */
.eq-picker {
    margin-top: 12px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.eq-picker-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}
.eq-results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.eq-result {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 11px;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid transparent;
}
.eq-result:hover,
.eq-result:focus-visible {
    background: #fff;
    border-color: #32325d;
    outline: none;
}
.eq-result-name { font-weight: 600; color: #1f2937; font-size: 0.875rem; }
.eq-result-via  { font-size: 0.75rem; color: #6b7280; }
.eq-result-empty { padding: 9px 11px; font-size: 0.8125rem; color: #6b7280; }

/* ---- Dashboard badge linking here ---- */
.eq-dash-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 10px;
    background: #8ebb28;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 640px) {
    .eq-item { padding: 12px; }
    .eq-head { gap: 8px; }
    .eq-meta { width: 100%; }
    .eq-actions { gap: 6px; }
    /* Full-width buttons stack cleanly rather than crowding on a phone. */
    .eq-actions .enq-open-btn,
    .eq-actions .btn { flex: 1 1 100%; justify-content: center; }
    .eq-tab { padding: 8px 12px; font-size: 0.8125rem; }
}

/* iOS zooms the page when a focused input's font-size is under 16px, which then
   causes horizontal scrolling. The picker is this page's main interaction, so
   pin it to 16px on small screens. (Scoped: the site-wide .input-sm size is a
   separate, pre-existing question.) */
@media (max-width: 640px) {
    /* Must out-specify `.input.input-bordered.input-sm` (0,3,0) above. */
    .eq-picker input.input.input-sm,
    .eq-picker input.input.input-bordered.input-sm,
    input.input.input-bordered.input-sm[name="search"] { font-size: 16px; }
}

/* ==========================================================================
   Files tab — drag-and-drop upload + View/Download actions
   Brand navy #32325d + green #8ebb28. No orange.
   ========================================================================== */

.fu-zone { margin-top: 0.5rem; }

.fu-drop {
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    padding: 18px 16px;
    text-align: center;
    background: #fafafa;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.fu-drop:hover { border-color: #9ca3af; }
/* Dragging over: brand green, so it's obvious the drop will land. */
.fu-drop-over {
    border-color: #8ebb28;
    background: #f4f9e8;
}
.fu-drop-main { margin: 0; font-weight: 600; color: #374151; font-size: 0.95rem; }
.fu-drop-sub  { margin: 4px 0; font-size: 0.78rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; }
.fu-drop-hint { margin: 8px 0 0; font-size: 0.75rem; color: #9ca3af; }

.fu-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    cursor: default;
    max-width: 100%;
}
/* The native file input has a wide intrinsic size; cap it so it can't push the
   page wider than the viewport on a phone. */
.fu-controls .file-input { max-width: 100%; }

/* Lesson-files table: keep meta columns compact (nowrap) so the actions
   (View/Download/Delete) always stay visible, and keep each filename on ONE
   line — truncating an over-long name with an ellipsis rather than wrapping.
   The full name is still the link (title + href). Auto table layout keeps the
   meta columns their natural width; only the File-name link is capped. On a
   phone the whole table scrolls inside its .overflow-x-auto wrapper (untouched). */
@media (min-width: 640px) {
    #lesson-files table .col-meta { white-space: nowrap; }
    #lesson-files table td:first-child a {
        display: inline-block;
        max-width: 32ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
    /* Trim the visibility control so the row's actions stay within the card. */
    #lesson-files table .select { min-width: 0; }
}

/* ---- per-file progress + result ---- */
.fu-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.fu-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #9ca3af;
    border-radius: 8px;
    padding: 8px 10px;
}
.fu-item-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.fu-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.fu-status { font-size: 0.75rem; color: #6b7280; white-space: nowrap; flex: none; }

.fu-bar { height: 4px; background: #e5e7eb; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.fu-bar-fill { height: 100%; width: 0; background: #32325d; transition: width .15s linear; }

.fu-ok   { border-left-color: #8ebb28; }
.fu-ok   .fu-status { color: #4d7c0f; font-weight: 600; }
.fu-fail { border-left-color: #dc2626; background: #fef2f2; }
.fu-fail .fu-status { color: #b91c1c; font-weight: 600; white-space: normal; text-align: right; }

/* ---- row actions (View / Download / Delete) ---- */
.fu-actions { display: flex; gap: 2px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.fu-actions .m-0 { margin: 0; }

/* ---- inline file VIEW accordion (expands the row in place) ----
   The file is rendered inside the tab: PDFs to <canvas> via vendored PDF.js,
   images as <img>. Never a new browser tab, never the browser's PDF plugin. */
.fv-view .fv-view-hide { display: none; }
.fv-view.fv-open .fv-view-show { display: none; }
.fv-view.fv-open .fv-view-hide { display: inline; }

/* The panel cell spans the whole row. CRITICAL: it must never make the table
   (and therefore the page) wider than it already is. The cell is a normal table
   cell; the width guard lives on .fv-panel and .fv-viewport inside it. */
.fv-panel-cell { padding: 0 !important; background: #f9fafb; }
.fv-panel {
    padding: 10px 12px 12px;
    border-top: 2px solid #8ebb28;      /* brand green — signals the expanded row */
    box-sizing: border-box;
    max-width: 100%;                    /* never widen the parent */
    overflow: hidden;                   /* the horizontal scroll lives on .fv-viewport, not here */
}

/* Toolbar: zoom controls + status. Stays inside the panel width. */
.fv-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.fv-zoom { display: inline-flex; align-items: center; gap: 4px; }
.fv-zoom .btn { min-width: 2rem; }
.fv-zoom-level {
    font-size: 0.8rem; font-weight: 600; color: #32325d;
    min-width: 3.2rem; text-align: center;
}
.fv-status { font-size: 0.8rem; color: #6b7280; margin-left: auto; }

/* The scroll viewport. Vertical scroll always; horizontal scroll ONLY here (when
   zoomed in past fit-width). The page itself never scrolls sideways. */
.fv-viewport {
    max-height: 34rem;
    overflow: auto;                     /* both axes scroll INSIDE this box */
    -webkit-overflow-scrolling: touch;
    background: #eef0f2;
    border-radius: 6px;
    padding: 10px;
}
.fv-canvas-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Canvas: the backing store may be large (devicePixelRatio) but its CSS width is
   set inline by JS to the fitted/zoomed CSS pixels. height:auto keeps ratio. */
.fv-page { height: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.15); background: #fff; display: block; }
.fv-image { max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }

@media (max-width: 640px) {
    .fv-viewport { max-height: 26rem; padding: 6px; }
    .fv-panel { padding: 8px; }
    /* iOS zoom guard on any focusable control */
    .fv-zoom .btn { font-size: 16px; }
}

@media (max-width: 640px) {
    .fu-drop { padding: 14px 12px; }
    .fu-controls { flex-direction: column; align-items: stretch; }
    /* iOS zooms the page if a focused input is under 16px. */
    .fu-controls .file-input { font-size: 16px; }
    .fu-actions { justify-content: flex-start; }
    .fu-status { font-size: 0.72rem; }
}

/* "Some files uploaded" note shown when a batch had failures — the list stays
   on screen so the per-file errors can actually be read. */
.fu-note {
    font-size: 0.8rem;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
}
.fu-note a { color: #32325d; font-weight: 600; text-decoration: underline; }

/* Queue row — expand to read the full message (mirrors the comms inbox). */
.eq-expand {
    background: none;
    border: none;
    padding: 4px 0 0;
    margin: 4px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #32325d;
    cursor: pointer;
}
.eq-expand:hover { text-decoration: underline; }
.eq-expand .eq-expand-hide { display: none; }
.eq-open .eq-expand .eq-expand-show { display: none; }
.eq-open .eq-expand .eq-expand-hide { display: inline; }

.eq-fullbody {
    margin-top: 8px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #374151;
    white-space: pre-wrap;      /* preserve the email's own line breaks */
    overflow-wrap: anywhere;
    max-height: 32rem;
    overflow-y: auto;
}
.eq-fullbody-open { display: block; }

/* ==========================================================================
   Structured-email summary (imported Calendly / website-form emails)
   Shown instead of the flattened raw text; raw stays under a toggle.
   ========================================================================== */
.se-summary {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 4px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.85rem;
    line-height: 1.5;
}
.se-field { display: contents; }
.se-label { color: #6b7280; font-weight: 600; }
.se-value { color: #1f2937; overflow-wrap: anywhere; }

/* A message/description block spans both columns. */
.se-message-label {
    grid-column: 1 / -1;
    margin-top: 8px;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.8rem;
}
.se-message {
    grid-column: 1 / -1;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #374151;
}

.se-toggle {
    background: none; border: none; padding: 6px 0 0; margin: 0;
    font-size: 0.8rem; font-weight: 600; color: #32325d; cursor: pointer;
}
.se-toggle:hover { text-decoration: underline; }
.se-toggle .se-toggle-hide { display: none; }
.se-toggle.se-open .se-toggle-show { display: none; }
.se-toggle.se-open .se-toggle-hide { display: inline; }

.se-raw {
    margin-top: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #4b5563;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 30rem;
    overflow-y: auto;
}

.se-plain { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    /* Stack label above value on a phone. */
    .se-summary { grid-template-columns: 1fr; gap: 2px; }
    .se-label { margin-top: 6px; }
}

/* Reply button (queue + comms) — subtle, secondary to the primary actions. */
.eq-reply, .comm-reply { color: #32325d; }
.eq-reply:hover, .comm-reply:hover { background: #f3f4f6; }
.comm-reply { margin-left: auto; }   /* push Reply to the right of the direction badge */

/* Parent lesson payments (Stage 2b) */
.ppay-owed { font-size: .95rem; color: #8a4b00; }
.ppay-owed strong { color: #8a1c0f; }
.ppay-clear { font-size: .9rem; color: #3a5a13; font-weight: 700; }
.ppay-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.ppay-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid #f2f3f7; }
.ppay-row:last-child { border-bottom: none; }
.ppay-when { color: #32325d; font-weight: 600; flex: 1 1 auto; }
.ppay-amt { font-weight: 700; color: #32325d; }
.ppay-pill { font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: .4rem; white-space: nowrap; }
.ppay-pill-paid { background: #e4f3d6; color: #3a5a13; }
.ppay-pill-waived { background: #eef0f5; color: #6b7080; }
.ppay-pill-unpaid { background: #fbe3c4; color: #8a4b00; }
.ppay-how { margin-top: .8rem; border: 1.5px solid #8ebb28; background: #f3f8e8; border-radius: .7rem; padding: .8rem 1rem; }
.ppay-how-h { font-weight: 700; color: #32325d; font-size: .9rem; margin: 0 0 .4rem; }
.ppay-bank { font-size: .88rem; line-height: 1.7; }
.ppay-bank td:first-child { color: #666; padding-right: 14px; white-space: nowrap; }

/* Overseas payment block — SECONDARY + understated, sits under the primary UK transfer.
   Intentionally not a bright "Pay Now" — UK families shouldn't be nudged onto card. */
.overseas-pay { margin-top: .6rem; border-top: 1px dashed #d7dae4; padding-top: .5rem; }
.overseas-pay > summary { cursor: pointer; font-size: .82rem; color: #6b7080; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: .35rem; }
.overseas-pay > summary::-webkit-details-marker { display: none; }
.overseas-pay > summary::before { content: "🌍"; font-size: .9rem; }
.overseas-pay > summary::after { content: "▾"; font-size: .7rem; color: #9aa0b0; }
.overseas-pay[open] > summary::after { content: "▴"; }
.overseas-pay > summary:hover { color: #32325d; }
.overseas-pay-body { margin-top: .5rem; padding-left: .2rem; }
.overseas-pay-lead { font-size: .8rem; color: #8a8fa3; margin: 0 0 .5rem; }
.overseas-pay-sec { margin-bottom: .6rem; }
.overseas-pay-h { font-size: .78rem; font-weight: 700; color: #32325d; margin: 0 0 .2rem; }
.overseas-pay-table { font-size: .82rem; line-height: 1.6; }
.overseas-pay-table td:first-child { color: #8a8fa3; padding-right: 12px; white-space: nowrap; }
.overseas-pay-card { font-size: .82rem; color: #4a4a68; margin: 0; }
.overseas-pay-card a { color: #5a7d1a; font-weight: 600; }