/* Legacy design-parity theme, layered on top of Bootstrap 5.3's stock CDN
 * CSS. Bootstrap 5.3's precompiled stylesheet hardcodes each component's own
 * scoped custom properties (e.g. .btn-primary sets --bs-btn-bg itself) rather
 * than reading a single root --bs-primary at runtime, so recoloring requires
 * overriding those per-component variables directly, not just :root.
 * Legacy hex values, from /home/mynurserymanager-reference/static/css/*.css. */

@font-face {
    font-family: 'Century Gothic';
    src: url('/static/fonts/Century.woff') format('woff'), url('/static/fonts/Century.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Amatic SC';
    src: url('/static/fonts/Amatic.woff') format('woff'), url('/static/fonts/Amatic.ttf') format('truetype');
    font-display: swap;
}

:root {
    --brand-primary: #337AB7;
    --brand-primary-dark: #2e6da4;
    --brand-coral: #FF7171;
    --brand-success: #00B259;
    --brand-danger: #D9534F;
    --brand-warning: #f0ad4e;
    --brand-grey: #646465;
}

body {
    font-family: 'Century Gothic', Verdana, Geneva, sans-serif;
    background-color: #FFF;
    color: #222;
}
/* Legacy only applied this from the tablet breakpoint up (481px) — full
 * white background on narrow mobile, tiled presentation background above
 * that (style.css: "Diseño tableta" media block). */
@media (min-width: 481px) {
    body {
        background-image: url('/static/img/bg-presentation.png');
        background-position: top;
        background-repeat: repeat;
        background-origin: padding-box;
        background-color: #EEE;
    }
}

/* Legacy's real per-page heading style (style.css: .panel-heading h3 / .panel-title)
 * is Century Gothic BOLD + coral, centered — NOT the cursive Amatic SC face
 * (that one is reserved for the brand logo text and the nav item labels).
 * !important because most of these headings already carry a Bootstrap size
 * utility class (h4/h3/etc.) whose own font-size would otherwise win on
 * specificity over a plain `main h1` tag selector. */
main h1 {
    font-family: 'Century Gothic', Verdana, Geneva, sans-serif !important;
    font-weight: bold !important;
    font-size: 2em !important;
    color: var(--brand-coral) !important;
    text-align: left;
}

/* :not(.text-muted) — the big Amatic-SC welcome-banner treatment is only
 * meant for hero-style page headings (e.g. the dashboard's "Welcome, X").
 * Nine other places across the app use <h2 class="text-uppercase
 * text-muted"> for a small, plain section subtitle (e.g. "Recent daily
 * reports") — without this exclusion, this !important rule forced every
 * one of them into a giant blue cursive heading instead of the small muted
 * one actually intended. */
main h2:not(.text-muted) {
    font-family: 'Amatic SC', Verdana, Geneva, sans-serif !important;
    font-weight: bold !important;
    font-size: 3em !important;
    color: var(--brand-primary) !important;
    text-align: left;
}

main h3 {
    font-family: 'Century Gothic', Verdana, Geneva, sans-serif !important;
    font-weight: bold !important;
    font-size: 1em !important;
    color: var(--brand-coral) !important;
    text-align: left;
}

main h1 i, main h2 i { margin-right: .4rem; }

a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-dark); }
/* Bootstrap's .btn-link sets its own color via --bs-link-color (its default
 * blue), which beats the plain `a{}` rule above by specificity — without
 * this it's the only kind of link on the page not using the brand color. */
.btn-link { color: var(--brand-primary); }
.btn-link:hover { color: var(--brand-primary-dark); }

/* --- Buttons --- */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 51, 122, 183;
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-gradient: none;
}
.btn-success {
    --bs-btn-bg: var(--brand-success);
    --bs-btn-border-color: var(--brand-success);
    --bs-btn-hover-bg: #009148;
    --bs-btn-hover-border-color: #009148;
    --bs-btn-active-bg: #009148;
    --bs-btn-active-border-color: #009148;
}
/* Legacy's own class for a page's main "add new" action (style.css:
 * .button-new, renamed here to the more conventional .btn-coral), reused
 * wherever a page has one instead of ad-hoc inline styling. */
.btn-coral {
    background-color: var(--brand-coral) !important;
    color: #FFF !important;
    border-color: var(--brand-coral) !important;
}
.btn-coral:hover { color: #FFF !important; opacity: .9; }
/* Outline counterpart, for a secondary "add" action that shouldn't compete
 * with a page's main .btn-coral (e.g. "Add tutor" next to the student
 * bio table) — built the same way Bootstrap 5.3 builds its own
 * .btn-outline-* variants, via CSS custom properties, so hover/active/
 * focus/disabled states all come for free. */
.btn-outline-coral {
    --bs-btn-color: var(--brand-coral);
    --bs-btn-border-color: var(--brand-coral);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-coral);
    --bs-btn-hover-border-color: var(--brand-coral);
    --bs-btn-focus-shadow-rgb: 255, 113, 113;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-coral);
    --bs-btn-active-border-color: var(--brand-coral);
    --bs-btn-disabled-color: var(--brand-coral);
    --bs-btn-disabled-border-color: var(--brand-coral);
}
.btn-danger {
    --bs-btn-bg: var(--brand-danger);
    --bs-btn-border-color: var(--brand-danger);
}
.btn-warning {
    --bs-btn-bg: var(--brand-warning);
    --bs-btn-border-color: var(--brand-warning);
}

.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.text-bg-primary { background-color: var(--brand-primary) !important; }
.text-bg-success { background-color: var(--brand-success) !important; }
.text-bg-danger { background-color: var(--brand-danger) !important; }
.text-bg-warning { background-color: var(--brand-warning) !important; }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--brand-primary);
}

/* Sub-navigation tab strip (e.g. Staff's Roster/Schedule/Holidays/Time
   clock) — a flatter, coral-accented underline style instead of plain
   Bootstrap pills, with room for a leading icon per tab. */
.subnav-tabs {
    border-bottom-color: var(--bs-border-color);
    gap: 2rem;
}
.subnav-tabs .nav-link {
    color: var(--bs-secondary-color);
    font-weight: 500;
    border-bottom-width: 3px;
    padding-bottom: .6rem;
}
.subnav-tabs .nav-link i {
    margin-right: .35rem;
}
.subnav-tabs .nav-link:hover {
    color: var(--brand-coral);
    border-bottom-color: var(--bs-border-color);
}
.subnav-tabs .nav-link.active {
    color: var(--brand-coral);
    font-weight: 600;
    border-bottom-color: var(--brand-coral);
}
.page-link { color: var(--brand-primary); }
.page-item.active .page-link { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .25rem rgba(51, 122, 183, .25);
}
.progress-bar {
    --bs-progress-bar-bg: var(--brand-primary);
    background-color: var(--brand-primary);
}
.spinner-border.text-primary { color: var(--brand-primary) !important; }
/* Upload-progress bar (templates/messaging/conversation.html): the chat's
 * file/voice-note POST otherwise gives no feedback at all while it's in
 * flight. Sits on top of the textarea's own top edge and fills left to
 * right; `width` is driven from Alpine (uploadProgress), not here. */
.upload-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background-color: var(--brand-danger);
    z-index: 5;
    transition: width .15s linear;
}
/* Shown while stalled at 90% waiting on the untracked server-side leg
 * (Django -> OVH storage) — a pulse instead of a stuck-looking bar. */
.upload-progress-bar.waiting {
    animation: upload-progress-pulse 1s ease-in-out infinite;
}
@keyframes upload-progress-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
/* Same loading indicator as legacy's `.loading` (style.css): a full-screen
 * overlay below the navbar with loading_blue.gif centered over a white
 * radial fade, not a generic Bootstrap spinner. */
#global-spinner {
    position: fixed;
    left: 0;
    top: 80px;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-image: url('/static/img/loading_blue.gif'), radial-gradient(#FFF 20%, rgba(255, 255, 255, 1));
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 1000px) {
    #global-spinner { top: 100px; }
}
.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--brand-primary);
}

/* --- Cards --- */
.card { box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* Shared look for every hover-info bubble in the app (menu-of-the-day,
 * schedule shift times, VeriFactu error/hash) — see base.html's
 * initPopovers(). white-space:pre-wrap matches the legacy popover, which
 * let staff type multi-line menu descriptions. */
.popover-body { white-space: pre-wrap; }

/* --- Content container (legacy .cont-manage1 / .gridCont) --- */
.app-content {
    max-width: 1400px;
    margin: 0 auto;
    background-color: #FFF;
}
@media (min-width: 1000px) {
    .app-content {
        border: 1px solid #555;
        border-radius: 3px;
        box-shadow: 5px 5px 3px -2px #888;
        padding-top: 15px;
        margin-bottom: 70px;
    }
}

/* =================== Navbar =================== */
#app-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: 80px;
    background-color: var(--brand-primary);
    box-shadow: 0 0 10px #000;
}
@media (min-width: 1000px) {
    #app-navbar { height: 100px; }
}
body { padding-top: 92px; }
@media (min-width: 1000px) { body { padding-top: 112px; } }
/* Sticky footer on phones/tablets: with little content the footer used to sit
   mid-screen. The body is a column; the content grows, the footer follows it
   to the bottom (on desktop the footer is fixed anyway, see #app-footer). */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* min-width: 0 — as a flex item the content would otherwise grow to its widest
   child (the daily-reports grid made the whole page 1400px wide on phones). */
.app-content { flex: 1 0 auto; min-width: 0; width: 100%; }  /* width: 100% — auto margins stop a flex item stretching */

.app-navbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}
.app-navbar-logo img { height: 60px; }
@media (min-width: 1000px) { .app-navbar-logo img { height: 80px; } }

/* Desktop icon-nav */
.app-nav-desktop { display: none; }
@media (min-width: 1000px) {
    .app-nav-desktop { display: flex; }
}
.app-nav-desktop { align-items: center; height: 100%; }
/* Scoped to the top-level `> ul > li` only — this nav also contains a
 * Bootstrap `.dropdown-menu` (itself a `ul` full of `li`s) for "Agenda",
 * and an unscoped `.app-nav-desktop ul`/`li` selector used to bleed into
 * it (white-on-white text, block layout breaking Bootstrap's own
 * .dropdown-item styling — looked like an empty box stuck open). */
