:root {
    color-scheme: dark;
    --bg: #0f1419;
    --surface: #151c23;
    --surface-soft: #111820;
    --ink: #edf2f7;
    --muted: #aab7c4;
    --line: #2b3743;
    --green: #36b391;
    --green-dark: #7de0c6;
    --blue: #8fb7f2;
    --amber: #f4bd64;
    --red: #ff8f86;
    --purple: #cdb8f0;
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.28);

    /* Pastel chip/section-title backgrounds — translucent washes that keep
       their paired light text (--green-dark, --blue, --amber, --red, --purple,
       --muted) readable against a dark surface. */
    --pastel-green: rgba(54, 179, 145, 0.16);
    --pastel-blue: rgba(143, 183, 242, 0.16);
    --pastel-amber: rgba(244, 189, 100, 0.16);
    --pastel-red: rgba(255, 143, 134, 0.16);
    --pastel-purple: rgba(205, 184, 240, 0.16);
    --pastel-neutral: rgba(255, 255, 255, 0.07);

    --brand: var(--green);
    --brand-light: var(--green-dark);
    --brand-pastel: var(--pastel-green);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-soft: #eef1f5;
    --ink: #1b232b;
    --muted: #5c6b78;
    --line: #dde3e9;
    --green: #1f9670;
    --green-dark: #0d7355;
    --blue: #2f5fb0;
    --amber: #92660d;
    --red: #c0392b;
    --purple: #6d3fc0;
    --shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
    --shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.08);
    --pastel-neutral: rgba(15, 23, 42, 0.05);
}

html[data-theme="high-contrast"] {
    color-scheme: dark;
    --bg: #000000;
    --surface: #000000;
    --surface-soft: #000000;
    --ink: #ffffff;
    --muted: #f3f4f6;
    --line: #e5e7eb;
    --green: #4ade80;
    --green-dark: #86efac;
    --blue: #7dd3fc;
    --amber: #fde047;
    --red: #fca5a5;
    --purple: #d8b4fe;
    --shadow: none;
    --shadow-soft: none;
    --pastel-neutral: rgba(255, 255, 255, 0.14);
    --brand: var(--green) !important;
    --brand-light: var(--green-dark) !important;
    --brand-pastel: var(--pastel-green) !important;
}

* {
    box-sizing: border-box;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    scroll-behavior: auto;
}

*,
*::before,
*::after {
    animation: none !important;
    transition: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
}

body::selection {
    background: rgba(22, 127, 104, 0.22);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulse-soft {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.015);
    }
}

a {
    color: inherit;
}

/* ── App shell : sidebar + main ─────────────────────────────────── */
.app-shell {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    min-width: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    width: 220px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px 12px 16px;
    border-right: 1px solid var(--line);
    background: var(--surface);
    z-index: 10;
    /* overflow visible : le dropdown du compte n'est pas clippé */
    overflow: visible;
}

/* Seule la nav défile si beaucoup de liens */
.main-nav {
    overflow-y: auto;
    overflow-x: visible;
}

/* ── Brand ──────────────────────────────────────────────────────── */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    padding: 0 4px;
}

.brand-mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    font-size: 0.9rem;
    line-height: 1.2;
}

.brand small {
    color: var(--muted);
    font-size: 0.72rem;
}

/* ── Main nav (vertical) ─────────────────────────────────────────── */
.main-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    margin-top: 20px;
}

.main-nav a,
.button {
    min-height: 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

.main-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    font-size: 0.9rem;
    color: var(--muted);
}

.main-nav a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.main-nav-section-label {
    margin: 14px 12px 4px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.main-nav a.active,
.main-nav a:hover {
    background: var(--brand-pastel);
    color: var(--brand-light);
}

.main-nav a.nav-highlight {
    color: var(--green-dark);
    font-weight: 800;
}

.main-nav a.nav-highlight::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}

.main-nav a.active,
.main-nav a:hover {
    background: var(--brand-pastel);
}

.main-nav a,
.button,
.account-badge,
.scope-option span,
.check-slot,
.content-panel,
.stat-card,
.dashboard-row,
.week-day {
    transition: transform 180ms var(--motion), border-color 180ms var(--motion), background 180ms var(--motion), color 180ms var(--motion), box-shadow 180ms var(--motion);
}

.button:active,
.account-badge:active,
.main-nav a:active,
.bottom-nav a:active,
.check-slot:active {
    transform: scale(0.98);
}

/* ── Sidebar footer (search + account) ──────────────────────────── */
.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.sidebar-account {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-account-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-account-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.sidebar-account-role {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-badge {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #b8ddd3;
    border-radius: 999px;
    background: var(--pastel-green);
    color: var(--green-dark);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.account-badge:hover,
.account-badge[aria-expanded="true"] {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.account-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 30;
    display: none;
    min-width: 190px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.is-account-open .account-dropdown {
    display: grid;
}

.account-dropdown a {
    display: flex;
    align-items: center;
    min-height: 38px;
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

.account-dropdown button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    padding: 0 12px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
    background: var(--pastel-green);
    color: var(--green-dark);
}

.account-dropdown .logout-action:hover {
    background: var(--pastel-red);
    color: var(--red);
}

.theme-switcher {
    padding: 4px 12px 8px;
}

.theme-switcher-label {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.theme-switcher-options {
    display: grid;
    gap: 4px;
}

.theme-switcher-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.theme-switcher-option:hover {
    background: var(--pastel-green);
    color: var(--green-dark);
}

.theme-switcher-option.is-active {
    border-color: var(--brand);
    background: var(--pastel-green);
    color: var(--green-dark);
    font-weight: 900;
}

.account-dropdown-divider {
    margin: 6px 4px;
    border-top: 1px solid var(--line);
}

.nav-toggle {
    display: none;
}

/* ── (legacy) topbar-end — kept for any print/email references ───── */
.topbar-end {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Global search ──────────────────────────────────────────────── */
/* ── Topbar avec recherche globale ───────────────────────────────── */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 9;
    padding: 10px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.app-topbar .global-search-input {
    max-width: 100%;
    font-size: 0.92rem;
    padding: 9px 14px;
    border-radius: 8px;
}

.app-topbar .global-search-dropdown {
    left: 0;
    right: 0;
    width: auto;
    max-width: 680px;
}

.global-search {
    position: relative;
}

.global-search-input {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    background: var(--surface);
    color: var(--ink);
    transition: border-color 160ms, box-shadow 160ms;
}

.global-search-input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(45, 122, 95, 0.12);
}

.global-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    z-index: 50;
    overflow: hidden;
}

.global-search-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 6px;
}

.search-group-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
    padding: 8px 8px 4px;
    margin: 0;
}

.search-group {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.search-result {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--ink);
    transition: background 120ms;
}

.search-result:hover {
    background: var(--pastel-green);
}

.search-result strong {
    font-size: 0.9rem;
}

.search-result span {
    font-size: 0.78rem;
    color: #6b7280;
}

.search-empty {
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
    padding: 16px 8px;
    margin: 0;
}

.page {
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 24px 0 56px;
}

.turbo-progress-bar {
    display: none;
}

.bottom-nav {
    display: none;
}

.section-heading {
    margin-bottom: 20px;
}

.section-heading h1 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.08;
}

.section-heading p:not(.eyebrow) {
    max-width: 620px;
    margin: 10px 0 0;
    color: var(--muted);
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--green-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.section-subtitle {
    margin: 6px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -8px 0 18px;
}

.filter-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 13px;
    background: var(--surface);
    color: var(--muted);
    font-weight: 800;
    text-decoration: none;
}

.filter-tabs a.active,
.filter-tabs a:hover {
    border-color: #b3ddd5;
    background: var(--pastel-green);
    color: var(--green-dark);
}

.content-panel,
.auth-panel,
.group-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.content-panel {
    --panel-pad: clamp(18px, 3vw, 28px);
    padding: var(--panel-pad);
}

.content-panel.narrow,
.auth-panel {
    width: min(620px, 100%);
    margin: 0 auto;
}

.auth-panel {
    margin-top: 8vh;
    padding: clamp(24px, 4vw, 36px);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    padding: 0 16px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}

.button.primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.button.primary:hover {
    background: var(--brand-light);
}

.button.ghost {
    background: transparent;
}

.button:not(.primary):not(.disabled):hover {
    border-color: rgba(22, 127, 104, 0.28);
    background: var(--pastel-green);
    color: var(--green-dark);
    box-shadow: 0 8px 18px rgba(22, 127, 104, 0.08);
}

.button.danger {
    border-color: #f1b9b5;
    background: var(--pastel-red);
    color: var(--red);
}

.button.danger:hover {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
}

.button.disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.button.small {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.9rem;
}

.form-stack,
.form-grid {
    display: grid;
    gap: 16px;
}

.form-grid > div,
.form-stack {
    min-width: 0;
}

label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink);
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #c8d3df;
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

textarea {
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--green);
    outline: 3px solid rgba(22, 127, 104, 0.18);
}

.button:focus-visible,
.account-badge:focus-visible,
.nav-toggle:focus-visible,
.account-dropdown a:focus-visible,
.account-dropdown button:focus-visible {
    outline: 3px solid rgba(22, 127, 104, 0.22);
    outline-offset: 2px;
}

input[type="checkbox"] {
    width: 18px;
    min-height: 18px;
    margin-right: 8px;
}

.form-two-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.checks.single {
    grid-template-columns: 1fr;
    align-self: end;
}

.checks > div {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.checks label {
    margin: 0;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.recipient-list-label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink);
    font-weight: 700;
}

.recipient-rows {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
}

.recipient-row {
    display: flex;
    gap: 8px;
}

.recipient-row-input {
    flex: 1;
    min-width: 0;
}

.form-helper {
    margin: -4px 0 18px;
    color: var(--muted);
    font-weight: 700;
    line-height: 1.5;
}

/* ── Formulaire enfant ───────────────────────────────────────────── */
.kid-form-layout {
    display: grid;
    gap: 20px;
}

.kid-form-identity {
    display: grid;
    gap: 16px;
}

.kid-age-group-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
}

.kid-form-identity textarea {
    min-height: 72px;
    max-height: 160px;
}

.kid-form-siblings {
    display: grid;
    gap: 16px;
}

.sibling-list {
    display: grid;
    gap: 12px;
}

.sibling-row {
    display: grid;
    grid-template-columns: 1fr 1fr 100px auto;
    gap: 16px;
    align-items: end;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.kid-form-planner {
    display: grid;
    gap: 16px;
}

.kid-planner-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.kid-form-planner-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 4px 0 0;
}

.registration-weeks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    align-items: start;
}

.registration-planner {
    display: grid;
    gap: 12px;
}


/* ── Planning de présence ─────────────────────────────────────────── */
.planner-global-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.planner-global-label {
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.planner-global-sep {
    width: 1px;
    height: 18px;
    background: var(--line);
    margin: 0 4px;
}

.planner-global-btn {
    height: 30px;
    padding: 0 12px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--green-dark);
    background: transparent;
    border: 1px solid rgba(22, 127, 104, 0.3);
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms, border-color 120ms;
}

.planner-global-btn:hover {
    background: var(--pastel-green);
    border-color: var(--green);
}

.planner-global-btn.danger {
    color: var(--red);
    border-color: rgba(220, 38, 38, 0.25);
}

.planner-global-btn.danger:hover {
    background: var(--pastel-red);
    border-color: var(--red);
}

.registration-week {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.registration-week[open] {
    overflow-x: auto;
}

.registration-week summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 900;
    font-size: 0.92rem;
    list-style: none;
}

.registration-week summary::-webkit-details-marker {
    display: none;
}

.registration-week summary::after {
    content: "";
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 180ms var(--motion);
}

.registration-week[open] > summary::after {
    transform: translateY(3px) rotate(225deg);
}

.registration-week summary small {
    color: var(--muted);
    font-weight: 700;
    font-size: 0.8rem;
}

.registration-week-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}

.registration-week-btn {
    height: 26px;
    padding: 0 10px;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--green-dark);
    background: transparent;
    border: 1px solid rgba(22, 127, 104, 0.25);
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms, border-color 120ms;
}

.registration-week-btn:hover {
    background: var(--pastel-green);
    border-color: var(--green);
}

/* Grille transposée : jours = colonnes, créneaux = lignes */
.registration-grid {
    display: grid;
    grid-template-columns: 90px repeat(5, 1fr);
    border-top: 1px solid var(--line);
    min-width: 340px;
}

.registration-grid-corner {
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.registration-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: center;
}

.registration-day-head strong {
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.registration-day-head span {
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 700;
}

.registration-day-head.is-holiday {
    background: rgba(244, 189, 100, 0.16);
}

.holiday-badge {
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--amber);
}

.registration-slot.is-holiday {
    background: repeating-linear-gradient(
        45deg,
        rgba(244, 189, 100, 0.12),
        rgba(244, 189, 100, 0.12) 6px,
        transparent 6px,
        transparent 12px
    );
    cursor: not-allowed;
}

.registration-slot-row-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 12px;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--surface-soft);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-radius: 0;
    min-height: 42px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 100ms, color 100ms;
}

