/* ═══════════════════════════════════════════
   MATIZI — Design System
   ═══════════════════════════════════════════ */

:root {
    --primary:        #b41414;
    --primary-dark:   #8f1010;
    --primary-light:  #fef2f2;
    --accent:         #f59e0b;
    --success:        #10b981;
    --danger:         #ef4444;
    --info:           #3b82f6;
    --bg-app:         #f1f5f9;
    --bg-card:        #ffffff;
    --text-main:      #1e293b;
    --text-muted:     #64748b;
    --border:         #e2e8f0;
    --radius-card:    0.875rem;
    --radius-btn:     0.5rem;
    /* Aliases used in cal/ef/rf components */
    --surface:        #ffffff;
    --radius:         0.75rem;
    --text:           #1e293b;
    --text-secondary: #64748b;
    --shadow-card:    0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
    --shadow-hover:   0 4px 6px rgba(0,0,0,.07), 0 10px 28px rgba(0,0,0,.12);
    --transition:     0.18s ease;
    --navbar-h:       60px;
}

/* ── Bootstrap overrides ─────────────────── */
.bg-primary  { background-color: var(--primary)  !important; }
.btn-primary { background-color: var(--primary); border-color: var(--primary); border-radius: var(--radius-btn); font-weight: 500; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); border-radius: var(--radius-btn); font-weight: 500; }
.btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: #fff; }
.btn-outline-secondary { border-radius: var(--radius-btn); font-weight: 500; }
.btn { border-radius: var(--radius-btn); }
.text-primary  { color: var(--primary)  !important; }
.badge.bg-primary { background-color: var(--primary) !important; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(180,20,20,.15); }

/* ── Base ────────────────────────────────── */
body {
    background-color: var(--bg-app);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--text-main);
    font-size: 0.9375rem;
}

/* ── Navbar (branded design) ──────────────── */
.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--primary);
    border-bottom: none;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.app-navbar-inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.25rem;
    gap: .5rem;
    min-height: var(--navbar-h);
    padding: .5rem 1.25rem;
}
.app-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 1rem;
}
.app-brand-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
}
/* Mobile nav backdrop */
.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1029;
    cursor: pointer;
}
.nav-backdrop.show { display: block; }

.app-nav-toggle {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .5rem;
    padding: .35rem .6rem;
    font-size: 1.25rem;
    color: #fff;
    margin-left: auto;
    cursor: pointer;
    transition: background var(--transition);
}
.app-nav-toggle:hover { background: rgba(255,255,255,.2); }
.app-nav-links {
    display: flex;
    align-items: center;
    gap: .125rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.app-nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.app-nav-link i { font-size: 1rem; }
.app-nav-link:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.app-nav-link.active {
    background: rgba(255,255,255,.2);
    color: #fff;
    font-weight: 600;
}

/* ── Navbar submenu (Gestion) ──────────── */
.app-nav-submenu { position: relative; }
.app-nav-chevron { font-size: .65rem; margin-left: .15rem; transition: transform .2s; }
.app-nav-submenu.open .app-nav-chevron { transform: rotate(180deg); }
.app-nav-submenu-panel {
    display: none;
    position: fixed;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: .35rem;
    list-style: none;
    margin: 0;
    z-index: 1050;
}
.app-nav-submenu.open .app-nav-submenu-panel { display: block; }
.app-nav-submenu-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.app-nav-submenu-link:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; }
.app-nav-submenu-link.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.app-nav-submenu-link i { font-size: 1rem; }

/* Mobile: submenu is inline accordion */
@media (max-width: 991.98px) {
    .app-nav-submenu-panel {
        position: static;
        border: none;
        box-shadow: none;
        padding: 0 0 0 1.25rem;
        min-width: 0;
        background: transparent;
    }
    .app-nav-submenu.open .app-nav-submenu-panel { display: block; }
    .app-nav-submenu-link {
        padding: .55rem .9rem;
        color: rgba(255,255,255,.8);
    }
    .app-nav-submenu-link:hover {
        background: rgba(255,255,255,.15);
        color: #fff;
    }
}

.app-nav-right {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
}
.app-nav-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: .5rem;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    font-size: 1.15rem;
}
.app-nav-bell:hover { background: rgba(255,255,255,.15); color: #fff; }
.app-nav-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    background: #fbbf24;
    color: #1e293b;
    border-radius: 8px;
    font-size: .65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
    border: 2px solid var(--primary);
}
.app-nav-badge-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: #f59e0b;
    color: #fff;
    border-radius: 9px;
    font-size: .65rem;
    font-weight: 700;
    padding: 0 4px;
    margin-left: .35rem;
}

/* Registration page */
/* ── Absence calendar modal ──────────────────────────────────────── */
.abs-calendar-inline {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}
.abs-calendar-inline .flatpickr-calendar {
    box-shadow: none;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-card);
    font-family: inherit;
}
.abs-calendar-inline .flatpickr-months {
    padding: .25rem 0;
}
.abs-calendar-inline .flatpickr-months .flatpickr-month {
    background: var(--primary);
    color: #fff;
    border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
    height: 48px;
}
/* Arrow buttons — circular pill style */
.abs-calendar-inline .flatpickr-months .flatpickr-prev-month,
.abs-calendar-inline .flatpickr-months .flatpickr-next-month {
    width: 30px;
    height: 30px;
    top: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    padding: 0;
    transition: background .15s ease;
}
.abs-calendar-inline .flatpickr-months .flatpickr-prev-month:hover,
.abs-calendar-inline .flatpickr-months .flatpickr-next-month:hover {
    background: rgba(255,255,255,.35);
    fill: #fff;
}
.abs-calendar-inline .flatpickr-months .flatpickr-prev-month svg,
.abs-calendar-inline .flatpickr-months .flatpickr-next-month svg {
    fill: #fff;
    width: 13px;
    height: 13px;
}
.abs-calendar-inline .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--primary);
    color: #fff;
}
.abs-calendar-inline .flatpickr-current-month input.cur-year { color: #fff; }
.abs-calendar-inline span.flatpickr-weekday { color: var(--primary); font-weight: 600; }
.abs-calendar-inline .flatpickr-days { padding: .25rem 0; }
.abs-calendar-inline .flatpickr-day.selected,
.abs-calendar-inline .flatpickr-day.startRange,
.abs-calendar-inline .flatpickr-day.endRange {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.abs-calendar-inline .flatpickr-day.inRange {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
    box-shadow: -5px 0 0 var(--primary-light), 5px 0 0 var(--primary-light);
}
.abs-calendar-inline .flatpickr-day:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}
.abs-calendar-inline .flatpickr-day.flatpickr-disabled { opacity: .3; }
/* Separator between calendar and period summary */
.abs-section-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 .75rem;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.abs-section-divider::before,
.abs-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.abs-date-display {
    background: var(--bg-app);
    border-radius: var(--radius-card);
    padding: 1rem 1.25rem;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #cbd5e1;
}
.abs-date-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .625rem;
    padding: .5rem 1rem;
    min-width: 140px;
}
.abs-date-pill-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: .05em; margin-bottom: .15rem; }
.abs-date-pill-value { font-size: .875rem; font-weight: 600; color: var(--primary); }

/* ── Absence list cards ────────────────────────────────────────── */
.abs-list {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
.abs-card {
    display: flex;
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    overflow: hidden;
    transition: box-shadow .15s ease;
}
.abs-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.abs-strip {
    width: 5px;
    flex-shrink: 0;
}
.abs-strip-future  { background: var(--primary); }
.abs-strip-ongoing { background: #f59e0b; }
.abs-strip-past    { background: #94a3b8; }
.abs-card-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.125rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.abs-card-main { flex: 1; min-width: 0; }
.abs-card-name {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: .35rem;
    font-size: .9rem;
}
.abs-period {
    font-size: .9rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .3rem;
}
.abs-reason {
    font-size: .83rem;
    color: var(--text-muted);
    margin-top: .25rem;
}
.abs-card-actions {
    display: flex;
    gap: .4rem;
    flex-shrink: 0;
    align-items: center;
}
.abs-empty {
    text-align: center;
    padding: 4rem 1rem;
}
.abs-empty-icon {
    font-size: 3.5rem;
    color: #cbd5e1;
}

/* ── Absence filter bar ─────────────────────────────────────────── */
.abs-filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.abs-filter-group {
    display: flex;
    background: #f1f5f9;
    border-radius: 2rem;
    padding: 3px;
    gap: 2px;
}
.abs-filter-btn {
    border: none;
    background: transparent;
    border-radius: 2rem;
    padding: .35rem .9rem;
    font-size: .83rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.abs-filter-btn:hover {
    background: #e2e8f0;
    color: var(--text-main);
}
.abs-filter-btn.active {
    background: #fff;
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.abs-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}
.abs-search-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .9rem;
    pointer-events: none;
}
.abs-search-input {
    width: 100%;
    padding: .4rem .75rem .4rem 2.1rem;
    border: 1px solid #e2e8f0;
    border-radius: 2rem;
    font-size: .85rem;
    background: #fff;
    color: var(--text-main);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.abs-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(180,20,20,.12);
}

/* ── Absence modal artist picker ────────────────────────────────── */
.abs-artist-results {
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    margin-top: .25rem;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
}
.abs-artist-results:empty { display: none; }
.abs-artist-item {
    padding: .5rem .75rem;
    font-size: .875rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background .1s;
}
.abs-artist-item:last-child { border-bottom: none; }
.abs-artist-item:hover { background: var(--primary-light); color: var(--primary); }
.abs-artist-selected { font-size: .875rem; }

.reg-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.app-nav-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    border-radius: .5rem;
    text-decoration: none;
    color: #fff;
    transition: background var(--transition);
    cursor: pointer;
}
.app-nav-user:hover { background: rgba(255,255,255,.15); text-decoration: none; }
.app-nav-user::after { display: none !important; }
.app-nav-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 2px solid rgba(255,255,255,.4);
}
.app-nav-username {
    font-size: .875rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-dropdown {
    border: 1px solid var(--border) !important;
    border-radius: .75rem !important;
    box-shadow: var(--shadow-hover) !important;
    min-width: 200px;
    padding: .25rem !important;
}
.app-dropdown .dropdown-item {
    border-radius: .5rem;
    font-size: .875rem;
    padding: .5rem .75rem;
}
.app-dropdown .dropdown-item:hover { background: var(--primary-light); color: var(--primary); }
.app-dropdown .dropdown-item:active { background: var(--primary); color: #fff; }

/* Collapse override: always visible on desktop, overlay panel on mobile */
#navbarMain.navbar-collapse { flex: 1; display: flex !important; align-items: center; }
@media (max-width: 991.98px) {
    #navbarMain.navbar-collapse {
        position: absolute;
        top: var(--navbar-h);
        left: 0;
        right: 0;
        background: var(--primary-dark);
        border-bottom: none;
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        flex-direction: column;
        align-items: stretch;
        padding: .5rem 1rem;
        max-height: calc(100vh - var(--navbar-h));
        overflow-y: auto;
        z-index: 1031;
    }
    #navbarMain.navbar-collapse.collapse:not(.show) { display: none !important; }
    #navbarMain.navbar-collapse.collapsing { display: block !important; overflow: hidden; }
    .app-nav-links {
        flex-direction: column;
        align-items: stretch;
        padding: .25rem 0;
        width: 100%;
        gap: .125rem;
        overflow-x: visible;
    }
    .app-nav-link { width: 100%; padding: .65rem .9rem; }
}

/* ── Auth pages (auth-*) ─────────────────── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    padding: 1.5rem;
    margin: -1.75rem -1.5rem;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.auth-card-wide { max-width: 500px; }
.auth-header {
    background: var(--primary-dark);
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    color: #fff;
}
.auth-logo {
    height: 48px;
    width: auto;
    margin-bottom: .75rem;
}
.auth-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .25rem;
}
.auth-subtitle {
    font-size: .85rem;
    opacity: .8;
}
.auth-body {
    background: #fff;
    padding: 1.75rem 2rem 1.5rem;
}
.auth-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .35rem;
}
.auth-input {
    border-radius: .5rem;
    border: 1px solid var(--border);
    padding: .55rem .75rem;
    font-size: .9rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.auth-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(180,20,20,.12);
}
.auth-btn-submit {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding: .65rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    transition: background var(--transition), transform .1s;
}
.auth-btn-submit:hover { background: var(--primary-dark); color: #fff; }
.auth-btn-submit:active { transform: scale(.98); }
.auth-btn-submit:disabled { opacity: .7; }
.auth-footer {
    text-align: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.auth-link {
    color: var(--text-muted);
    font-size: .85rem;
    text-decoration: none;
    transition: color var(--transition);
}
.auth-link:hover { color: var(--primary); }
.auth-link strong { color: var(--primary); }

@media (max-width: 575.98px) {
    .auth-page { padding: 0; align-items: stretch; }
    .auth-card { max-width: none; border-radius: 0; min-height: 100vh; display: flex; flex-direction: column; }
    .auth-card-wide { max-width: none; }
    .auth-body { flex: 1; }
}

/* ── Page layout ─────────────────────────── */
#main-content {
    min-height: calc(100vh - var(--navbar-h));
    padding: 1.75rem 1.5rem;
    max-width: 1440px;
    margin: 0 auto;
}
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.page-title .page-title-icon {
    width: 2rem; height: 2rem;
    border-radius: .5rem;
    background: var(--primary-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}

/* ── Cards ───────────────────────────────── */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    background: var(--bg-card);
    transition: transform var(--transition), box-shadow var(--transition);
}
.card-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
    padding: 1rem 1.25rem;
    font-weight: 600;
}
.card-body { padding: 1.25rem; }
a.card:hover, .card.clickable:hover, .event-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    text-decoration: none;
}