.app-nav-desktop > ul {
    list-style: none;
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Amatic SC', cursive;
    font-size: 1.4em;
}
.app-nav-desktop > ul > li {
    height: 100%;
    display: flex;
    align-items: center;
}
.app-nav-desktop > ul > li, .app-nav-desktop .app-nav-item {
    color: #FFF;
    margin: 0 4px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: none;
}
.app-nav-desktop .app-nav-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Scoped to `.app-nav-item` itself (the top-level trigger), not a bare
 * `.app-nav-desktop a` — that unscoped selector used to also paint the
 * Agenda dropdown's own links white-on-white, making them invisible. */
.app-nav-desktop .app-nav-item, .app-nav-desktop .app-nav-item:hover, .app-nav-desktop .app-nav-item:focus {
    color: #FFF;
    text-decoration: none;
}
.app-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid #FFF;
    border-radius: 50%;
    font-size: 1.1em;
    padding-top: 2px;
    padding-right: 1px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
    transition: box-shadow .4s ease-in-out;
}
.app-nav-item:hover .app-nav-icon, .app-nav-item:focus .app-nav-icon {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .4);
}
.app-nav-label {
    display: block;
    font-size: 1.1em;
    margin-top: 2px;
    transition: text-shadow .3s ease;
}
.app-nav-item:hover .app-nav-label { text-shadow: 0 2px 3px #FFF; }
/* Bootstrap's default .dropdown-toggle::after caret has margin-left:.255em,
 * meant for an inline "label ▾" layout — pushes it off-center here since
 * the Agenda item is a centered flex column instead. */
.app-nav-item.dropdown-toggle::after { margin-left: 0; }
.app-nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #DC222F;
    color: #FFF;
    border-radius: 50%;
    box-shadow: 0 0 8px #FFF;
    font-size: .65rem;
    font-family: 'Century Gothic', sans-serif;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 3px;
}
/* Inside the (coral) mobile menu: a white pill with the count in red — a
 * red dot disappears against the coral, and next to the Amatic label it
 * needs to be about the text's size to read at all. */
.app-nav-badge-static {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .6rem;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background: #fff;
    color: #DC222F;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    /* Amatic SC draws its glyphs high in their line box: centring the boxes
     * left the pill visibly lower than the word — nudge it up to the text. */
    transform: translateY(-.4rem);
}
.app-nav-desktop .dropdown-menu { font-family: 'Century Gothic', sans-serif; font-size: .9rem; }

/* Agenda dropdown (desktop nav): a rounded panel with an arrow pointing at
 * the Agenda button, each section a coloured icon tile + name + one-line
 * description; the section you're in is highlighted in its own colour. */
.agenda-menu {
    width: 330px;
    padding: 8px;
    margin-top: 6px !important;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(20, 40, 70, .18), 0 2px 6px rgba(20, 40, 70, .08);
}
.agenda-menu.show { animation: agenda-menu-in .16s ease-out; }
/* Animates `translate`, NOT `transform`: Bootstrap/Popper places the menu
 * with an inline transform, and a keyframed transform overrode it for the
 * animation's duration — the menu popped up elsewhere, then jumped. */