.registration-slot-row-label:hover,
.registration-slot-row-label:focus-visible {
    background: rgba(22, 127, 104, 0.12);
    color: var(--ink);
}

.registration-slot-row-label.is-static {
    cursor: default;
}

.registration-slot-row-label.is-static:hover {
    background: var(--surface-soft);
    color: var(--muted);
}

.registration-slot-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.registration-slot-view.is-filled {
    background: rgba(22, 127, 104, 0.06);
}

.registration-slot-view .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(22, 127, 104, 0.18);
}

.registration-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    cursor: pointer;
    transition: background 100ms;
    padding: 0;
    margin: 0;
}

.registration-slot:hover {
    background: rgba(22, 127, 104, 0.07);
}

.registration-slot input[type="checkbox"] {
    width: 18px;
    min-height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--green);
}

/* ── Collapsible panel générique (ex: présence prévisionnelle enfant) ── */
.collapsible-panel > .collapsible-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    margin: calc(var(--panel-pad, 22px) * -1) calc(var(--panel-pad, 22px) * -1) 14px;
    padding: 13px var(--panel-pad, 22px) 12px;
    border-radius: 8px 8px 0 0;
    background: var(--accent-bg, var(--pastel-neutral));
    color: var(--accent-fg, var(--muted));
}

.collapsible-panel > .collapsible-summary::-webkit-details-marker {
    display: none;
}

.collapsible-panel > .collapsible-summary .panel-title {
    margin: 0;
}

.collapsible-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.collapsible-panel > .collapsible-summary::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms var(--motion);
    margin-left: 4px;
}

.collapsible-panel[open] > .collapsible-summary::after {
    transform: translateY(3px) rotate(225deg);
}

.flash {
    position: fixed;
    top: 88px;
    right: clamp(12px, 4vw, 32px);
    z-index: 80;
    overflow: hidden;
    width: min(420px, calc(100% - 24px));
    margin: 0;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #b8ddd3;
    background: var(--pastel-green);
    color: var(--green-dark);
    box-shadow: var(--shadow);
    font-weight: 800;
    animation: toast-in 320ms var(--motion) both;
}

.flash::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: currentColor;
    opacity: 0.35;
    transform-origin: left;
    animation: toast-progress 4.4s linear forwards;
}

@keyframes toast-progress {
    to {
        transform: scaleX(0);
    }
}

.flash.is-leaving {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 180ms var(--motion), transform 180ms var(--motion);
}

.flash.danger {
    border-color: #f1b9b5;
    background: var(--pastel-red);
    color: var(--red);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

tbody tr:last-child td {
    border-bottom: 0;
}

/* ── Tableau des horaires (Horaires de la semaine) ─────────────────── */
.schedule-grid-table {
    min-width: 1080px;
}

.schedule-name-cell {
    min-width: 190px;
}

.schedule-status-cell {
    min-width: 110px;
}

.schedule-absence-cell {
    min-width: 160px;
}

.schedule-time-cell {
    min-width: 92px;
}

.schedule-note-cell {
    min-width: 160px;
}

.schedule-total-cell {
    min-width: 130px;
    max-width: 190px;
}

.time-select {
    padding: 8px 6px;
    font-size: 0.85rem;
}

.schedule-status-select {
    font-weight: 800;
    text-align: center;
    text-align-last: center;
}

.schedule-status-select[data-tone="present"] {
    border-color: var(--green);
    background: var(--pastel-green);
    color: var(--green-dark);
}

.schedule-status-select[data-tone="absent"] {
    border-color: var(--amber);
    background: var(--pastel-amber);
    color: var(--amber);
}

.schedule-note-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.schedule-note-field svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--muted);
}

.schedule-note-field input {
    min-width: 0;
}

.actions-cell {
    text-align: right;
}

.pill,
.mini-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 0.82rem;
    font-weight: 800;
}

.pill.info {
    background: var(--pastel-blue);
    color: var(--blue);
}

.pill.success,
.mini-status.yes {
    background: var(--pastel-green);
    color: var(--green-dark);
}

.pill.warning {
    background: var(--pastel-amber);
    color: var(--amber);
}

.mini-status.no {
    background: var(--pastel-neutral);
    color: var(--muted);
}

.mini-status + .mini-status {
    margin-left: 4px;
}

.animator-profile-panel {
    padding-block: 14px;
}

.animator-metric-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.animator-metric-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--pastel-neutral);
}

.animator-metric-card div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.animator-metric-card strong {
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.animator-metric-card span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.animator-metric-card svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--muted);
}

.animator-metric-card--age,
.animator-metric-card--period {
    background: var(--pastel-purple);
}

.animator-metric-card--age svg,
.animator-metric-card--period svg {
    color: var(--purple);
}

.animator-metric-card--hours {
    background: var(--pastel-blue);
}

.animator-metric-card--hours svg {
    color: var(--blue);
}

.animator-metric-card--recovery {
    background: var(--pastel-amber);
}

.animator-metric-card--recovery svg {
    color: var(--amber);
}

.animator-metric-card--status {
    background: var(--pastel-green);
}

.animator-metric-card--status svg {
    color: var(--green-dark);
}

.animator-metric-card--pending {
    background: var(--pastel-amber);
}

.animator-metric-card--pending svg {
    color: var(--amber);
}

.animator-metric-card--gap-positive {
    background: var(--pastel-purple);
}

.animator-metric-card--gap-positive svg {
    color: var(--purple);
}

.animator-metric-card--gap-negative {
    background: var(--pastel-amber);
}

.animator-metric-card--gap-negative svg {
    color: var(--amber);
}

.schedule-name-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.schedule-name-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.schedule-name-controls select {
    width: auto;
    min-width: 110px;
}

.schedule-progress {
    margin-top: 6px;
    height: 5px;
    border-radius: 999px;
    background: var(--pastel-neutral);
    overflow: hidden;
}

.schedule-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--green);
}

.schedule-progress-fill.warning {
    background: var(--amber);
}

.animator-trainee-note {
    margin: 12px 0 0;
}

.back-link {
    margin: 0 0 6px;
}

.back-link a {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.back-link a:hover {
    color: var(--brand-light);
}

.section-heading h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.animator-recovery-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0;
}

.animator-recovery-summary div {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--surface) 78%, var(--pastel-neutral));
}

.animator-recovery-summary dt {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.animator-recovery-summary dd {
    margin: 0;
    color: var(--ink);
    font-weight: 850;
}

.animator-directory-panel {
    --panel-pad: 0;
    overflow: hidden;
}

.animator-directory-panel + .animator-directory-panel {
    margin-top: 16px;
}

.animator-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding: 8px 22px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-elevated, var(--surface)) 72%, var(--brand-pastel));
}

.animator-section-header .panel-title {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.animator-directory-table {
    min-width: 980px;
    table-layout: fixed;
}

.animator-directory-table--direction {
    min-width: 760px;
}

.animator-directory-table th,
.animator-directory-table td {
    padding-block: 12px;
    vertical-align: middle;
}

.animator-directory-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand-pastel) 42%, transparent);
}

.animator-directory-table th:nth-child(1) {
    width: 22%;
}

.animator-directory-table th:nth-child(2) {
    width: 18%;
}

.animator-directory-table th:nth-child(3) {
    width: 10%;
}

.animator-directory-table th:nth-child(4) {
    width: 15%;
}

.animator-directory-table th:nth-child(5) {
    width: 9%;
}

.animator-directory-table th:nth-child(6) {
    width: 12%;
}

.animator-directory-table th:nth-child(7) {
    width: 170px;
}

.animator-directory-table--direction th:nth-child(1) {
    width: auto;
}

.animator-directory-table--direction th:nth-child(2) {
    width: 220px;
}

.animator-directory-table--direction th:nth-child(3) {
    width: 138px;
}

.animator-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.animator-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
    border-radius: 999px;
    background: var(--pastel-green);
    color: var(--green-dark);
    font-size: 0.78rem;
    font-weight: 900;
}

.animator-avatar--1 {
    border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
    background: var(--pastel-blue);
    color: var(--blue);
}

.animator-avatar--2 {
    border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
    background: var(--pastel-amber);
    color: var(--amber);
}

.animator-avatar--3 {
    border-color: color-mix(in srgb, var(--purple) 45%, var(--line));
    background: var(--pastel-purple);
    color: var(--purple);
}

.animator-avatar--4 {
    border-color: color-mix(in srgb, var(--red) 45%, var(--line));
    background: var(--pastel-red);
    color: var(--red);
}

.animator-row-main strong,
.animator-row-main a {
    color: var(--ink);
}

.animator-row-main small {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.animator-row-main strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.animator-period-cell,
.compact-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.animator-period-cell {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.compact-value {
    display: inline-block;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 800;
}

.compact-value.is-warning {
    color: var(--amber);
}

.animator-row-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.animator-row-actions {
    justify-content: flex-end;
}

.animator-row-actions .button.small {
    min-height: 34px;
}

.icon-action.button {
    width: 34px;
    min-width: 34px;
    padding: 0;
}

.icon-action svg {
    width: 1.05em;
    height: 1.05em;
}

.schedule-table .schedule-date-cell {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: var(--ink);
}

.schedule-table .schedule-date-cell strong,
.schedule-table .schedule-date-cell small {
    display: block;
}

.schedule-table .schedule-date-cell small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.schedule-table .schedule-hours-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.schedule-table .schedule-day-total-cell {
    white-space: nowrap;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.schedule-table .schedule-missions-cell {
    min-width: 180px;
}

.schedule-table .schedule-action-cell {
    width: 58px;
    text-align: right;
}

.schedule-action-cell .icon-action.is-active {
    background: var(--ink);
    color: var(--bg);
}

.animator-schedule-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 18px;
    align-items: start;
}

.animator-schedule-list {
    display: grid;
    gap: 18px;
}

.animator-week-block {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 94%, var(--ink));
}

.animator-week-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--green) 12%, var(--surface));
}

.animator-week-header h3,
.animator-week-header p,
.animator-week-summary {
    margin: 0;
}

.animator-week-header h3 {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0;
}

.animator-week-header p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.animator-week-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    gap: 8px;
    min-width: min(100%, 430px);
}

.animator-week-summary div {
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 8px;
    padding: 9px 10px;
    background: color-mix(in srgb, var(--surface) 88%, var(--ink));
}

.animator-week-summary dt {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.animator-week-summary dd {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.animator-week-table-wrap {
    margin: 0;
    overflow: visible;
}

.animator-week-table {
    border-collapse: separate;
    border-spacing: 0;
}

.animator-week-table th,
.animator-week-table td {
    border-right: 0;
    border-left: 0;
}

.animator-week-table tbody tr:last-child td {
    border-bottom: 0;
}

.animator-week-table tbody tr.is-selected td {
    background: color-mix(in srgb, var(--green) 10%, var(--surface));
    border-top: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
    border-bottom-color: color-mix(in srgb, var(--green) 35%, var(--line));
}

.animator-week-table tbody tr.is-selected td:first-child {
    border-left: 2px solid var(--green);
}

.schedule-selected-detail td {
    padding: 0 16px 16px;
    background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.schedule-selected-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.schedule-selected-grid article {
    min-height: 96px;
    border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
    border-radius: 8px;
    padding: 13px 14px;
    background: color-mix(in srgb, var(--surface) 92%, var(--green));
}

.schedule-selected-grid h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 900;
}

.schedule-selected-grid h4 svg {
    width: 1rem;
    height: 1rem;
    color: var(--green);
}

.schedule-selected-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.schedule-edit-panel {
    position: sticky;
    top: 86px;
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: color-mix(in srgb, var(--surface) 92%, var(--blue));
    box-shadow: var(--shadow);
}

.schedule-edit-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.schedule-edit-panel h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
}

.schedule-edit-panel header svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--muted);
}

.schedule-edit-date {
    margin: -4px 0 0;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.schedule-side-form {
    display: grid;
    gap: 11px;
}

.schedule-side-form label,
.schedule-side-form label span {
    display: grid;
    gap: 5px;
}

.schedule-side-form label[hidden] {
    display: none;
}

.schedule-side-form label span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.schedule-side-form select,
.schedule-side-form input,
.schedule-side-form textarea {
    width: 100%;
}

.schedule-side-form textarea {
    min-height: 76px;
    resize: vertical;
}

.schedule-side-form .button {
    justify-self: start;
}

@media (max-width: 900px) {
    .animator-schedule-workspace {
        grid-template-columns: 1fr;
    }

    .schedule-edit-panel {
        position: static;
    }

    .animator-week-header {
        flex-direction: column;
    }

    .animator-week-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .animator-week-summary {
        grid-template-columns: 1fr;
    }

    .schedule-selected-grid {
        grid-template-columns: 1fr;
    }
}

.schedule-help-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    margin: 0 0 14px;
    border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--pastel-green);
    color: var(--green-dark);
    font-size: 0.88rem;
}

.schedule-help-panel span {
    color: var(--ink);
}

.schedule-mission-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}

.schedule-mission-list li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.animator-meta,
.detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.animator-meta div,
.detail-meta div {
    min-width: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
}