/* ── KPI Metric cards ────────────────────── */
.kpi-card {
    border: none !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden;
    position: relative;
    color: #fff;
    transition: transform var(--transition), box-shadow var(--transition);
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover) !important;
    color: #fff;
}
.kpi-card .kpi-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.kpi-card .kpi-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.5px;
}
.kpi-card .kpi-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .85;
    margin-bottom: .25rem;
}
.kpi-card .kpi-sub {
    font-size: .75rem;
    opacity: .75;
    margin-top: .25rem;
}
.kpi-card .kpi-icon {
    font-size: 2.5rem;
    opacity: .25;
    flex-shrink: 0;
}
.kpi-card .kpi-footer {
    background: rgba(0,0,0,.12);
    padding: .5rem 1.5rem;
    font-size: .78rem;
    opacity: .9;
}
.kpi-card .kpi-footer span { opacity: .8; }
.kpi-purple { background: linear-gradient(135deg, #b41414 0%, #8f1010 100%); }
.kpi-green  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.kpi-blue   { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.kpi-orange { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.kpi-amber  { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.kpi-red    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.kpi-indigo { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }

/* ── Quick-action buttons ────────────────── */
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin-bottom: 1.75rem;
}
.btn-quick {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    border-radius: .625rem;
    font-size: .85rem;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-main);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}
.btn-quick:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(180,20,20,.15);
    text-decoration: none;
}
.btn-quick-parent {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #059669;
}
.btn-quick-parent:hover {
    background: #059669;
    border-color: #059669;
    color: #fff;
    box-shadow: 0 3px 10px rgba(5,150,105,.25);
}

/* ── Bannière Vue parent (dashboard responsable) ─── */
.dash-parent-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #6ee7b7;
    border-left: 4px solid #10b981;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.dash-parent-banner-icon {
    width: 44px;
    height: 44px;
    background: #10b981;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.dash-parent-banner-body {
    flex: 1;
    min-width: 0;
}
.dash-parent-banner-title {
    font-weight: 700;
    font-size: .95rem;
    color: #065f46;
}
.dash-parent-banner-sub {
    font-size: .8rem;
    color: #047857;
    margin-top: .1rem;
}
.dash-parent-banner-btn {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.1rem;
    background: #10b981;
    color: #fff;
    border-radius: .55rem;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.dash-parent-banner-btn:hover {
    background: #059669;
    color: #fff;
    text-decoration: none;
}

/* ── Filter button-group ─────────────────── */
.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    align-items: center;
}
.btn-filter {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    border-radius: 2rem;
    padding: .35rem .9rem;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-block;
}
.btn-filter:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
    text-decoration: none;
}
.btn-filter.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}

/* ── Stats cards (legacy compat) ─────────── */
.stats-card { border-left: 4px solid var(--primary); }
.stats-card .stats-number { font-size: 2rem; font-weight: bold; color: var(--primary); }

/* ── Tables ──────────────────────────────── */
.table th {
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    color: var(--text-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background: #f8f5ff; }

/* Calendar */
.calendar-table {
    table-layout: fixed;
}
.calendar-table th {
    text-align: center;
    padding: 0.5rem;
    background-color: var(--primary);
    color: white;
    border: none;
}
.calendar-table td {
    height: 80px;
    vertical-align: top;
    padding: 4px;
    border: 1px solid #dee2e6;
}
.calendar-table td.today {
    background-color: #fff3cd;
}
.calendar-table td.other-month {
    opacity: 0.3;
}
.calendar-event {
    font-size: 0.7rem;
    padding: 1px 4px;
    margin-bottom: 2px;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Badges ──────────────────────────────── */
.badge {
    font-weight: 600;
    padding: .3em .7em;
    border-radius: .375rem;
    font-size: .75rem;
}

/* ── Forms ───────────────────────────────── */
.form-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .35rem;
}
.form-control, .form-select {
    border-color: var(--border);
    border-radius: .5rem;
    font-size: .9375rem;
}

/* Ticket display */
.ticket-display {
    border: 2px dashed var(--primary);
    border-radius: 1rem;
    padding: 2rem;
    background: white;
    position: relative;
}
.ticket-display::before,
.ticket-display::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--bg-light);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}
.ticket-display::before { left: -15px; }
.ticket-display::after { right: -15px; }
.ticket-token {
    font-family: monospace;
    font-size: 0.9rem;
    background: #f1f1f1;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    word-break: break-all;
}

/* Stepper for ticketing */
.stepper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.stepper .step {
    display: flex;
    align-items: center;
    color: #adb5bd;
}
.stepper .step.active {
    color: var(--primary);
    font-weight: bold;
}
.stepper .step.completed {
    color: #198754;
}
.stepper .step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    margin-right: 0.5rem;
    font-size: 0.85rem;
}
.stepper .step.active .step-number,
.stepper .step.completed .step-number {
    background-color: currentColor;
    color: white;
}
.stepper .step-divider {
    width: 40px;
    height: 2px;
    background: #dee2e6;
    margin: 0 0.5rem;
    align-self: center;
}

/* ── Notification panel (ntf-*) ──────────── */
.ntf-panel-header {
    background: var(--primary);
    color: #fff;
    border-bottom: none;
    padding: 1rem 1.25rem;
}
.ntf-panel-header .offcanvas-title { font-size: 1rem; font-weight: 700; color: #fff; }

/* Toolbar: filters + actions */
.ntf-toolbar {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.ntf-filters {
    display: flex;
    gap: 0;
    padding: .6rem .75rem .4rem;
    border-bottom: 1px solid var(--border);
}
.ntf-filter-btn {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 2rem;
    padding: .35rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    transition: background .15s, color .15s;
}
.ntf-filter-btn:hover { background: var(--primary-light); color: var(--primary); }
.ntf-filter-btn.is-active { background: var(--primary-light); color: var(--primary); }
.ntf-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: var(--border);
    color: var(--text-muted);
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 700;
    padding: 0 4px;
}
.ntf-count-unread { background: var(--primary); color: #fff; }

.ntf-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    padding: .45rem .75rem;
    min-height: 2.6rem;
}
.ntf-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: .5rem;
    padding: .3rem .65rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
}
.ntf-action-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.ntf-action-delete { color: #dc2626; border-color: #fecaca; }
.ntf-action-delete:hover { background: #fef2f2; border-color: #dc2626; color: #dc2626; }
.ntf-action-cancel:hover { color: var(--text-main); background: #f1f5f9; }

/* List */
.ntf-list {
    overflow-y: auto;
    flex: 1;
}
.ntf-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--text-muted);
    font-size: .875rem;
    padding: 2.5rem 1rem;
}
.ntf-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ntf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: .875rem;
    gap: .75rem;
}
.ntf-empty-icon { font-size: 2.5rem; opacity: .35; }