@keyframes agenda-menu-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: none; } }
.agenda-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #fff;
    border-radius: 3px 0 0 0;
    transform: rotate(45deg);
}
.agenda-item {
    --agenda-c: var(--brand-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px;
    white-space: normal;
    color: #2b2f36;
    transition: background-color .15s ease;
}
.agenda-item-blue { --agenda-c: var(--brand-primary); }
.agenda-item-green { --agenda-c: var(--brand-success); }
.agenda-item-coral { --agenda-c: var(--brand-coral); }
.agenda-item-amber { --agenda-c: var(--brand-warning); }
.agenda-item-purple { --agenda-c: #8e6bbf; }
.agenda-item:hover, .agenda-item:focus { background-color: color-mix(in srgb, var(--agenda-c) 9%, #fff); color: #2b2f36; }
.agenda-item.active, .agenda-item:active { background-color: color-mix(in srgb, var(--agenda-c) 14%, #fff); color: #2b2f36; }
.agenda-item-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.15rem;
    color: var(--agenda-c);
    background-color: color-mix(in srgb, var(--agenda-c) 14%, #fff);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.agenda-item:hover .agenda-item-icon, .agenda-item:focus .agenda-item-icon, .agenda-item.active .agenda-item-icon {
    color: #fff;
    background-color: var(--agenda-c);
}
.agenda-item:hover .agenda-item-icon { transform: scale(1.06); }
.agenda-item-text { display: flex; flex-direction: column; min-width: 0; }
.agenda-item-title { font-weight: 600; line-height: 1.25; }
.agenda-item-desc { font-size: .78rem; color: #8a8f98; line-height: 1.3; }
.agenda-item.active .agenda-item-title { color: color-mix(in srgb, var(--agenda-c) 80%, #000); }

/* Right-hand Switch centre / VeriFactu buttons (desktop only). Full text
 * from 1300px; below that, round icon-only buttons (name in a popover). */
.app-navbar-side { display: none; align-items: center; gap: 8px; }
@media (min-width: 1000px) { .app-navbar-side { display: flex; } }
.app-navbar-side-btn { white-space: nowrap; }
.app-navbar-side-btn i { display: none; }
@media (max-width: 1299.98px) {
    .app-navbar-side-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
    .app-navbar-side-btn i { display: inline; font-size: 1rem; }
    .app-navbar-side-btn span { display: none; }
}
/* Popovers only when icon-only; with the text visible they'd just repeat it. */
@media (min-width: 1300px) { .app-nav-side-popover { display: none; } }

/* Nav labels never wrap ("Time clock" / "Log out" used to break into two
 * lines around 1000–1200px); instead the whole bar tightens up there. */
.app-nav-label { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1299.98px) {
    .app-navbar-inner { gap: 8px; padding: 0 12px; }
    .app-navbar-logo img { height: auto; max-height: 80px; max-width: 180px; object-fit: contain; }
    .app-nav-desktop > ul > li, .app-nav-desktop .app-nav-item { margin: 0 2px; }
    .app-nav-label { font-size: 1em; }
}
/* Longer labels in some languages (German, Basque…) still fit at the narrow end. */
@media (min-width: 1000px) and (max-width: 1149.98px) {
    .app-navbar-logo img { max-width: 140px; }
    .app-nav-label { font-size: .92em; }
    .app-nav-desktop > ul > li, .app-nav-desktop .app-nav-item { margin: 0 1px; }
}

/* Hamburger */
.app-navbar-toggle {
    display: block;
    cursor: pointer;
    color: #FFF;
    border: 2px solid #FFF;
    border-radius: 50%;
    background: var(--brand-primary);
    padding: 6px 10px;
    box-shadow: 0 0 5px #000;
    transition: .3s ease all;
}
.app-navbar-toggle:hover { background: var(--brand-coral); }
.app-navbar-toggle { position: relative; }
.app-nav-badge-toggle {
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    line-height: 18px;
    font-size: .75rem;
    font-weight: 700;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
@media (min-width: 1000px) { .app-navbar-toggle { display: none; } }

/* Mobile off-canvas */
.app-nav-mobile {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 80px);
    overflow: auto;
    background: var(--brand-coral);
    z-index: 1020;
    transition: left .4s ease-out, background-color .4s ease-out;
}
.app-nav-mobile[data-closed] {
    left: -100%;
    background-color: var(--brand-primary);
}
@media (min-width: 1000px) { .app-nav-mobile { display: none; } }
.app-nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.app-nav-mobile li { border-bottom: 2px solid #333; }
.app-nav-mobile a, .app-nav-mobile button.app-nav-mobile-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    color: #FFF;
    text-decoration: none;
    font-family: 'Amatic SC', cursive;
    font-size: 1.8em;
    text-shadow: 0 0 4px #000;
    background: none;
    border: none;
    text-align: left;
}
.app-nav-mobile a:hover, .app-nav-mobile button.app-nav-mobile-item:hover {
    color: #000;
    background: #FFCC99;
    text-shadow: none;
}

/* =================== Footer =================== */
#app-footer {
    background-color: var(--brand-primary);
    padding: 5px 15px;
    font-size: .8em;
}
#app-footer a { color: #FFF; text-decoration: none; }
#app-footer img { height: 15px; margin-right: 4px; vertical-align: middle; }
@media (min-width: 1000px) {
    #app-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1010; }
}

/* =================== Dashboard tiles =================== */
.main-panel {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin: 15px auto;
    color: #FFF;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: box-shadow .3s ease, font-size .3s ease;
}
.main-panel:hover {
    color: #FFF;
    box-shadow: 0 0 5px 10px rgba(0, 0, 0, .2);
    font-size: 1.2em;
}
.main-panel i { font-size: 2.4em; }
.main-panel span { margin-top: 6px; font-family: 'Century Gothic', sans-serif; font-size: .85em; line-height: 1.15; text-align: center; max-width: 78%; overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 768px) { .main-panel { width: 150px; height: 150px; } .main-panel i { font-size: 3.2em; } }
.main-panel-primary { background-color: var(--brand-primary); }
.main-panel-green { background-color: var(--brand-success); }
.main-panel-red { background-color: var(--brand-danger); }
.main-panel-grey { background-color: var(--brand-grey); }
/* Unread count on a dashboard tile: sized for the big circle (the navbar's
 * .app-nav-badge is a 16px dot, lost on a 150px tile). */
.main-panel { position: relative; }
.main-panel-badge {
    position: absolute;
    top: 2%;
    right: 2%;
    min-width: 2.1em;
    height: 2.1em;
    padding: 0 .45em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #DC222F;
    border: 3px solid #fff;
    color: #fff;
    font-family: 'Century Gothic', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    animation: main-panel-badge-pop .35s ease-out;
}
@media (min-width: 768px) { .main-panel-badge { font-size: 1.15rem; } }
@keyframes main-panel-badge-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Dashboard "Today" card (templates/centres/dashboard.html and
 * parent_dashboard.html) — the legacy yellow "postit", modernised: a warm
 * yellow header with a tear-off calendar tile keeps the post-it feel, and
 * the content sits on white as chips/rows instead of one run-on paragraph. */
.today-card {
    position: relative;
    background: #fffcf0;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 15px;
    color: #2b2f3a;
    border: 1px solid #e4dcb0;
    box-shadow: 0 2px 4px rgba(0, 36, 125, .10), 0 12px 32px -6px rgba(0, 36, 125, .32);
    animation: today-card-in .4s ease-out;
}
@keyframes today-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.today-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(120deg, #fff6b3 0%, #ffe75c 100%);
}
.today-date-tile {
    display: flex;
    flex-direction: column;
    width: 56px;
    min-width: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}
.today-date-month {
    background: var(--brand-coral);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 0;
}
.today-date-day { font-size: 1.6rem; font-weight: 700; line-height: 1.35; color: var(--brand-primary); }
.today-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a6d00; }
.today-weekday {
    font-family: 'Amatic SC', Verdana, Geneva, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    color: var(--brand-primary);
    text-transform: capitalize;
}
.today-fulldate { font-size: .85rem; color: #6b5a12; }

.today-section { padding: 12px 18px; }
.today-section + .today-section { border-top: 1px dashed #e7e3d4; }
.today-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-grey);
}
.today-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: .85rem;
}
.today-section-icon-birthday { background: #ffe3e3; color: #e0484d; }
.today-section-icon-menu { background: #dff5e8; color: #1f8a4c; }
.today-section-icon-trial { background: #fff1cc; color: #b07b00; }
.today-section-trial { background: #fffaf0; }
.today-trial-text { margin: 6px 0 0; font-size: .9rem; color: var(--brand-grey); }
.today-trial-text a { color: var(--brand-primary); font-weight: 600; }

.today-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.today-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: #fff5f5;
    border: 1px solid #ffd6d6;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
a.today-chip:hover, a.today-chip:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(255, 113, 113, .25); color: inherit; }
.today-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    background: var(--brand-coral);
}
.today-avatar-staff { background: var(--brand-primary); }
.today-chip-name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-chip-badge {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--brand-coral);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.today-chip-badge-staff { background: var(--brand-primary); }
.today-chip-badge-class { background: #eaf2fb; color: var(--brand-primary); }

.today-menus { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.today-menu {
    display: block;
    padding: 6px 10px;
    border-radius: 12px;
    background: #f3fbf6;
    border-left: 4px solid var(--brand-success);
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}
.today-menu:hover, .today-menu:focus-visible { background: #e3f6ea; color: inherit; }
.today-menu-category { display: block; font-weight: 700; font-size: .85rem; color: #1f8a4c; }
.today-menu-text {
    font-size: .85rem;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.today-empty { margin: 0; padding: 14px 18px; color: var(--brand-grey); font-size: .9rem; }
.today-empty .fa { color: #f0b400; }

.today-child-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.today-child-line { display: flex; gap: 8px; margin: 6px 0 0 38px; font-size: .88rem; }
.today-child-line .fa { margin-top: 3px; color: #1f8a4c; }
.today-child-birthday { font-weight: 700; color: #e0484d; }
.today-child-birthday .fa { color: #e0484d; }

@media (prefers-reduced-motion: reduce) {
    .today-card { animation: none; }
    a.today-chip:hover, a.today-chip:focus-visible { transform: none; }
}

/* Chat (messaging conversation) — same look as the legacy chat modal:
 * fixed-height scrollable grey panel, pink bubbles from the tutor floated
 * left, green bubbles from staff floated right. */
.chat-thread {
    max-height: 450px;
    overflow-y: auto;
    background: #EEE;
    border-radius: 10px;
    border: 1px solid #CCC;
}
.chat-bubble {
    display: inline-block;
    max-width: 95%;
    border-radius: 5px;
    border: 1px solid #999;
    padding: 6px 10px;
    margin-bottom: 8px;
    clear: both;
}
.chat-bubble.chat1 { background: #FCE6E6; float: left; text-align: left; }
.chat-bubble.chat2 { background: #D6F5D3; float: right; text-align: right; }

/* Legacy's .student-thumbnail (style.css): a coral-ringed circle for the
 * student photo/placeholder wherever it appears (list rows, detail page).
 * The no-photo baby icon additionally gets 5px of inset padding (legacy's
 * .padding5) so the icon doesn't touch the ring. */
.student-thumbnail {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: 2px solid var(--brand-coral);
    border-radius: 50%;
    object-fit: cover;
}
.student-thumbnail-placeholder {
    padding: 5px;
}
.chat-bubble .chat-meta { display: block; font-size: .8em; color: #555; }
/* Placeholder for a file/voice message still uploading (conversation.html). */
.chat-bubble-pending { min-width: 14rem; text-align: left; opacity: .95; }
.chat-bubble-pending .pending-label { font-weight: 600; }
.chat-bubble-pending .pending-progress { height: 6px; margin: 8px 0 4px; border-radius: 999px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.chat-bubble-pending .pending-progress > div { height: 100%; width: 0; background: var(--brand-success); transition: width .2s linear; }
.chat-bubble-pending.waiting .pending-progress > div { animation: upload-progress-pulse 1s ease-in-out infinite; }
.chat-bubble-pending.chat-bubble-failed { background: #F8D7DA; color: #842029; }

/* Messages room list (templates/messaging/room_list.html). Deliberately
 * NOT a page-local {% block extra_head %} <style> block: htmx's hx-boost
 * head-merging doesn't reliably add a bare inline <style> tag when
 * boosting in from a page that never had one (e.g. the conversation page)
 * — the swapped HTML arrives correct, but this rule silently never takes
 * effect, so every row looks read/white until a hard reload re-parses
 * the whole <head> from scratch. Global theme.css is present in every
 * page's <head> already, so this cannot go missing after a boosted nav. */
.room-row.unread { font-weight: bold; }
.room-row.unread > td { --bs-table-bg: #F9E7E6; background-color: #F9E7E6; }
.room-table tbody tr:hover > td { --bs-table-bg: #DCF0FF; background-color: #DCF0FF; }
.room-table td { vertical-align: middle; }

/* Employee weekly schedule (templates/attendance/schedule_list.html) —
 * moved out of a page-local <style> block for the same htmx boost
 * head-merging reason as the room list rules above. */
.schedule-day .schedule-label { width: 12rem; flex: 0 0 auto; }
.schedule-ticks { position: relative; height: 1rem; }
.schedule-tick { position: absolute; top: 0; border-left: 1px solid var(--bs-border-color); padding-left: .25rem; font-size: .7rem; }
.schedule-row { position: relative; height: .9rem; background-color: var(--bs-tertiary-bg); border-radius: .2rem; }
.schedule-bar {
    position: absolute;
    top: .15rem;
    height: .6rem;
    border-radius: .35rem;
    cursor: pointer;
    min-width: 3px;
}

/* Holidays list row expander (templates/attendance/event_list.html). */
.collapse-chevron .fa-chevron-right { transition: transform .15s ease; }
.collapse-chevron[aria-expanded="true"] .fa-chevron-right { transform: rotate(90deg); }

/* Calendar (templates/content/event_list.html) — same reason. */
.calendar-day { min-height: 4.5rem; cursor: pointer; }
.calendar-day.other-month { opacity: .35; }
.calendar-day.has-events { background-color: #ff7171; }
/* Student birthdays (staff only — EventListView never sends them to a
 * parent): a little cake chip per student inside the day cell. */
.calendar-birthdays { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.calendar-birthday {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ffc9c9;
    color: #d6336c;
    font-size: .7rem;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-birthday > span { overflow: hidden; text-overflow: ellipsis; }
.calendar-day-birthdays { display: flex; flex-wrap: wrap; gap: 6px; }
/* Today: a little sun that gently sways in the corner, plus the day number
 * in a sunny yellow circle — readable on top of the coral "has events"
 * background too. */
.calendar-day { position: relative; }
.calendar-day.today {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, .25);
}
.calendar-today-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #ffc107;
    color: #5c4400;
    font-weight: 700;
}
.calendar-today-sun {
    position: absolute;
    top: .15rem;
    right: .3rem;
    color: #ff9800;
    font-size: 1.1rem;
    animation: calendar-sun-sway 3s ease-in-out infinite;
    transform-origin: center;
}
@keyframes calendar-sun-sway {
    0%, 100% { transform: rotate(-15deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .calendar-today-sun { animation: none; }
}

/* Daily report meal rating (templates/reports/_rating_widget.html) — a
 * legacy-style 4-icon "traffic light" toggle instead of a <select>. */
.rating-widget { display: flex; gap: .35rem; }
.rating-btn {
    border: 1px solid var(--bs-border-color);
    background: #fff;
    border-radius: .35rem;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rating-btn:hover { border-color: var(--brand-coral); color: var(--brand-coral); }
.rating-btn.rating-none.active { background: var(--brand-danger); border-color: var(--brand-danger); color: #fff; }
.rating-btn.rating-little.active { background: var(--brand-warning); border-color: var(--brand-warning); color: #fff; }
.rating-btn.rating-most.active { background: #8bc34a; border-color: #8bc34a; color: #fff; }
.rating-btn.rating-all.active { background: var(--brand-success); border-color: var(--brand-success); color: #fff; }

/* Daily report bulk grid (templates/reports/report_bulk.html) — "Peed"/
 * "Pooped" need to stay as narrow as possible so the whole row fits
 * horizontally; the native number spinner arrows just add width. */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Daily report bulk grid, continued — a row's height ends up set by
 * whichever cell has the most content (e.g. a 3rd nap expanded in the
 * Sleep column); every other cell in that row should stretch its own
 * textarea to fill the extra height instead of leaving dead white space
 * under a short, fixed-size box (legacy fills the row for every cell).
 *
 * `display:flex` directly on a <td> was tried here first and made the
 * grid unusable — a flex <td> stops taking part in the table's own
 * column/row layout, so cells no longer lined up into columns at all.
 * `height:1px` is the standard, table-safe way to do this instead: a
 * table cell's rendered height is always at least its content's height
 * regardless of this (browsers never actually shrink it to 1px), but it
 * gives percentage heights on children something definite to resolve
 * against — the row's real height — which 'auto' never does. Flex is
 * only ever applied to the plain <div> inside, never to the <td> itself. */
.report-bulk-table tbody td.report-cell-stretch {
    height: 1px;
}
.report-bulk-table tbody td.report-cell-stretch > .report-cell-fill {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.report-bulk-table tbody td.report-cell-stretch > .report-cell-fill > .report-cell-textarea,
.report-bulk-table tbody td.report-cell-stretch > .report-cell-fill > textarea {
    flex: 1 1 auto;
    min-height: 0;
}
.report-bulk-table textarea {
    padding: 2px !important;
}

.report-bulk-table input {
    padding: 2px !important;
    text-align: center;
    max-width: 30px;
}

.report-bulk-table tbody td.report-cell-stretch textarea {
    height: 100%;
    width: 100%;
    resize: none;
    box-sizing: border-box;
}

/* First column (student name) stays put on horizontal scroll and is only
 * as wide as a name needs — legacy's own grid does both.
 *
 * Bootstrap's table borders are collapsed (border-collapse: collapse), so
 * the line between the sticky column and its neighbor is one shared edge
 * both cells "own" jointly. Browsers can fail to keep repainting that
 * shared edge correctly while the sticky column is composited separately
 * from the rest during a horizontal scroll, so it visibly drops out.
 * (border-collapse: separate would "fix" this but silently breaks every
 * horizontal row line in the table instead — Bootstrap draws those on
 * <tr>, and row borders simply aren't rendered at all in the separate
 * border model, only cell/table borders are.) A ::after line drawn as
 * part of the sticky cell's own box, instead of relying on the table's
 * border system at all, is unaffected by that repaint bug since it's
 * always composited together with the cell it's attached to. */
.report-bulk-table th:first-child,
.report-bulk-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 6rem;
    max-width: 9rem;
    overflow-wrap: break-word;
    background-color: var(--bs-table-bg, #fff);
}
.report-bulk-table th:first-child::after,
.report-bulk-table td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--bs-border-color, #dee2e6);
}
.report-bulk-table thead th:first-child {
    z-index: 3;
}

/* Report preview (the saved-report modal in report_list.html AND the bulk
 * grid's own live, unsaved-changes preview) — section cards are colored
 * per category (bathroom/sleep/meal/comment/needs, see CATEGORY_META in
 * apps/reports/formatting.py), and each rating badge is paired with the
 * same traffic-light icon/color as the entry widget itself
 * (_rating_widget.html/.rating-btn), so a filled-in report reads the same
 * way it was filled in. */
.rating-icon-none { color: var(--brand-danger); }
.rating-icon-little { color: var(--brand-warning); }
.rating-icon-most { color: #8bc34a; }
.rating-icon-all { color: var(--brand-success); }

/* Menu calendar (templates/catering/menu_calendar.html) — month grid from
 * md up, every day's menu readable in its own cell (clamped; click for the
 * full text), and a day-by-day list on phones. Today reuses the Calendar's
 * sun + yellow circle (.calendar-today-*). */
.menu-cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.menu-cal-day { position: relative; min-height: 7rem; background: var(--bs-body-bg); overflow: hidden; }
.menu-cal-day.other-month { opacity: .35; }
.menu-cal-day.has-menu { cursor: pointer; background: #fff8f0; }
.menu-cal-day.has-menu:hover, .menu-cal-day.has-menu:focus { border-color: var(--brand-coral) !important; outline: none; }
.menu-cal-day.today, .menu-cal-row.today {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, .25);
}
.menu-cal-text {
    font-size: .75rem;
    line-height: 1.25;
    white-space: pre-line;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .15rem;
}
.menu-cal-row-date { min-width: 3rem; }

/* Yes/No and small choice radios (templates/widgets/yes_no_select.html,
 * YesNoSelect/InlineRadioSelect) — a pill segmented control. The radios are
 * Bootstrap .btn-check (visually hidden, still focusable/submittable); the
 * labels are the segments. */
.segmented-control {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    background: #f1f3f5;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    vertical-align: middle;
}
.segmented-option {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .3rem .95rem;
    border-radius: 999px;
    font-size: .9rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.segmented-option .fa { font-size: .8rem; opacity: .6; }
.segmented-option:hover { color: var(--bs-body-color); background: rgba(0, 0, 0, .05); }
.btn-check:checked + .segmented-option {
    background: var(--brand-coral);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.segmented-option .segmented-icon-yes { color: var(--brand-success); opacity: 1; }
.segmented-option .segmented-icon-no { color: var(--brand-danger); opacity: 1; }
.btn-check:checked + .segmented-option .fa { opacity: 1; color: #fff; }
.btn-check:focus-visible + .segmented-option {
    outline: 2px solid var(--brand-coral);
    outline-offset: 2px;
}
.btn-check:disabled + .segmented-option { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
    .segmented-option { transition: none; }
}

/* Tidy up students (templates/people/student_cleanup.html): the action bar
 * sticks to the bottom while scrolling long lists — above the fixed footer
 * on wide screens, and with room on the right for the help "?" button. */
.tidy-actionbar { position: sticky; bottom: 0; z-index: 5; }
.tidy-actionbar .card-body { padding-right: 5.5rem; }
@media (min-width: 1000px) {
    .tidy-actionbar { bottom: 30px; }
}

/* Space cleanup (templates/centres/cleanup.html) — round tinted icon per
 * card; the colour comes from Bootstrap's *-subtle utilities on the span. */
.cleanup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
}
.cleanup-kind-card { transition: box-shadow .15s ease; }
.cleanup-kind-card:hover { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08) !important; }

/* Photo album form (templates/media/album_form.html) — drop zone in the
 * same dashed-coral style as the student photo picker, square thumbnail
 * grid, and a round white-ringed × pinned to each tile's top-right corner. */
.album-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 9rem;
    padding: 1rem;
    border: 2px dashed var(--brand-coral);
    border-radius: 15px;
    color: var(--brand-coral);
    background: #fff8f7;
    cursor: pointer;
    transition: background-color .15s ease, border-style .15s ease;
}
.album-dropzone:hover, .album-dropzone:focus-visible, .album-dropzone.is-dragging {
    background: #ffecec;
    border-style: solid;
    outline: none;
}
.album-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: .5rem;
}
.album-photo-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: .5rem;
    overflow: hidden;
    background: #f1f3f5;
}
.album-photo-tile.is-new { outline: 2px solid var(--brand-coral); outline-offset: -2px; }
.album-photo-tile img, .album-photo-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.album-photo-remove {
    position: absolute;
    top: .3rem;
    right: .3rem;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--brand-danger);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    cursor: pointer;
}
.album-photo-remove:hover { filter: brightness(1.1); transform: scale(1.08); }
.album-photo-badge {
    position: absolute;
    left: .3rem;
    bottom: .3rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--brand-coral);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
}

/* Video thumbnails (media/_video_thumb_overlay.html) — tell a video apart
 * from a photo at a glance: centered play badge, duration pill, and a soft
 * bottom gradient so the pill reads on any frame. */
.video-thumb { position: relative; display: block; overflow: hidden; }
.video-thumb::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
    pointer-events: none;
}
.video-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 2.75rem;
    height: 2.75rem;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    pointer-events: none;
    transition: transform .15s ease, background-color .15s ease;
}
.video-thumb-play .fa { margin-left: .2rem; } /* optically centre the triangle */
.lightbox-trigger:hover .video-thumb-play,
.lightbox-trigger:focus-visible .video-thumb-play {
    transform: translate(-50%, -50%) scale(1.12);
    background: var(--brand-coral);
}
.video-thumb-duration {
    position: absolute;
    right: .35rem;
    bottom: .35rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
}
.album-photo-tile .video-thumb-play { width: 2.25rem; height: 2.25rem; font-size: .85rem; }
.album-photo-tile .album-photo-remove { z-index: 2; }
.album-photo-tile .album-photo-badge { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
    .video-thumb-play { transition: none; }
}

/* Documents: a notice board — soft cork-toned board, pinned notes with a
 * coloured top edge (cycled a–d), a pushpin, 3-line text excerpt and file
 * chips. The whole note opens the document (stretched-link); the chips sit
 * above that link so they open the file itself. */
.notice-board {
    --notice-board-bg: #f6efe4;
    --notice-board-dots: rgba(160, 120, 70, .12);
    background-color: var(--notice-board-bg);
    background-image: radial-gradient(var(--notice-board-dots) 1.2px, transparent 1.2px);
    background-size: 14px 14px;
    border-radius: 16px;
    padding: 28px 20px 24px;
    margin-bottom: 1.5rem;
}
@media (max-width: 575.98px) { .notice-board { padding: 22px 12px 16px; border-radius: 12px; } }
.notice-board-empty { text-align: center; color: #9b8b74; padding: 48px 0; }

.notice-note {
    --notice-accent: var(--brand-primary);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    border-top: 5px solid var(--notice-accent);
    padding: 18px 18px 14px;
    box-shadow: 0 2px 6px rgba(60, 40, 10, .08), 0 8px 20px rgba(60, 40, 10, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.notice-note:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(60, 40, 10, .12), 0 14px 30px rgba(60, 40, 10, .1); }
.notice-note:focus-within { outline: 2px solid var(--notice-accent); outline-offset: 2px; }
.notice-note-a { --notice-accent: var(--brand-coral); }
.notice-note-b { --notice-accent: var(--brand-primary); }
.notice-note-c { --notice-accent: var(--brand-success); }
.notice-note-d { --notice-accent: var(--brand-warning); }

.notice-pin {
    position: absolute;
    top: -13px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0 2px, var(--notice-accent) 3px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
}
.notice-note-date { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: #8a8f98; margin-bottom: 6px; }
.notice-note-title { margin-bottom: 6px; line-height: 1.3; }
main .notice-note-title { font-size: 1.05rem !important; } /* beats the global `main h3` rule */
.notice-note-title a { color: #2b2f36; text-decoration: none; }
.notice-note-title a:hover { color: var(--notice-accent); }
.notice-note-title a:focus { outline: none; }
.notice-note-text {
    font-size: .9rem;
    color: #5b616b;
    margin-bottom: 10px;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notice-note-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.notice-chip {
    position: relative;
    z-index: 2; /* above the stretched-link */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: .78rem;
    color: #3d4350;
    text-decoration: none;
}
a.notice-chip:hover { background: #e7e9ed; color: #1f2329; }
.notice-chip-more { color: #8a8f98; }

/* Document detail — the list's modal and the full page share these. */
.notice-detail-text { white-space: pre-wrap; color: #3d4350; line-height: 1.6; }
.notice-detail-section-label {
    display: flex; align-items: center; gap: 6px;
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: #8a8f98; margin: 20px 0 10px;
}
.notice-detail-text + .notice-detail-section-label { border-top: 1px solid #eee; padding-top: 16px; }
.notice-detail-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 10px; }
.notice-detail-images img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; transition: opacity .15s; }
.notice-detail-images a:hover img { opacity: .85; }
.notice-file {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px solid #eceef1; border-radius: 10px;
    color: #2b2f36; text-decoration: none; transition: background .15s, border-color .15s;
}
.notice-file:hover { background: #f7f8fa; border-color: #dfe2e7; color: #2b2f36; }
.notice-file-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px; background: #f3f4f6; font-size: 1.2rem;
}
.notice-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-file-size { flex: none; font-size: .8rem; color: #8a8f98; }
.notice-file-open { flex: none; color: #b0b5bd; }
.notice-file:hover .notice-file-open { color: var(--brand-primary); }

/* Families' photo albums (media/family_album_list.html): equal-size cards — icon tile (colour cycled a–d), a title always given
 * two lines of room, then date and photo/video counts. */
.family-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.family-album-card {
    --fa: var(--brand-primary);
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    color: #2b2f36;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(20, 40, 70, .08), 0 8px 20px rgba(20, 40, 70, .05);
    transition: transform .15s ease, box-shadow .15s ease;
}
.family-album-card:hover { transform: translateY(-2px); color: #2b2f36; box-shadow: 0 6px 14px rgba(20, 40, 70, .12), 0 14px 30px rgba(20, 40, 70, .08); }
.family-album-a { --fa: var(--brand-coral); }
.family-album-b { --fa: var(--brand-primary); }
.family-album-c { --fa: var(--brand-success); }
.family-album-d { --fa: var(--brand-warning); }
.family-album-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.4rem;
    color: var(--fa);
    background: color-mix(in srgb, var(--fa) 14%, #fff);
    transition: background-color .15s ease, color .15s ease;
}
.family-album-card:hover .family-album-icon { background: var(--fa); color: #fff; }
.family-album-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.family-album-title {
    font-weight: 600;
    line-height: 1.3;
    min-height: 2.6em; /* two lines, filled or not: every card the same height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.family-album-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .8rem; color: #8a8f98; }
.family-album-meta i { margin-right: 2px; }
.family-album-go { flex: none; color: #c3c8cf; transition: color .15s ease, transform .15s ease; }
.family-album-card:hover .family-album-go { color: var(--fa); transform: translateX(2px); }

/* Album page (media/_album_detail_content.html): header card, children chips,
 * photo grid. */
.album-hero {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 18px 20px;
    background: #fff;
    border-radius: 16px;
    border-top: 5px solid var(--brand-coral);
    box-shadow: 0 2px 6px rgba(20, 40, 70, .08), 0 10px 26px rgba(20, 40, 70, .07);
}
.album-hero.is-trashed { border-top-color: #adb5bd; }
.album-hero-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.album-hero-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #fff0f0;
    color: var(--brand-coral);
    font-size: 1.6rem;
}
.album-hero.is-trashed .album-hero-icon { background: #f1f3f5; color: #868e96; }
.album-hero-main { flex: 1; min-width: 220px; }
main h1.album-hero-title { margin: 0 0 6px; font-size: 1.75em !important; line-height: 1.15; overflow-wrap: anywhere; }
.album-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.album-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #f3f6fa;
    color: #56606d;
    font-size: .85rem;
}
.album-hero-meta .fa { color: var(--brand-primary); }
.album-hero-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.album-hero-actions form { margin: 0; }
.album-hero-text {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-left: 4px solid var(--brand-warning);
    border-radius: 0 10px 10px 0;
    background: #fffbe6;
    font-size: 1.02rem;
}
.album-hero-bottom { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #dee2e6; }
.album-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.album-share-label { font-weight: 600; }
.album-share-label .fa { color: var(--brand-coral); margin-right: 4px; }
.album-share-note { font-size: .85rem; color: #6c757d; }
.album-trash-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: #6c757d; }
.album-trash-note form { margin: 0; }

.album-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; color: var(--brand-primary); }
.album-count { padding: 0 9px; border-radius: 999px; background: #eaf2fb; font-size: .8rem; line-height: 1.6; }
.album-student-chip { background: #f3f6fa; border-color: #e1e8f0; }
a.album-student-chip:hover, a.album-student-chip:focus-visible { box-shadow: 0 4px 10px rgba(51, 122, 183, .2); }

.album-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.album-gallery-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 14px;
    background: #f1f3f5;
    box-shadow: 0 1px 4px rgba(20, 40, 70, .12);
    cursor: zoom-in;
    transition: box-shadow .2s ease, transform .2s ease;
}
.album-gallery-item img, .album-gallery-item video, .album-gallery-item .video-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.album-gallery-item img { transition: transform .35s ease; }
.album-gallery-item:hover, .album-gallery-item:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20, 40, 70, .22); outline: none; }
.album-gallery-item:focus-visible { box-shadow: 0 0 0 3px var(--brand-coral); }
.album-gallery-item:hover img { transform: scale(1.06); }
.album-gallery-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 30, 45, .35);
    color: #fff;
    font-size: 1.6rem;
    opacity: 0;
    transition: opacity .2s ease;
}
.album-gallery-item:hover .album-gallery-zoom, .album-gallery-item:focus-visible .album-gallery-zoom { opacity: 1; }
.album-empty { padding: 36px 16px; text-align: center; color: #868e96; border: 2px dashed #dee2e6; border-radius: 16px; }
.album-empty > .fa { font-size: 2.4rem; color: #ced4da; margin-bottom: 8px; }
@media (max-width: 575.98px) {
    .album-hero { padding: 14px; }
    .album-hero-icon { width: 44px; height: 44px; font-size: 1.25rem; border-radius: 12px; }
    .album-hero-actions { margin-left: 0; width: 100%; }
    .album-gallery { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .album-gallery-item { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .album-gallery-item, .album-gallery-item img { transition: none; }
    .album-gallery-item:hover img { transform: none; }
}

/* Families' daily reports: child tabs (reports/family_reports.html). */
.family-child-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.family-child-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 4px;
    border-radius: 999px;
    border: 1px solid #dfe3e8;
    background: #fff;
    color: #2b2f36;
    text-decoration: none;
    font-weight: 600;
}
.family-child-tab:hover { border-color: var(--brand-primary); color: #2b2f36; }
.family-child-tab.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.family-child-tab img, .family-child-initial { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.family-child-initial { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .85rem; }

/* Families' daily reports: week date strip, child/day header, section grid. */
.report-datebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(20, 40, 70, .08), 0 8px 20px rgba(20, 40, 70, .05);
}
.report-datebar-arrow, .report-datebar-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: #f1f4f8;
    color: #4a5260;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.report-datebar-arrow:hover, .report-datebar-btn:hover { background: var(--brand-primary); color: #fff; }
.report-week { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.report-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0 10px;
    border-radius: 12px;
    color: #2b2f36;
    text-decoration: none;
    transition: background-color .15s ease;
}
.report-day:hover { background: #f1f4f8; color: #2b2f36; }
.report-day-name { font-size: .72rem; line-height: 1.5; padding-top: 1px; text-transform: uppercase; letter-spacing: .04em; color: #8a8f98; }
.report-day-number { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.report-day-dot { position: absolute; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.report-day.has-report .report-day-dot { background: var(--brand-coral); }
.report-day.today .report-day-number { color: var(--brand-coral); }
.report-day.selected { background: var(--brand-primary); color: #fff; box-shadow: 0 4px 10px rgba(51, 122, 183, .35); }
.report-day.selected .report-day-name, .report-day.selected .report-day-number { color: #fff; }
.report-day.selected.has-report .report-day-dot { background: #fff; }
.report-datebar-tools { display: flex; gap: 6px; }
.report-datebar-tools form { position: relative; }
.report-datebar-picker { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; }
@media (max-width: 575.98px) {
    .report-datebar { flex-wrap: wrap; }
    .report-week { order: -1; flex-basis: 100%; }
    .report-datebar-arrow { flex: 1; }
    .report-day-number { font-size: 1rem; }
}

.report-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(120deg, #eaf2fb, #fdf0f0);
}
.report-hero-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.report-hero-initial { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; font-weight: 700; }
.report-hero-name { font-size: 1.2rem; font-weight: 700; color: #2b2f36; line-height: 1.2; }
.report-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .88rem; color: #5b616b; }
.report-hero-meta i { color: #8a8f98; margin-right: 3px; }
.report-hero-badge { margin-left: auto; flex: none; padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--brand-success); font-size: .8rem; font-weight: 700; }
@media (max-width: 575.98px) { .report-hero-badge { display: none; } }

.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.report-card-wide { grid-column: 1 / -1; }
.report-card {
    --rc: var(--bs-secondary); --rc-bg: var(--bs-secondary-bg-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    border-left: 5px solid var(--rc);
    box-shadow: 0 2px 6px rgba(20, 40, 70, .07), 0 8px 20px rgba(20, 40, 70, .05);
}
.report-card-primary { --rc: var(--bs-primary); --rc-bg: var(--bs-primary-bg-subtle); }
.report-card-success { --rc: var(--bs-success); --rc-bg: var(--bs-success-bg-subtle); }
.report-card-warning { --rc: var(--bs-warning); --rc-bg: var(--bs-warning-bg-subtle); }
.report-card-danger { --rc: var(--bs-danger); --rc-bg: var(--bs-danger-bg-subtle); }
.report-card-info { --rc: var(--bs-info); --rc-bg: var(--bs-info-bg-subtle); }
.report-card-head { display: flex; align-items: center; gap: 10px; }
.report-card-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--rc-bg); color: var(--rc); }
main .report-card-title { margin: 0; font-size: .85rem !important; letter-spacing: .04em; text-transform: uppercase; color: #4a5260 !important; }
.report-card-rating { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #f4f6f9; font-weight: 600; }
.report-card-text { margin: 0; white-space: pre-wrap; color: #3d4350; line-height: 1.5; }

.report-empty { text-align: center; padding: 48px 16px; border-radius: 16px; background: #fff; color: #8a8f98; box-shadow: 0 2px 6px rgba(20, 40, 70, .06); }
.report-empty > i { font-size: 2.2rem; margin-bottom: 8px; }
.report-empty-title { font-weight: 600; color: #5b616b; }

/* =================== Modal / form building blocks ===================
 * Used by the app-wide modal's views (nurserymanager/modals.py): header
 * icon tile + subtitle, form labels (templates/_field.html), choice pills
 * (templates/_chip_checks.html), section titles and label/value facts. */
.app-modal-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: var(--brand-coral);
    background: color-mix(in srgb, var(--brand-coral) 14%, #fff);
}
.app-modal-subtitle { font-size: .88rem; color: #8a8f98; margin-top: 2px; }
.app-modal-subtitle:empty { display: none; }
.app-modal-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.app-modal-avatar-initial { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; font-weight: 700; }
.form-section-title { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a8f98; margin: 14px 0 -6px; padding-top: 10px; border-top: 1px solid #eef0f3; }
.modal .form-label, .modal-page .form-label { display: block; font-weight: 600; font-size: .9rem; color: #3d4350; }
.modal .form-label .required, .modal-page .form-label .required { color: var(--brand-coral); }

/* Checkbox choices as toggleable pills (staff of a class, classes of a staff member…). */
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; margin: 0; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #d6dbe2;
    background: #fff;
    color: #3d4350;
    font-size: .88rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    user-select: none;
}
.chip-check span::before { content: '\f067'; font-family: FontAwesome; font-size: .75em; color: #aab1bb; }
.chip-check:hover span { border-color: var(--brand-primary); }
.chip-check input:checked + span { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.chip-check input:checked + span::before { content: '\f00c'; color: #fff; }
.chip-check input:focus-visible + span { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* Label/value facts on detail pages. */
.detail-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.detail-fact { padding: 12px 14px; border-radius: 12px; background: #f6f8fb; }
.detail-fact-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a8f98; }
.detail-fact-value { font-weight: 600; color: #2b2f36; margin-top: 2px; }
/* Student/person tiles (class roster). */
.person-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.person-tile { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; border: 1px solid #eceef1; color: #2b2f36; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.person-tile:hover { background: #f7f8fa; border-color: #dfe2e7; color: #2b2f36; }
.person-tile img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.person-tile-placeholder { border: 2px solid var(--brand-coral); padding: 2px; }
.person-tile-name { font-weight: 600; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-w-0 { min-width: 0; }
/* A calendar-leaf date badge (event detail header). */
.event-date-leaf { flex: none; display: inline-flex; flex-direction: column; align-items: center; width: 54px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(20, 40, 70, .15); }
.event-date-leaf-month { width: 100%; text-align: center; background: var(--brand-coral); color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 0; }
.event-date-leaf-day { font-size: 1.4rem; font-weight: 700; color: #2b2f36; line-height: 1.4; }

/* A modal-sized view opened directly as a page (templates/modal_page.html). */
/* Bootstrap sets the modal's paddings/widths as variables on `.modal`,
 * which a page has no element for — declare the same ones here. */
.modal-page {
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 1rem;
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-radius: 14px;
    --bs-modal-inner-border-radius: 13px;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: 1px;
    --bs-modal-footer-gap: .5rem;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: 1px;
    --bs-modal-title-line-height: 1.5;
}
.modal-page .modal-dialog { margin: 1rem auto; pointer-events: auto; }
.modal-page .modal-content { box-shadow: 0 2px 6px rgba(20, 40, 70, .08), 0 10px 26px rgba(20, 40, 70, .06); border: 0; border-radius: 14px; }
#appModal .modal-content { border: 0; border-radius: 14px; }
/* App-wide modal header: icon tile + title + subtitle. */

.modal-header.app-modal-header { gap: 12px; background: #fbfcfe; }
main .app-modal-title, .app-modal-title { margin: 0; font-size: 1.15rem !important; font-weight: 600; color: #2b2f36 !important; line-height: 1.25; font-family: 'Century Gothic', sans-serif !important; }
.app-modal-footer { background: #fbfcfe; }

/* Menu month editor (catering/menu_month.html): the month as an editable
 * calendar — weekday columns wide, weekends narrow and greyed; on phones
 * a single column of the month's days. */
.menu-edit-monthbar { display: flex; align-items: center; justify-content: center; gap: 16px; }
.menu-edit-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.menu-edit-head { display: none; }
.menu-edit-day {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #e3e7ec;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.menu-edit-day:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(51, 122, 183, .15); }
.menu-edit-day.filled { background: #fffaf3; border-color: #f3dcc0; }
.menu-edit-day.weekend { background: #f6f7f9; }
.menu-edit-day.today { border-color: var(--brand-coral); }
.menu-edit-day.today .menu-edit-day-number { color: var(--brand-coral); }
.menu-edit-day.other-month { display: none; }
.menu-edit-day-number { font-weight: 700; font-size: .95rem; color: #2b2f36; }
.menu-edit-day-name { text-transform: capitalize; font-weight: 600; color: #5b616b; }
.menu-edit-day textarea {
    width: 100%;
    flex: none;
    min-height: 5.5rem;
    overflow: hidden; /* grows to fit its text instead (menu_month.html) */
    border: 0;
    padding: 0;
    background: transparent;
    resize: vertical;
    font-size: .88rem;
    line-height: 1.4;
    color: #3d4350;
    outline: none;
}
.menu-edit-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 0;
    background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0));
}
/* From 1000px the page footer is fixed to the bottom: sit just above it. */
@media (min-width: 1000px) { .menu-edit-savebar { bottom: 28px; } }
@media (min-width: 768px) {
    /* Weekday columns get the room; weekend ones stay narrow. */
    .menu-edit-grid { grid-template-columns: var(--menu-edit-cols, repeat(7, minmax(0, 1fr))); gap: 6px; }
    .menu-edit-head { display: block; text-align: center; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a8f98; }
    .menu-edit-day-name { display: none; }
    .menu-edit-day.other-month { display: flex; opacity: .35; background: transparent; border-style: dashed; }
    .menu-edit-day { min-height: 9rem; }
}

/* Language pickers (widgets/language_select.html) */
.language-flag { width: 24px; height: 18px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex-shrink: 0; }
.language-select .dropdown-item.active { background: var(--bs-primary); color: #fff; }

/* =================== "First steps" tutorial (templates/onboarding/) =================== */
.onboarding-fab {
    position: fixed; right: 18px; bottom: 106px; z-index: 1040;
    width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; cursor: pointer;
    filter: drop-shadow(0 6px 14px rgba(20, 40, 80, .28));
    transition: transform .2s ease;
}
.onboarding-fab:hover, .onboarding-fab:focus-visible { transform: scale(1.07); }
.onboarding-fab-ring {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: conic-gradient(var(--brand-coral) calc(var(--p) * 1%), #dfe7f1 0);
}
.onboarding-fab-inner {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(145deg, #3f8bcc, var(--brand-primary)); color: #FFE926; font-size: 1.55rem;
    animation: onboarding-wiggle 6s ease-in-out infinite;
}
.onboarding-fab-count {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    background: #fff; color: var(--brand-primary); border-radius: 999px; padding: 0 7px;
    font-size: .72rem; font-weight: 700; line-height: 1.5; box-shadow: 0 1px 4px rgba(0,0,0,.18); white-space: nowrap;
}
@keyframes onboarding-wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-14deg); } 94% { transform: rotate(12deg); } 97% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .onboarding-fab-inner { animation: none; } }

.onboarding-panel { width: min(440px, 100vw) !important; }
.onboarding-panel-header { background: linear-gradient(135deg, var(--brand-primary), #2a6599); color: #fff; }
.onboarding-panel-trophy {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.16); color: #FFE926; font-size: 1.4rem;
}
.onboarding-panel-footer { border-top: 1px solid #e9eef4; padding: 6px 12px; text-align: center; }
.onboarding-summary { padding: 18px 20px 14px; background: #f6f9fc; border-bottom: 1px solid #e9eef4; }
.onboarding-progress-bar { background: linear-gradient(90deg, var(--brand-coral), #ffb36b); transition: width .6s ease; }
.onboarding-phase { padding: 14px 20px 4px; }
.onboarding-phase-title { font-weight: 700; color: #4a5463; text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.onboarding-phase-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; background: var(--brand-primary); color: #fff; font-size: .78rem;
}
.onboarding-steps { list-style: none; padding: 0; margin: 0 0 8px; }
.onboarding-step { border: 1px solid #e6ebf1; border-radius: 12px; margin-bottom: 8px; background: #fff; transition: box-shadow .2s, border-color .2s; }
.onboarding-step.is-next { border-color: var(--brand-coral); box-shadow: 0 0 0 3px rgba(255, 113, 113, .15); }
.onboarding-step-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 0; text-align: left; color: inherit; }
.onboarding-step-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 50%; background: #eaf2fa; color: var(--brand-primary);
}
.onboarding-step.is-next .onboarding-step-icon { background: var(--brand-coral); color: #fff; }
.onboarding-step.is-done .onboarding-step-icon { background: var(--brand-success); color: #fff; }
.onboarding-step.is-skipped .onboarding-step-icon { background: #e9ecef; color: #8a929c; }
.onboarding-step-title { flex-grow: 1; font-weight: 600; min-width: 0; }
.onboarding-step.is-done .onboarding-step-title, .onboarding-step.is-skipped .onboarding-step-title { color: #8a929c; font-weight: 500; }
.onboarding-step-state { font-size: .75rem; color: #8a929c; white-space: nowrap; }
.onboarding-step.is-done .onboarding-step-state { color: var(--brand-success); font-weight: 700; }
.onboarding-step-caret { color: #aab2bd; transition: transform .2s; }
.onboarding-step-caret.is-open { transform: rotate(180deg); }
.onboarding-step-body { padding: 0 12px 12px 56px; font-size: .9rem; color: #4a5463; }
.onboarding-step-body p { margin-bottom: 10px; }
.onboarding-complete { margin: 8px 20px 20px; padding: 16px; border-radius: 14px; background: #fff8d6; text-align: center; }
.onboarding-complete .fa-trophy { font-size: 2rem; color: #f0b400; display: block; margin-bottom: 4px; }

.onboarding-toast {
    position: fixed; z-index: 1085; top: 118px; left: 50%; transform: translateX(-50%);
    width: min(420px, calc(100vw - 32px)); display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(20, 40, 80, .25);
    border-top: 5px solid var(--brand-coral);
}
@media (max-width: 999.98px) { .onboarding-toast { top: 84px; } }
.onboarding-toast-close { position: absolute; top: 10px; right: 10px; }
.onboarding-toast-medal {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #fff38a, #f0b400); color: #fff; font-size: 1.5rem;
    animation: onboarding-pop .6s cubic-bezier(.2, 1.6, .4, 1);
}
.onboarding-toast-kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-coral); font-weight: 700; }
.onboarding-toast-title { font-weight: 700; padding-right: 20px; }
.onboarding-toast-title .fa-check { color: var(--brand-success); }
.onboarding-toast-progress { height: 6px; margin-top: 8px; }
.onboarding-toast-progress .progress-bar { background: linear-gradient(90deg, var(--brand-coral), #ffb36b); }
@keyframes onboarding-pop { 0% { transform: scale(.2); } 100% { transform: scale(1); } }

.confetti-box { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: hidden; }
.confetti-box i {
    position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: .95;
    animation-name: confetti-fall; animation-timing-function: cubic-bezier(.25, .6, .4, 1); animation-fill-mode: forwards;
}
@keyframes confetti-fall { to { transform: translate(var(--x), 105vh) rotate(var(--r)); opacity: .7; } }

.tour-spotlight { position: relative; z-index: 5; animation: tour-pulse 1.4s ease-out infinite; }
@keyframes tour-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 113, 113, .75); } 100% { box-shadow: 0 0 0 16px rgba(255, 113, 113, 0); } }
.tour-hint {
    position: fixed; z-index: 1070; width: max-content; max-width: min(340px, calc(100vw - 24px));
    background: #24303f; color: #fff; padding: 10px 12px 10px 14px; border-radius: 12px; font-size: .9rem;
    display: flex; align-items: center; gap: 6px; box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.tour-hint::before { content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #24303f; }
.tour-hint.tour-hint-above::before { top: auto; bottom: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #24303f; }

.onboarding-welcome-phase { border: 1px solid #e6ebf1; border-radius: 14px; padding: 14px; background: #fbfcfe; }
.onboarding-welcome-how { display: grid; gap: 8px; background: #f6f9fc; border-radius: 12px; padding: 14px 16px; }
.onboarding-welcome-how > div { display: flex; gap: 8px; align-items: baseline; }
.onboarding-finished-trophy {
    width: 110px; height: 110px; margin: 6px auto 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #fff38a, #f0b400); color: #fff; font-size: 3.4rem;
    box-shadow: 0 10px 30px rgba(240, 180, 0, .45); animation: onboarding-pop .7s cubic-bezier(.2, 1.6, .4, 1);
}

/* Sign-up confirmation (registration/confirm_registration.html) */
.registration-summary { display: grid; gap: 6px; background: #f6f9fc; border-radius: 12px; padding: 14px 16px; border-left: 4px solid var(--brand-primary); }
.registration-summary > div { display: flex; justify-content: space-between; gap: 12px; }

/* =================== Page help, the "?" (templates/help/) =================== */
.help-fab {
    position: fixed; right: 26px; bottom: 44px; z-index: 1040;
    width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff;
    background: var(--brand-coral); color: #fff; font-size: 1.35rem; font-weight: 700;
    box-shadow: 0 6px 14px rgba(20, 40, 80, .28); transition: transform .2s ease;
}
.help-fab:hover, .help-fab:focus-visible { transform: scale(1.08); }
/* Phones/tablets: the floating help/tutorial buttons sit over the bottom-right
   corner of the content (they covered the chat's Send button on iPhone), so
   the page gets room below its last element to scroll everything clear. */
@media (max-width: 999px) {
    body:has(.help-fab, .onboarding-fab) .app-content > main { padding-bottom: 130px !important; }
}
.help-panel { width: min(460px, 100vw) !important; }
.help-panel-header { background: linear-gradient(135deg, var(--brand-coral), #f2545b); color: #fff; }
.help-panel-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 1.3rem;
}
.help-panel-body { font-size: .95rem; color: #3d4654; line-height: 1.55; }
.help-panel-footer { border-top: 1px solid #e9eef4; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; align-items: center; }
.help-lead { font-size: 1.02rem; color: #24303f; }
.help-section { margin-top: 18px; }
.help-section h6 { font-weight: 700; color: var(--brand-primary); text-transform: uppercase; font-size: .78rem; letter-spacing: .05em; margin-bottom: 8px; }
.help-section ul { padding-left: 0; list-style: none; margin: 0; }
.help-section li { position: relative; padding-left: 26px; margin-bottom: 7px; }
.help-section li > .fa:first-child { position: absolute; left: 0; top: 4px; width: 18px; text-align: center; color: var(--brand-primary); }
.help-section ol { padding-left: 20px; margin: 0; }
.help-section ol li { padding-left: 4px; }
.help-tip { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #fff8d6; border-left: 4px solid #f0b400; font-size: .9rem; }
.help-tip .fa-lightbulb-o { color: #d99a00; margin-right: 4px; }
.help-kbd { display: inline-block; padding: 0 6px; border: 1px solid #cfd6df; border-bottom-width: 2px; border-radius: 5px; font-size: .8rem; background: #fff; }

/* Logo pickers of the centre settings (templates/centres/_logo_picker.html):
 * the preview sits on the background it will really have. */
.logo-picker-stage {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 130px; padding: 14px; border-radius: 15px; cursor: pointer; overflow: hidden;
    border: 2px solid transparent; transition: border-color .15s, box-shadow .15s;
}
.logo-picker-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-picker-stage.is-dark { background: #337AB7; color: #fff; }
.logo-picker-stage.is-light { background: #fff; border-color: #dfe5ec; color: var(--brand-coral); }
.logo-picker-stage.is-empty { border: 2px dashed var(--brand-coral); }
.logo-picker-stage.is-dark.is-empty { border-color: rgba(255, 255, 255, .7); }
.logo-picker-stage.is-light.is-empty { background: #fff8f7; }
.logo-picker-stage:hover, .logo-picker-stage:focus-visible, .logo-picker-stage.is-dragging { box-shadow: 0 0 0 4px rgba(255, 113, 113, .3); outline: none; }
.logo-picker-empty { text-align: center; }
.logo-picker-overlay {
    position: absolute; inset: auto 0 0 0; padding: 6px; text-align: center; font-size: .85rem;
    background: rgba(0, 0, 0, .45); color: #fff; opacity: 0; transition: opacity .15s;
}
.logo-picker-stage:hover .logo-picker-overlay, .logo-picker-stage:focus-visible .logo-picker-overlay { opacity: 1; }

/* Centre settings: each form is its own card with a clearly named save button. */
.settings-card { border-radius: 16px; border-color: #e3e9f0; box-shadow: 0 2px 10px rgba(20, 40, 80, .05); }
.settings-card-header { background: #f6f9fc; border-radius: 16px 16px 0 0 !important; padding: 14px 18px; }
.settings-card-header h1, .settings-card-header h2 { color: var(--brand-coral); }
.settings-card-footer {
    display: flex; align-items: center; gap: 10px; background: #fff; padding: 12px 18px;
    border-radius: 0 0 16px 16px !important;
}
/* The long centre form keeps its save button in view while scrolling it. */
#centreSettingsForm .settings-card-footer { position: sticky; bottom: 30px; z-index: 3; box-shadow: 0 -4px 12px rgba(20, 40, 80, .06); }
.settings-card-account .settings-card-header h1 { color: var(--brand-primary); }

/* Chat: "earlier messages" at the top of a thread (templates/messaging/_thread_older_sentinel.html). */
.thread-older { text-align: center; margin: 0 0 12px; }
.thread-older-btn { border-radius: 999px; font-size: .85rem; }
.thread-older-btn .thread-older-loading { display: none; }
.thread-older-btn.htmx-request .thread-older-idle { display: none; }
.thread-older-btn.htmx-request .thread-older-loading { display: inline; }

/* Album lightbox (templates/media/_album_detail_content.html): the photo fits
 * the screen but is never stretched past its real size (small photos would
 * look pixelated); clicked, it zooms to real size and can be dragged around. */
#lightboxModal .lightbox-body { overflow: hidden; }
#lightboxModal .lightbox-nav { z-index: 5; opacity: .85; }
.lightbox-slide { position: absolute; inset: 0; padding: 0 76px 16px; align-items: center; justify-content: center; }
.lightbox-slide:not([style*="none"]) { display: flex; }
.lightbox-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lightbox-video { max-width: 100%; max-height: 100%; }
.lightbox-img.is-real-size { cursor: default; }
.lightbox-slide.is-zoomed { display: block !important; overflow: auto; padding: 0; cursor: grab; }
.lightbox-slide.is-zoomed.is-dragging { cursor: grabbing; }
.lightbox-slide.is-zoomed .lightbox-img { height: auto; max-width: none; max-height: none; object-fit: fill; cursor: zoom-out; display: block; }
.lightbox-slide.is-zoomed.is-dragging .lightbox-img { cursor: grabbing; }
@media (max-width: 575.98px) { .lightbox-slide { padding: 0 0 12px; } #lightboxModal .lightbox-nav { opacity: .6; } }

/* App modal (templates/modal_fragment.html) on short screens: Bootstrap's
 * .modal-dialog-scrollable makes .modal-body the scroller and keeps the footer
 * in view — but only when body/footer are direct flex children of
 * .modal-content. Our modal forms wrap them in a <form> (and htmx wrappers can
 * add a div), which broke that: the body never shrank, the footer with Save
 * fell below the screen and nothing could be scrolled. Make those wrappers
 * part of the same flex column. */
.modal-dialog-scrollable .modal-content > form,
.modal-dialog-scrollable .modal-content > div:not(.modal-header):not(.modal-body):not(.modal-footer) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.file-picker { min-height: 6.5rem; }
.file-picker.has-file { border-style: solid; background: #fff; color: var(--brand-primary); border-color: var(--brand-primary); }

/* Plan picker (billing/choose_plan.html) + its billing-details modal. */
.plan-page { max-width: 880px; }
.plan-status { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 1.5rem; padding: 14px 18px; border-radius: 14px; }
.plan-status > .fa { font-size: 1.5rem; margin-top: 2px; }
.plan-status-trial { background: #eaf4fb; color: #1f4f7a; }
.plan-status-trial > .fa { color: var(--brand-primary); }
.plan-status-off { background: #fff1f0; color: #8a2b2b; }
.plan-status-off > .fa { color: var(--brand-coral); }
.plan-days { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--brand-primary); color: #fff; font-size: .78rem; font-weight: 700; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 1.5rem; }
.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    background: #fff;
    border: 2px solid #e3e9f0;
    border-radius: 18px;
    box-shadow: 0 2px 6px rgba(20, 40, 70, .06), 0 10px 26px rgba(20, 40, 70, .06);
}
.plan-card.is-featured { border-color: var(--brand-coral); box-shadow: 0 4px 10px rgba(255, 113, 113, .15), 0 14px 32px rgba(255, 113, 113, .14); }
.plan-ribbon {
    position: absolute;
    top: -13px;
    right: 18px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--brand-coral);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(255, 113, 113, .35);
}
.plan-name { font-family: 'Amatic SC', cursive; font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--brand-primary); }
.plan-card.is-featured .plan-name { color: var(--brand-coral); }
.plan-billing { margin-top: 4px; color: #6c757d; font-size: .9rem; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.plan-amount { font-size: 2.3rem; font-weight: 700; line-height: 1; color: #24303f; }
.plan-period { color: #6c757d; font-size: 1rem; }
.plan-tax { margin: 6px 0 22px; color: #6c757d; font-size: .85rem; }
.plan-includes { padding: 16px 20px; margin-bottom: 1rem; border-radius: 14px; background: #f5f8fb; }
.plan-includes-title { margin-bottom: 10px; font-weight: 700; color: var(--brand-primary); }
.plan-includes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.plan-includes-grid .fa { width: 1.4em; text-align: center; color: var(--brand-success); }
.plan-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; color: #6c757d; font-size: .88rem; }
.plan-trust .fa { margin-right: 4px; color: #8a94a3; }
@media (max-width: 575.98px) { .plan-includes-grid { grid-template-columns: 1fr; } }
.plan-vat-hint { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #eaf2fb; color: #1f4f7a; font-size: .88rem; }
.plan-vat-hint .fa { margin-top: 3px; color: var(--brand-primary); }
.plan-vat-hint.is-free { background: #e9f7ef; color: #1e6b3f; }
.plan-vat-hint.is-free .fa { color: var(--brand-success); }
.plan-secure-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #f5f8fb; color: #56606d; font-size: .88rem; }
.plan-secure-note .fa { margin-top: 3px; color: var(--brand-success); }

/* Virtual assistant panel (templates/help/_assistant.html) */
.main-panel-help { background-color: #00B2B2; }  /* legacy "celeste" */
.assistant-panel { display: flex; flex-direction: column; }
.assistant-header { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); }
.assistant-ai { display: inline-block; background: #ffe066; color: #4d4200; font-size: .65rem; padding: 1px 6px; border-radius: 6px; vertical-align: middle; letter-spacing: .03em; }
.assistant-body { background: #f4f7fb; display: flex; flex-direction: column; gap: 8px; }
.assistant-notice { font-size: .78rem; color: #6b7684; margin: 0 0 4px; }
.assistant-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: .93rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-msg.bot { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(20, 40, 80, .06); }
.assistant-msg.me { background: var(--brand-primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.assistant-typing { display: flex; gap: 4px; }
.assistant-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa5b1; animation: assistant-dot 1s infinite; }
.assistant-typing i:nth-child(2) { animation-delay: .15s; } .assistant-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes assistant-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.assistant-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.assistant-suggest button { background: #fff; border: 1px solid #d5dde7; border-radius: 999px; padding: 6px 12px; font-size: .85rem; color: var(--brand-primary-dark); }
.assistant-suggest button:hover { border-color: var(--brand-primary); }
.assistant-error { color: #b3261e; font-size: .85rem; margin: 0; }
.assistant-support { background: #fff; border: 1px solid #f3c2c2; border-radius: 12px; padding: 10px 12px; font-size: .88rem; }
.assistant-ok { color: #1f6b3a; }
.assistant-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e9eef4; background: #fff; }
.assistant-input textarea { resize: none; max-height: 110px; }
/* Assistant conversations (superusers) */
.assistant-log-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; vertical-align: -1px; }
.assistant-log-thread { background: #f4f7fb; display: flex; flex-direction: column; gap: 8px; }
.assistant-log-time { font-size: .7rem; opacity: .6; text-align: right; margin-top: 2px; }
/* 2026 tiered prices (choose_plan.html) */
.plan-students { color: var(--brand-primary); font-size: .85rem; font-weight: 600; margin-top: 4px; }
.plan-tiers { display: grid; gap: 6px; }
.plan-tier { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed #e3e8ef; padding-bottom: 6px; }
/* Agentes (superusers only) */
.agents-section { margin-top: 26px; }
.agents-h2 { font-size: 1.05rem; font-weight: 700; color: var(--brand-primary); margin-bottom: 12px; }
.agents-tabs .nav-link { padding: 5px 12px; font-size: .9rem; }
.agents-task { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e3e8ef; border-left: 4px solid var(--brand-primary); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.agents-task.is-urgent { border-left-color: var(--brand-danger); }
.agents-task-new { display: flex; gap: 6px; margin-top: 8px; }
.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.agents-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 14px; color: inherit; text-decoration: none; transition: box-shadow .15s; }
.agents-card:hover { box-shadow: 0 6px 18px rgba(20, 40, 80, .12); color: inherit; }
.agents-card.is-off { background: #fafbfc; }
.agents-card.is-off .agents-icon { background: #9aa5b1; }
.agents-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-primary); color: #fff; font-size: 1.05rem; flex-shrink: 0; }
.agents-icon-lg { width: 52px; height: 52px; font-size: 1.4rem; }
.agents-name { font-weight: 700; font-size: 1rem; }
.agents-what { font-size: .85rem; color: #5b6573; flex-grow: 1; }
.agents-when { font-size: .8rem; color: #6b7684; }
.agents-last { font-size: .82rem; display: flex; gap: 6px; align-items: baseline; }
.agents-last-ok .fa { color: var(--brand-success); }
.agents-last-aviso .fa { color: var(--brand-warning); }
.agents-last-error { color: var(--brand-danger); }
.agents-detail { background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 16px; }
.agents-log { background: #1e2530; color: #d8dee9; border-radius: 8px; padding: 12px; font-size: .78rem; max-height: 60vh; overflow: auto; white-space: pre-wrap; }
.agents-nav-badge { position: absolute; top: -6px; right: -6px; }
.agents-h2, .agents-detail-title { font-family: 'Century Gothic', Verdana, Geneva, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; }
.agents-h2 { font-size: 1.05rem !important; }
.agents-detail-title { font-size: 1.2rem; font-weight: 700; color: #24303f; margin-bottom: 2px; }
.agents-detail-title .badge, .agents-h2 .badge { font-size: .7rem; vertical-align: middle; }
.agents-mail-original { background: #f4f7fb; border: 1px solid #e3e8ef; border-radius: 10px; padding: 10px 12px; font-size: .9rem; white-space: pre-wrap; max-height: 360px; overflow: auto; }
.agents-report-frame { width: 100%; height: 78vh; border: 1px solid #e3e8ef; border-radius: 12px; background: #eef1f5; }
.agents-kit { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 12px 14px; }
.agents-copy { background: #f4f7fb; border: 1px dashed #cfd8e3; border-radius: 8px; padding: 6px 9px; margin: 3px 0 8px; cursor: copy; white-space: pre-wrap; }
.agents-copy.is-copied { background: #e3f6ea; border-color: var(--brand-success); }
.agents-dir { background: #fff; border: 1px solid #e3e8ef; border-left: 4px solid #9aa5b1; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.agents-dir.is-live { border-left-color: var(--brand-success); }
.agents-dir.is-off { opacity: .6; }
.agents-contact.is-incluir td:first-child { border-left: 3px solid var(--brand-success); }
.agents-contact.is-excluir { opacity: .6; }

/* --- Time clock PIN pad (attendance/_punch_pad.html): in the app's modal
 * and full screen on a time-clock terminal (attendance/kiosk.html). Big
 * touch targets — it's used standing, on a tablet, on the way in. */
.punch-pad { max-width: 640px; margin: 0 auto; }
.punch-hint { text-align: center; font-weight: bold; color: var(--brand-grey); margin-bottom: .75rem; }
.punch-footnote { text-align: center; font-size: .85rem; color: #888; margin: 1rem 0 0; }
.punch-staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem; }
.punch-person {
    display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .75rem .25rem;
    border: 2px solid #e6e6e6; border-radius: 15px; background: #fff; min-width: 0;
}
.punch-person:hover, .punch-person:focus-visible { border-color: var(--brand-coral); }
.punch-person img, .punch-initials {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
}
.punch-initials {
    display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 1.3rem;
}
.punch-person-name { font-size: .9rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.punch-who { margin-bottom: .5rem; }
.punch-who .btn-link { color: var(--brand-grey); text-decoration: none; padding-left: 0; }
.punch-who-name { text-align: center; font-size: 1.25rem; font-weight: bold; }
.punch-dots { display: flex; justify-content: center; gap: .8rem; margin-bottom: 1.25rem; }
.punch-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--brand-grey); }
.punch-dots span.optional { border-style: dashed; opacity: .5; }
.punch-dots span.filled { background: var(--brand-coral); border-color: var(--brand-coral); opacity: 1; border-style: solid; }
.punch-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-width: 320px; margin: 0 auto; }
.punch-key {
    height: 64px; border-radius: 15px; border: 2px solid #e6e6e6; background: #fff;
    font-size: 1.6rem; font-weight: bold; color: #222;
}
.punch-key:active { background: #f3f3f3; }
.punch-key-muted { color: var(--brand-grey); font-size: 1.3rem; }
.punch-key-ok { background: var(--brand-success); border-color: var(--brand-success); color: #fff; }
.punch-key-ok:disabled { opacity: .35; }
.punch-error { max-width: 320px; margin: 0 auto .75rem; }
.punch-banner { text-align: center; padding: 2.5rem 1rem; border-radius: 15px; color: #fff; cursor: pointer; }
.punch-banner .fa { font-size: 3rem; margin-bottom: .5rem; }
.punch-banner-ok { background: var(--brand-success); }
.punch-banner-warning { background: var(--brand-warning); }
.punch-banner-name { font-size: 1.8rem; font-weight: bold; }
.punch-banner-message { font-size: 1.2rem; }
.terminal-qr svg { width: 180px; height: 180px; }

/* The terminal page itself: no navbar, the pad centred on a white card. */
.kiosk-body { min-height: 100vh; }
.kiosk { max-width: 760px; margin: 0 auto; padding: 1rem 16px 2rem; }
/* Same blue bar as the app's navbar: the centre's web logo is designed for it. */
.kiosk-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;
    background: var(--brand-primary); color: #fff; border-radius: 15px; padding: .75rem 1rem;
}
.kiosk-logo { max-height: 64px; max-width: 50%; object-fit: contain; }
.kiosk-centre { font-weight: bold; font-size: 1.3rem; }
.kiosk-clock { text-align: right; }
.kiosk-time { font-size: 2.4rem; font-weight: bold; line-height: 1; }
.kiosk-date { opacity: .85; }
.kiosk-date::first-letter { text-transform: uppercase; }
.kiosk-panel { background: #fff; border-radius: 15px; padding: 1.5rem 1rem; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.kiosk-footer { text-align: center; color: var(--brand-grey); font-size: .8rem; margin-top: 1rem; }

/* Web push opt-in bar (base.html, staff only) */
.webpush-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 12px 16px; background: #fff8e1; border: 1px solid #f5dd8c; border-radius: 12px; font-size: .92rem; color: #4a5463; }
.webpush-bar-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #ffe9a8; color: #b07b00; flex: none; }
.webpush-bar-text { flex: 1 1 260px; }