.animator-meta dt,
.detail-meta dt {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.animator-meta dd,
.detail-meta dd {
    margin: 0;
    color: var(--ink);
    font-weight: 750;
    line-height: 1.35;
}

.group-list {
    display: grid;
    gap: 16px;
}

.group-panel {
    overflow: hidden;
}

.group-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 20px;
    cursor: pointer;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
}

.group-panel summary::marker,
.group-panel summary::-webkit-details-marker {
    display: none;
    content: none;
}

.group-panel summary::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    transform: rotate(45deg);
    transition: transform 180ms var(--motion);
}

.group-panel[open] > summary::after {
    transform: translateY(3px) rotate(225deg);
}

.group-panel summary strong {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--pastel-blue);
    color: var(--blue);
    font-size: 0.95rem;
}

.kid-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0 20px 20px;
    list-style: none;
}

.kid-list li {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.kid-list span {
    font-weight: 800;
}

.kid-list small,
.empty-state {
    color: var(--muted);
}

.empty-state {
    margin: 0;
    padding: 20px;
}

.empty-state.compact {
    padding: 8px 0 0;
}

.planning-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid #cfe0f6;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7fbff 0%, #eef7f1 100%);
    box-shadow: var(--shadow);
}

.planning-hero h1 {
    margin: 0;
    font-size: clamp(2.3rem, 5vw, 4.6rem);
    line-height: 0.95;
}

.planning-hero p:not(.eyebrow) {
    max-width: 620px;
    margin: 14px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.planning-hero .week-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-top: 16px;
    border-radius: 999px;
    padding: 0 13px;
    background: var(--pastel-blue);
    color: var(--blue);
    font-weight: 900;
}

.date-jump {
    display: grid;
    grid-template-columns: auto minmax(170px, 1fr) auto;
    align-items: end;
    gap: 10px;
    width: min(100%, 440px);
    min-width: 0;
}

.date-jump label {
    margin: 0 0 10px;
}

.date-jump input[type="date"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.date-jump .button {
    white-space: nowrap;
}

.day-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.validation-panel,
.planning-actions {
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 5px solid #7aa7ff;
    border-radius: 8px;
    background: var(--surface-soft);
    box-shadow: var(--shadow);
}

.validation-panel strong {
    display: block;
    margin-bottom: 6px;
}

.validation-panel p {
    margin: 0;
    color: var(--muted);
}

.planning-form {
    display: grid;
    gap: 20px;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.mission-card {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 430px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.planning-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

.planning-group-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), var(--surface));
    box-shadow: var(--shadow);
    overflow: hidden;
}

.planning-group-card--3-5 {
    border-color: rgba(22, 127, 104, 0.22);
}

.planning-group-card--6-12 {
    border-color: rgba(49, 95, 159, 0.22);
}

.planning-group-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    cursor: pointer;
    list-style: none;
    background: var(--pastel-neutral);
    color: var(--muted);
}

.planning-group-card--3-5 .planning-group-header {
    background: var(--pastel-green);
    color: var(--green-dark);
}

.planning-group-card--6-12 .planning-group-header {
    background: var(--pastel-blue);
    color: var(--blue);
}

.planning-group-card--general .planning-group-header {
    background: var(--pastel-neutral);
    color: var(--muted);
}

.planning-group-header::-webkit-details-marker {
    display: none;
}

.planning-group-header::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms var(--motion);
}

.planning-group-card[open] .planning-group-header {
    border-bottom: 1px solid var(--line);
}

.planning-group-card[open] .planning-group-header::after {
    transform: translateY(3px) rotate(225deg);
}

.planning-group-header h2 {
    margin: 0;
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    line-height: 1.12;
    color: inherit;
}

.mission-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 34px;
    border-radius: 999px;
    background: var(--pastel-green);
    color: var(--green-dark);
    font-weight: 900;
}

.planning-group-card--6-12 .mission-count {
    background: var(--pastel-blue);
    color: var(--blue);
}

.planning-group-card--general .mission-count {
    background: var(--pastel-neutral);
    color: var(--muted);
}

.planning-group-missions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    padding: 16px;
}

.planning-group-card--general .planning-group-missions {
    grid-template-columns: minmax(0, 360px);
}

.mission-row-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    border: 1px solid rgba(217, 225, 234, 0.82);
    border-radius: 8px;
    padding: 12px;
    background: var(--surface-soft);
}

.mission-row-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.mission-row-card h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.18;
}

.mission-row-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.35;
}

.mission-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 30px;
}

.mission-tag,
.assigned-chip,
.empty-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 0 11px;
    font-size: 0.84rem;
    font-weight: 900;
}

.mission-tag.green {
    background: var(--pastel-green);
    color: var(--green-dark);
}

.mission-tag.blue {
    background: var(--pastel-blue);
    color: var(--blue);
}

.mission-tag.amber {
    background: var(--pastel-amber);
    color: var(--amber);
}

.mission-tag.red {
    background: var(--pastel-red);
    color: var(--red);
}

.mission-tag.neutral {
    background: var(--pastel-neutral);
    color: var(--muted);
}

.mission-card h2 {
    margin: 0;
    font-size: clamp(1.28rem, 2vw, 1.7rem);
    line-height: 1.14;
}

.mission-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.assigned-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.assigned-chip {
    border: 1px solid #cdd8e6;
    background: var(--surface);
}

.assigned-chip small {
    margin-left: 5px;
    color: var(--muted);
}

.empty-chip {
    background: var(--pastel-neutral);
    color: var(--muted);
}

.planning-workload-panel {
    margin-bottom: 20px;
}

.workload-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.workload-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    border-radius: 999px;
    padding: 0 8px 0 12px;
    font-size: 0.84rem;
    font-weight: 700;
    border: 1px solid #cdd8e6;
    background: var(--surface);
}

.workload-chip strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pastel-green);
    color: var(--green-dark);
    font-size: 0.78rem;
}

.workload-chip--empty {
    color: var(--muted);
    border-color: var(--line);
}

.workload-chip--empty strong {
    background: var(--bg);
    color: var(--muted);
}

.assignment-box {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.assignment-scroll {
    display: grid;
    gap: 4px;
    max-height: 190px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.assignment-box legend {
    padding: 0 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.assignment-box label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--surface-soft);
    cursor: pointer;
}

.assignment-box label:hover,
.assignment-box label.suggested {
    background: var(--pastel-blue);
}

.assignment-box label:has(input:checked) {
    border-color: rgba(22, 127, 104, 0.34);
    background: var(--pastel-green);
    box-shadow: inset 3px 0 0 var(--green);
}

.assignment-box input {
    flex: 0 0 auto;
    margin: 0;
}

.assignment-box span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.assignment-box small {
    color: var(--muted);
    font-weight: 700;
}

.assignment-hint {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #fde2b5;
    border-radius: 8px;
    background: var(--pastel-amber);
    color: var(--amber);
    font-size: 0.88rem;
    font-weight: 800;
}

.assignment-extra {
    margin-top: 2px;
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.assignment-extra summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 900;
    list-style: none;
}

.assignment-extra summary::-webkit-details-marker {
    display: none;
}

.assignment-extra summary strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    border-radius: 999px;
    background: var(--pastel-neutral);
    color: var(--muted);
    font-size: 0.8rem;
}

.assignment-extra-list {
    display: grid;
    gap: 8px;
    padding-top: 8px;
}

.planning-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 0;
    border-left-color: var(--line);
}

.planning-save-status {
    margin-right: auto;
}

form ul {
    margin: 7px 0 0;
    padding-left: 18px;
    color: var(--red);
}

/* ── Pointage / Attendance ── */

.attendance-period-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.attendance-period-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    border: 1px solid rgba(141, 153, 174, 0.34);
    border-radius: 999px;
    padding: 0 16px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
}

.attendance-period-tab:hover {
    border-color: var(--green);
    background: rgba(22, 127, 104, 0.06);
    color: var(--green-dark);
}

.attendance-period-tab.is-active {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
    box-shadow: 0 8px 20px rgba(22, 127, 104, 0.22);
}

.attendance-scope-panel {
    margin-bottom: 24px;
}

.attendance-scope-form {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 18px;
}

.scope-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.scope-group legend {
    margin-bottom: 8px;
    color: var(--muted);
    font-weight: 800;
}

.scope-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.scope-option {
    position: relative;
    margin: 0;
}

.scope-option input {
    position: absolute;
    width: 1px;
    min-height: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.scope-option span {
    display: grid;
    place-items: center;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    background: var(--surface);
    color: var(--muted);
    font-weight: 800;
    cursor: pointer;
}

.scope-option input:checked + span {
    border-color: var(--green);
    background: var(--pastel-green);
    color: var(--green-dark);
}

.scope-option input:focus-visible + span {
    outline: 3px solid rgba(22, 127, 104, 0.18);
}

.auto-submit-ready .attendance-scope-submit {
    display: none;
}

.attendance-block {
    margin-bottom: 36px;
}

.attendance-fieldset {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
}

.schedule-fieldset,
.activity-fieldset {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
}

.attendance-fieldset:disabled .attendance-note,
.attendance-fieldset:disabled .check-slot {
    opacity: 0.6;
    cursor: not-allowed;
}

.attendance-block-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
    padding: 14px 18px;
    border-radius: 8px;
    background: var(--pastel-green);
}

.attendance-block-header h2 {
    margin: 4px 0 0;
    font-size: 1.25rem;
    color: var(--green-dark);
}

.attendance-block-legend {
    display: flex;
    gap: 12px;
    align-items: center;
}

.legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.legend-item small {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.75;
}

.legend-item.garderie  { background: var(--pastel-amber); color: var(--amber); }
.legend-item.morning   { background: var(--pastel-green); color: var(--green-dark); }
.legend-item.canteen   { background: var(--pastel-blue); color: var(--blue); }
.legend-item.afternoon { background: var(--pastel-purple); color: var(--purple); }

.attendance-block-notice {
    margin: 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--pastel-amber);
    border: 1px solid #f5d48a;
    color: var(--amber);
    font-size: 0.85rem;
    font-weight: 600;
    align-self: center;
}

.attendance-panel {
    margin-bottom: 14px;
}

.attendance-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.attendance-group-label {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.attendance-panel-top .attendance-group-label {
    margin: 0;
}

.attendance-search-wrap {
    width: min(100%, 320px);
}

.attendance-col-header {
    display: grid;
    align-items: center;
    gap: 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.morning-cols   { grid-template-columns: 1fr 76px 76px 76px 76px 1fr; }
.afternoon-cols,
.departure-cols { grid-template-columns: 1fr 120px; }

.attendance-col-header span:first-child { text-align: left; }

.attendance-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.attendance-row {
    display: grid;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

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

.attendance-row[hidden] {
    display: none;
}

.attendance-name {
    font-weight: 700;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.picnic-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
    cursor: pointer;
}

.picnic-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.picnic-toggle:has(input:checked) {
    border-color: rgba(244, 189, 100, 0.4);
    background: var(--pastel-amber);
    color: var(--amber);
}

/* On desktop, check-row is invisible to the parent grid:
   its children become direct grid items, perfectly aligned with the col-header. */
.check-row {
    display: contents;
}

/* Text labels inside chips — hidden on desktop, visible on mobile */
.check-label {
    display: none;
}

.check-slot {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.check-slot-np {
    position: absolute;
    top: -6px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--amber);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.check-slot input[type="checkbox"] {
    width: 20px;
    min-height: 20px;
    margin: 0;
    accent-color: var(--green);
    cursor: pointer;
}

.check-slot--large input[type="checkbox"] {
    width: 24px;
    min-height: 24px;
}

.check-slot--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.check-slot--disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.attendance-note {
    min-height: 36px;
    font-size: 0.9rem;
}

.attendance-summary {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--muted);
}

.attendance-summary strong {
    color: var(--ink);
}

/* ── Attendance History (kid detail page) ── */

.attendance-history-scroll {
    overflow-x: auto;
}

.attendance-history-header,
.attendance-history-row {
    display: grid;
    grid-template-columns: 110px repeat(5, 64px) 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    min-width: 500px;
}

.attendance-history-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
}

.attendance-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.attendance-history-row {
    border-bottom: 1px solid var(--line);
}

.attendance-history-row:last-child {
    border-bottom: none;
}

.attendance-history-row.history-absent {
    opacity: 0.5;
}

.history-date a {
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--blue);
}

.history-date a:hover {
    text-decoration: underline;
}

.history-dot {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
}

.dot-yes { color: var(--green); }
.dot-no  { color: var(--line); }

.history-note {
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Attendance Summary ── */

.attendance-summary-toolbar {
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 14px;
}

.attendance-summary-toolbar .section-heading h1 {
    line-height: 0.98;
}

.attendance-summary-toolbar .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 32px rgba(28, 37, 65, 0.07);
    backdrop-filter: blur(14px);
}

.attendance-summary-toolbar .toolbar-actions .button {
    min-height: 36px;
    border-color: transparent;
    background: transparent;
    padding: 0 14px;
}

.attendance-summary-toolbar .toolbar-actions .button:hover {
    border-color: var(--line);
    background: var(--surface-soft);
}

.attendance-summary-day-nav {
    justify-content: flex-end;
    margin-bottom: 18px;
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.attendance-summary-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 138px;
    padding: 18px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    text-align: center;
}

.attendance-summary-stats .summary-stat {
    position: relative;
    align-items: center;
    min-height: 132px;
    overflow: hidden;
    padding: 20px 14px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
    border-color: rgba(141, 153, 174, 0.28);
    box-shadow: 0 18px 42px rgba(28, 37, 65, 0.075);
    text-align: center;
}

.attendance-summary-stats .summary-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--line);
}