/* Notification item */
.ntf-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem .9rem .75rem .75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    transition: background .12s;
    position: relative;
}
.ntf-item:last-child { border-bottom: none; }
.ntf-item:hover { background: #faf9ff; }
.ntf-item-unread { background: #f8f5ff; border-left: 3px solid var(--primary); }
.ntf-item-unread:hover { background: #f3eefc; }
.ntf-item-selected { background: #eff6ff !important; }

/* Checkbox */
.ntf-checkbox-wrap {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: .15rem;
    cursor: pointer;
    position: relative;
}
.ntf-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.ntf-checkbox-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    transition: all .12s;
}
.ntf-checkbox:checked + .ntf-checkbox-ui {
    background: var(--primary);
    border-color: var(--primary);
}
.ntf-checkbox:checked + .ntf-checkbox-ui::after {
    content: '';
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
    display: block;
}

/* Item body */
.ntf-item-body { flex: 1; min-width: 0; }
.ntf-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .3rem;
}
.ntf-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.ntf-item-date {
    font-size: .73rem;
    color: var(--text-muted);
    margin-left: auto;
}
.ntf-item-msg {
    font-size: .855rem;
    color: var(--text-main);
    margin: 0;
    line-height: 1.45;
}
.ntf-item-unread .ntf-item-msg { font-weight: 500; }

/* Item action buttons */
.ntf-item-btns {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .12s;
}
.ntf-item:hover .ntf-item-btns { opacity: 1; }
.ntf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: .4rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    font-size: .8rem;
    transition: all .12s;
    padding: 0;
}
.ntf-btn-read:hover { background: #f0fdf4; border-color: #22c55e; color: #16a34a; }
.ntf-btn-del:hover  { background: #fef2f2; border-color: #dc2626; color: #dc2626; }

/* Legacy compat */
.notification-bell { position: relative; cursor: pointer; }
.notification-bell .badge {
    position: absolute;
    top: -5px;
    right: -8px;
    font-size: 0.65rem;
}

/* ── Scanner (sc-*) ─────────────────────── */
.sc-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* Header (event selection step) */
.sc-header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.sc-header-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.sc-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0;
}
.sc-subtitle {
    font-size: .88rem;
    color: #6b7280;
    margin: .35rem 0 0;
}

/* Panel */
.sc-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.sc-panel-header {
    display: flex;
    align-items: center;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}
.sc-panel-title {
    font-weight: 700;
    font-size: .9rem;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.sc-panel-title i { color: var(--primary); }
.sc-panel-body { padding: 0; max-height: 500px; overflow-y: auto; }

/* Event rows */
.sc-event-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.25rem;
    width: 100%;
    border: none;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}
.sc-event-row:hover { background: #f9fafb; }
.sc-event-row + .sc-event-row { border-top: 1px solid #f3f4f6; }
.sc-event-date {
    width: 48px;
    height: 48px;
    border-radius: .625rem;
    background: var(--primary-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sc-event-day {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary);
}
.sc-event-month {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: .04em;
}
.sc-event-info { flex: 1; min-width: 0; }
.sc-event-title {
    font-weight: 600;
    font-size: .9rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .78rem;
    color: #9ca3af;
    margin-top: .15rem;
}
.sc-event-meta i { margin-right: .1rem; }
.sc-event-chevron {
    color: #d1d5db;
    font-size: .85rem;
    flex-shrink: 0;
}
.sc-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #9ca3af;
    font-size: .88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* Top bar (scanner step) */
.sc-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-card);
}
/* Compact topbar used on rep selection step */
.sc-topbar-compact {
    padding: .65rem 1rem;
    margin-bottom: 1rem;
}
.sc-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
    font-size: 1rem;
}
.sc-back:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.sc-topbar-info { flex: 1; min-width: 0; }
.sc-topbar-title {
    font-weight: 700;
    font-size: .92rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-topbar-meta {
    font-size: .75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats */
.sc-stats {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
}
.sc-stat {
    flex: 1;
    text-align: center;
    padding: .75rem .5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .625rem;
}
.sc-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1;
}
.sc-stat-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #9ca3af;
    letter-spacing: .04em;
    margin-top: .25rem;
}
.sc-stat-success .sc-stat-value { color: #10b981; }
.sc-stat-warning .sc-stat-value { color: #f59e0b; }
.sc-progress {
    position: relative;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    margin-bottom: 1.25rem;
    overflow: visible;
}
.sc-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 4px;
    transition: width .6s ease;
}
.sc-progress-label {
    position: absolute;
    right: 0;
    top: -1.3rem;
    font-size: .7rem;
    font-weight: 700;
    color: #059669;
}

/* Mode tabs */
.sc-mode-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}
.sc-mode-tab {
    flex: 1;
    padding: .6rem;
    border: 1px solid #e5e7eb;
    border-radius: .625rem;
    background: #fff;
    color: #6b7280;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.sc-mode-tab:hover { border-color: var(--primary); color: var(--primary); }
.sc-mode-active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

/* Camera */
.sc-camera-wrapper {
    position: relative;
    background: #111827;
    border-radius: .75rem;
    overflow: hidden;
    margin-bottom: .75rem;
    min-height: 280px;
}
.sc-qr-reader {
    width: 100%;
    border-radius: .75rem;
    overflow: hidden;
}
.sc-qr-reader video { border-radius: .75rem; }
.sc-camera-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #9ca3af;
    font-size: .88rem;
    cursor: pointer;
    background: rgba(17,24,39,.85);
    z-index: 2;
}
.sc-camera-hint i { font-size: 2.5rem; }
.sc-btn-camera {
    width: 100%;
    padding: .65rem;
    border-radius: .625rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-bottom: .75rem;
}
.sc-btn-camera:hover { border-color: var(--primary); color: var(--primary); }
.sc-btn-camera-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.sc-btn-camera-active:hover { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); }

/* Manual input */
.sc-manual-input {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
}
.sc-input {
    flex: 1;
    padding: .65rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: .625rem;
    font-size: .9rem;
    color: #1f2937;
    background: #fff;
    transition: border-color .15s;
}
.sc-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(180,20,20,.1); }
.sc-btn-validate {
    padding: .65rem 1.25rem;
    border-radius: .625rem;
    border: none;
    background: #10b981;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.sc-btn-validate:hover { background: #059669; }

/* Result cards */
.sc-result-area { min-height: 0; }
.sc-result {
    padding: 1.25rem;
    border-radius: .75rem;
    text-align: center;
    margin-bottom: .75rem;
    animation: scSlideIn .3s ease;
}
@keyframes scSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.sc-result-loading {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: .88rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-result-success {
    background: #ecfdf5;
    border: 2px solid #10b981;
}
.sc-result-warning {
    background: #fffbeb;
    border: 2px solid #f59e0b;
}
.sc-result-danger {
    background: #fef2f2;
    border: 2px solid var(--primary);
}
.sc-result-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: .5rem;
}
.sc-result-success .sc-result-icon { color: #10b981; }
.sc-result-warning .sc-result-icon { color: #f59e0b; }
.sc-result-danger .sc-result-icon { color: var(--primary); }
.sc-result-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .35rem;
}
.sc-result-success .sc-result-title { color: #065f46; }
.sc-result-warning .sc-result-title { color: #92400e; }
.sc-result-danger .sc-result-title { color: #991b1b; }
.sc-result-message {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .25rem;
}
.sc-result-details {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(0,0,0,.08);
    text-align: left;
}
.sc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem 0;
    font-size: .85rem;
}
.sc-result-label {
    color: #6b7280;
    font-size: .8rem;
}
.sc-result-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .6rem;
    border-radius: 1rem;
    font-size: .78rem;
    font-weight: 600;
}
.sc-badge-adult { background: #dbeafe; color: #1d4ed8; }
.sc-badge-child { background: #fce7f3; color: #be185d; }

/* History */
.sc-history-section {
    margin-top: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.sc-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: .85rem;
    font-weight: 700;
    color: #374151;
}
.sc-history-header i { color: var(--primary); margin-right: .3rem; }
.sc-history-count {
    background: #f3f4f6;
    color: #6b7280;
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 1rem;
    min-width: 1.5rem;
    text-align: center;
}
.sc-history-list {
    max-height: 260px;
    overflow-y: auto;
}
.sc-history-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem 1.25rem;
    font-size: .83rem;
    transition: opacity .3s, transform .3s;
}
.sc-history-row + .sc-history-row { border-top: 1px solid #f3f4f6; }
.sc-history-enter {
    opacity: 0;
    transform: translateX(-10px);
}
.sc-history-row i { font-size: 1rem; flex-shrink: 0; }
.sc-history-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.sc-history-name {
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-history-status {
    font-size: .73rem;
    color: #9ca3af;
}
.sc-history-time {
    font-size: .73rem;
    color: #9ca3af;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Scanner responsive */
@media (max-width: 600px) {
    .sc-page { padding: 1rem .75rem 2rem; }
    .sc-stats { gap: .35rem; }
    .sc-stat { padding: .5rem .25rem; }
    .sc-stat-value { font-size: 1.25rem; }
    .sc-manual-input { flex-direction: column; }
    .sc-btn-validate { justify-content: center; }
}

/* Alerts */
.alert {
    border-radius: 0.5rem;
    max-width: 500px;
}

/* Loading */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* ═══ Artists page (art-*) ═══════════════ */

/* KPI cards */
.art-kpi { border: none; overflow: hidden; }
.art-kpi-body {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.1rem 1.25rem; gap: 1rem;
}
.art-kpi-value { font-size: 2rem; font-weight: 800; color: var(--text-main); line-height: 1; }
.art-kpi-label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-top: .2rem; }
.art-kpi-icon {
    width: 48px; height: 48px; border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; flex-shrink: 0;
}
.art-kpi-icon-all  { background: var(--primary-light); color: var(--primary); }
.art-kpi-icon-prod { background: #dbeafe; color: #2563eb; }
.art-kpi-icon-acad { background: #d1fae5; color: #059669; }

/* Filter count pill */
.art-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; border-radius: 10px;
    font-size: .7rem; font-weight: 700; padding: 0 5px;
    background: rgba(0,0,0,.08); margin-left: .3rem;
}
.abs-filter-btn.active .art-filter-count { background: rgba(255,255,255,.25); }

/* Artist card list */
.art-list { display: flex; flex-direction: column; gap: .5rem; }
.art-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    transition: box-shadow var(--transition), transform var(--transition);
}
.art-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}
.art-card-body {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.15rem; gap: 1rem;
    flex-wrap: wrap;
}
.art-card-left { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 1; }
.art-card-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* Avatar */
.art-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; flex-shrink: 0;
    text-transform: uppercase; letter-spacing: .5px; color: #fff;
}
.art-avatar-prod { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.art-avatar-acad { background: linear-gradient(135deg, #10b981, #059669); }

/* Info */
.art-info { min-width: 0; }
.art-name { font-weight: 600; font-size: .9375rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-email { font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: .3rem; }
.art-email i { font-size: .75rem; }

/* Specialty tags */
.art-specs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.art-spec-tag {
    display: inline-block;
    padding: .15rem .55rem; border-radius: 2rem;
    font-size: .7rem; font-weight: 600;
    background: var(--primary-light); color: var(--primary);
    border: 1px solid #fecaca;
}

/* Role badge */
.art-role-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .7rem; border-radius: 2rem;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.art-role-prod { background: #dbeafe; color: #1e40af; }
.art-role-acad { background: #d1fae5; color: #065f46; }

/* ── Users Admin (usr-*) ────────────────── */
.usr-role-resp   { background: var(--primary-light); color: var(--primary); }
.usr-role-parent { background: #fff7ed; color: #9a3412; }
.usr-role-spect  { background: #f1f5f9; color: #475569; }

.usr-avatar-resp    { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
.usr-avatar-parent  { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.usr-avatar-spect   { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; }

.usr-role-select {
    padding: .25rem .5rem; font-size: .78rem; font-weight: 600;
    border-radius: .5rem; border: 1px solid var(--border);
    background: #fff; color: var(--text-primary);
    cursor: pointer; transition: border-color var(--transition);
}
.usr-role-select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 .2rem rgba(180,20,20,.12); }

.usr-action-key:hover  { background: #fef3c7; color: #92400e; border-color: #f59e0b; }
.usr-action-mail:hover { background: #dbeafe; color: #1e40af; border-color: #3b82f6; }

.usr-kpi-icon-parent { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.usr-kpi-icon-spect  { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; }

.usr-section-pwd { background: #fef3c7; color: #92400e; }

/* ── Edit User Modal (eu-*) ──────────────── */
.eu-profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    margin: -1rem -1rem 1.25rem;
    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);
    border-bottom: 1px solid #e5e7eb;
    border-radius: .5rem .5rem 0 0;
}
.eu-profile-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 800; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.eu-profile-info { flex: 1; min-width: 0; }
.eu-profile-name { font-size: 1.1rem; font-weight: 800; color: #1f2937; }
.eu-profile-email { font-size: .82rem; color: #6b7280; margin-top: .1rem; }
.eu-profile-since { font-size: .75rem; color: #9ca3af; margin-top: .2rem; }

.eu-section-role { background: #ede9fe; color: #5b21b6; }

.eu-role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}
.eu-role-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .85rem;
    border: 2px solid #e5e7eb;
    border-radius: .75rem;
    cursor: pointer;
    transition: all .2s;
    background: #fff;
    position: relative;
}
.eu-role-card:hover { border-color: #c4b5fd; background: #faf5ff; }
.eu-role-selected {
    border-color: #7c3aed !important;
    background: #f5f3ff !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.eu-role-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .9rem; flex-shrink: 0;
}
.eu-role-info { flex: 1; min-width: 0; }
.eu-role-name { font-size: .82rem; font-weight: 700; color: #1f2937; }
.eu-role-desc { font-size: .7rem; color: #9ca3af; line-height: 1.3; }
.eu-role-check {
    color: #7c3aed; font-size: 1.1rem;
    opacity: 0; transition: opacity .2s;
}
.eu-role-selected .eu-role-check { opacity: 1; }

.eu-pwd-hint {
    font-size: .78rem; color: #6b7280;
    background: #fffbeb; border: 1px solid #fde68a;
    padding: .45rem .75rem; border-radius: .5rem;
    margin-bottom: .75rem;
}
.eu-btn-save {
    background: var(--primary); color: #fff;
    font-weight: 600; border: none;
    padding: .5rem 1.25rem; border-radius: .625rem;
    transition: background .15s;
}
.eu-btn-save:hover { background: var(--primary-dark); color: #fff; }

.eu-section-children { background: #f0fdf4; color: #166534; display: flex; align-items: center; gap: .5rem; }
.eu-children-count {
    background: #166534; color: #fff; font-size: .65rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: 1rem; min-width: 1.3rem; text-align: center;
}
.eu-children-search { margin-bottom: .75rem; position: relative; }
.eu-search-icon {
    position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af; font-size: .85rem; z-index: 1;
}
.eu-search-input {
    padding-left: 2.2rem; font-size: .85rem; border-radius: .625rem;
    border: 1px solid #e5e7eb; transition: border-color .15s;
}
.eu-search-input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.1); }
.eu-search-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
    background: #fff; border: 1px solid #e5e7eb; border-top: none;
    border-radius: 0 0 .625rem .625rem; max-height: 200px; overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.eu-search-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .75rem; cursor: pointer; transition: background .12s;
}
.eu-search-item:hover { background: #f0fdf4; }
.eu-search-item + .eu-search-item { border-top: 1px solid #f3f4f6; }
.eu-search-empty { padding: .75rem; text-align: center; color: #9ca3af; font-size: .82rem; }
.eu-child-link-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid #d1fae5; background: #ecfdf5; color: #10b981;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .8rem; flex-shrink: 0; margin-left: auto;
    transition: all .15s;
}
.eu-child-link-btn:hover { background: #10b981; color: #fff; border-color: #10b981; }
.eu-children-list { display: flex; flex-direction: column; gap: 0; }
.eu-child-row {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .75rem; border-radius: .5rem; transition: background .12s;
}
.eu-child-row:hover { background: #f9fafb; }
.eu-child-info { flex: 1; min-width: 0; }
.eu-child-name {
    font-size: .85rem; font-weight: 600; color: #1f2937;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eu-child-unlink {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid #fecaca; background: #fef2f2; color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .7rem; flex-shrink: 0; margin-left: auto;
    transition: all .15s;
}
.eu-child-unlink:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.eu-children-empty {
    padding: 1.5rem; text-align: center; color: #9ca3af; font-size: .85rem;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.eu-linked-children {
    font-size: .78rem; color: #166534; margin-top: .15rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eu-linked-children i { color: #10b981; margin-right: .2rem; font-size: .75rem; }

@media (max-width: 576px) {
    .eu-profile-header { flex-wrap: wrap; }
    .eu-role-grid { grid-template-columns: 1fr; }
}

.art-phone-sep { color: var(--text-muted); margin: 0 .15rem; }

/* Role badge always visible */
.art-role-badge    { display: inline-flex; }

/* Action buttons */
.art-actions { display: flex; gap: .35rem; }
.art-action-btn {
    width: 34px; height: 34px; border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: #fff;
    color: var(--text-muted); font-size: .9rem;
    cursor: pointer; transition: all var(--transition);
}
.art-action-edit:hover  { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.art-action-delete:hover { background: #fef2f2; color: var(--danger); border-color: var(--danger); }

/* ── Artist Modal (artm-*) ────────────────── */
.artm-section { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 1rem; }
.artm-section-header {
    padding: .45rem .85rem; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    display: flex; align-items: center; gap: .4rem;
}
.artm-section-identity { background: var(--primary-light); color: var(--primary); }
.artm-section-role     { background: #fef3c7; color: #92400e; }
.artm-section-spec     { background: #d1fae5; color: #065f46; }
.artm-section-body     { padding: .85rem; }

.artm-label {
    display: flex; align-items: center; gap: .35rem;
    font-size: .8rem; font-weight: 600; color: var(--text-muted);
    margin-bottom: .3rem;
}
.artm-label i { font-size: .85rem; }

.artm-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.artm-role-card {
    display: flex; flex-direction: column; align-items: center;
    gap: .25rem; padding: 1rem .5rem;
    border: 2px solid var(--border); border-radius: var(--radius-card);
    cursor: pointer; transition: all var(--transition); text-align: center;
    background: #fff;
}
.artm-role-card input[type="radio"] { display: none; }
.artm-role-card:hover { border-color: var(--primary); background: #faf8ff; }
.artm-role-card.selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 3px rgba(180,20,20,.15); }
.artm-role-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; transition: transform var(--transition);
}
.artm-role-card:hover .artm-role-icon,
.artm-role-card.selected .artm-role-icon { transform: scale(1.1); }
.artm-role-icon-prod { background: #dbeafe; color: #2563eb; }
.artm-role-icon-acad { background: #d1fae5; color: #059669; }
.artm-role-name { font-weight: 700; font-size: .85rem; color: var(--text-main); }
.artm-role-desc { font-size: .72rem; color: var(--text-muted); }

.artm-spec-preview { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

/* ── Parents page (par-*) ─────────────────── */
.par-avatar { background: linear-gradient(135deg, #f97316, #ea580c); }
.par-kpi-icon-total    { background: #fff7ed; color: #ea580c; }
.par-kpi-icon-children { background: #dbeafe; color: #2563eb; }
.par-kpi-icon-nolink   { background: #fef3c7; color: #d97706; }

.par-section-contact  { background: #eff6ff; color: #1e40af; }
.par-section-security { background: #fef3c7; color: #92400e; }
.par-section-promote  { background: #f0fdf4; color: #166534; }
.par-section-link     { background: #eff6ff; color: #1e40af; }

.par-children-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .35rem; }
.par-child-tag {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .2rem .6rem; border-radius: 2rem;
    font-size: .75rem; font-weight: 600;
    background: #dbeafe; color: #1e40af;
    border: 1px solid #bfdbfe;
}
.par-child-tag i { font-size: .65rem; }
.par-child-unlink {
    background: none; border: none; padding: 0; margin: 0;
    color: #93c5fd; cursor: pointer; font-size: .6rem;
    line-height: 1; display: flex; align-items: center;
    transition: color var(--transition);
}
.par-child-unlink:hover { color: #ef4444; }

.par-link-btn {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-light); color: var(--primary);
    border: 1px dashed var(--primary); cursor: pointer;
    font-size: .7rem; transition: all var(--transition);
}
.par-link-btn:hover { background: var(--primary); color: #fff; }

.par-child-count {
    background: #fff7ed; color: #ea580c;
    border: 1px solid #fed7aa;
}

/* Promote modal results */
.par-promote-results {
    max-height: 220px; overflow-y: auto;
    margin-top: .5rem;
}
.par-promote-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .65rem; border-radius: .5rem;
    cursor: pointer; transition: background var(--transition);
}
.par-promote-item:hover { background: var(--primary-light); }
.par-promote-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary-light); color: var(--primary);
    font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.par-promote-info { min-width: 0; }
.par-promote-selected {
    margin-top: .5rem; padding: .55rem .75rem;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: .5rem; font-size: .875rem;
}

/* Link child search results */
.par-search-results {
    min-height: 80px; max-height: 320px; overflow-y: auto;
}
.par-result-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
.par-result-item:last-child { border-bottom: none; }
.par-result-item:hover { background: #f8fafc; }

/* Mobile */
@media (max-width: 576px) {
    .art-card-body { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .art-card-right { width: 100%; justify-content: space-between; }
    .art-kpi-value { font-size: 1.5rem; }
}

/* ── Responsive tweaks ───────────────────── */
@media (max-width: 768px) {
    #main-content { padding: 1rem; }
    .kpi-card .kpi-value { font-size: 1.75rem; }
    .page-title { font-size: 1.25rem; }
    .calendar-table td {
        height: 60px;
        font-size: 0.75rem;
    }
    .stepper .step-divider { width: 20px; }
    .quick-actions { gap: .4rem; }
    .btn-quick { padding: .4rem .75rem; font-size: .8rem; }
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}
.page-link {
    color: var(--primary);
}

/* Tag input */
.specialty-tag {
    display: inline-flex;
    align-items: center;
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    margin: 0.1rem;
}
.specialty-tag .remove {
    margin-left: 0.3rem;
    cursor: pointer;
    font-weight: bold;
}

/* Print styles */
@media print {
    .navbar, .btn, .no-print { display: none !important; }
    .ticket-display { border: 2px solid #333; }
}

/* ═══════════════════════════════════════════════════════════
   EVENT DETAIL PAGE — ev-* components
   ═══════════════════════════════════════════════════════════ */

/* ── Header ── */
.ev-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-card);
    padding: 1.75rem 2rem;
    color: white;
    box-shadow: 0 4px 20px rgba(180,20,20,.25);
}
.ev-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.ev-back {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: color .15s;
}
.ev-back:hover { color: white; }
.ev-header-actions { display: flex; gap: .5rem; }
.ev-header-actions .btn { opacity: .9; }
.ev-header-actions .btn:hover { opacity: 1; }
.ev-type-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255,255,255,.2);
    color: white;
    border-radius: 2rem;
    padding: .2rem .75rem;
    margin-bottom: .6rem;
}
.ev-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 .75rem;
    line-height: 1.2;
}
.ev-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .875rem;
    color: rgba(255,255,255,.85);
}
.ev-desc {
    margin-top: .75rem;
    font-size: .9375rem;
    color: rgba(255,255,255,.9);
    max-width: 72ch;
}

/* ── Grid ── */
.ev-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 900px) {
    .ev-grid { grid-template-columns: 1fr; }
    .ev-col-side { order: -1; }
}

/* ── Panel ── */
.ev-panel {
    background: white;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.ev-panel-mine { border-left: 4px solid var(--primary); }

/* Merged representation rows inside event detail "Ma famille & moi" panel */
.ev-mine-rep-row {
    padding: .75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.ev-mine-rep-row:last-child { border-bottom: none; }
.ev-mine-rep-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
}
.ev-mine-rep-date { font-weight: 600; color: #1f2937; }
.ev-mine-rep-loc  { color: #9ca3af; }
.ev-panel-cta { border: 2px dashed var(--border); background: #fafafa; }
.ev-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: #fafbff;
}
.ev-panel-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text-dark);
}
.ev-panel-body { padding: 1.25rem; }
.ev-info-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .375rem 1rem;
    margin: 0;
    font-size: .875rem;
}
.ev-info-list dt {
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.ev-info-list dd { margin: 0; color: var(--text-dark); }

/* ── Participants groups ── */
.ev-group { border-bottom: 1px solid var(--border); }
.ev-group:last-child { border-bottom: none; }
.ev-group-header {
    padding: .625rem 1.25rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--bg-app);
}
.ev-members-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ev-member-card {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background .1s;
}
.ev-member-card:last-child { border-bottom: none; }
.ev-member-card:hover { background: #f8fafc; }
.ev-member-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ev-member-info { flex: 1; min-width: 0; }
.ev-member-name {
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ev-member-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* ── Inline status pills (replaces participation-status select) ── */
.ev-status-pills {
    display: inline-flex;
    border-radius: 2rem;
    border: 1px solid var(--border);
    overflow: hidden;
    background: #f8fafc;
}
.ev-stp {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: none;
    background: transparent;
    font-size: .7rem;
    font-weight: 600;
    padding: .28rem .65rem;
    cursor: pointer;
    white-space: nowrap;
    color: #94a3b8;
    transition: background .15s, color .15s;
    line-height: 1;
}
.ev-stp + .ev-stp { border-left: 1px solid var(--border); }
.ev-stp:hover:not(.active):not(:disabled) { background: #f1f5f9; color: #475569; }
.ev-stp:disabled { cursor: default; opacity: .6; }
.ev-stp i { font-size: .75rem; }
.ev-stp-assigne.active  { background: #dbeafe; color: #1d4ed8; }
.ev-stp-confirme.active { background: #dcfce7; color: #166534; }
.ev-stp-refuse.active   { background: #fee2e2; color: #b91c1c; }
.ev-delete-btn {
    color: #94a3b8;
    border-color: transparent;
    background: transparent;
    font-size: .78rem;
    padding: .25rem .4rem;
}
.ev-delete-btn:hover { color: #dc2626; background: #fee2e2; border-color: transparent; }
.btn-xs {
    padding: .15rem .4rem;
    font-size: .75rem;
    line-height: 1.4;
    border-radius: .25rem;
}

/* ── Subgroups ── */
.ev-subgroup {
    border: 1px solid var(--border);
    border-radius: .75rem;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.ev-sg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    gap: .75rem;
}
.ev-sg-purple { background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%); border-bottom: 2px solid #b41414; }
.ev-sg-blue   { background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%); border-bottom: 2px solid #2563eb; }
.ev-sg-title-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex: 1;
    flex-wrap: wrap;
}
.ev-sg-badge {
    font-size: .725rem;
    font-weight: 600;
    background: rgba(0,0,0,.08);
    border-radius: 2rem;
    padding: .15rem .6rem;
    white-space: nowrap;
}
.ev-sg-name { font-size: .9375rem; color: var(--text-dark); }
.ev-sg-time { font-size: .775rem; color: var(--text-muted); }
.ev-sg-header-actions { display: flex; gap: .375rem; flex-shrink: 0; }
.ev-sg-body { padding: .875rem 1rem; background: white; }
.ev-sg-desc { font-size: .875rem; color: var(--text-muted); margin-bottom: .75rem; }
.ev-sg-members-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 1.5rem;
}
.ev-sg-member {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: 2rem;
    padding: .25rem .625rem .25rem .35rem;
    font-size: .8125rem;
    transition: background .1s;
}
.ev-sg-member:hover { background: #e2e8f0; }
.ev-sg-member-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: .65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ev-sg-member-name { font-weight: 500; color: var(--text-dark); }
.ev-sg-member-remove {
    background: none;
    border: none;
    padding: 0 .125rem;
    color: #94a3b8;
    cursor: pointer;
    font-size: .7rem;
    display: flex;
    align-items: center;
    transition: color .15s;
}
.ev-sg-member-remove:hover { color: #ef4444; }

/* ── Guest member badge ── */
.ev-sg-member-guest { background: #fffbeb; border-color: #fde68a; }
.ev-sg-guest-tag {
    font-size: .6rem;
    background: #fde68a;
    color: #92400e;
    border-radius: .25rem;
    padding: .05rem .3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Subgroup volunteers (parents signed up) ── */
.ev-sg-volunteers-section {
    margin-top: .625rem;
    padding-top: .625rem;
    border-top: 1px dashed var(--border);
}
.ev-sg-vol-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .375rem;
}
.ev-sg-vol-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ev-sg-vol-count {
    font-size: .78rem;
    font-weight: 700;
}
.ev-sg-vol-list { display: flex; flex-direction: column; gap: .375rem; }
.ev-sg-vol-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .25rem .5rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: .5rem;
}
.ev-sg-vol-name { font-size: .78rem; font-weight: 600; flex: 1; min-width: 6rem; }
.ev-vol-pills { flex-shrink: 0; }

/* ── Add-member modal tabs + user list ── */
.sg-add-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1rem;
    gap: 0;
}
.sg-add-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: .5rem .75rem;
    font-size: .83rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.sg-add-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.sg-add-tab:hover:not(.active) { color: #475569; }
.sg-add-search-row { margin-bottom: .75rem; }
.sg-add-user-list {
    max-height: 16rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.sg-add-user-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .4rem .625rem;
    border-radius: .5rem;
    border: 1px solid var(--border);
    background: #fff;
    transition: background .1s;
}
.sg-add-user-row:hover { background: #f8fafc; }
.sg-add-user-row.sg-add-user-added { background: #f0fdf4; border-color: #bbf7d0; }
.sg-add-user-avatar {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.sg-add-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.sg-add-user-name { font-size: .82rem; font-weight: 600; }
.sg-add-user-role { align-self: flex-start; font-size: .65rem; }

/* ── Representation row stats (ev-stat-*, ev-rep-progress-*) ── */
.ev-rep-header { transition: background .15s; }
.ev-rep-header:hover { background: #f8fafc; }
.ev-rep-header[aria-expanded="true"] .ev-rep-chevron { transform: rotate(180deg); }
.ev-rep-chevron { transition: transform .2s ease; flex-shrink: 0; color: #94a3b8; font-size: .8rem; }

.ev-rep-stats { flex-shrink: 0; }
.ev-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .42rem;
    border-radius: 1rem;
    white-space: nowrap;
    line-height: 1.4;
}
.ev-stat-confirmed { background: #d1fae5; color: #065f46; }
.ev-stat-pending   { background: #fef3c7; color: #92400e; }
.ev-stat-refused   { background: #fee2e2; color: #991b1b; }
.ev-stat-sep       { font-size: .72rem; color: #94a3b8; white-space: nowrap; }
.ev-stat-vol       { background: #fef3c7; color: #78350f; border: 1px solid #f59e0b; }
.ev-stat-vol-ok    { background: #d1fae5; color: #065f46; border: 1px solid #10b981; }

.ev-rep-progress-bar {
    height: 3px;
    background: #e2e8f0;
}
.ev-rep-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width .3s ease;
    min-width: 0;
}

/* ── Rep-level subgroups section ── */
.ev-rep-sg-section {
    margin-top: 1.25rem;
    border-top: 1.5px dashed var(--border);
    padding-top: 1rem;
}
.ev-rep-sg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .625rem;
}
.ev-rep-sg-title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: .375rem;
}
.ev-rep-sg-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 700;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 2rem;
    padding: 0 .3rem;
}
.ev-rep-sg-body { display: flex; flex-direction: column; gap: .625rem; }
.ev-rep-sg-empty {
    font-size: .8125rem;
    color: var(--text-muted);
    padding: .375rem 0;
}

/* Select2 overrides for design system */
.select2-container--bootstrap-5 .select2-selection {
    border-color: var(--border);
    border-radius: .5rem;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--primary-light);
    color: var(--primary);
}
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--primary);
    color: white;
}

/* ── Calendar page (cal-*) ────────────────────────────────────── */
.cal-page { padding-bottom: 2rem; }

.cal-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

/* Card wrapper */
.cal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Navigation bar */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
}
.cal-nav-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}
.cal-month-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
    letter-spacing: .01em;
}
.cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    transition: background .15s;
}
.cal-nav-btn:hover { background: rgba(255,255,255,.3); }
.cal-today-btn {
    font-size: .75rem;
    font-weight: 600;
    padding: .2rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.cal-today-btn:hover { background: rgba(255,255,255,.35); }

/* Grid */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-left: 1px solid var(--border);
}

/* Day headers */
.cal-day-header {
    padding: .6rem .5rem;
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    background: #fafafa;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.cal-weekend-header { color: var(--primary); background: var(--primary-light); }

/* Day cells */
.cal-cell {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-height: 110px;
    padding: .5rem .4rem;
    background: #fff;
    transition: background .12s;
    vertical-align: top;
}
.cal-cell-empty  { background: #fafafa; }
.cal-cell-weekend { background: #fdf8ff; }
.cal-cell-today {
    background: var(--primary-light) !important;
    border-right-color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
    box-shadow: inset 2px 0 0 var(--primary);
}
.cal-cell-has-events { background: #fff; }

.cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 50%;
    margin-bottom: .35rem;
}
.cal-today-num {
    background: var(--primary);
    color: #fff !important;
    font-weight: 700;
}

/* Event pills */
.cal-pills { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-pill {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .45rem;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .12s, filter .12s;
    line-height: 1.4;
}
.cal-pill:hover { opacity: .85; filter: brightness(.95); }
.cal-pill-spectacle  { background: #fce7f3; color: #9d174d; }
.cal-pill-repetition { background: #dbeafe; color: #1e40af; }
.cal-pill-formation  { background: #d1fae5; color: #065f46; }
.cal-pill-autre      { background: #f3f4f6; color: #374151; }
.cal-pill-absence    { background: #fee2e2; color: #b91c1c; }

/* Legend */
.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.cal-legend-item { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }

@media (max-width: 640px) {
    .cal-cell { min-height: 70px; padding: .25rem; }
    .cal-pill  { font-size: .65rem; padding: .1rem .3rem; }
    .cal-day-num { width: 1.4rem; height: 1.4rem; font-size: .7rem; }
}

/* ── Calendar Filter Bar (cal-filter-*) ─────────────────────────── */
.cal-filter-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    overflow: hidden;
}
.cal-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    padding: .75rem 1rem;
}
.cal-filter-row-sub {
    border-top: 1px solid var(--border);
    background: var(--bg);
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.cal-filter-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    margin-right: .2rem;
}
.cal-filter-divider {
    width: 1px;
    height: 1.4rem;
    background: var(--border);
    margin: 0 .3rem;
    flex-shrink: 0;
}

/* Filter chips */
.cal-fchip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 2rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: var(--bg);
    color: var(--text-muted);
    transition: all .15s;
    white-space: nowrap;
    user-select: none;
}
.cal-fchip:hover { opacity: .85; }
.cal-fchip i { font-size: .78rem; }

/* Per-type chip colors (inactive) */
.cal-fchip-spectacle  { border-color: #a855f7; color: #a855f7; }
.cal-fchip-repetition { border-color: #3b82f6; color: #3b82f6; }
.cal-fchip-formation  { border-color: #22c55e; color: #22c55e; }
.cal-fchip-autre      { border-color: #94a3b8; color: #94a3b8; }
.cal-fchip-absence    { border-color: #ef4444; color: #ef4444; }

/* Active state – solid fill */
.cal-fchip-spectacle.is-active  { background: #a855f7; color: #fff; border-color: #a855f7; }
.cal-fchip-repetition.is-active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.cal-fchip-formation.is-active  { background: #22c55e; color: #fff; border-color: #22c55e; }
.cal-fchip-autre.is-active      { background: #94a3b8; color: #fff; border-color: #94a3b8; }
.cal-fchip-absence.is-active    { background: #ef4444; color: #fff; border-color: #ef4444; }

/* Role chips */
.cal-fchip-role-production { border-color: #0ea5e9; color: #0ea5e9; }
.cal-fchip-role-academie   { border-color: #10b981; color: #10b981; }
.cal-fchip-role-production.is-active { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
.cal-fchip-role-academie.is-active   { background: #10b981; color: #fff; border-color: #10b981; }

/* Mine filter chip */
.cal-fchip-mine          { border-color: #6366f1; color: #6366f1; }
.cal-fchip-mine.is-active { background: #6366f1; color: #fff; border-color: #6366f1; }

/* User chips */
.cal-user-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    max-height: 6.5rem;
    overflow-y: auto;
}
.cal-user-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem .25rem .25rem;
    border-radius: 2rem;
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    transition: all .15s;
    user-select: none;
    opacity: .5;
}
.cal-user-chip.is-active { opacity: 1; border-color: currentColor; }
.cal-user-chip:hover { opacity: .85; }
.cal-user-chip-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: .65rem;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}
.cal-user-chip-name { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-user-chip-prod { color: #0ea5e9; }
.cal-user-chip-prod .cal-user-chip-av { background: #0ea5e9; }
.cal-user-chip-prod.is-active { border-color: #0ea5e9; background: #f0f9ff; }

.cal-user-chip-acad { color: #10b981; }
.cal-user-chip-acad .cal-user-chip-av { background: #10b981; }
.cal-user-chip-acad.is-active { border-color: #10b981; background: #f0fdf4; }

@media (max-width: 640px) {
    .cal-filter-row { gap: .3rem; padding: .5rem .75rem; }
    .cal-fchip span { display: none; }
    .cal-fchip i { font-size: .9rem; }
    .cal-fchip { padding: .3rem .45rem; }
}

/* ── Event Form (ef-*) ──────────────────────────────────────────── */
.ef-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
}
.ef-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ef-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.ef-back:hover { background: var(--primary-light); color: var(--primary); }
.ef-breadcrumb { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.ef-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.ef-section {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.ef-section-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .875rem 1.25rem;
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}
.ef-section-header i { font-size: 1rem; }
.ef-section-identity  { background: #fef2f2; color: #991b1b; }
.ef-section-datetime  { background: #eff6ff; color: #1e40af; }
.ef-section-chaperones{ background: #f0fdf4; color: #166534; }
.ef-section-ticketing  { background: #fff7ed; color: #9a3412; }

.ef-section-body { padding: 1.5rem 1.25rem; }

.ef-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: .375rem;
    letter-spacing: .01em;
}
.ef-input { border-radius: .5rem; }

/* Type selector cards */
.ef-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}
@media (max-width: 576px) { .ef-type-grid { grid-template-columns: repeat(2, 1fr); } }
.ef-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1rem .75rem;
    border: 2px solid var(--border);
    border-radius: .75rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    background: #fff;
    user-select: none;
}
.ef-type-card input { display: none; }
.ef-type-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(180,20,20,.1);
}
.ef-type-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(180,20,20,.15);
}
.ef-type-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
}
.ef-type-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

/* Arrivals sub-group */
.ef-arrivals-row {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--border);
}
.ef-arrivals-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: .75rem;
}

/* Toggle row */
.ef-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.ef-switch .form-check-input {
    width: 2.75rem;
    height: 1.5rem;
    cursor: pointer;
}
.ef-switch .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Footer actions */
.ef-footer {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1.25rem 0 .5rem;
}
.ef-submit { min-width: 200px; font-weight: 600; }

/* ── Subgroup creation modal (sgm-*) ─────────────────────────── */
.sgm-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.sgm-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: .875rem;
    overflow: hidden;
}
.sgm-section-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: .75rem 1rem .5rem;
}
/* Category cards */
.sgm-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: 0 .75rem .75rem;
}
.sgm-cat-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 2px solid var(--border);
    border-radius: .75rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    background: #fafafa;
    user-select: none;
    position: relative;
}
.sgm-cat-card input { display: none; }
.sgm-cat-card:hover { border-color: #94a3b8; background: #fff; }
.sgm-cat-card.selected {
    border-color: var(--primary);
    background: var(--primary-light, #fef2f2);
    box-shadow: 0 0 0 3px rgba(180,20,20,.1);
}
.sgm-cat-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: .625rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.sgm-cat-text { flex: 1; min-width: 0; }
.sgm-cat-title { display: block; font-size: .8375rem; font-weight: 600; color: var(--text-dark); }
.sgm-cat-desc  { display: block; font-size: .72rem; color: var(--text-muted); margin-top: .1rem; }
.sgm-cat-check {
    font-size: 1rem;
    color: var(--primary);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
}
.sgm-cat-card.selected .sgm-cat-check { opacity: 1; }

/* Info fields */
.sgm-field-group { padding: 0 1rem .75rem; display: flex; flex-direction: column; gap: .625rem; }
.sgm-field-row { display: flex; flex-direction: column; gap: .25rem; position: relative; }
.sgm-label { font-size: .8125rem; font-weight: 600; color: var(--text-dark); }
.sgm-optional { font-size: .72rem; font-weight: 400; color: var(--text-muted); margin-left: .25rem; }
.sgm-input {
    width: 100%;
    padding: .5rem .75rem;
    font-size: .875rem;
    border: 1.5px solid var(--border);
    border-radius: .5rem;
    background: #fafafa;
    color: var(--text-dark);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.sgm-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(180,20,20,.1);
    background: #fff;
}
.sgm-input.is-invalid { border-color: #ef4444; }
.sgm-textarea { resize: vertical; min-height: 4rem; }
.sgm-charcount {
    position: absolute;
    right: .5rem; bottom: .6rem;
    font-size: .68rem; color: var(--text-muted);
    pointer-events: none;
}

/* Parents section */
.sgm-section-parents {
    --sgm-parents-color: #7c3aed;
    --sgm-parents-bg: #f5f3ff;
    border-color: var(--sgm-parents-color, var(--border));
    background: var(--sgm-parents-bg, #fafafa);
    transition: background .2s, border-color .2s;
}
.sgm-parents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
}
.sgm-parents-info { flex: 1; }
.sgm-parents-desc { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.sgm-max-parents-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1rem .875rem;
    flex-wrap: wrap;
}
.sgm-max-label { font-size: .8125rem; font-weight: 600; color: var(--text-dark); flex: 1; min-width: 8rem; }
.sgm-max-hint  { font-size: .72rem; color: var(--text-muted); }
.sgm-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}
.sgm-stepper-btn {
    background: none;
    border: none;
    width: 2.25rem; height: 2.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    transition: background .1s;
    display: flex; align-items: center; justify-content: center;
}
.sgm-stepper-btn:hover { background: #f1f5f9; }
.sgm-stepper-input {
    width: 3rem;
    text-align: center;
    border: none;
    border-left: 1.5px solid var(--border);
    border-right: 1.5px solid var(--border);
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-dark);
    padding: .25rem 0;
    outline: none;
    background: #fff;
    -moz-appearance: textfield;
}
.sgm-stepper-input::-webkit-outer-spin-button,
.sgm-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Subgroup Modal — time fields ─── */
.sgm-time-row   { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.sgm-time-field { display: flex; flex-direction: column; gap: .25rem; }
.sgm-time-label { font-size: .68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.sgm-time-input { width: 7.5rem; }
.sgm-time-sep   { color: var(--text-muted); font-size: .95rem; padding-bottom: .35rem; }
.sgm-time-hint  { font-size: .72rem; color: var(--text-muted); margin-top: .3rem; font-style: italic; }

/* ── Representation Form in Modal (rf-*) ─────────────────────── */
.rf-section {
    background: #fff;
    border-radius: .75rem;
    border: 1px solid var(--border);
    margin-bottom: .875rem;
    overflow: hidden;
}
.rf-section:last-child { margin-bottom: 0; }
.rf-section-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.125rem;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}
.rf-section-header i { font-size: .9375rem; }
.rf-section-datetime   { background: #eff6ff; color: #1e40af; }
.rf-section-logistics  { background: #f0fdf4; color: #166534; }
.rf-section-chaperones { background: #fdf4ff; color: #7e22ce; }
.rf-section-body { padding: 1rem 1.125rem 1.25rem; }

.rf-time-sep {
    display: flex;
    align-items: flex-end;
    padding-bottom: .45rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 2.375rem;
}

/* ── Ticketing (tk-*) ────────────────────── */

/* Page wrapper */
.tk-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.tk-container {
    width: 100%;
    max-width: 640px;
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: 0 8px 40px rgba(0,0,0,.2);
    overflow: hidden;
}

/* Event header */
.tk-event-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
}
.tk-logo {
    height: 40px;
    margin-bottom: .75rem;
    opacity: .92;
}
.tk-event-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: #fff;
}
.tk-event-meta {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    font-size: .85rem;
    opacity: .9;
    flex-wrap: wrap;
}

/* Progress stepper */
.tk-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    background: #fafafa;
    border-bottom: 1px solid var(--border);
}
.tk-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    position: relative;
}
.tk-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e4e4e7;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all .25s ease;
}
.tk-step-label {
    font-size: .72rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: color .25s ease;
}
.tk-step-active .tk-step-circle {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(180,20,20,.3);
}
.tk-step-active .tk-step-label {
    color: var(--primary);
}
.tk-step-done .tk-step-circle {
    background: var(--success);
    color: #fff;
}
.tk-step-done .tk-step-label {
    color: var(--success);
}
.tk-step-line {
    width: 48px;
    height: 2px;
    background: #e4e4e7;
    margin: 0 .5rem;
    margin-bottom: 1.2rem;
    border-radius: 2px;
}
.tk-step-done + .tk-step-line,
.tk-step-done ~ .tk-step-line {
    background: var(--success);
}

/* Body */
.tk-body {
    padding: 1.5rem;
}

/* Section */
.tk-section {
    margin-bottom: .75rem;
}
.tk-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.tk-section-title i {
    color: var(--primary);
    font-size: 1.1rem;
}

/* Ticket rows (step 1) */
.tk-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #fafafa;
    border: 1px solid var(--border);
    border-radius: .75rem;
    margin-bottom: .75rem;
    transition: border-color .2s;
}
.tk-ticket-row:hover {
    border-color: var(--primary);
}
.tk-ticket-info {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.tk-ticket-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.tk-ticket-icon-child {
    background: #fef3c7;
    color: #d97706;
}
.tk-ticket-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: .95rem;
}
.tk-ticket-price {
    font-size: .82rem;
    color: var(--text-muted);
}

/* Quantity selector */
.tk-qty {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.tk-qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: #fff;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all .2s;
}
.tk-qty-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}
.tk-qty-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.tk-qty-value {
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    color: var(--text-main);
}

/* Buttons */
.tk-btn-primary {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding: .6rem 1.5rem;
    font-weight: 600;
    font-size: .92rem;
    transition: background .2s;
}
.tk-btn-primary:hover {
    background: var(--primary-dark);
    color: #fff;
}
.tk-btn-primary:disabled {
    opacity: .5;
    background: var(--primary);
    color: #fff;
}
.tk-btn-outline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .6rem 1.25rem;
    font-weight: 500;
    font-size: .88rem;
    transition: all .2s;
}
.tk-btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.tk-btn-confirm {
    background: var(--success);
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding: .65rem 1.5rem;
    font-weight: 600;
    font-size: .95rem;
    transition: background .2s;
}
.tk-btn-confirm:hover {
    background: #059669;
    color: #fff;
}
.tk-btn-confirm:disabled {
    opacity: .5;
    background: var(--success);
    color: #fff;
}
.tk-btn-label,
.tk-btn-spinner {
    display: inline-flex;
    align-items: center;
}

/* Total bar */
.tk-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #f8f8f8;
    border-top: 2px solid var(--border);
    font-size: .95rem;
}
.tk-total-label {
    font-weight: 500;
    color: var(--text-muted);
}
.tk-total-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
}

/* Auth choice cards (step 2) */
.tk-auth-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.tk-auth-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem .75rem;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: .75rem;
    cursor: pointer;
    transition: all .25s;
}
.tk-auth-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(180,20,20,.1);
    transform: translateY(-2px);
}
.tk-auth-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: .75rem;
}
.tk-auth-icon-login {
    background: var(--primary-light);
    color: var(--primary);
}
.tk-auth-icon-register {
    background: #ecfdf5;
    color: var(--success);
}
.tk-auth-icon-guest {
    background: #f3f4f6;
    color: #6b7280;
}
.tk-auth-card-title {
    font-weight: 700;
    font-size: .88rem;
    color: var(--text-main);
    margin-bottom: .3rem;
}
.tk-auth-card-desc {
    font-size: .75rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Advantages section */
.tk-advantages {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
}
.tk-advantages-title {
    font-weight: 700;
    font-size: .88rem;
    color: #92400e;
    margin-bottom: .65rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.tk-advantages-title i {
    color: var(--accent);
}
.tk-advantages-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.tk-advantage {
    font-size: .82rem;
    color: #78350f;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.tk-advantage i {
    color: var(--accent);
    font-size: .9rem;
    flex-shrink: 0;
}

/* Logged-in card */
.tk-logged-in-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--primary-light);
    border: 1px solid #fecaca;
    border-radius: .75rem;
}
.tk-logged-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Back link */
.tk-back-link {
    color: var(--primary);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    padding: 0;
}
.tk-back-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Recap blocks (step 3) */
/* ── Representation picker cards ─────────────────────────────── */
.tk-rep-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: .85rem;
    padding: 1rem 1.1rem;
    margin-bottom: .65rem;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, background .18s;
    text-align: left;
}
.tk-rep-card:hover:not([disabled]) {
    border-color: var(--primary);
    box-shadow: 0 2px 12px rgba(180,20,20,.1);
    background: #fff9f9;
}
.tk-rep-card:hover:not([disabled]) .tk-rep-arrow { color: var(--primary); }
.tk-rep-card-disabled {
    opacity: .55;
    cursor: not-allowed;
    background: #f5f5f5;
}
.tk-rep-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--primary-light, #fdecea);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.tk-rep-info {
    flex: 1;
    min-width: 0;
}
.tk-rep-date {
    font-weight: 700;
    font-size: .98rem;
    color: var(--text-main);
    margin-bottom: .18rem;
}
.tk-rep-location {
    font-size: .83rem;
    color: var(--text-muted);
    margin-bottom: .25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-rep-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    border-radius: .4rem;
    padding: .15rem .55rem;
    margin-right: .3rem;
}
.tk-rep-badge-past  { background: #e9ecef; color: #6c757d; }
.tk-rep-badge-full  { background: #fdecea; color: var(--primary); }
.tk-rep-seats {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--text-muted);
}
.tk-seats-bar-wrap {
    flex: 1;
    max-width: 90px;
    height: 5px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}
.tk-seats-bar {
    height: 100%;
    border-radius: 3px;
    transition: width .4s;
}
.tk-seats-bar-ok   { background: #22c55e; }
.tk-seats-bar-warn { background: #f59e0b; }
.tk-seats-bar-danger { background: var(--primary); }
.tk-rep-arrow {
    flex-shrink: 0;
    color: #bbb;
    font-size: 1rem;
    transition: color .18s;
}
.tk-rep-past-toggle {
    margin-bottom: .25rem;
}

.tk-recap-block {

    background: #fafafa;
    border: 1px solid var(--border);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.tk-recap-heading {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .5rem;
}
.tk-recap-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem 0;
    font-size: .92rem;
    color: var(--text-main);
}
.tk-recap-line + .tk-recap-line {
    border-top: 1px solid var(--border);
}
.tk-recap-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .65rem 0 0;
    margin-top: .4rem;
    border-top: 2px solid var(--primary);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
}
.tk-recap-detail {
    font-size: .92rem;
    color: var(--text-main);
    line-height: 1.65;
}
.tk-badge-account {
    background: var(--primary-light);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 600;
    border-radius: .5rem;
    padding: .25rem .65rem;
}

/* Booking confirmation */
.tk-booking-id {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: .05em;
    padding: .5rem 0;
}

/* Ticket code */
.tk-ticket-code {
    background: #f8f8f8;
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-top: .75rem;
}
.tk-ticket-code code {
    font-size: .88rem;
    color: var(--primary);
    word-break: break-all;
}

/* QR Code */
.tk-qr-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 1.5rem;
    background: #fff;
    border: 2px dashed #d1d5db;
    border-radius: .75rem;
}
.tk-qr-code {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    background: #fff;
    border-radius: .5rem;
}
.tk-qr-code img {
    border-radius: .25rem;
}
.tk-qr-label {
    margin-top: .75rem;
    margin-bottom: 0;
    font-size: .8rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: .02em;
}

/* Sibling ticket navigation */
.tk-sibling-nav {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--primary-light, #fef2f2);
    border-radius: var(--radius-card, .875rem);
    border: 1px solid #e5e7eb;
    text-align: left;
}
.tk-sibling-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: .85rem;
    color: #374151;
    margin-bottom: .75rem;
}
.tk-sibling-counter {
    font-size: .78rem;
    color: #6b7280;
    font-weight: 500;
}
.tk-sibling-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}
.tk-sibling-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    transition: all .2s;
}
.tk-sibling-item:hover {
    border-color: var(--primary, #b41414);
    color: var(--primary, #b41414);
    background: #fff;
}
.tk-sibling-active {
    background: var(--primary, #b41414);
    color: #fff !important;
    border-color: var(--primary, #b41414);
    pointer-events: none;
}
.tk-sibling-arrows {
    display: flex;
    justify-content: space-between;
    padding-top: .5rem;
    border-top: 1px solid #e5e7eb;
}
.tk-sibling-arrow {
    font-size: .82rem;
    font-weight: 600;
    color: var(--primary, #b41414);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: opacity .2s;
}
.tk-sibling-arrow:hover {
    opacity: .7;
    color: var(--primary, #b41414);
}
.tk-sibling-arrow.disabled {
    opacity: .3;
    pointer-events: none;
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 600px) {
    .tk-page {
        padding: 0;
        min-height: 100dvh;
    }
    .tk-container {
        border-radius: 0;
        box-shadow: none;
    }
    .tk-event-header {
        padding: 1.5rem 1rem 1rem;
    }
    .tk-event-title {
        font-size: 1.15rem;
    }
    .tk-body {
        padding: 1rem;
    }
    .tk-auth-choices {
        grid-template-columns: 1fr;
    }
    .tk-auth-card {
        flex-direction: row;
        text-align: left;
        gap: .75rem;
        padding: .85rem 1rem;
    }
    .tk-auth-card-icon {
        margin-bottom: 0;
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .tk-step-line {
        width: 28px;
    }
    .tk-step-circle {
        width: 34px;
        height: 34px;
        font-size: .88rem;
    }
    .tk-step-label {
        font-size: .65rem;
    }
    .tk-total-bar {
        padding: .75rem 1rem;
    }
}

/* ── Bookings Admin (bk-*) ───────────────── */

/* Toolbar */
.bk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.bk-toolbar-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    flex: 1;
}
.bk-filter-select {
    max-width: 200px;
    font-size: .88rem;
}



/* Per-event filters bar */
.bk-event-filters {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
    flex-wrap: wrap;
}
/* Filter bar scoped to a representation (slightly inset style) */
.bk-rep-filters {
    background: #f9fafb;
    padding: .55rem 1.25rem .55rem 1.5rem;
    border-bottom: 1px solid #eef0f3;
}
.bk-ef-search {
    position: relative;
    flex: 1;
    min-width: 160px;
    max-width: 280px;
}
.bk-ef-search-icon {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: .82rem;
    pointer-events: none;
}
.bk-ef-search-input {
    width: 100%;
    padding: .4rem .65rem .4rem 2rem;
    border: 1px solid var(--border);
    border-radius: .45rem;
    font-size: .82rem;
    background: #fafafa;
    transition: border-color .15s, background .15s;
    outline: none;
}
.bk-ef-search-input:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(180,20,20,.08);
}
/* Per-event status filter buttons */
.bk-ef-status-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
}
.bk-ef-status-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .65rem;
    border: none;
    background: #fff;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.bk-ef-status-btn + .bk-ef-status-btn {
    border-left: 1px solid var(--border);
}
.bk-ef-status-btn:hover {
    background: #f3f4f6;
}
.bk-ef-btn-all.bk-ef-active {
    background: var(--primary);
    color: #fff;
}
.bk-ef-btn-pending.bk-ef-active {
    background: #fff7ed;
    color: #d97706;
}
.bk-ef-btn-confirmed.bk-ef-active {
    background: #ecfdf5;
    color: #059669;
}
.bk-ef-btn-cancelled.bk-ef-active {
    background: #fef2f2;
    color: #dc2626;
}
.bk-event-bookings-count {
    padding: .15rem 1.25rem;
    font-size: .75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Event group card */
.bk-events-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.bk-event-group {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: box-shadow .2s;
}
.bk-event-group:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.bk-event-expanded {
    border-color: var(--primary);
    box-shadow: 0 2px 16px rgba(180,20,20,.08);
}

/* Event header (clickable) */
.bk-event-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background .15s;
}
.bk-event-header:hover {
    background: #fafafa;
}
.bk-event-left {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex: 1;
    min-width: 0;
}
.bk-event-icon {
    width: 44px;
    height: 44px;
    border-radius: .75rem;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.bk-event-info {
    min-width: 0;
}
.bk-event-title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bk-event-date {
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .15rem;
}

/* Mini KPIs in event header */
.bk-event-kpis {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}
.bk-mini-kpi {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: .5rem;
    white-space: nowrap;
}
.bk-mini-pending {
    background: #fff7ed;
    color: #d97706;
}
.bk-mini-confirmed {
    background: #ecfdf5;
    color: #059669;
}
.bk-mini-cancelled {
    background: #fef2f2;
    color: #dc2626;
}
.bk-mini-seats {
    background: #eff6ff;
    color: #2563eb;
}
.bk-fill-bar {
    width: 48px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}
.bk-fill-bar-inner {
    height: 100%;
    background: #2563eb;
    border-radius: 2px;
    transition: width .3s;
}
/* Event action buttons (scanner, attendance) */
.bk-event-actions-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}
.bk-ev-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: .5rem;
    font-size: .9rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.bk-ev-action-scan {
    background: #eff6ff;
    color: #2563eb;
}
.bk-ev-action-scan:hover {
    background: #2563eb;
    color: #fff;
}
.bk-ev-action-attendance {
    background: #ecfdf5;
    color: #059669;
}
.bk-ev-action-attendance:hover {
    background: #059669;
    color: #fff;
}

.bk-event-toggle {
    color: var(--text-muted);
    font-size: 1rem;
    flex-shrink: 0;
    padding-left: .5rem;
}

/* Event body (expanded bookings) */
.bk-event-body {
    border-top: 1px solid var(--border);
    padding: .5rem 0;
    background: #fafafa;
}

/* ── Representation sub-group ──────────────────────────────────── */
.bk-rep-group {
    margin: .5rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius, .75rem);
    overflow: hidden;
    background: #fff;
}
.bk-rep-group + .bk-rep-group {
    margin-top: .65rem;
}
.bk-rep-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 1rem;
    background: linear-gradient(135deg, #f8f9fb 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.bk-rep-header-left {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    flex: 1;
}
.bk-rep-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary, #b41414);
    flex-shrink: 0;
}
.bk-rep-date {
    font-weight: 600;
    font-size: .85rem;
    color: var(--text-main, #1e293b);
    white-space: nowrap;
}
.bk-rep-location {
    font-size: .78rem;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: .25rem;
}
.bk-rep-header-right {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.bk-rep-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: .4rem;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
    margin-left: .25rem;
}
.bk-rep-toggle:hover {
    background: var(--primary-light, #fdecea);
    color: var(--primary, #b41414);
    border-color: var(--primary, #b41414);
}
.bk-rep-badge {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 600;
    border-radius: .4rem;
    padding: .2rem .55rem;
}
.bk-rep-badge-pending   { background: #fef3cd; color: #92600a; }
.bk-rep-badge-confirmed { background: #d1fae5; color: #166534; }
.bk-rep-badge-cancelled { background: #f1f5f9; color: #64748b; }
.bk-rep-seats {
    font-size: .75rem;
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
    padding-left: .4rem;
    border-left: 1px solid var(--border);
}
/* sc-rep-badge: representation indicator in scanner topbar */
.sc-rep-badge {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    background: var(--primary-light, #fdecea);
    color: var(--primary, #b41414);
    border-radius: .4rem;
    padding: .2rem .6rem;
    margin-top: .25rem;
}
.sc-topbar-info { min-width: 0; flex: 1; }

/* Booking row */
.bk-booking-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    transition: background .15s;
}
.bk-booking-row:hover {
    background: #f3f4f6;
}
.bk-booking-row + .bk-booking-row {
    border-top: 1px solid #f0f0f0;
}
.bk-booking-client {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex: 1;
    min-width: 0;
}
.bk-booking-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .72rem;
    flex-shrink: 0;
}
.bk-booking-name {
    font-weight: 600;
    font-size: .88rem;
    color: var(--text-main);
}
.bk-booking-email {
    font-size: .75rem;
    color: var(--text-muted);
}
.bk-booking-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.bk-booking-tickets {
    font-size: .8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.bk-booking-amount {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-main);
    min-width: 60px;
    text-align: right;
}
.bk-booking-clickable {
    cursor: pointer;
}
.bk-ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .15rem .45rem;
    border-radius: .375rem;
    margin-right: .25rem;
}
.bk-ticket-adult {
    background: #ede9fe;
    color: #6d28d9;
}
.bk-ticket-child {
    background: #fef3c7;
    color: #b45309;
}
.bk-ticket-badge i {
    font-size: .7rem;
}
.bk-detail-modal {
    padding: .25rem 0;
}
.bk-detail-status-banner {
    text-align: center;
    padding: .6rem 1rem;
    border-radius: .5rem;
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.bk-detail-status-banner.bk-status-pending {
    background: #fff7ed;
    color: #c2410c;
}
.bk-detail-status-banner.bk-status-confirmed {
    background: #ecfdf5;
    color: #059669;
}
.bk-detail-status-banner.bk-status-cancelled {
    background: #fef2f2;
    color: #dc2626;
}

/* Status pill */
.bk-status {
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: .5rem;
    white-space: nowrap;
}
.bk-status-pending {
    background: #fff7ed;
    color: #d97706;
}
.bk-status-confirmed {
    background: #ecfdf5;
    color: #059669;
}
.bk-status-cancelled {
    background: #fef2f2;
    color: #dc2626;
}

/* Action buttons */
.bk-booking-actions {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}
.bk-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    cursor: pointer;
    transition: all .2s;
}
.bk-action-confirm {
    background: #ecfdf5;
    color: #059669;
}
.bk-action-confirm:hover {
    background: #059669;
    color: #fff;
}
.bk-action-cancel {
    background: #fef2f2;
    color: #dc2626;
}
.bk-action-cancel:hover {
    background: #dc2626;
    color: #fff;
}

/* Outline button */
.bk-btn-outline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .5rem 1rem;
    font-weight: 500;
    font-size: .85rem;
    text-decoration: none;
    transition: all .2s;
}
.bk-btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Search results in modal */
.bk-search-results {
    max-height: 180px;
    overflow-y: auto;
}
.bk-search-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    cursor: pointer;
    border-radius: .5rem;
    transition: background .15s;
}
.bk-search-item:hover {
    background: var(--primary-light);
}
.bk-search-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .65rem;
    flex-shrink: 0;
}
.bk-selected-user {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: .5rem;
    padding: .5rem .75rem;
    margin-top: .5rem;
}
.bk-total-bar {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .625rem;
    margin-top: .75rem;
    overflow: hidden;
}
.bk-total-details {
    padding: .45rem .75rem;
    font-size: .78rem;
    color: #6b7280;
    min-height: 1.6rem;
}
.bk-total-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .75rem;
    background: var(--primary-light);
    border-top: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
}
.bk-total-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
    .bk-event-header {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .bk-event-kpis {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .4rem;
    }
    .bk-booking-row {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .bk-booking-meta {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .bk-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .bk-toolbar-left {
        flex-direction: column;
        align-items: stretch;
    }

    .bk-filter-select {
        max-width: 100%;
    }
    .bk-event-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .bk-ef-search {
        max-width: 100%;
    }
}

/* ── Booking Confirm/Cancel Modal (bk-confirm-*) ── */
.bk-confirm-modal {
    text-align: center;
    padding: .5rem 0;
}
.bk-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .75rem;
    font-size: 1.6rem;
}
.bk-confirm-icon-success {
    background: #ecfdf5;
    color: #10b981;
}
.bk-confirm-icon-danger {
    background: #fef2f2;
    color: var(--primary);
}
.bk-confirm-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .25rem;
}
.bk-confirm-subtitle {
    font-size: .82rem;
    color: #6b7280;
    margin-bottom: 1rem;
    line-height: 1.4;
}
.bk-confirm-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .625rem;
    margin-bottom: .75rem;
    text-align: left;
    overflow: hidden;
}
.bk-confirm-card-header {
    padding: .5rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid #e5e7eb;
    background: #f3f4f6;
}
.bk-confirm-card-header i {
    margin-right: .35rem;
}
.bk-confirm-client {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
}
.bk-confirm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .75rem;
    color: #fff;
    flex-shrink: 0;
}
.bk-confirm-avatar-success {
    background: #10b981;
}
.bk-confirm-avatar-danger {
    background: var(--primary);
}
.bk-confirm-name {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
}
.bk-confirm-email {
    font-size: .78rem;
    color: #6b7280;
}
.bk-confirm-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem .75rem;
    font-size: .85rem;
}
.bk-confirm-detail-row + .bk-confirm-detail-row {
    border-top: 1px solid #e5e7eb;
}
.bk-confirm-detail-label {
    color: #6b7280;
}
.bk-confirm-detail-value {
    font-weight: 600;
    color: var(--text);
    text-align: right;
}
.bk-confirm-tickets {
    padding: .5rem .75rem;
}
.bk-confirm-ticket-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem 0;
    font-size: .85rem;
    color: #374151;
}
.bk-confirm-ticket-line i {
    margin-right: .35rem;
    color: #6b7280;
}
.bk-confirm-ticket-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .4rem;
    padding-top: .5rem;
    border-top: 1px dashed #d1d5db;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
}
.bk-confirm-amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}
.bk-confirm-warning {
    font-size: .8rem;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: .5rem;
    padding: .5rem .75rem;
    margin-top: .25rem;
    text-align: left;
}
.bk-confirm-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    font-weight: 600;
    font-size: .85rem;
    padding: .5rem 1.25rem;
    transition: all .2s;
}
.bk-confirm-btn-secondary:hover {
    background: #e5e7eb;
    color: #1f2937;
}
.bk-confirm-btn-success {
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-weight: 600;
    font-size: .85rem;
    padding: .5rem 1.25rem;
    transition: all .2s;
}
.bk-confirm-btn-success:hover {
    background: #059669;
    color: #fff;
}
.bk-confirm-btn-danger {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-weight: 600;
    font-size: .85rem;
    padding: .5rem 1.25rem;
    transition: all .2s;
}
.bk-confirm-btn-danger:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* ── My Bookings (mb-*) ─────────────────── */
.mb-bookings-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.mb-booking-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
    cursor: pointer;
    transition: background .15s;
}
.mb-booking-row:hover {
    background: #f9fafb;
}
.mb-booking-row + .mb-booking-row {
    border-top: 1px solid #f0f0f0;
}
.mb-booking-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1;
    min-width: 0;
}
.mb-booking-icon {
    width: 40px;
    height: 40px;
    border-radius: .625rem;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.mb-booking-info {
    min-width: 0;
}
.mb-booking-title {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mb-booking-date {
    font-size: .78rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .1rem;
}
.mb-booking-date i {
    font-size: .7rem;
}
.mb-booking-right {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.mb-booking-tickets {
    display: flex;
    align-items: center;
    gap: .2rem;
}
.mb-booking-amount {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    min-width: 55px;
    text-align: right;
}
.mb-booking-chevron {
    color: #9ca3af;
    font-size: .85rem;
}
.mb-tickets-list {
    display: flex;
    flex-direction: column;
}
.mb-ticket-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .75rem;
    text-decoration: none;
    color: var(--text);
    transition: background .15s;
}
.mb-ticket-link:hover {
    background: var(--primary-light);
    color: var(--primary);
}
.mb-ticket-link + .mb-ticket-link {
    border-top: 1px solid #e5e7eb;
}
.mb-ticket-link-left {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 500;
}
.mb-ticket-link-left i {
    color: #6b7280;
}
.mb-ticket-link-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: #6b7280;
}
.mb-ticket-token {
    font-family: monospace;
    font-size: .75rem;
}

/* My Bookings responsive */
@media (max-width: 768px) {
    .mb-booking-row {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .75rem 1rem;
    }
    .mb-booking-right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .mb-booking-chevron {
        display: none;
    }
}

/* ── Parent Dashboard (pd-*) ────────────── */
.pd-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}
.pd-header {
    margin-bottom: 1.5rem;
}
.pd-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0;
    line-height: 1.3;
}
.pd-wave {
    display: inline-block;
    animation: pdWave .6s ease-in-out;
}
@keyframes pdWave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(15deg); }
}
.pd-subtitle {
    font-size: .9rem;
    color: #6b7280;
    margin: .25rem 0 0;
}
.pd-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 1.5rem 0 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.pd-section-title i {
    color: var(--primary);
    font-size: 1.1rem;
}

/* Alert card (pending participations) */
.pd-alert-card {
    background: #fff;
    border: 1px solid #fbbf24;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.pd-alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .875rem 1.25rem;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
}
.pd-alert-title {
    font-weight: 700;
    font-size: .9rem;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.pd-alert-title i { font-size: 1rem; }
.pd-alert-count {
    background: #f59e0b;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 1rem;
    min-width: 1.5rem;
    text-align: center;
}
.pd-alert-body { padding: 0; }
.pd-pending-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1.25rem;
    gap: 1rem;
    transition: background .15s;
}
.pd-pending-row:hover { background: #fefce8; }
.pd-pending-row + .pd-pending-row { border-top: 1px solid #f3f4f6; }
.pd-pending-info { min-width: 0; flex: 1; }
.pd-pending-title {
    font-weight: 600;
    font-size: .88rem;
    color: #1f2937;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-pending-title:hover { color: var(--primary); }
.pd-pending-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .2rem;
    font-size: .78rem;
    color: #6b7280;
}
.pd-pending-meta i { margin-right: .15rem; }
.pd-pending-actions {
    display: flex;
    gap: .4rem;
    flex-shrink: 0;
}
.pd-btn-confirm {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .35rem .7rem;
    border-radius: .5rem;
    border: none;
    background: #10b981;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.pd-btn-confirm:hover { background: #059669; }
.pd-btn-confirm:disabled { opacity: .6; cursor: not-allowed; }
.pd-btn-refuse {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .35rem .7rem;
    border-radius: .5rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.pd-btn-refuse:hover { border-color: var(--primary); color: var(--primary); }
.pd-btn-refuse:disabled { opacity: .6; cursor: not-allowed; }

/* Child cards */
.pd-child-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pd-child-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.pd-child-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}
.pd-child-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pd-child-identity {
    flex: 1;
    min-width: 0;
}
.pd-child-name {
    font-weight: 700;
    font-size: .95rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-role-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 1rem;
    margin-top: .15rem;
    text-transform: capitalize;
}
.pd-badge-academie { background: #ede9fe; color: #6d28d9; }
.pd-badge-production { background: #dbeafe; color: #1d4ed8; }
.pd-badge-default { background: #f3f4f6; color: #6b7280; }
.pd-child-unlink {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    font-size: .7rem;
    flex-shrink: 0;
}
.pd-child-unlink:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #fef2f2;
}
.pd-child-body {
    padding: .75rem 1.25rem;
    flex: 1;
}
.pd-child-detail {
    font-size: .82rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem 0;
}
.pd-child-detail i {
    font-size: .85rem;
    color: #9ca3af;
    width: 1rem;
    text-align: center;
}
.pd-child-footer {
    display: flex;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    background: #fafafa;
}
.pd-child-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .45rem .5rem;
    border-radius: .5rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.pd-child-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #fff;
}
.pd-child-action-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.pd-child-action-primary:hover {
    background: var(--primary-dark);
    color: #fff;
    border-color: var(--primary-dark);
}

/* Empty state */
.pd-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    background: #fff;
    border: 2px dashed #e5e7eb;
    border-radius: var(--radius-card);
    color: #9ca3af;
}
.pd-empty-state i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
}
.pd-empty-state p {
    font-weight: 600;
    color: #6b7280;
    margin-bottom: .25rem;
}
.pd-empty-state small { font-size: .82rem; }

/* Panels (events / chaperone) */
.pd-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pd-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}
.pd-panel-title {
    font-weight: 700;
    font-size: .9rem;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.pd-panel-title i { color: var(--primary); }
.pd-panel-link {
    font-size: .8rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .25rem;
    transition: opacity .15s;
}
.pd-panel-link:hover { opacity: .7; color: var(--primary); }
.pd-panel-body {
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
    flex: 1;
}
.pd-list-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #9ca3af;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

/* Event rows */
.pd-event-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
    cursor: pointer;
}
.pd-event-row:hover { background: #f9fafb; color: inherit; text-decoration: none; }
.pd-event-row + .pd-event-row { border-top: 1px solid #f3f4f6; }
.pd-event-date-badge {
    width: 46px;
    height: 46px;
    border-radius: .625rem;
    background: var(--primary-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pd-event-day {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary);
}
.pd-event-month {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: .04em;
}
.pd-event-info { flex: 1; min-width: 0; }
.pd-event-title {
    font-weight: 600;
    font-size: .88rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .75rem;
    color: #9ca3af;
    margin-top: .15rem;
}
.pd-event-meta i { margin-right: .1rem; }
.pd-event-type {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 1rem;
    background: #f3f4f6;
    color: #6b7280;
    white-space: nowrap;
    text-transform: capitalize;
    flex-shrink: 0;
}
.pd-event-chevron {
    color: #d1d5db;
    font-size: .85rem;
    flex-shrink: 0;
}

/* Chaperone rows */
.pd-chaperone-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    transition: background .15s;
}
.pd-chaperone-row:hover { background: #f9fafb; }
.pd-chaperone-row + .pd-chaperone-row { border-top: 1px solid #f3f4f6; }
.pd-chaperone-date {
    background: #ecfdf5;
}
.pd-chaperone-date .pd-event-day,
.pd-chaperone-date .pd-event-month {
    color: #059669;
}
.pd-btn-chaperone {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .4rem .75rem;
    border-radius: .5rem;
    border: none;
    background: #10b981;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.pd-btn-chaperone:hover { background: #059669; }

/* Merged representation rows — participant/chaperone tags */
.pd-event-row-rich { align-items: flex-start; }
.pd-rep-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .4rem;
}
.pd-rep-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 500;
    padding: .15rem .55rem .15rem .4rem;
    border-radius: 2rem;
    white-space: nowrap;
}
.pd-rep-tag i { font-size: .7rem; }
.pd-rep-tag-child      { background: #ede9fe; color: #5b21b6; }
.pd-rep-tag-chaperone  { background: #d1fae5; color: #065f46; }
.pd-status-chip {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    padding: .1rem .35rem;
    border-radius: 1rem;
    margin-left: .15rem;
    vertical-align: middle;
}
.pd-status-confirme { background: #dcfce7; color: #166534; }
.pd-status-assigne  { background: #fef9c3; color: #854d0e; }
.pd-status-attente  { background: #f3f4f6; color: #6b7280; }

/* Participation modal list */
.pd-part-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem .25rem;
    border-bottom: 1px solid #f1f5f9;
}
.pd-part-row:last-child { border-bottom: none; }
.pd-part-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    width: 42px;
    height: 48px;
    background: #f1f5f9;
    border-radius: .5rem;
    flex-shrink: 0;
}
.pd-part-info {
    flex: 1;
    min-width: 0;
}
.pd-part-title {
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-part-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .75rem;
    color: #64748b;
    margin-top: .15rem;
}
.pd-part-meta span { display: inline-flex; align-items: center; gap: .2rem; }
.pd-part-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.pd-part-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: .4rem;
    white-space: nowrap;
}
.pd-part-confirmed { background: #ecfdf5; color: #059669; }
.pd-part-assigned  { background: #fff7ed; color: #d97706; }
.pd-part-refused   { background: #fef2f2; color: #dc2626; }
.pd-btn-confirm-part {
    /* inherits style from .pd-btn-confirm */
}
.pd-btn-refuse-part {
    /* inherits style from .pd-btn-refuse */
}

/* Parent Dashboard responsive */
@media (max-width: 768px) {
    .pd-page { padding: 1rem .75rem 2rem; }
    .pd-title { font-size: 1.3rem; }
    .pd-pending-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .pd-pending-actions { width: 100%; }
    .pd-pending-actions button { flex: 1; justify-content: center; }
    .pd-child-footer { flex-direction: column; }
    .pd-child-action { justify-content: center; }
    .pd-event-type { display: none; }
}

/* ── Admin booking wizard (abk-*) ────────────────────────────── */
.abk-wizard-wrap { display: flex; gap: 0; min-height: 420px; }
.abk-wizard-nav {
    width: 190px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    padding: .75rem 0;
    background: #f8fafc;
    border-radius: var(--radius, .75rem) 0 0 var(--radius, .75rem);
}
.abk-wizard-step-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1rem;
    color: var(--text-muted, #94a3b8);
    font-size: .83rem;
    transition: color .15s;
}
.abk-wizard-step-item.active { color: var(--primary, #b41414); font-weight: 600; }
.abk-wizard-step-item.done { color: #22c55e; }
.abk-wizard-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.abk-wizard-step-item.active .abk-wizard-step-num { background: var(--primary, #b41414); color: #fff; }
.abk-wizard-step-item.done .abk-wizard-step-num { background: #22c55e; color: #fff; }
.abk-wizard-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abk-wizard-content { flex: 1; padding: 1.25rem 1.35rem; min-width: 0; overflow-y: auto; }

/* Event cards */
.abk-event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .85rem;
}
.abk-event-card {
    border: 2px solid var(--border, #e2e8f0);
    border-radius: var(--radius, .75rem);
    padding: .85rem 1rem;
    cursor: pointer;
    background: var(--surface, #fff);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.abk-event-card:hover { border-color: var(--primary, #b41414); box-shadow: 0 2px 10px rgba(180,20,20,.08); }
.abk-event-card.selected { border-color: var(--primary, #b41414); background: var(--primary-light, #fdecea); }
.abk-event-card-title { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; color: var(--text-main, #1e293b); }
.abk-event-card-date { font-size: .8rem; color: var(--primary, #b41414); margin-bottom: .15rem; }
.abk-event-card-meta { font-size: .78rem; color: var(--text-muted, #94a3b8); margin-bottom: .15rem; }
.abk-event-card-price { font-size: .8rem; font-weight: 600; color: var(--text-secondary, #64748b); margin-top: .3rem; }

/* Representation cards */
.abk-rep-list { display: flex; flex-direction: column; gap: .6rem; }
.abk-rep-card {
    border: 2px solid var(--border, #e2e8f0);
    border-radius: var(--radius, .75rem);
    padding: .85rem 1rem;
    cursor: pointer;
    background: var(--surface, #fff);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.abk-rep-card:hover:not([data-disabled]) {
    border-color: var(--primary, #b41414);
    box-shadow: 0 2px 8px rgba(180,20,20,.08);
    background: #fff9f9;
}
.abk-rep-card.selected { border-color: var(--primary, #b41414); background: var(--primary-light, #fdecea); }
.abk-rep-card-disabled, .abk-rep-card[data-disabled] { opacity: .55; cursor: not-allowed; background: #f5f5f5; }

/* Quantity selectors */
.abk-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius, .75rem);
    background: var(--surface, #fff);
}
.abk-qty-label { font-size: .9rem; font-weight: 500; }
.abk-qty-price { color: var(--text-muted, #94a3b8); font-size: .82rem; margin-left: .4rem; font-weight: 400; }
.abk-qty-ctrl { display: flex; align-items: center; gap: .75rem; }
.abk-qty-btn {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 50%;
    background: #f8fafc;
    color: var(--text, #334155);
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    padding: 0;
}
.abk-qty-btn:hover { background: var(--primary-light, #fdecea); border-color: var(--primary, #b41414); color: var(--primary, #b41414); }
.abk-qty-val { font-size: 1.15rem; font-weight: 700; min-width: 2rem; text-align: center; color: var(--text-main, #1e293b); }

/* Recap strips */
.abk-recap-strip {
    background: var(--primary-light, #fdecea);
    border: 1px solid var(--primary, #b41414);
    border-radius: var(--radius, .75rem);
    padding: .75rem 1rem;
}
.abk-recap-mini {
    background: #f8fafc;
    border-radius: var(--radius, .75rem);
    padding: .75rem 1rem;
    border: 1px solid var(--border, #e2e8f0);
}

/* Responsive */
@media (max-width: 600px) {
    .abk-wizard-wrap { flex-direction: column; }
    .abk-wizard-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border, #e2e8f0);
        display: flex;
        padding: .5rem .75rem;
        gap: .25rem;
        border-radius: var(--radius, .75rem) var(--radius, .75rem) 0 0;
        overflow-x: auto;
    }
    .abk-wizard-step-item { flex-direction: column; gap: .2rem; padding: .35rem .6rem; font-size: .72rem; }
    .abk-wizard-content { padding: 1rem; }
    .abk-event-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════
   PROFILE PAGE (pf-*)
   ══════════════════════════════════════════ */
.pf-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.75rem 0 3rem;
}

/* Hero */
.pf-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}
.pf-hero-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    color: #fff;
}
.pf-hero-body { flex: 1; min-width: 0; }
.pf-hero-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: .4rem;
}
.pf-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
    color: var(--text-muted);
}
.pf-hero-email i, .pf-hero-since i { margin-right: .25rem; }
.pf-role-badge {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .015em;
}
.pf-role-responsable { background: var(--primary-light); color: var(--primary); }
.pf-role-production  { background: #dbeafe; color: #1e40af; }
.pf-role-academie    { background: #d1fae5; color: #065f46; }
.pf-role-parent      { background: #fff7ed; color: #9a3412; }
.pf-role-spectateur  { background: #f1f5f9; color: #475569; }

/* Grid */
.pf-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.25rem;
    align-items: start;
}
.pf-col-main { display: flex; flex-direction: column; gap: 1.25rem; }
.pf-col-side { display: flex; flex-direction: column; gap: 1.25rem; }

/* Card */
.pf-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.pf-card-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}
.pf-card-header-sec { background: #f0fdf4; border-bottom-color: #bbf7d0; }
.pf-card-icon {
    width: 30px;
    height: 30px;
    border-radius: .45rem;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.pf-card-header-sec .pf-card-icon { background: #dcfce7; color: #16a34a; }
.pf-card-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-main);
}
.pf-card-body { padding: 1.25rem; }

/* Form fields */
.pf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
}
.pf-field { margin-bottom: 1rem; }
.pf-field:last-of-type { margin-bottom: 0; }
.pf-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: .35rem;
}
.pf-optional {
    font-size: .73rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: .25rem;
}
.pf-input {
    width: 100%;
    padding: .55rem .8rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    font-size: .875rem;
    color: var(--text-main);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.pf-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(180,20,20,.12);
}
.pf-input-readonly {
    background: #f8fafc;
    color: var(--text-muted);
    cursor: default;
}

/* Password field */
.pf-pwd-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pf-pwd-wrap .pf-input { padding-right: 2.5rem; }
.pf-pwd-toggle {
    position: absolute;
    right: .6rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: .2rem .3rem;
    font-size: 1rem;
    line-height: 1;
    transition: color .15s;
}
.pf-pwd-toggle:hover { color: var(--primary); }

/* Password strength */
.pf-pwd-strength {
    margin-top: .4rem;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}
.pf-pwd-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width .3s ease, background-color .3s ease;
}
.pf-str-weak   { background: #ef4444; }
.pf-str-medium { background: #f59e0b; }
.pf-str-strong { background: #10b981; }

/* Actions */
.pf-actions { margin-top: 1.25rem; }
.pf-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.25rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.pf-btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.pf-btn-primary:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.pf-btn-sec {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.25rem;
    background: #fff;
    color: #16a34a;
    border: 1px solid #86efac;
    border-radius: var(--radius-btn);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.pf-btn-sec:hover { background: #f0fdf4; border-color: #4ade80; transform: translateY(-1px); }
.pf-btn-sec:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Spinner */
.pf-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pf-spin .6s linear infinite;
    vertical-align: middle;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* Feedback */
.pf-feedback {
    margin-top: .85rem;
    padding: .6rem .9rem;
    border-radius: .5rem;
    font-size: .83rem;
    font-weight: 500;
}
.pf-feedback-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.pf-feedback-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Specialties */
.pf-specialty-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .9rem;
    min-height: 1.75rem;
}
.pf-specialty-empty { font-size: .83rem; color: var(--text-muted); }
.pf-specialty-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 2rem;
    padding: .25rem .7rem;
    font-size: .8rem;
    font-weight: 600;
}
.pf-specialty-remove {
    background: none;
    border: none;
    color: #93c5fd;
    cursor: pointer;
    padding: 0;
    font-size: .8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color .15s;
}
.pf-specialty-remove:hover { color: #1d4ed8; }
.pf-specialty-add {
    display: flex;
    gap: .5rem;
}
.pf-specialty-add .pf-input { flex: 1; }
.pf-btn-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s;
}
.pf-btn-icon:hover { background: var(--primary-dark); }

/* Responsive */
@media (max-width: 768px) {
    .pf-grid { grid-template-columns: 1fr; }
    .pf-hero { padding: 1.1rem 1rem; }
    .pf-hero-avatar { width: 52px; height: 52px; font-size: 1.15rem; }
    .pf-hero-name { font-size: 1.1rem; }
    .pf-row { grid-template-columns: 1fr; gap: 0; }
    .pf-page { padding: 1rem 0 2rem; }
}