.attendance-summary-stats .garderie-stat::before { background: #f5b957; }
.attendance-summary-stats .morning-stat::before { background: #4db899; }
.attendance-summary-stats .canteen-stat::before { background: #7aa7e8; }
.attendance-summary-stats .afternoon-stat::before { background: #a884e5; }
.attendance-summary-stats .absent-stat::before { background: #f08d84; }

.summary-stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.attendance-summary-stats .summary-stat-value {
    font-size: 2.15rem;
    letter-spacing: 0;
}

.summary-stat-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.attendance-summary-stats .summary-stat-label {
    gap: 4px;
    line-height: 1.15;
    align-items: center;
}

.summary-stat-label small {
    font-weight: 500;
    opacity: 0.7;
    text-transform: none;
}

.summary-stat-breakdown {
    display: grid;
    gap: 2px;
    margin-top: 3px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: none;
}

.summary-stat-breakdown strong {
    font-size: 0.78rem;
}

.garderie-stat  { background: var(--pastel-amber); border-color: #f5d48a; color: var(--amber); }
.morning-stat   { background: var(--pastel-green); border-color: #b3ddd5; color: var(--green-dark); }
.canteen-stat   { background: var(--pastel-blue); border-color: #b8cff0; color: var(--blue); }
.afternoon-stat { background: var(--pastel-purple); border-color: #cdb8f0; color: var(--purple); }
.departure-stat { background: var(--pastel-blue); border-color: #b8cff0; color: var(--blue); }
.absent-stat    { background: var(--pastel-red); border-color: #f1b9b5; color: var(--red); }

.attendance-summary-stats .garderie-stat,
.attendance-summary-stats .morning-stat,
.attendance-summary-stats .canteen-stat,
.attendance-summary-stats .afternoon-stat,
.attendance-summary-stats .absent-stat {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
}

.attendance-summary-stats .garderie-stat .summary-stat-value,
.attendance-summary-stats .garderie-stat .summary-stat-label { color: var(--amber); }
.attendance-summary-stats .morning-stat .summary-stat-value,
.attendance-summary-stats .morning-stat .summary-stat-label { color: var(--green-dark); }
.attendance-summary-stats .canteen-stat .summary-stat-value,
.attendance-summary-stats .canteen-stat .summary-stat-label { color: var(--blue); }
.attendance-summary-stats .afternoon-stat .summary-stat-value,
.attendance-summary-stats .afternoon-stat .summary-stat-label { color: var(--purple); }
.attendance-summary-stats .absent-stat .summary-stat-value,
.attendance-summary-stats .absent-stat .summary-stat-label { color: var(--red); }

.attendance-summary-stats .summary-stat-label small,
.attendance-summary-stats .summary-stat-breakdown {
    color: var(--muted);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.attendance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.summary-full-width {
    grid-column: 1 / -1;
}

.summary-dropdown {
    overflow: hidden;
    padding: 0;
}

.attendance-summary-grid .summary-dropdown {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
    border-color: rgba(141, 153, 174, 0.28);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(28, 37, 65, 0.075);
}

.attendance-summary-grid .summary-dropdown:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 52px rgba(28, 37, 65, 0.1);
}

.attendance-summary-grid .summary-dropdown[open] {
    transform: none;
}

.summary-dropdown > summary {
    cursor: pointer;
    list-style: none;
}

.summary-dropdown > summary::-webkit-details-marker {
    display: none;
}

.summary-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: calc(var(--panel-pad, 22px) * -1) calc(var(--panel-pad, 22px) * -1) 14px;
    padding: 13px var(--panel-pad, 22px) 12px;
    border-radius: 8px 8px 0 0;
    background: var(--accent-bg, var(--pastel-neutral));
    color: var(--accent-fg, var(--muted));
}

.summary-dropdown .summary-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(124px, 168px) 18px;
    align-items: center;
    column-gap: 18px;
    margin: 0;
    padding: clamp(16px, 3vw, 24px);
    border-bottom: 0;
}

.attendance-summary-grid .summary-dropdown .summary-panel-header {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 132px) 18px;
    min-height: 108px;
    column-gap: 14px;
    padding: 18px 18px 18px 20px;
    box-shadow: inset 4px 0 0 transparent;
}

.attendance-summary-grid .summary-full-width .summary-panel-header {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 170px) 18px;
    min-height: 88px;
}

.summary-dropdown .summary-panel-header > div:first-child {
    min-width: 0;
}

.summary-dropdown[open] .summary-panel-header {
    border-bottom: 2px solid var(--line);
}

.attendance-summary-grid .summary-dropdown[open] .summary-panel-header {
    border-bottom-width: 0;
}

.summary-dropdown .summary-panel-header::after {
    content: "";
    grid-column: 3;
    justify-self: end;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms var(--motion);
}

.summary-dropdown[open] .summary-panel-header::after {
    transform: rotate(225deg);
}

.summary-dropdown-body {
    padding: 16px clamp(16px, 3vw, 24px) clamp(18px, 3vw, 26px);
}

.attendance-summary-grid .summary-dropdown-body {
    border-top: 1px solid rgba(217, 225, 234, 0.78);
    padding: 15px 20px 18px 24px;
    background: rgba(251, 252, 254, 0.82);
}

.summary-panel-header h2 {
    margin: 2px 0 0;
    font-size: 1rem;
    color: inherit;
}

.summary-slot-time {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.attendance-summary-grid .summary-slot-time {
    margin-bottom: 3px;
}

.attendance-summary-grid .summary-panel-header h2 {
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.summary-count {
    justify-self: center;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    padding: 6px 14px;
    border-radius: 6px;
}

.attendance-summary-grid .summary-count {
    min-width: 58px;
    padding: 8px 14px;
    text-align: center;
}

.summary-count-group {
    display: grid;
    justify-self: center;
    justify-items: center;
    gap: 5px;
    min-width: 0;
}

.summary-count-group .summary-stat-breakdown {
    color: var(--muted);
    text-align: center;
}

.attendance-summary-grid .summary-count-group {
    width: min(100%, 132px);
    min-width: 92px;
}

.attendance-summary-grid .summary-full-width .summary-count-group {
    width: min(100%, 170px);
}

.attendance-summary-grid .summary-count-group small {
    max-width: 132px;
}

.attendance-summary-grid .summary-full-width .summary-count-group small {
    max-width: 170px;
}

.garderie-header  { border-color: #f5d48a; }
.garderie-header  .summary-count { background: var(--pastel-amber); color: var(--amber); }
.morning-header   { border-color: #b3ddd5; }
.morning-header   .summary-count { background: var(--pastel-green); color: var(--green-dark); }
.canteen-header   { border-color: #b8cff0; }
.canteen-header   .summary-count { background: var(--pastel-blue); color: var(--blue); }
.afternoon-header { border-color: #cdb8f0; }
.afternoon-header .summary-count { background: var(--pastel-purple); color: var(--purple); }
.departure-header { border-color: #b8cff0; }
.departure-header .summary-count { background: var(--pastel-blue); color: var(--blue); }
.absent-header    { border-color: #f1b9b5; }
.absent-header    .summary-count { background: var(--pastel-red); color: var(--red); }

/* Same six tints, now filling the whole header band when it's a plain
   .summary-panel-header (not the .summary-dropdown grid variant, which
   keeps its own left-stripe treatment further down). */
.summary-panel-header.garderie-header  { background: var(--pastel-amber); color: var(--amber); }
.summary-panel-header.morning-header   { background: var(--pastel-green); color: var(--green-dark); }
.summary-panel-header.canteen-header   { background: var(--pastel-blue); color: var(--blue); }
.summary-panel-header.afternoon-header { background: var(--pastel-purple); color: var(--purple); }
.summary-panel-header.departure-header { background: var(--pastel-blue); color: var(--blue); }
.summary-panel-header.absent-header    { background: var(--pastel-red); color: var(--red); }

.attendance-summary-grid .garderie-header { box-shadow: inset 4px 0 0 #f5b957; }
.attendance-summary-grid .morning-header { box-shadow: inset 4px 0 0 #4db899; }
.attendance-summary-grid .canteen-header { box-shadow: inset 4px 0 0 #7aa7e8; }
.attendance-summary-grid .afternoon-header { box-shadow: inset 4px 0 0 #a884e5; }
.attendance-summary-grid .departure-header { box-shadow: inset 4px 0 0 #7aa7e8; }
.attendance-summary-grid .absent-header { box-shadow: inset 4px 0 0 #f08d84; }

.summary-subtitle {
    margin: 18px 0 10px;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
}

.kid-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kid-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    font-size: 0.85rem;
    font-weight: 600;
}

.kid-chip--absent {
    background: var(--pastel-red);
    border-color: #f1b9b5;
    color: var(--red);
    opacity: 0.85;
}

.allergy-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--amber);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    cursor: help;
}

.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 280px;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.empty-state.compact {
    margin: 0;
    font-size: 0.9rem;
}

/* ── Pending departures ── */

.pending-departures-stats {
    grid-template-columns: repeat(3, 1fr);
}

.pending-departures-grid {
    align-items: start;
}

.pending-departures-grid .content-panel {
    min-width: 0;
}

.pending-departures-clear {
    margin-bottom: 20px;
    border-color: #b3ddd5;
    background: var(--pastel-green);
}

.pending-departures-clear h2 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.pending-departures-clear p {
    margin: 0;
    color: var(--muted);
}

.departure-watch-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.departure-watch-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.departure-watch-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.departure-watch-child strong {
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.departure-watch-child span {
    color: var(--muted);
    font-size: 0.82rem;
}

.departure-watch-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* ── Outings ── */

.outing-form-panel {
    width: min(760px, 100%);
}

.outing-participants-field {
    display: grid;
    gap: 8px;
}

.outing-animators-field {
    display: grid;
    gap: 8px;
}

.animator-options {
    display: grid;
    gap: 4px;
}

.animator-group-tag {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

.participant-search-wrap {
    position: relative;
}

.participant-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    background: var(--surface);
    box-sizing: border-box;
}

.participant-search:focus {
    outline: none;
    border-color: #2d7a5f;
    box-shadow: 0 0 0 3px rgba(45, 122, 95, 0.12);
}

.participant-no-results {
    color: #6b7280;
    font-size: 0.875rem;
    text-align: center;
    padding: 8px 0;
    margin: 0;
}

.outing-scope-field {
    display: grid;
    gap: 8px;
}

.outing-scope-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.outing-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.outing-field-header label {
    margin: 0;
}

.bus-ticket-fields {
    display: grid;
    gap: 12px;
    border: 1px solid #cfe1dc;
    border-radius: 8px;
    padding: 14px;
    background: var(--surface-soft);
}

.bus-ticket-fields[hidden] {
    display: none;
}

.bus-ticket-current {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bus-ticket-proof-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.bus-ticket-proof {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: var(--surface-soft);
}

.bus-ticket-proof div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.bus-ticket-proof strong {
    color: var(--ink);
}

.bus-ticket-proof span:not(.pill) {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.selection-count {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 0 10px;
    background: var(--pastel-green);
    color: var(--green-dark);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.participant-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 360px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.participant-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.participant-option[hidden] {
    display: none;
}

.outing-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--line);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--muted);
    flex: 0 0 auto;
}

.outing-count-badge--high {
    background: var(--pastel-amber);
    border-color: #f5d48a;
    color: var(--amber);
}

.participant-outing-count {
    margin-left: auto;
}

.participant-option:hover {
    border-color: #c8d3df;
    background: var(--surface);
}

.participant-option input {
    flex: 0 0 auto;
    margin: 0;
}

.participant-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outing-row .dashboard-row-tags {
    align-items: center;
}

.outing-overview-panel,
.outing-reminder-panel,
.outing-participants-panel {
    margin-bottom: 14px;
}

.outing-reminder {
    margin: 0;
    color: var(--ink);
    line-height: 1.55;
}

.outing-participant-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.outing-participant-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.outing-participant-list a {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
}

.outing-participant-list strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outing-participant-list span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.outing-kid-chips .kid-chip {
    color: var(--ink);
    text-decoration: none;
}

.outing-kid-chips .kid-chip small {
    color: var(--muted);
    font-weight: 800;
}

/* ── Animator day ── */

.day-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 16px;
    margin-bottom: 18px;
}

.day-hero-panel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.day-hero-panel h2 {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
}

.day-hero-panel p:not(.eyebrow) {
    margin: 8px 0 0;
    color: var(--muted);
}

.day-action-panel {
    display: grid;
    align-content: start;
    gap: 12px;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.quick-action-grid .button {
    min-height: 46px;
}

/* ── Print ── */

.print-sheet {
    display: grid;
    gap: 22px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.print-sheet h2 {
    margin: 0 0 10px;
    font-size: 1.1rem;
}

.print-sheet h3 {
    margin: 0 0 8px;
    font-size: 0.98rem;
}

.print-week-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.print-day {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.print-day header {
    display: grid;
    gap: 2px;
    padding: 10px;
    background: var(--pastel-green);
    color: var(--green-dark);
}

.print-day header span {
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.print-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px;
    list-style: none;
}

.print-list li {
    display: grid;
    gap: 3px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.print-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.print-list small,
.print-list em,
.muted-print {
    color: var(--muted);
}

.print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
    font-size: 0.9rem;
}

.print-table th,
.print-table td {
    border: 1px solid var(--line);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.print-table th {
    background: var(--surface-soft);
    font-weight: 900;
}

.print-planning-table .print-mission-col {
    width: 180px;
    min-width: 140px;
}

.print-planning-table .print-day-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 900;
}

.print-planning-table .print-day-date {
    font-size: 0.82rem;
}

.activity-poster {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.activity-poster-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 22px 20px;
    background: linear-gradient(165deg, var(--pastel-blue), var(--pastel-purple));
    text-align: center;
}

.activity-poster-deco {
    font-size: 2.4rem;
    line-height: 1;
}

.activity-poster-title h2 {
    margin: 0;
    color: var(--purple);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.activity-poster-title p {
    margin: 4px 0 0;
    color: var(--amber);
    font-weight: 800;
    font-size: 1.05rem;
}

.activity-poster-table {
    width: 100%;
    border-collapse: collapse;
}

.activity-poster-table th,
.activity-poster-table td {
    border: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.activity-poster-table thead th {
    background: var(--purple);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.activity-poster-period-col {
    width: 120px;
    min-width: 100px;
    background: var(--surface-soft);
    text-align: center;
}

.activity-poster-period-label {
    display: block;
    color: var(--purple);
    font-weight: 900;
    text-transform: uppercase;
}

.activity-poster-period-icon {
    display: block;
    margin-top: 6px;
    font-size: 1.3rem;
}

.activity-poster-ritual-row td {
    background: var(--pastel-purple);
    color: var(--purple);
    font-weight: 900;
    text-align: center;
}

.activity-poster-cell ul {
    margin: 0;
    padding-left: 18px;
}

.activity-poster-cell li {
    margin-bottom: 4px;
}

.activity-poster-nap {
    margin: 0 0 6px;
    color: var(--red);
    font-weight: 900;
}

.activity-poster-footer {
    padding: 14px 20px;
    background: var(--purple);
    color: #fff;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.print-two-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

/* ── Outing poster (parent-facing print) ── */

.outing-poster {
    display: grid;
    gap: 20px;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid rgba(245, 194, 87, 0.45);
    border-radius: 16px;
    background: linear-gradient(165deg, #fffdf7 0%, #fff8ec 100%);
    box-shadow: var(--shadow);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.outing-poster-hero {
    display: flex;
    align-items: center;
    gap: 18px;
}

.outing-poster-icon {
    font-size: 2.6rem;
    line-height: 1;
}

.outing-poster-kicker {
    margin: 0;
    color: var(--amber);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.outing-poster-hero h2 {
    margin: 2px 0 4px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.outing-poster-times {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.outing-poster-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.outing-poster-reminder {
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--pastel-green);
    border: 1px dashed #b3ddd5;
}

.outing-poster-reminder h3 {
    margin: 0 0 6px;
    color: var(--green-dark);
}

.outing-poster-reminder p {
    margin: 0;
}

.outing-poster-section h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.outing-poster-kids {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.outing-poster-kid-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid #f5d48a;
    font-weight: 700;
    font-size: 0.92rem;
}

.outing-poster-kid-chip small {
    color: var(--muted);
    font-weight: 600;
}

.outing-poster-kid-chip--animator {
    background: var(--pastel-blue);
    border-color: #b8cff0;
    color: var(--blue);
}

.outing-poster {
    background: linear-gradient(165deg, #1c1710 0%, #201a12 100%);
    border-color: rgba(245, 194, 87, 0.25);
}

.outing-poster-kid-chip {
    background: var(--surface);
    color: var(--ink);
}

@media print {
    .outing-poster {
        border-color: #e5c46a;
        box-shadow: none;
    }
}

/* ── Statistics ── */

.export-period-picker:has(#export-period-day:checked) .export-period-range-fields {
    display: none !important;
}

.export-period-picker:has(#export-period-range:checked) .export-period-day-field {
    display: none !important;
}

.stats-table {
    display: grid;
    gap: 8px;
}

.stats-row {
    display: grid;
    grid-template-columns: 1.1fr 1.25fr repeat(5, minmax(64px, 0.7fr));
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.stats-header {
    background: var(--pastel-blue);
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.stats-row small {
    display: block;
    color: var(--muted);
}

.stats-rate {
    position: relative;
    overflow: hidden;
    min-height: 30px;
    border-radius: 999px;
    background: var(--pastel-blue);
}

.stats-rate span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: #b8cff0;
}

.stats-rate strong {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 30px;
    color: var(--blue);
    font-size: 0.84rem;
}

.dashboard-statistics {
    margin-bottom: 20px;
}

.dashboard-stats-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 16px 0;
}

.dashboard-statistics .stat-card {
    padding: 18px 14px;
    background: var(--surface-soft);
    box-shadow: none;
}

.staffing-overview {
    --panel-pad: clamp(16px, 2.4vw, 24px);
    margin: 0 0 24px;
    padding: var(--panel-pad);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.staffing-overview-header {
    margin: calc(var(--panel-pad) * -1) calc(var(--panel-pad) * -1) 14px;
    padding: 13px var(--panel-pad) 12px;
    border-radius: 12px 12px 0 0;
    background: var(--pastel-blue);
    color: var(--blue);
}

.staffing-overview-header h2 {
    margin: 2px 0 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: inherit;
}

.staffing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.staffing-card {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(141, 153, 174, 0.28);
    border-left: 4px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
    box-shadow: 0 18px 42px rgba(28, 37, 65, 0.075);
}

.staffing-card.status-success {
    border-left-color: var(--green);
}

.staffing-card.status-warning {
    border-left-color: var(--amber);
}

.staffing-card-title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.staffing-main strong {
    display: block;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1;
}

.staffing-main small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-weight: 800;
}

.staffing-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.staffing-metrics dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.staffing-metrics dd {
    margin: 3px 0 0;
    font-size: 1.25rem;
    font-weight: 900;
}

.dashboard-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.dashboard-chart-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.dashboard-chart-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
}

.chart-frame {
    position: relative;
    height: 260px;
    min-height: 0;
}

.dashboard-stats-table {
    margin-top: 16px;
}

/* ── Dashboard ── */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.dashboard-stats--triple {
    grid-template-columns: repeat(3, 1fr);
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    text-align: center;
}

.stat-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--green);
    line-height: 1;
}

.stat-card--pending {
    background: var(--surface-soft);
}

.stat-value--pending {
    color: var(--muted);
}

.stat-value-text {
    font-size: 1.5rem;
    line-height: 1.1;
}

.stat-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dashboard-full-width {
    grid-column: 1 / -1;
}

/* ── Section-title accents ──────────────────────────────────────
   Pastel background applied to .panel-title / .summary-panel-header /
   .collapsible-summary. Default tint is neutral grey; add one of these
   modifier classes to the surrounding .content-panel to recolor it. */
.accent-kids      { --accent-bg: var(--pastel-green);   --accent-fg: var(--green-dark); }
.accent-team      { --accent-bg: var(--pastel-blue);    --accent-fg: var(--blue); }
.accent-attention { --accent-bg: var(--pastel-amber);   --accent-fg: var(--amber); }
.accent-general   { --accent-bg: var(--pastel-neutral); --accent-fg: var(--muted); }

.panel-title {
    margin: calc(var(--panel-pad, 22px) * -1) calc(var(--panel-pad, 22px) * -1) 18px;
    padding: 12px var(--panel-pad, 22px);
    border-radius: 8px 8px 0 0;
    background: var(--accent-bg, var(--pastel-neutral));
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-fg, var(--muted));
}

.summary-panel-header .panel-title,
.collapsible-panel > .collapsible-summary .panel-title {
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    color: inherit;
}

/* Age bar chart */
.age-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.age-row {
    display: grid;
    grid-template-columns: 48px 1fr 28px;
    align-items: center;
    gap: 10px;
}

.age-label {
    font-size: 0.85rem;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
}

.bar-track {
    height: 20px;
    background: var(--pastel-green);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--green);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 4px;
}

.bar-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
}

/* Week planning grid */
.week-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: center;
}

.week-day.is-today {
    border-color: var(--green);
    background: var(--pastel-green);
}

.week-day-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--muted);
}

.week-day-date {
    font-size: 1.1rem;
    font-weight: 700;
}

.week-day-status {
    min-height: 24px;
    display: flex;
    align-items: center;
}

.week-day-detail {
    min-height: 20px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.week-day-note {
    font-weight: 400;
    font-style: italic;
    white-space: normal;
}

.animator-week-grid .week-day {
    min-height: 150px;
}

a.week-day {
    text-decoration: none;
    cursor: pointer;
}

a.week-day:hover {
    border-color: var(--green);
}

/* Presence list */
.presence-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.presence-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.presence-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.presence-name {
    flex: 1;
    font-weight: 700;
}

.presence-hours {
    font-size: 0.85rem;
    color: var(--muted);
}

.pill.neutral {
    background: var(--pastel-neutral);
    color: var(--muted);
    border-color: var(--line);
}

.dashboard-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.dashboard-row > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-row-kicker,
.dashboard-row small {
    color: var(--muted);
    font-size: 0.82rem;
}

.dashboard-row-kicker {
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-row-tags {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.attendance-save-bar {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.attendance-save-submit {
    flex: 0 0 auto;
    padding: 0 14px;
    font-size: 1.15rem;
    line-height: 1;
}

.save-hint {
    color: var(--muted);
    font-weight: 900;
}

.check-slot:has(input:checked) {
    animation: pulse-soft 240ms var(--motion);
}

/* ── Activity ── */

.dashboard-activity-panel {
    margin-bottom: 20px;
}

.activity-mini-list,
.activity-timeline {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-mini-list li,
.activity-timeline li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
}

.activity-mini-list strong,
.activity-timeline strong {
    display: block;
    color: var(--ink);
    line-height: 1.3;
}

.activity-action-label {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-bottom: 4px;
    border-radius: 999px;
    padding: 0 9px;
    background: var(--pastel-blue);
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.activity-mini-list small,
.activity-timeline small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.82rem;
}

.activity-dot {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(49, 95, 159, 0.12);
}

.activity-dot.activity {
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(22, 127, 104, 0.12);
}

.activity-toolbar {
    align-items: flex-end;
}

.activity-group-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 360px);
}

.activity-group-switcher select {
    flex: 1;
    min-width: 0;
}

.auto-submit-ready .activity-animator-submit {
    display: none;
}

.activity-planner-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(141, 153, 174, 0.28);
    border-radius: 8px;
    padding: 18px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
    box-shadow: 0 18px 42px rgba(28, 37, 65, 0.075);
}

.activity-planner-hero h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.activity-month-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.activity-week-nav {
    justify-content: flex-end;
    margin-bottom: 16px;
}

.activity-day-tabs {
    display: none;
}

.schedule-day-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin: 0 0 18px;
}

.schedule-day-tabs .activity-day-tab {
    text-decoration: none;
}

.schedule-day-tabs .activity-day-tab.is-complete {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
    box-shadow: 0 14px 28px rgba(22, 127, 104, 0.22);
}

.schedule-day-tabs .activity-day-tab.is-complete span,
.schedule-day-tabs .activity-day-tab.is-complete small {
    color: rgba(255, 255, 255, 0.82);
}

.schedule-generator-panel,
.schedule-preview-panel {
    margin-bottom: 18px;
}

.schedule-generator-disclosure {
    overflow: hidden;
    padding: 0;
}

.schedule-generator-disclosure > summary {
    cursor: pointer;
    list-style: none;
}

.schedule-generator-disclosure > summary::-webkit-details-marker {
    display: none;
}

.schedule-generator-summary {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 0;
}

.schedule-generator-disclosure[open] .schedule-generator-summary {
    border-bottom: 1px solid var(--line);
}

.schedule-generator-summary-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.disclosure-chevron {
    width: 11px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.schedule-generator-disclosure[open] .disclosure-chevron {
    transform: rotate(225deg);
}

.schedule-generator-body {
    padding: 16px 20px 20px;
}

.schedule-generator-form {
    display: grid;
    gap: 16px;
}

.schedule-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.schedule-rule-grid label {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.schedule-rule-grid span {
    color: var(--text);
    font-weight: 800;
}

.schedule-rule-grid small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.alert.warning {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(176, 96, 0, 0.24);
    border-radius: 8px;
    background: var(--pastel-amber);
    color: var(--amber);
    font-weight: 700;
}

.alert.warning p {
    margin: 0;
}

.alert.danger {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(192, 57, 43, 0.28);
    border-radius: 8px;
    background: var(--pastel-red);
    color: var(--red);
    font-weight: 700;
}

.alert.danger p {
    margin: 0;
}

.dashboard-alert-list {
    margin: 0;
    padding-left: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.dashboard-alert-list li {
    margin: 2px 0;
}

.dashboard-age-chart-frame {
    height: 220px;
}

.schedule-preview-days {
    display: grid;
    gap: 12px;
}

.schedule-load-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.schedule-load-grid article {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.schedule-load-grid article.is-warning {
    border-color: rgba(176, 96, 0, 0.28);
    background: var(--pastel-amber);
}

.schedule-load-grid span,
.schedule-load-grid small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.schedule-load-grid strong {
    color: var(--green-dark);
    font-size: 1.25rem;
}

.schedule-load-grid article.is-warning strong {
    color: var(--amber);
}

.schedule-preview-day {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.schedule-preview-day summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
}

.schedule-preview-day summary strong {
    color: var(--green-dark);
    font-size: 0.86rem;
}

.schedule-need-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 16px 14px;
}

.schedule-need-grid article {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(209, 219, 231, 0.9);
    border-radius: 8px;
    background: rgba(247, 250, 252, 0.72);
}

.schedule-need-grid dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.schedule-need-grid dl div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.schedule-need-grid dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.schedule-need-grid dd {
    margin: 0;
    color: var(--text);
    font-weight: 800;
}

.schedule-day-warning {
    display: grid;
    gap: 6px;
    margin: 0 16px 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--pastel-amber);
    color: var(--amber);
    font-size: 0.86rem;
    font-weight: 800;
}

.schedule-preview-day .table-wrap {
    margin: 0 16px 16px;
}

.schedule-preview-day td small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-weight: 700;
}

.schedule-time-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 8px;
}

.activity-day-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.activity-calendar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.activity-day-tab {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 62px;
    border: 1px solid rgba(141, 153, 174, 0.34);
    border-radius: 999px;
    padding: 8px 7px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 10px 24px rgba(28, 37, 65, 0.07);
    text-align: center;
    cursor: pointer;
}

.activity-day-tab span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.activity-day-tab strong {
    font-size: 0.88rem;
    line-height: 1;
}

.activity-day-tab small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 900;
}

.activity-day-tab:hover {
    border-color: rgba(22, 127, 104, 0.45);
    background: rgba(22, 127, 104, 0.06);
    color: var(--green-dark, #125f4e);
    transition: background var(--motion, 0.15s), border-color var(--motion, 0.15s);
}

.activity-day-tab.is-complete {
    border-color: rgba(22, 127, 104, 0.26);
}

.activity-day-tab.is-partial,
.activity-day-tab.is-empty {
    border-color: rgba(244, 189, 100, 0.34);
}

.activity-day-radio:checked + .activity-day-tab {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
    box-shadow: 0 14px 28px rgba(22, 127, 104, 0.22);
}

.activity-day-radio:checked + .activity-day-tab span,
.activity-day-radio:checked + .activity-day-tab small {
    color: rgba(255, 255, 255, 0.82);
}

.activity-day-card {
    overflow: hidden;
    border: 1px solid rgba(141, 153, 174, 0.28);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
    box-shadow: 0 18px 42px rgba(28, 37, 65, 0.075);
}

.activity-day-card.is-today {
    border-color: rgba(22, 127, 104, 0.34);
    box-shadow: 0 20px 46px rgba(22, 127, 104, 0.12);
}

.activity-day-card.is-complete {
    border-color: rgba(22, 127, 104, 0.36);
}

.activity-day-card.is-partial {
    border-color: rgba(244, 189, 100, 0.42);
}

.activity-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(217, 225, 234, 0.78);
    background: rgba(234, 243, 240, 0.72);
}

.activity-day-header-date {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.activity-day-weekday {
    color: var(--green-dark);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.activity-day-num {
    color: var(--ink);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
}

.activity-day-month {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.activity-day-status,
.activity-period-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}

.activity-day-status.is-filled,
.activity-period-status.is-filled {
    background: rgba(22, 127, 104, 0.12);
    color: var(--green-dark);
}

.activity-period-card .activity-period-status.is-filled {
    background: var(--period-bg);
    color: var(--period-strong);
}

.activity-day-status.is-partial {
    background: rgba(244, 189, 100, 0.16);
    color: var(--amber);
}

.activity-day-status.is-empty,
.activity-period-status.is-empty {
    background: rgba(244, 189, 100, 0.14);
    color: var(--amber);
}

.activity-period-card {
    --period-accent: var(--green);
    --period-strong: var(--green-dark);
    --period-border: rgba(22, 127, 104, 0.28);
    --period-bg: rgba(22, 127, 104, 0.075);
    --period-bg-strong: rgba(234, 243, 240, 0.62);
    --period-shadow: rgba(22, 127, 104, 0.12);
    --period-icon-hover: var(--period-strong);
    border-left: 4px solid var(--period-accent);
    padding: 14px;
    background: linear-gradient(180deg, var(--period-bg), rgba(255, 255, 255, 0.56));
}

.activity-period-card--morning {
    --period-accent: var(--green);
    --period-strong: var(--green-dark);
    --period-border: rgba(22, 127, 104, 0.28);
    --period-bg: rgba(22, 127, 104, 0.075);
    --period-bg-strong: rgba(234, 243, 240, 0.62);
    --period-shadow: rgba(22, 127, 104, 0.12);
    --period-icon-hover: var(--period-strong);
}

.activity-period-card--afternoon {
    --period-accent: #6f9fd2;
    --period-strong: var(--blue);
    --period-border: rgba(49, 95, 159, 0.26);
    --period-bg: rgba(111, 159, 210, 0.12);
    --period-bg-strong: rgba(238, 243, 251, 0.82);
    --period-shadow: rgba(49, 95, 159, 0.12);
    --period-icon-hover: var(--period-strong);
}

.activity-period-card--full_day {
    --period-accent: #9aaa74;
    --period-strong: #5d6f38;
    --period-border: rgba(93, 111, 56, 0.26);
    --period-bg: rgba(154, 170, 116, 0.13);
    --period-bg-strong: rgba(243, 247, 234, 0.84);
    --period-shadow: rgba(93, 111, 56, 0.12);
    --period-icon-hover: var(--period-strong);
}

.activity-period-card + .activity-period-card {
    border-top: 1px solid rgba(217, 225, 234, 0.78);
}

.activity-period-card h3 {
    margin: 0;
    color: var(--period-strong);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.1;
    min-width: 0;
    text-transform: uppercase;
}

.activity-period-heading {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin-bottom: 12px;
}

.activity-period-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.activity-period-icon {
    font-size: 0.9rem;
    flex: 0 0 auto;
    line-height: 1;
}

.activity-period-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
}

.activity-add-slot,
.activity-create-outing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 32px;
    border: 1px solid var(--period-border);
    border-radius: 8px;
    padding: 0 8px;
    background: var(--period-bg);
    color: var(--period-strong);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: normal;
}

.activity-create-outing {
    background: rgba(255, 255, 255, 0.74);
}

.activity-add-slot:hover,
.activity-create-outing:hover {
    background: var(--period-accent);
    border-color: var(--period-accent);
    color: #fff;
    box-shadow: 0 6px 16px var(--period-shadow);
}

.activity-period-card.is-empty {
    background: linear-gradient(180deg, var(--period-bg), rgba(255, 255, 255, 0.5));
}

.activity-period-card.is-filled {
    background: linear-gradient(180deg, var(--period-bg-strong), rgba(255, 255, 255, 0.6));
}

.activity-empty-hint {
    margin-top: 4px;
    padding: 12px 10px;
    border: 1.5px dashed var(--period-border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.74rem;
    font-style: italic;
    text-align: center;
}

.activity-period-card.is-filled .activity-empty-hint {
    display: none;
}

.activity-periods {
    display: grid;
}

.activity-slot-anchor {
    display: none;
}

.activity-chip-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.activity-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    border: 1px solid var(--period-border);
    border-radius: 8px;
    padding: 4px 8px;
    background: var(--period-bg-strong);
    color: var(--period-strong);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.activity-chip:hover {
    background: var(--period-accent);
    color: #fff;
    box-shadow: 0 6px 16px var(--period-shadow);
}

.activity-chip[hidden] {
    display: none;
}

.activity-chip-icon {
    flex: 0 0 auto;
    line-height: 1;
}

.activity-chip-title {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-modal {
    width: min(480px, calc(100% - 32px));
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(28, 37, 65, 0.24);
}

.activity-modal::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.activity-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.activity-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
}

.activity-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
}

.activity-modal-close:hover {
    background: var(--surface-soft);
    color: var(--ink);
}

.activity-modal-body {
    padding: 16px 18px;
}

.activity-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--line);
}

.activity-period-status {
    flex-shrink: 0;
}

.activity-slot-list {
    display: grid;
    gap: 10px;
}

.activity-slot-card {
    display: grid;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: var(--surface-soft);
}

.activity-slot-card[hidden],
.activity-add-slot[hidden] {
    display: none;
}

.form-context-note {
    margin: -4px 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(22, 127, 104, 0.2);
    border-radius: 8px;
    background: rgba(22, 127, 104, 0.075);
    color: var(--green-dark);
    font-weight: 700;
}

.activity-slot-card.is-filled {
    border-color: var(--period-border);
    background: var(--period-bg-strong);
}

.activity-slot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.activity-slot-label {
    color: var(--period-strong);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.activity-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.activity-type-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 900;
    text-align: center;
}

.activity-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.activity-type-option:has(input:checked) {
    border-color: var(--period-accent);
    background: var(--period-bg-strong);
    color: var(--period-strong);
}

.activity-type-option.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.activity-slot-card.is-center .activity-outing-field,
.activity-slot-card.is-outing .activity-center-field {
    display: none;
}

.activity-slot-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 1px solid #f1b9b5;
    border-radius: 999px;
    padding: 0 10px;
    background: var(--pastel-red);
    color: var(--red);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 900;
    cursor: pointer;
}

.activity-slot-remove:hover {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
    box-shadow: 0 8px 18px rgba(180, 35, 24, 0.16);
}

.activity-slot-card input,
.activity-slot-card select,
.activity-slot-card textarea {
    width: 100%;
    border-radius: 8px;
}

.activity-slot-card textarea {
    min-height: 68px;
    resize: vertical;
}

.activity-density-toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.activity-planner[data-density="compact"] .activity-day-header {
    padding: 6px 10px;
}

.activity-planner[data-density="compact"] .activity-day-num {
    font-size: 1.1rem;
}

.activity-planner[data-density="compact"] .activity-period-card {
    padding: 8px;
}

.activity-planner[data-density="compact"] .activity-period-heading {
    gap: 5px;
    margin-bottom: 6px;
}

.activity-planner[data-density="compact"] .activity-slot-list {
    gap: 6px;
}

.activity-planner[data-density="compact"] .activity-chip-list {
    gap: 4px;
}

.activity-planner[data-density="compact"] .activity-chip {
    min-height: 26px;
    font-size: 0.72rem;
}

.activity-planner[data-density="compact"] .activity-slot-card {
    gap: 4px;
    padding: 6px;
}

.activity-planner[data-density="compact"] .activity-type-options {
    gap: 4px;
}

.activity-planner[data-density="compact"] .activity-type-option {
    min-height: 28px;
}

.activity-planner[data-density="compact"] .activity-slot-card textarea {
    min-height: 42px;
}

.activity-planner[data-density="compact"] .activity-day-status,
.activity-planner[data-density="compact"] .activity-period-status {
    min-height: 22px;
    padding: 0 8px;
}

.activity-readonly-notes {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.activity-save-bar {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: min(760px, 100%);
    margin: 18px auto 0;
    border: 1px solid rgba(217, 225, 234, 0.92);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(28, 37, 65, 0.14);
    backdrop-filter: blur(16px);
}

.activity-save-summary {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 900;
}

.activity-save-status,
.attendance-save-status,
.planning-save-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 999px;
    padding: 0 12px;
    background: var(--pastel-green);
    color: var(--green-dark);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.activity-save-status::before,
.attendance-save-status::before,
.planning-save-status::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 999px;
    background: currentColor;
}

.activity-save-status[data-status="pending"],
.activity-save-status[data-status="saving"],
.attendance-save-status[data-status="pending"],
.attendance-save-status[data-status="saving"],
.planning-save-status[data-status="pending"],
.planning-save-status[data-status="saving"] {
    background: var(--pastel-amber);
    color: var(--amber);
}

.activity-save-status[data-status="saving"]::before,
.attendance-save-status[data-status="saving"]::before,
.planning-save-status[data-status="saving"]::before {
    animation: pulse-soft 700ms var(--motion) infinite;
}

.activity-save-status[data-status="error"],
.attendance-save-status[data-status="error"],
.planning-save-status[data-status="error"] {
    background: var(--pastel-red);
    color: var(--red);
}

.activity-dot.departure,
.activity-dot.kid {
    background: var(--amber);
    box-shadow: 0 0 0 4px rgba(166, 95, 0, 0.12);
}

.activity-dot.outing,
.activity-dot.planning,
.activity-dot.schedule {
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(22, 127, 104, 0.12);
}

.activity-dot.animator,
.activity-dot.security {
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.12);
}

.activity-timeline {
    gap: 16px;
}

.activity-timeline li {
    position: relative;
}

.activity-timeline li::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: -16px;
    left: 6px;
    width: 1px;
    background: var(--line);
}

.activity-timeline li:last-child::before {
    display: none;
}

/* ── Premium mobile nav ── */

.bottom-nav {
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 70;
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid rgba(217, 225, 234, 0.9);
    border-radius: 14px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(28, 37, 65, 0.16);
    backdrop-filter: blur(16px);
}

.bottom-nav--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

.bottom-nav a {
    display: grid;
    place-items: center;
    min-height: 46px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-decoration: none;
}

.bottom-nav a.active {
    background: var(--pastel-green);
    color: var(--green-dark);
}

/* ── Finishing touches ── */

.sidebar,
.bottom-nav,
.account-dropdown,
input,
select,
textarea,
.button,
.participant-options,
.participant-option:hover,
.dashboard-row,
.departure-watch-row,
.presence-row,
.week-day,
.print-sheet,
.print-day,
.dashboard-chart-card,
.stats-row {
    background: var(--surface);
    color: var(--ink);
}

.attendance-summary-toolbar .toolbar-actions,
.attendance-summary-stats .summary-stat,
.attendance-summary-grid .summary-dropdown,
.activity-planner-hero,
.activity-day-card,
.activity-slot-card,
.activity-save-bar,
.staffing-card {
    background: linear-gradient(180deg, rgba(21, 28, 35, 0.98), rgba(17, 24, 32, 0.94));
    border-color: rgba(170, 183, 196, 0.18);
}

.attendance-summary-grid .summary-dropdown-body {
    background: rgba(17, 24, 32, 0.72);
    border-top-color: rgba(43, 55, 67, 0.84);
}

.activity-day-header {
    background: rgba(54, 179, 145, 0.12);
}

.activity-period-card--morning {
    --period-accent: #36b391;
    --period-strong: #7de0c6;
    --period-border: rgba(54, 179, 145, 0.3);
    --period-bg: rgba(54, 179, 145, 0.1);
    --period-bg-strong: rgba(54, 179, 145, 0.14);
    --period-shadow: rgba(54, 179, 145, 0.18);
    --period-icon-hover: #0f1419;
}

.activity-period-card--afternoon {
    --period-accent: #8fb7f2;
    --period-strong: #cfe1ff;
    --period-border: rgba(143, 183, 242, 0.32);
    --period-bg: rgba(143, 183, 242, 0.1);
    --period-bg-strong: rgba(143, 183, 242, 0.15);
    --period-shadow: rgba(143, 183, 242, 0.16);
    --period-icon-hover: #0f1419;
}

.activity-period-card--full_day {
    --period-accent: #b6c98a;
    --period-strong: #e2edc3;
    --period-border: rgba(182, 201, 138, 0.32);
    --period-bg: rgba(182, 201, 138, 0.1);
    --period-bg-strong: rgba(182, 201, 138, 0.15);
    --period-shadow: rgba(182, 201, 138, 0.16);
    --period-icon-hover: #0f1419;
}

.activity-slot-card.is-filled,
.activity-period-card.is-filled {
    background: linear-gradient(180deg, var(--period-bg-strong), rgba(17, 24, 32, 0.52));
}

.activity-period-card.is-empty {
    background: linear-gradient(180deg, var(--period-bg), rgba(17, 24, 32, 0.42));
}

.activity-add-slot,
.activity-create-outing {
    border-color: var(--period-border);
    background: var(--period-bg);
    color: var(--period-strong);
}

.activity-add-slot:hover,
.activity-create-outing:hover {
    background: var(--period-accent);
    color: #0f1419;
}

.activity-slot-remove,
.button.danger {
    border-color: rgba(255, 143, 134, 0.32);
    background: rgba(255, 143, 134, 0.12);
    color: var(--red);
}

.activity-slot-remove:hover,
.button.danger:hover {
    border-color: var(--red);
    background: var(--red);
    color: #0f1419;
}

.attendance-save-bar {
    background: rgba(21, 28, 35, 0.92);
}

.button.primary {
    background: var(--brand);
    color: #08130f;
}

.button:not(.primary):not(.danger):not(.disabled):hover,
.account-dropdown a:not(.logout-action):hover,
.account-dropdown button:hover {
    border-color: rgba(54, 179, 145, 0.26);
    background: rgba(54, 179, 145, 0.12);
    color: var(--green-dark);
}

.account-dropdown .logout-action:hover {
    background: rgba(255, 143, 134, 0.12);
    color: var(--red);
}

.pill.info,
.departure-header .summary-count,
.stats-rate {
    background: rgba(143, 183, 242, 0.16);
}

.pill.warning {
    background: rgba(244, 189, 100, 0.16);
}

.pill.success,
.mini-status.yes,
.bottom-nav a.active {
    background: rgba(54, 179, 145, 0.16);
}

html[data-theme="high-contrast"] .button,
html[data-theme="high-contrast"] .content-panel,
html[data-theme="high-contrast"] .stat-card,
html[data-theme="high-contrast"] .dashboard-row,
html[data-theme="high-contrast"] .bottom-nav,
html[data-theme="high-contrast"] .account-dropdown {
    border-width: 2px;
}

@media (max-width: 1180px) {
    .animator-row-actions {
        justify-content: flex-start;
    }

    .planning-groups {
        grid-template-columns: 1fr;
    }

    .mission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attendance-summary-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .app-shell {
        flex-direction: column;
        align-items: stretch;
    }

    .app-main {
        width: 100%;
    }

    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .main-nav {
        flex-direction: row;
        flex-wrap: wrap;
        flex: none;
        width: 100%;
        margin-top: 0;
        overflow: visible;
    }

    .brand {
        flex: 1;
        order: 1;
    }

    .sidebar-footer {
        order: 2;
        padding-top: 0;
        border-top: none;
        flex-direction: row;
        flex-shrink: 0;
    }

    .main-nav {
        order: 3;
    }

    .sidebar-account-info {
        display: none;
    }

    .account-dropdown {
        bottom: auto;
        top: calc(100% + 8px);
        left: auto;
        right: 0;
    }

    .topbar {
        align-items: flex-start;
    }

    .toolbar {
        width: 100%;
        flex-wrap: wrap;
    }

    .toolbar {
        align-items: flex-start;
    }

    .animator-section-header {
        padding-inline: 16px;
    }

    .animator-recovery-summary {
        grid-template-columns: 1fr;
    }

    .animator-row-actions {
        justify-content: flex-end;
    }

    .form-two-cols,
    .checks {
        grid-template-columns: 1fr;
    }

    .kid-age-group-row {
        grid-template-columns: 1fr;
    }

    .sibling-row {
        grid-template-columns: 1fr;
    }

    .registration-weeks-grid {
        grid-template-columns: 1fr;
    }

    /* Date-jump: hide label, stack input and button to avoid overlap */
    .date-jump {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .date-jump label {
        display: none;
    }

    .date-jump .button {
        width: 100%;
    }

    .planning-hero {
        grid-template-columns: 1fr;
    }

    .planning-hero,
    .planning-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .planning-save-status {
        width: 100%;
        margin-right: 0;
        min-height: 42px;
    }

    .day-overview,
    .dashboard-chart-grid,
    .print-two-cols {
        grid-template-columns: 1fr;
    }

    .animator-meta,
    .detail-meta,
    .bus-ticket-proof-list,
    .outing-participant-list {
        grid-template-columns: 1fr;
    }

    /* day-nav stays horizontal, just stretches full width */
    .day-nav {
        width: 100%;
    }

    .day-nav .button,
    .day-nav span.button {
        flex: 1;
        text-align: center;
    }

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

    .planning-group-card {
        padding: 16px;
    }

    .mission-row-card {
        padding: 13px;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .week-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .print-week-grid {
        grid-template-columns: 1fr;
    }

    .stats-table {
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .stats-row {
        min-width: 760px;
    }
}

@media (max-width: 640px) {
    .page {
        width: min(100% - 20px, 1180px);
        padding: 20px 0 40px;
    }

    .content-panel,
    .auth-panel,
    .group-panel {
        border-radius: 8px;
        box-shadow: none;
    }

    .content-panel {
        padding: 16px;
    }

    .section-heading {
        width: 100%;
        margin-bottom: 12px;
    }

    .section-heading h1 {
        font-size: 1.75rem;
    }

    .toolbar-actions {
        width: 100%;
    }

    .toolbar-actions .button {
        flex: 1 1 auto;
        min-height: 46px;
    }

    .form-actions .button {
        flex: 0 0 auto;
        min-height: 46px;
    }

    .attendance-summary-toolbar {
        align-items: stretch;
    }

    .attendance-summary-toolbar .toolbar-actions {
        flex-wrap: wrap;
        box-shadow: none;
    }

    .attendance-summary-day-nav {
        justify-content: stretch;
    }

    .activity-toolbar,
    .activity-planner-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .activity-group-switcher {
        width: 100%;
    }

    .activity-week-nav {
        justify-content: stretch;
    }

    .activity-day-tabs {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 12px;
    }

    .activity-calendar {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .activity-calendar .activity-day-card {
        display: none;
    }

    .activity-planner:has(.activity-day-radio--0:checked) .activity-day-card--0,
    .activity-planner:has(.activity-day-radio--1:checked) .activity-day-card--1,
    .activity-planner:has(.activity-day-radio--2:checked) .activity-day-card--2,
    .activity-planner:has(.activity-day-radio--3:checked) .activity-day-card--3,
    .activity-planner:has(.activity-day-radio--4:checked) .activity-day-card--4 {
        display: block;
    }

    .staffing-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .staffing-card {
        box-shadow: 0 12px 30px rgba(28, 37, 65, 0.07);
    }

    .activity-day-card {
        box-shadow: 0 12px 30px rgba(28, 37, 65, 0.07);
    }

    .activity-period-card {
        padding: 12px;
    }

    .activity-add-slot,
    .activity-create-outing {
        min-height: 32px;
        padding: 0 12px;
        font-size: 0.8rem;
    }

    .activity-slot-card input {
        min-height: 46px;
    }

    .activity-save-bar {
        bottom: 12px;
        align-items: stretch;
        flex-direction: column;
    }

    .activity-save-status {
        width: 100%;
        min-height: 46px;
    }

    .button.small {
        min-height: 44px;
    }

    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .form-actions .button {
        width: 100%;
    }

    .kid-list {
        padding: 0 14px 14px;
    }

    .kid-list li {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 8px;
        min-height: 0;
    }

    .kid-list li .button {
        width: 100%;
    }

    .participant-options {
        max-height: none;
        overflow: visible;
        padding: 8px;
    }

    .outing-field-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .selection-count {
        width: 100%;
        justify-content: center;
        min-height: 36px;
    }

    .participant-option {
        min-height: 48px;
        padding: 10px;
    }

    .participant-option span {
        white-space: normal;
        line-height: 1.25;
    }

    .dashboard-row-tags {
        width: 100%;
    }

    .dashboard-row-tags .button,
    .outing-row .dashboard-row-tags .button {
        width: 100%;
    }

    .outing-kid-chips .kid-chip {
        min-height: 36px;
    }

    .outing-participant-list li {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .account-badge {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }

    .scope-options,
    .outing-scope-options,
    .dashboard-stats,
    .summary-stats,
    .week-grid {
        grid-template-columns: 1fr;
    }

    .attendance-summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .attendance-summary-stats .absent-stat {
        grid-column: 1 / -1;
    }

    .summary-stat {
        min-height: 126px;
    }

    .attendance-summary-stats .summary-stat {
        min-height: 118px;
        padding: 17px 12px 15px;
        box-shadow: 0 12px 30px rgba(28, 37, 65, 0.07);
    }

    .attendance-summary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .attendance-summary-grid .summary-dropdown {
        box-shadow: 0 12px 30px rgba(28, 37, 65, 0.07);
    }

    .attendance-summary-grid .summary-dropdown:hover {
        transform: none;
    }

    .summary-dropdown .summary-panel-header {
        grid-template-columns: minmax(0, 1fr) minmax(76px, 112px) 16px;
        column-gap: 10px;
    }

    .attendance-summary-grid .summary-dropdown .summary-panel-header {
        grid-template-columns: minmax(0, 1fr) minmax(72px, 108px) 16px;
        min-height: 86px;
        column-gap: 10px;
        padding: 14px 14px 14px 16px;
    }

    .summary-count {
        font-size: 1.35rem;
        padding: 5px 10px;
    }

    .attendance-summary-grid .summary-count {
        min-width: 48px;
    }

    .attendance-summary-grid .summary-count-group {
        width: min(100%, 108px);
        min-width: 72px;
    }

    .summary-count-group small {
        max-width: 108px;
        font-size: 0.72rem;
    }

    .attendance-summary-grid .summary-dropdown-body {
        padding: 14px 14px 16px 18px;
    }

    .quick-action-grid {
        grid-template-columns: 1fr;
    }

    .chart-frame {
        height: 220px;
    }

    .day-hero-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .print-sheet {
        padding: 14px;
    }

    .dashboard-row {
        flex-direction: column;
    }

    .dashboard-row-tags {
        justify-content: flex-start;
    }

    .attendance-save-bar {
        bottom: 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
    }

    .attendance-save-bar .attendance-save-status {
        min-width: 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.78rem;
    }

    .page {
        padding-bottom: 96px;
    }
}

/* ── Attendance: tablette (≤ 860px) ── */
@media (max-width: 860px) {
    .participant-options {
        grid-template-columns: 1fr;
    }

    .departure-watch-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .departure-watch-tags {
        justify-content: flex-start;
    }

    .departure-watch-row .button {
        width: 100%;
    }

    .morning-cols {
        grid-template-columns: 1fr 64px 64px 64px 64px minmax(90px, 1fr);
    }

    .afternoon-cols,
    .departure-cols {
        grid-template-columns: 1fr 100px;
    }

    .attendance-col-header {
        font-size: 0.65rem;
        letter-spacing: 0.02em;
    }

    .attendance-block-legend {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .legend-item {
        padding: 5px 8px;
        font-size: 0.72rem;
    }
}

/* ── Attendance: mobile (≤ 640px) — layout carte ── */
@media (max-width: 640px) {
    /* Cache les en-têtes de colonnes (info portée par les chips) */
    .attendance-col-header { display: none; }

    /* Cache la légende (info portée par les chips) */
    .attendance-block-legend { display: none; }

    /* Le header du bloc passe en colonne */
    .attendance-block-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .attendance-panel-top {
        align-items: stretch;
        flex-direction: column;
    }

    .attendance-search-wrap {
        width: 100%;
    }

    /* Chaque ligne devient une carte verticale */
    .attendance-row.morning-cols:not([hidden]),
    .attendance-row.afternoon-cols:not([hidden]),
    .attendance-row.departure-cols:not([hidden]) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Le groupe de checkboxes du matin (4 cases) tient sur une seule ligne */
    .morning-cols .check-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    /* Après-midi/Départs : une seule case, pleine largeur, style pilule d'origine */
    .afternoon-cols .check-row,
    .departure-cols .check-row {
        display: flex;
    }

    .afternoon-cols .check-slot,
    .departure-cols .check-slot {
        flex: 1;
    }

    /* Chips stylisées : chaque case du matin devient un bouton compact */
    .check-slot {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        border: 1.5px solid var(--line);
        background: var(--surface);
        transition: border-color 0.15s, background 0.15s;
    }

    /* Case Après-midi/Départs : garde le grand format pilule horizontal */
    .check-slot--large {
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 24px;
    }

    .check-slot:has(input:checked) {
        border-color: var(--green);
        background: var(--pastel-green);
    }

    .check-slot--disabled {
        background: var(--bg);
        border-color: transparent;
        opacity: 0.4;
    }

    /* Labels visibles dans les chips */
    .check-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1;
        user-select: none;
    }

    /* Case Après-midi/Départs : libellé lisible en taille normale */
    .check-slot--large .check-label {
        font-size: 0.875rem;
        white-space: normal;
    }

    /* Checkbox plus petite, au-dessus du libellé */
    .check-slot input[type="checkbox"],
    .check-slot--large input[type="checkbox"] {
        width: 16px;
        min-height: 16px;
        flex-shrink: 0;
    }

    /* Le champ note prend toute la largeur, légèrement plus bas */
    .attendance-note {
        width: 100%;
    }

    /* Résumé chiffré en colonne sur mobile */
    .attendance-summary {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    /* La notice après-midi reste lisible */
    .attendance-block-notice {
        font-size: 0.8rem;
    }
}

/* ── Responsive fixes ───────────────────────────────────────────── */

/* Dropdown global search : ne jamais dépasser la largeur de l'écran */
.global-search-dropdown {
    width: min(320px, calc(100vw - 20px));
}

/* Search dropdown never overflows viewport */

@media (max-width: 640px) {
    /* ── Recherche globale : cachée sur mobile (topbar trop étroit) ─── */
    .global-search {
        display: none;
    }

    /* ── topbar-end : juste le badge compte sur mobile ─── */
    .topbar-end {
        gap: 0;
    }

    /* ── Outing meta : 1 colonne ─── */
    .outing-meta {
        grid-template-columns: 1fr;
    }

    /* ── Semaine planning : réduire les cellules ─── */
    .dashboard-week-grid {
        gap: 6px;
    }

    .week-day {
        padding: 8px 6px;
        min-width: 0;
    }

    .week-day-label,
    .week-day-date {
        font-size: 0.78rem;
    }

    /* ── Sorties : tag pleine largeur ─── */
    .dashboard-row-tags .button,
    .outing-row .dashboard-row-tags .button {
        flex: 0 0 auto;
        width: auto;
    }

    /* ── Formulaire animateurs : étiquette groupe plus petite ─── */
    .animator-group-tag {
        font-size: 0.65rem;
        padding: 1px 4px;
    }

    /* ── Panel recherche enfants : input pleine largeur ─── */
    /* Le font-size reste à 1rem (16px) : en dessous, iOS/Android
       zooment automatiquement la page au focus du champ. */
    .participant-search {
        font-size: 1rem;
    }

    /* ── Form-help : texte plus petit ─── */
    .form-help {
        font-size: 0.82rem;
    }

    .schedule-rule-grid,
    .schedule-need-grid,
    .schedule-load-grid {
        grid-template-columns: 1fr;
    }

    .schedule-preview-day summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .schedule-time-pair {
        grid-template-columns: 1fr;
    }
}

/* Schedule group filter tabs */
.schedule-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.schedule-controls-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.schedule-group-tabs {
    display: flex;
    gap: 4px;
}

.schedule-group-tabs .button.is-active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

/* Week schedule view */
.week-schedule-panel {
    padding: 0;
    overflow: hidden;
}

.week-schedule-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--line);
}

.week-schedule-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.week-schedule-table th,
.week-schedule-table td {
    padding: 10px 12px;
    border: 1px solid var(--line);
    vertical-align: top;
}

.week-schedule-table thead th {
    background: var(--surface-alt, #f8f9fa);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.week-schedule-table .col-animator {
    width: 190px;
}

.week-schedule-table .col-day {
    text-align: center;
}

.week-day-label {
    display: block;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.week-day-date {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 2px;
}

.cell-animator {
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.cell-day {
    text-align: center;
    font-size: 0.8rem;
}

.cell-day.cell-absent {
    background: var(--pastel-amber);
}

.row-today td {
    background: var(--pastel-green);
}

.week-cell-status {
    display: inline-flex;
    margin-bottom: 4px;
    font-size: 0.75rem;
    min-height: 22px;
    padding: 0 8px;
}

.week-cell-hours {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.week-cell-empty {
    color: var(--muted);
    font-size: 0.85rem;
}

.week-cell-total {
    display: block;
    margin-top: 4px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cell-total {
    background: var(--surface-alt, #f8f9fa);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.week-recovery-lines {
    display: grid;
    gap: 3px;
    justify-items: center;
    margin-top: 6px;
    font-weight: 700;
    line-height: 1.25;
}

.week-recovery-lines small {
    max-width: 100%;
}

@media print {
    :root {
        --bg: #fff;
        --surface: #fff;
        --shadow: none;
    }

    body {
        background: var(--surface);
        color: #111827;
        font-size: 12px;
    }

    .sidebar,
    .app-topbar,
    .print-actions,
    .flash,
    .date-jump,
    .day-nav,
    .no-print {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .page {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .toolbar {
        margin-bottom: 12px;
    }

    .section-heading {
        margin-bottom: 8px;
    }

    .section-heading h1 {
        font-size: 22px;
    }

    .content-panel,
    .print-sheet,
    .print-day {
        border-color: #9ca3af;
        box-shadow: none;
    }

    .print-sheet {
        padding: 0;
        border: 0;
    }

    .print-week-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .print-table th,
    .print-table td {
        padding: 5px 6px;
    }

    .button {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ── Planning page design refinements ── */

/* Refined workload animator list */
.workload-chip {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(170, 183, 196, 0.12) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    padding: 0 8px 0 10px !important;
    min-height: 28px !important;
}

.workload-chip strong {
    background: rgba(54, 179, 145, 0.12) !important;
    color: rgba(54, 179, 145, 0.9) !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 0.7rem !important;
    margin-left: 4px !important;
}

.workload-chip--empty {
    opacity: 0.45 !important;
}

.workload-chip--empty strong {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Translucent accordion group panels */
.planning-group-card {
    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px solid rgba(170, 183, 196, 0.08) !important;
    box-shadow: none !important;
}

.planning-group-header {
    background: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-left: 4px solid var(--muted) !important;
    padding: 14px 16px !important;
}

.planning-group-card--3-5 .planning-group-header {
    border-left-color: rgba(54, 179, 145, 0.8) !important;
    background: rgba(54, 179, 145, 0.04) !important;
    color: rgba(54, 179, 145, 0.95) !important;
}

.planning-group-card--6-12 .planning-group-header {
    border-left-color: rgba(111, 159, 210, 0.8) !important;
    background: rgba(111, 159, 210, 0.04) !important;
    color: rgba(111, 159, 210, 0.95) !important;
}

/* Clean mission row cards */
.mission-row-card {
    border: 1px solid rgba(170, 183, 196, 0.08) !important;
    background: rgba(21, 28, 35, 0.4) !important;
    box-shadow: none !important;
}

/* Spacesaving 2-column checklist layout for animator assignment */
.assignment-box {
    border: 1px solid rgba(170, 183, 196, 0.08) !important;
    background: rgba(21, 28, 35, 0.2) !important;
    padding: 10px !important;
}

.assignment-scroll {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 6px !important;
    max-height: 240px !important;
}

.assignment-box label {
    padding: 5px 8px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px solid rgba(170, 183, 196, 0.06) !important;
    font-size: 0.76rem !important;
    transition: all 0.15s ease;
}

.assignment-box label:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(170, 183, 196, 0.15) !important;
}

.assignment-box label.suggested {
    background: rgba(54, 179, 145, 0.03) !important;
    border-color: rgba(54, 179, 145, 0.12) !important;
}

.assignment-box label:has(input:checked) {
    border-color: rgba(54, 179, 145, 0.4) !important;
    background: rgba(54, 179, 145, 0.08) !important;
    box-shadow: inset 3px 0 0 rgba(54, 179, 145, 0.8) !important;
}

.assignment-extra {
    grid-column: 1 / -1 !important;
    border-top: 1px solid rgba(170, 183, 196, 0.08) !important;
    margin-top: 4px !important;
    padding-top: 8px !important;
}

.assignment-extra-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 6px !important;
    padding-top: 6px !important;
}

.assignment-extra summary {
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 0.74rem !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ── Mobile Check-in (Pointage) Optimization ── */
@media (max-width: 820px) {
    /* Compact Group Switcher form */
    .scope-options {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    
    .scope-option span {
        font-size: 0.72rem !important;
        padding: 0 4px !important;
        min-height: 36px !important;
        text-align: center !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
    }
    
    .attendance-scope-form {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .attendance-scope-panel {
        margin-bottom: 16px !important;
    }

    /* Compact Date/Week hero header on mobile */
    .schedule-week-hero {
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
    }

    .schedule-week-hero h2 {
        font-size: 1.1rem !important;
    }

    .activity-week-nav {
        margin-bottom: 10px !important;
    }
    
    .activity-week-nav .button {
        font-size: 0.76rem !important;
        min-height: 32px !important;
    }

    /* Compact Kid Rows */
    .attendance-row.morning-cols:not([hidden]),
    .attendance-row.afternoon-cols:not([hidden]),
    .attendance-row.departure-cols:not([hidden]) {
        padding: 10px 12px !important;
        border: 1px solid rgba(170, 183, 196, 0.1) !important;
        background: rgba(21, 28, 35, 0.3) !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    .attendance-name {
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    
    .picnic-toggle {
        font-size: 0.74rem !important;
    }

    /* Compact check row grid for morning (4 squares) */
    .morning-cols .check-row {
        gap: 6px !important;
    }

    .check-slot {
        min-height: 34px !important;
        padding: 4px 2px !important;
        border-radius: 6px !important;
        border-width: 1px !important;
    }

    .check-label {
        font-size: 0.64rem !important;
        font-weight: 600 !important;
    }

    .check-slot input[type="checkbox"] {
        width: 15px !important;
        min-height: 15px !important;
    }

    /* Compact note input field */
    .attendance-note {
        font-size: 0.76rem !important;
        min-height: 28px !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        margin-top: 2px !important;
        background: rgba(21, 28, 35, 0.5) !important;
        border-color: rgba(170, 183, 196, 0.08) !important;
    }
}