/**
 * MMAS - Styles principaux
 * Interface moderne et responsive
 *
 * NOTE: Les variables CSS sont définies dans tokens.css (chargé en premier)
 */

/* ========================================
   ANIMATIONS
   ======================================== */

/* Skeleton Loading Animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-xs);
    height: 1em;
    display: inline-block;
}

.skeleton-text {
    width: 100%;
    margin-bottom: 0.5rem;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Skeleton for stat-cards */
.stat-card.loading .stat-value {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-xs);
    color: transparent;
    min-width: 60px;
    display: inline-block;
}

.stat-card.loading .stat-value::after {
    content: '---';
    visibility: hidden;
}

/* Keyboard Focus Animation */
@keyframes flashFocus {
    0% {
        box-shadow: 0 0 0 0 rgba(67, 56, 202, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(67, 56, 202, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(67, 56, 202, 0);
    }
}

.flash-focus {
    animation: flashFocus 0.5s ease-out;
}

/* ========================================
   ACCESSIBILITÉ — Focus visible
   ======================================== */

/* Focus ring universel pour les éléments interactifs */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Retirer le outline par défaut sur :focus (garder :focus-visible) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Focus pour éléments personnalisés (div cliquables) */
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ========================================
   RESET & BASE
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: 15px;
    /* Slightly larger for readability */
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--background);
    color: var(--gray-700);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ========================================
   FOCUS VISIBLE (Accessibilité)
   ======================================== */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(71, 68, 178, 0.15);
}

.nav-item:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* Skip link pour accessibilité clavier */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: white;
    padding: 8px 16px;
    z-index: 10000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* ========================================
   LAYOUT
   ======================================== */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: var(--transition-bounce);
    box-shadow: var(--shadow-xl);
}

.sidebar-header {
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* More subtle */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-close-sidebar {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.btn-close-sidebar:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

@media (max-width: 1024px) {
    .btn-close-sidebar {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.sidebar-logo img {
    width: auto;
    height: 40px;
    max-width: 120px;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background: white;
    padding: 4px 8px;
    object-fit: contain;
}

.sidebar-logo h1 {
    font-size: 1.4rem;
    font-weight: 800;
    /* Bolder */
    letter-spacing: -0.02em;
    background: linear-gradient(to right, #fff, var(--primary-100));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-nav {
    flex: 1;
    padding: 24px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.nav-section {
    margin-bottom: 32px;
}

.nav-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* Reset pour boutons nav */
button.nav-item,
button.bottom-nav-item {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 6px;
    font-weight: 500;
    background: none;
}

.nav-item:hover,
.nav-item:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    transform: translateX(4px);
}

.nav-item.active {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-item-icon {
    font-size: 1.3rem;
    width: 24px;
    text-align: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.nav-item-text {
    flex: 1;
}

.nav-item-badge {
    background: var(--danger);
    color: var(--white);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* User section */
.sidebar-user {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-details {
    flex: 1;
    overflow: hidden;
}

.user-name {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Main content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--background);
    transition: margin-left var(--transition-bounce);
}

/* Header */
.main-header {
    background: rgba(255, 255, 255, 0.85);
    /* Translucent */
    padding: 0 32px;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    /* Gray-200 transparent */
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.page-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 500;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Bouton menu mobile caché sur desktop */
.mobile-menu-btn {
    display: none;
}

/* Bottom navigation cachée sur desktop */
.bottom-nav {
    display: none;
}

/* Page content */
.page-content {
    padding: 32px;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

/* Page sections - only show active */
.page-section {
    display: none;
}

.page-section.active {
    display: block;
}

/* ========================================
   COMPOSANTS
   ======================================== */

/* Cards */
.card {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    transition: var(--transition);
}

.card:hover,
.card:focus-visible {
    box-shadow: var(--shadow-md);
}

/* Card Variants */
.card-danger {
    border: 2px solid var(--danger);
    border-top: none;
}

.card-danger .card-header {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
    color: white;
    border-bottom: none;
}

.card-danger .card-header .card-title {
    color: white;
}

.card-danger .card-header .badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.card-warning {
    border: 2px solid var(--warning);
    border-top: none;
}

.card-warning .card-header {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%);
    color: white;
    border-bottom: none;
}

.card-success {
    border: 2px solid var(--success);
    border-top: none;
}

.card-success .card-header {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    color: white;
    border-bottom: none;
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
}

.card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-header-left i {
    font-size: 1.1rem;
}

.dashboard-alerts-badges {
    display: flex;
    gap: 10px;
}

.card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

.card-body {
    padding: 24px;
}

.card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

/* Stat Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border-left: 4px solid var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-card:hover,
.stat-card:focus-visible {
    box-shadow: var(--shadow-md);
    border-left-width: 5px;
}

.stat-card.success {
    border-left-color: var(--success);
}

.stat-card.warning {
    border-left-color: var(--warning);
}

.stat-card.danger {
    border-left-color: var(--danger);
}

.stat-card.info {
    border-left-color: var(--info);
}

/* 
.stat-header removed as structure changed to flex row 
*/

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--gray-100);
}

.stat-card.success .stat-icon {
    background: rgba(16, 185, 129, 0.1);
}

.stat-card.warning .stat-icon {
    background: rgba(245, 158, 11, 0.1);
}

.stat-card.danger .stat-icon {
    background: rgba(239, 68, 68, 0.1);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-top: 4px;
}

/* Stat card cliquable */
.stat-card.clickable {
    cursor: pointer;
}

.stat-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-card.clickable:active {
    transform: translateY(0);
}

.stat-card.clickable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Delta indicator */
.stat-delta {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 4px;
    min-height: 1.2em;
}

.stat-delta.positive {
    color: var(--success);
}

.stat-delta.negative {
    color: var(--danger);
}

.stat-delta.neutral {
    color: var(--gray-400);
}

.stat-change {
    font-size: 0.75rem;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-change.positive {
    color: var(--success);
}

.stat-change.negative {
    color: var(--danger);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    box-shadow: 0 4px 6px rgba(67, 56, 202, 0.25);
    /* Indigo Shadow */
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(67, 56, 202, 0.35);
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--white);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-900);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    color: var(--white);
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.25);
}

.btn-success:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.35);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
    color: var(--white);
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.25);
}

.btn-danger:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(239, 68, 68, 0.35);
}

.btn-warning {
    background: linear-gradient(135deg, #fbbf24 0%, var(--warning) 100%);
    color: #451a03;
    font-weight: 700;
}

.btn-warning:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.25);
}

.btn-whatsapp {
    background: var(--whatsapp);
    color: var(--white);
    box-shadow: 0 4px 6px rgba(37, 211, 102, 0.25);
}

.btn-whatsapp:hover:not(:disabled) {
    background: #1faf54;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(37, 211, 102, 0.35);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
}

.btn-outline:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-sm {
    padding: 8px 14px;
    font-size: 0.8rem;
    gap: 6px;
}

.btn-xs {
    padding: 6px 10px;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1.1rem;
}

.btn-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-ghost {
    background: transparent;
    color: var(--gray-500);
    box-shadow: none;
    border: none;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    color: var(--primary);
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    transition: var(--transition);
    background: var(--surface);
    color: var(--gray-900);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    /* Soft Focus Ring */
    background: var(--white);
}

/* Phone input with country selector */
.phone-input-group {
    display: flex;
    gap: 8px;
}

.phone-input-group .phone-country {
    width: 110px;
    flex-shrink: 0;
    padding: 12px 8px;
    font-size: 0.9rem;
}

.phone-input-group .phone-number {
    flex: 1;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--gray-300);
}

.form-input::placeholder {
    color: var(--gray-400);
}

.form-input.error {
    border-color: var(--danger);
    background-color: var(--danger-light);
}

.form-help {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 6px;
    margin-left: 2px;
}

/* Field-level error messages */
.field-error {
    display: block;
    font-size: 0.8rem;
    color: var(--danger);
    margin-top: 4px;
    min-height: 1.2em;
}

.field-error:empty {
    display: none;
}

/* Input state with error */
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
    border-color: var(--danger);
    background-color: #fef2f2;
}

.form-input[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.form-error {
    font-size: 0.8rem;
    color: var(--danger);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Search */
.search-box {
    position: relative;
}

.search-box input {
    padding-left: 40px;
}

.search-box-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

/* Global Search Results */
.global-search-container {
    position: relative;
}

.search-results-dropdown,
.global-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
    min-width: 350px;
}

.search-results-section {
    border-bottom: 1px solid var(--gray-100);
}

.search-results-section:last-child {
    border-bottom: none;
}

.search-results-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    padding: 8px 12px;
    background: var(--gray-50);
}

.search-result-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-result-item:hover {
    background: var(--gray-50);
}

.search-result-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.search-result-icon.family {
    background: var(--primary);
}

.search-result-icon.child {
    background: var(--secondary);
}

.search-result-icon.payment {
    background: var(--success);
}

.search-result-icon.session {
    background: var(--warning);
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-weight: 500;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-detail {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.search-no-results {
    padding: 20px;
    text-align: center;
    color: var(--gray-500);
}

.search-loading {
    padding: 20px;
    text-align: center;
    color: var(--gray-400);
}

/* Notification Bell */
.notification-bell-container {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: var(--radius);
    min-width: 16px;
    text-align: center;
}

.notification-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 1001;
    max-height: 450px;
    display: flex;
    flex-direction: column;
}

.notification-panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.notification-panel-header h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.notification-panel-body {
    flex: 1;
    overflow-y: auto;
    max-height: 320px;
}

.notification-panel-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--gray-200);
    text-align: center;
    background: var(--gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.notification-panel-footer a {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.notification-item:hover {
    background: var(--gray-50);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-item-icon.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.notification-item-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.notification-item-icon.info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}

.notification-item-icon.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.notification-item-content {
    flex: 1;
    min-width: 0;
}

.notification-item-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-800);
    margin-bottom: 2px;
}

.notification-item-message {
    font-size: 0.8rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-loading {
    padding: 40px;
    text-align: center;
    color: var(--gray-400);
}

.notification-empty {
    padding: 40px;
    text-align: center;
    color: var(--gray-400);
}

.notification-empty i {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

/* Alerts List (Page) */
.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--white);
    border-radius: var(--radius);
    border-left: 4px solid;
}

.alert-card.error {
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.03);
}

.alert-card.warning {
    border-left-color: var(--warning);
    background: rgba(245, 158, 11, 0.03);
}

.alert-card.info {
    border-left-color: var(--info);
    background: rgba(59, 130, 246, 0.03);
}

.alert-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.alert-card.error .alert-card-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.alert-card.warning .alert-card-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.alert-card.info .alert-card-icon {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}

.alert-card-content {
    flex: 1;
}

.alert-card-title {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.alert-card-message {
    font-size: 0.9rem;
    color: var(--gray-600);
}

.alert-card-actions {
    display: flex;
    gap: 8px;
}

/* Tables */
.table-container {
    overflow-x: auto;
}

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

.table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.875rem;
}

.table tbody tr:hover,
.table tbody tr:focus-visible {
    background: var(--gray-50);
}

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

/* Table Scroll Wrapper - Mobile responsive */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1px;
}

@media (max-width: 768px) {
    .table-scroll-wrapper {
        position: relative;
    }

    .table-scroll-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s;
    }

    .table-scroll-wrapper.no-scroll::after {
        opacity: 0;
    }

    .table-scroll-wrapper .table {
        min-width: 600px;
    }
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
}

.badge-primary {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.badge-gray {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* Modals */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    opacity: 0;
    animation: fadeIn 0.2s ease forwards;
}

/* Sub-modals opened over another modal must stack above their parent. */
#rapprochementModal {
    z-index: 1100;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.modal-overlay.closing {
    animation: fadeOut 0.2s ease forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

.modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalSlideIn {
    to {
        transform: scale(1) translateY(0);
    }
}

.modal-lg {
    max-width: 800px;
}

.modal-xl {
    max-width: 1000px;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--gray-100);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--gray-500);
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
    color: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 420px;
    animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toast.success {
    background: linear-gradient(135deg, var(--success-dark), var(--success));
    border-color: rgba(16, 185, 129, 0.3);
}

.toast.warning {
    background: linear-gradient(135deg, var(--warning-dark), var(--warning));
    border-color: rgba(245, 158, 11, 0.3);
}

.toast.error {
    background: linear-gradient(135deg, var(--danger-dark), var(--danger));
    border-color: rgba(239, 68, 68, 0.3);
}

.toast.info {
    background: linear-gradient(135deg, #2563eb, var(--info));
    border-color: rgba(59, 130, 246, 0.3);
}

.toast-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.toast-message {
    font-size: 0.85rem;
    opacity: 0.9;
}

.toast-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.toast.hiding {
    animation: toastSlideOut 0.3s ease forwards;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }

    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    to {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
}

/* Empty states */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--gray-500);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 0.875rem;
    margin-bottom: 16px;
}

/* Loading */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   PAGES SPÉCIFIQUES
   ======================================== */

/* Famille cards - Style MMAS */
.families-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.family-card {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: var(--transition);
    border: none;
    border-top: 4px solid var(--secondary);
}

.family-card:hover,
.family-card:focus-visible {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.family-card-header {
    padding: 14px 16px 10px;
    border-bottom: none;
}

.family-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.family-card-title i {
    color: var(--secondary);
}

.family-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.family-card-name i {
    color: var(--secondary);
}

.family-card-body {
    padding: 0 16px 12px;
}

.family-contact-info {
    margin-bottom: 16px;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.contact-row i {
    width: 20px;
    color: var(--secondary);
}

.contact-row a {
    color: var(--secondary);
    text-decoration: none;
}

.contact-row a:hover {
    text-decoration: underline;
}

.family-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.family-contact-row i {
    width: 20px;
    color: var(--gray-500);
}

.family-contact-row a {
    color: var(--secondary);
    text-decoration: none;
}

.family-contact-row a:hover {
    text-decoration: underline;
}

.country-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    margin-right: 4px;
}

/* Couleurs drapeaux (couleur dominante par pays). Fallback générique
   = .country-badge rouge ci-dessus pour les pays non listés. */
.country-badge.other { background: var(--gray-500); }

/* Maghreb / Afrique du Nord */
.country-badge.ma { background: #c1272d; } /* Maroc */
.country-badge.dz { background: #006633; } /* Algérie */
.country-badge.tn { background: #e70013; } /* Tunisie */
.country-badge.eg { background: #ce1126; } /* Égypte */
.country-badge.ly { background: #239e46; } /* Libye */
.country-badge.mr { background: #006233; } /* Mauritanie */

/* Afrique francophone */
.country-badge.sn { background: #00853f; } /* Sénégal */
.country-badge.ci { background: #f77f00; } /* Côte d'Ivoire */
.country-badge.cm { background: #007a5e; } /* Cameroun */
.country-badge.ml { background: #14b53a; } /* Mali */
.country-badge.bf { background: #ce1126; } /* Burkina Faso */
.country-badge.tg { background: #006a4e; } /* Togo */
.country-badge.bj { background: #008751; } /* Bénin */
.country-badge.ga { background: #009e60; } /* Gabon */
.country-badge.cg { background: #009543; } /* Congo */
.country-badge.cd { background: #007fff; } /* RD Congo */
.country-badge.rw { background: #00a1de; } /* Rwanda */
.country-badge.ke { background: #006600; } /* Kenya */
.country-badge.mg { background: #fc3d32; } /* Madagascar */

/* Europe */
.country-badge.fr { background: #0055a4; } /* France */
.country-badge.be { background: #fdda24; color: #000; } /* Belgique */
.country-badge.nl { background: #ae1c28; } /* Pays-Bas */
.country-badge.es { background: #aa151b; } /* Espagne */
.country-badge.it { background: #009246; } /* Italie */
.country-badge.de { background: #000; } /* Allemagne */
.country-badge.ch { background: #d52b1e; } /* Suisse */
.country-badge.at { background: #ed2939; } /* Autriche */
.country-badge.gb { background: #012169; } /* Royaume-Uni */
.country-badge.ie { background: #169b62; } /* Irlande */
.country-badge.pt { background: #006600; } /* Portugal */
.country-badge.lu { background: #ed2939; } /* Luxembourg */
.country-badge.dk { background: #c8102e; } /* Danemark */
.country-badge.se { background: #006aa7; } /* Suède */
.country-badge.no { background: #ba0c2f; } /* Norvège */
.country-badge.fi { background: #003580; } /* Finlande */
.country-badge.pl { background: #dc143c; } /* Pologne */
.country-badge.hu { background: #436f4d; } /* Hongrie */
.country-badge.ro { background: #002b7f; } /* Roumanie */
.country-badge.cz { background: #11457e; } /* Tchéquie */
.country-badge.gr { background: #0d5eaf; } /* Grèce */
.country-badge.tr { background: #e30a17; } /* Turquie */
.country-badge.ru { background: #d52b1e; } /* Russie */

/* Moyen-Orient / Golfe */
.country-badge.sa { background: #006c35; } /* Arabie Saoudite */
.country-badge.ae { background: #00732f; } /* UAE */
.country-badge.qa { background: #8d1b3d; } /* Qatar */
.country-badge.kw { background: #007a3d; } /* Koweït */
.country-badge.bh { background: #ce1126; } /* Bahreïn */
.country-badge.om { background: #db161b; } /* Oman */
.country-badge.lb { background: #ed1c24; } /* Liban */
.country-badge.jo { background: #007a3d; } /* Jordanie */
.country-badge.sy { background: #ce1126; } /* Syrie */
.country-badge.iq { background: #cd2027; } /* Irak */
.country-badge.il { background: #0038b8; } /* Israël */
.country-badge.ir { background: #239f40; } /* Iran */
.country-badge.ye { background: #ce1126; } /* Yémen */

/* Amériques */
.country-badge.us { background: #b22234; } /* USA */
.country-badge.ca { background: #ff0000; } /* Canada */
.country-badge.mx { background: #006847; } /* Mexique */
.country-badge.br { background: #009c3b; } /* Brésil */
.country-badge.ar { background: #74acdf; color: #000; } /* Argentine */
.country-badge.cl { background: #0033a0; } /* Chili */

/* Asie / Océanie */
.country-badge.cn { background: #ee1c25; } /* Chine */
.country-badge.jp { background: #bc002d; } /* Japon */
.country-badge.kr { background: #cd2e3a; } /* Corée Sud */
.country-badge.in { background: #ff9933; color: #000; } /* Inde */
.country-badge.pk { background: #01411c; } /* Pakistan */
.country-badge.id { background: #ff0000; } /* Indonésie */
.country-badge.my { background: #cc0001; } /* Malaisie */
.country-badge.sg { background: #ef3340; } /* Singapour */
.country-badge.th { background: #ed1d24; } /* Thaïlande */
.country-badge.au { background: #012169; } /* Australie */
.country-badge.nz { background: #012169; } /* Nouvelle-Zélande */

.family-children-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Liste des enfants - nouveau style */
.children-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--gray-100);
    padding-top: 16px;
}

.child-row {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border-radius: var(--radius);
    padding: 12px 16px;
    border-left: 4px solid var(--secondary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.child-row:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, var(--info-light) 100%);
    transform: translateX(4px);
}

.child-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.child-name-label {
    font-weight: 700;
    color: var(--gray-800);
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}

.child-amount-badge {
    background: linear-gradient(135deg, var(--secondary) 0%, #0891b2 100%);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-lg);
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 156, 198, 0.3);
}

.child-activities-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Bloc enfant avec activites - ancien style conservé */
.child-block {
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    border-left: 3px solid var(--secondary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.child-block:hover {
    background: rgba(0, 156, 198, 0.1);
    border-left-color: var(--primary);
    transform: translateX(3px);
}

.child-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.child-block-header .child-name {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9rem;
}

.child-block-header .child-tag-amount {
    background: var(--secondary);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
}

.child-activities {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.activity-badge-small {
    display: inline-block;
    background: rgba(0, 156, 198, 0.15);
    color: var(--secondary);
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
}

.activity-badge-small.suspended {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    text-decoration: line-through;
}

.child-tag {
    display: inline-flex;
    align-items: center;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 6px 12px;
    margin: 4px 4px 4px 0;
    font-size: 0.85rem;
    color: var(--gray-700);
}

.child-tag .child-count {
    background: var(--secondary);
    color: white;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
}

.family-card-footer {
    padding: 16px 24px;
    background: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray-100);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.paid {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-dark);
}

.status-badge.unpaid {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-dark);
}

/* Statut "Suspendu" — toutes les prestations exclues ce mois (suspended_months
   ou trimestriel hors mois T). Distinct de "Payé" pour ne pas tromper l'admin. */
.status-badge.suspended {
    background: rgba(139, 92, 246, 0.15);
    color: #6b21a8;
}

/* Badge "Inactive" : famille validée avec activités actives mais aucun
   paiement depuis 90+ jours (ou jamais payé) → probablement un arrêt non
   saisi. Couleur ambre distincte du statut paiement. */
.status-badge.inactive {
    background: rgba(249, 115, 22, 0.15);
    color: #9a3412;
    margin-left: 6px;
}

.total-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gray-800);
}

.family-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    font-size: 0.8rem;
    font-weight: 600;
}

.family-status-badge.paid {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.family-status-badge.unpaid {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-dark);
}

.family-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
}

.family-card-actions {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
}

.family-card-actions .btn {
    flex: 1;
    justify-content: center;
}

/* Nouveaux boutons d'action colorés */
.action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn.whatsapp {
    background: linear-gradient(135deg, var(--whatsapp) 0%, var(--whatsapp-dark) 100%);
    color: white;
}

.action-btn.whatsapp:hover {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.action-btn.edit {
    background: var(--gray-100);
    color: var(--gray-600);
}

.action-btn.edit:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.action-btn.payment {
    background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%);
    color: white;
}

.action-btn.payment:hover {
    background: linear-gradient(135deg, var(--info) 0%, #2563eb 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.action-btn.delete {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
    color: white;
}

.action-btn.delete:hover {
    background: linear-gradient(135deg, #f87171 0%, var(--danger) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Anciens styles conservés pour compatibilité */
.family-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.child-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.child-item:last-child {
    border-bottom: none;
}

.child-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.child-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.child-name {
    font-weight: 500;
}

.child-level {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.child-amount {
    font-weight: 600;
    color: var(--primary);
}

.family-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dashboard charts placeholder */
.chart-container {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    border-radius: var(--radius);
}

/* ========================================
   FAMILY DETAILS SECTIONS
   ======================================== */
.family-details-section {
    margin-bottom: 24px;
}

.family-details-section .section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.family-details-section .section-title i {
    color: var(--primary);
}

/* Historique des paiements */
.payments-summary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.payments-total {
    font-size: 1rem;
}

.payments-total strong {
    font-size: 1.2rem;
}

.payments-list {
    max-height: 300px;
    overflow-y: auto;
}

.payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    border-left: 3px solid var(--success);
}

.payment-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.payment-date {
    color: var(--gray-500);
    font-size: 0.85rem;
    min-width: 80px;
}

.payment-child {
    font-weight: 500;
    color: var(--gray-700);
}

.payment-nature {
    background: var(--gray-200);
    padding: 2px 8px;
    border-radius: var(--radius);
    font-size: 0.75rem;
    color: var(--gray-600);
}

.payment-amount {
    font-weight: 700;
    color: var(--success);
    font-size: 1rem;
}

/* ========================================
   ACTIVITIES STATS
   ======================================== */
.activities-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.activity-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--primary);
    transition: all 0.2s ease;
}

.activity-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.activity-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.activity-stat-info {
    flex: 1;
    min-width: 0;
}

.activity-stat-name {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.activity-stat-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.activity-stat-details i {
    margin-right: 4px;
}

.activity-stat-revenue {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--success);
    white-space: nowrap;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    html, body {
        height: auto;
        min-height: 100vh;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

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

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .family-grid {
        grid-template-columns: 1fr;
    }

    /* ===== MODALS RESPONSIFS ===== */

    /* Overlay - modal glisse du bas */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    /* Modal plein écran sur mobile */
    .modal {
        max-width: 100%;
        max-height: 90vh;
        margin: 5vh 8px 0;
        border-radius: var(--radius) var(--radius) 0 0;
        animation: slideUpModal 0.3s ease-out;
    }

    @keyframes slideUpModal {
        from {
            transform: translateY(100%);
            opacity: 0.5;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-body {
        max-height: 65vh;
        overflow-y: auto;
        padding: 16px;
    }

    /* Footer sticky en bas */
    .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--white);
        border-top: 1px solid var(--gray-200);
        padding: 12px 16px;
        margin: 0;
        border-radius: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1;
        min-width: 120px;
    }

    /* ===== FORM-ROW EN COLONNE ===== */

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-row > .form-group {
        width: 100%;
        min-width: 0;
    }

    .form-row-modern {
        grid-template-columns: 1fr;
    }

    /* ===== PHONE INPUT GROUP ===== */

    .phone-input-group {
        flex-direction: column;
        gap: 8px;
    }

    .phone-input-group .phone-country,
    .phone-input-group .phone-number {
        width: 100%;
    }

    /* ===== CARD ACTIONS ===== */

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

    .card-actions .form-input,
    .card-actions .form-select {
        width: 100%;
        min-width: 0;
    }

    /* ===== FORM ACTIONS (boutons) ===== */

    .form-actions {
        flex-direction: column;
        gap: 8px;
    }

    .form-actions .btn {
        width: 100%;
    }

    /* ===== TOUCH-FRIENDLY BUTTONS ===== */

    .table-actions .btn-sm,
    .table .btn-sm {
        min-width: 36px;
        min-height: 36px;
        padding: 8px;
    }

    .table-actions .btn-sm i {
        font-size: 1rem;
    }

    /* ===== TOAST SUR MOBILE ===== */

    .toast-container {
        left: 16px;
        right: 16px;
        bottom: 80px; /* au-dessus de la bottom-nav */
    }

    .toast {
        min-width: auto;
        max-width: 100%;
    }
}

/* ========================================
   UTILITAIRES
   ======================================== */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

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

.font-bold {
    font-weight: 600;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.text-muted {
    color: var(--gray-500);
}

.text-success {
    color: var(--success);
}

.text-danger {
    color: var(--danger);
}

.text-warning {
    color: var(--warning);
}

.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

.mt-5 {
    margin-top: 24px;
}

.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mb-5 {
    margin-bottom: 24px;
}

.p-0 {
    padding: 0;
}

.p-2 {
    padding: 8px;
}

.p-3 {
    padding: 12px;
}

.p-4 {
    padding: 16px;
}

.p-5 {
    padding: 24px;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

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

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 2px dashed var(--gray-200);
    min-height: 200px;
}

.empty-state-icon {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
    opacity: 0.8;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.empty-state-description {
    font-size: 0.9rem;
    color: var(--gray-500);
    max-width: 300px;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.empty-state .btn {
    margin-top: 0.5rem;
}

/* ========================================
   LOGIN PAGE
   ======================================== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    padding: 20px;
}

.login-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--white);
    font-size: 2.5rem;
}

.login-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.login-header p {
    color: var(--gray-500);
    font-size: 0.875rem;
}

.login-form {
    margin-bottom: 24px;
}

.login-divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: var(--gray-400);
    font-size: 0.875rem;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

.login-divider span {
    padding: 0 16px;
}

.login-error {
    margin-top: 16px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius);
    color: var(--danger);
    font-size: 0.875rem;
    text-align: center;
}

/* ========================================
   ADDITIONAL UTILITIES
   ======================================== */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.cursor-pointer {
    cursor: pointer;
}

.select-none {
    user-select: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: var(--radius-xs);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-xs);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Focus states */
.btn:focus,
.form-input:focus,
.form-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Transitions for interactive elements */
.nav-item,
.card,
.btn,
.family-card {
    transition: var(--transition);
}

/* Print styles */
@media print {

    .sidebar,
    .main-header,
    .btn,
    .table-actions,
    .bottom-nav,
    .toast-container {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .page-content {
        padding: 0 !important;
    }

    /* Dashboard stats grid - 2 columns for print */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Hide charts - Canvas doesn't print well */
    .charts-grid,
    .dashboard-charts {
        display: none !important;
    }

    /* Alerts table - compact for print */
    #dashboardAlertsPanel table {
        font-size: 9px !important;
    }

    #dashboardAlertsPanel .btn-group {
        display: none !important;
    }

    /* Cards - no shadows for print */
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Ensure backgrounds print */
    .badge,
    .stat-card,
    .status-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ========================================
   MODAL FAMILLE - GESTION ENFANTS & ACTIVITES
   ======================================== */
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 16px;
}

.section-header i {
    color: var(--secondary);
}

.section-divider {
    margin: 24px 0;
    border: none;
    border-top: 2px solid var(--gray-200);
}

/* Carte Enfant */
.child-card-edit {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    overflow: hidden;
}

.child-card-edit:hover {
    border-color: var(--primary-light);
}

.child-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
}

.child-card-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.child-card-body {
    padding: 16px;
}

.child-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

/* Section Activites */
.activities-section {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 16px;
}

.activities-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-100);
}

.activities-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Carte Activite */
.activity-card {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
}

.activity-card:hover {
    border-color: var(--secondary);
}

.activity-card .form-group {
    margin-bottom: 0;
}

.activity-card .form-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.activity-remove-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}

.activity-remove-btn:hover {
    background: var(--danger-dark);
    transform: scale(1.1);
}

/* Badge frequence */
.frequency-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-size: 0.7rem;
    font-weight: 600;
}

.frequency-badge.monthly {
    background: var(--success);
    color: white;
}

.frequency-badge.quarterly {
    background: var(--warning);
    color: white;
}

/* Calcul du montant total */
.child-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--gray-100);
    border-top: 2px solid var(--gray-200);
    font-weight: 600;
}

.child-total-label {
    color: var(--gray-600);
}

.child-total-amount {
    font-size: 1.1rem;
    color: var(--success);
}

/* Bouton supprimer enfant */
.btn-remove-child {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid var(--danger);
    padding: 6px 12px;
    font-size: 0.8rem;
}

.btn-remove-child:hover {
    background: var(--danger);
    color: white;
}

/* Liste des activites disponibles */
.activity-select {
    padding-right: 30px;
}

/* Empty state pour activites */
.activities-empty {
    text-align: center;
    padding: 20px;
    color: var(--gray-500);
    font-style: italic;
}

/* Responsive pour modal */
@media (max-width: 768px) {
    .child-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .activity-card {
        grid-template-columns: 1fr;
    }
}

/* Badge activite sur les cartes famille */
.activity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 156, 198, 0.1);
    color: var(--secondary);
    padding: 4px 8px;
    border-radius: var(--radius);
    font-size: 0.75rem;
    margin: 2px;
}

.activity-badge.suspended {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-dark);
    text-decoration: line-through;
}

/* Montant par activite dans les tags */
.child-tag-amount {
    background: var(--success);
    color: white;
    padding: 1px 6px;
    border-radius: var(--radius);
    font-size: 0.7rem;
    margin-left: 4px;
}

/* ========================================
   PAGE DETAILS FAMILLE - Nouveau Design
   ======================================== */

.family-details-content {
    padding: 0;
}

/* Carte enfant - Style comme l'ancienne version */
.child-card-detail {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.child-card-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.child-icon {
    font-size: 1.2rem;
}

.child-fullname {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gray-800);
}

.child-card-detail-body {
    padding: 20px;
}

/* Grille d'infos enfant */
.child-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 16px;
}

.child-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1f2937;
}

/* Montant mis en valeur */
.child-amount-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

.amount-highlight {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary);
}

/* Section activites */
.child-activities-section {
    margin-top: 16px;
}

.activities-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

/* Badge activite - style comme l'ancienne version */
.activity-badge-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--radius-sm);
    min-width: 140px;
}

.activity-badge-detail.suspended {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    opacity: 0.7;
}

.activity-badge-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
}

.activity-badge-price {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
}

.activity-badge-frequency {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.activity-badge-frequency i {
    font-size: 0.65rem;
}

/* Bouton suspendre dans l'activite */
.btn-suspend {
    margin-top: 8px;
    padding: 4px 10px;
    font-size: 0.7rem;
    background: rgba(245, 158, 11, 0.9);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

.btn-suspend:hover {
    background: var(--warning-dark);
}

.btn-suspend.btn-resume {
    background: rgba(16, 185, 129, 0.9);
}

.btn-suspend.btn-resume:hover {
    background: var(--success-dark);
}

/* Actions enfant - boutons en ligne */
.child-card-detail-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

/* Style boutons actions - petits */
.btn-payment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--success);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-weight: 500;
    font-size: 0.75rem;
    cursor: pointer;
}

.btn-payment:hover {
    background: var(--success-dark);
}

.btn-edit-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-weight: 500;
    font-size: 0.75rem;
    cursor: pointer;
}

.btn-edit-child:hover {
    background: var(--secondary-dark);
}

.btn-delete-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-weight: 500;
    font-size: 0.75rem;
    cursor: pointer;
}

.btn-delete-child:hover {
    background: var(--danger-dark);
}

/* Footer actions famille */
.family-details-footer-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    margin-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.btn-multi-payment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-multi-payment:hover {
    background: var(--secondary-dark);
}

.btn-add-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--success);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-add-child:hover {
    background: var(--success-dark);
}

/* Responsive */
@media (max-width: 768px) {
    .child-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .child-card-detail-actions {
        flex-direction: column;
    }

    .family-details-footer-actions {
        flex-direction: column;
        align-items: center;
    }

    .activities-badges-container {
        flex-direction: column;
    }

    .activity-badge-detail {
        width: 100%;
    }
}

/* ========================================
   ALERTES RETARD PAIEMENT
   ======================================== */

.alerts-card {
    margin-bottom: 1.5rem;
    border: 2px solid var(--danger);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
    transition: box-shadow 0.3s ease;
}

.alerts-card:hover {
    box-shadow: 0 0 15px 5px rgba(239, 68, 68, 0.15);
}

.alerts-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.alerts-summary {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.alerts-summary .badge-light {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-lg);
    font-size: 0.8rem;
}

.alert-row.critical {
    background: rgba(239, 68, 68, 0.08);
    border-left: 4px solid var(--danger);
}

.alert-row.warning {
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid var(--warning);
}

.alert-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

.contact-info {
    font-size: 0.85rem;
    line-height: 1.6;
}

.contact-info a {
    text-decoration: none;
    transition: color 0.2s;
}

.contact-info a:hover {
    color: var(--primary);
}

.late-months {
    font-weight: 600;
    color: var(--danger);
}

/* Badge light variant */
.badge-light {
    background: var(--gray-100);
    color: var(--gray-700);
}

/* Responsive alerts */
@media (max-width: 768px) {
    .alerts-card .table {
        font-size: 0.8rem;
    }

    .alerts-summary {
        width: 100%;
        justify-content: center;
    }

    .alert-row td {
        padding: 0.5rem;
    }

    .contact-info {
        font-size: 0.75rem;
    }
}

/* ========================================
   CALENDRIER / PLANNING
   ======================================== */

.calendar-week-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--gray-800);
}

/* Stats mini */
.stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--white);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.stat-mini-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.stat-mini-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.stat-mini-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Week Grid */
.week-grid {
    display: flex;
    flex-direction: column;
}

.week-header {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-bottom: 2px solid var(--gray-200);
}

.week-day-header {
    padding: 1rem;
    text-align: center;
    background: var(--gray-50);
    cursor: pointer;
    transition: background 0.2s;
}

.week-day-header:hover {
    background: var(--gray-100);
}

.week-day-header.vacation {
    background: rgba(245, 158, 11, 0.1);
}

.week-day-header .day-name {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
}

.week-day-header .day-date {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.vacation-badge {
    font-size: 0.7rem;
    background: var(--warning);
    color: white;
    padding: 2px 6px;
    border-radius: var(--radius);
    margin-top: 4px;
    display: inline-block;
}

.week-body {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    min-height: 400px;
}

.week-day-column {
    border-right: 1px solid var(--gray-200);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 300px;
}

.week-day-column:last-child {
    border-right: none;
}

.week-day-column.vacation {
    background: rgba(245, 158, 11, 0.05);
}

.no-slots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--gray-400);
    font-size: 0.85rem;
}

.no-slots i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Vue Mensuelle */
.month-grid {
    display: flex;
    flex-direction: column;
}

.month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.month-header-day {
    padding: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.month-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.month-day {
    min-height: 100px;
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    padding: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.month-day:hover {
    background: var(--gray-50);
}

.month-day:nth-child(7n) {
    border-right: none;
}

.month-day.other-month {
    background: var(--gray-50);
    opacity: 0.5;
}

.month-day.today {
    background: rgba(71, 68, 178, 0.05);
}

.month-day.vacation {
    background: rgba(245, 158, 11, 0.1);
}

.month-day-number {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.month-day.today .month-day-number {
    background: var(--primary);
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.month-event {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    background: var(--primary);
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.month-event.event-full {
    background: var(--danger);
}

.month-event.event-warning {
    background: var(--warning);
}

.month-event.event-success {
    background: var(--success);
}

.month-more-events {
    font-size: 0.7rem;
    color: var(--gray-500);
    padding: 2px;
    cursor: pointer;
}

.month-more-events:hover {
    color: var(--primary);
}

/* Slot Cards */
.slot-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 0.6rem;
    border-left: 4px solid var(--primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.slot-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.slot-card.slot-full {
    background: rgba(239, 68, 68, 0.05);
}

.slot-card.slot-almost-full {
    background: rgba(245, 158, 11, 0.05);
}

.slot-card.slot-available {
    background: rgba(16, 185, 129, 0.05);
}

.slot-time {
    font-size: 0.7rem;
    color: var(--gray-500);
    font-weight: 500;
}

.slot-activity {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-800);
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slot-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    margin-top: 4px;
}

.slot-capacity {
    color: var(--gray-600);
}

.slot-capacity i {
    margin-right: 3px;
}

.slot-fill-rate {
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius);
    font-size: 0.7rem;
}

.slot-fill-rate.slot-full {
    background: var(--danger);
    color: white;
}

.slot-fill-rate.slot-almost-full {
    background: var(--warning);
    color: white;
}

.slot-fill-rate.slot-available {
    background: var(--success);
    color: white;
}

.slot-fill-rate.slot-empty {
    background: var(--gray-200);
    color: var(--gray-600);
}

.slot-room {
    font-size: 0.7rem;
    color: var(--gray-500);
    margin-top: 4px;
}

/* Day View */
.day-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.day-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gray-800);
    min-width: 250px;
    text-align: center;
}

.day-slots-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

.day-slot-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border-left: 5px solid var(--primary);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.2s;
}

.day-slot-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.day-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.day-slot-time {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 500;
}

.day-slot-activity {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.day-slot-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 0.75rem;
}

.day-slot-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.day-slot-capacity {
    margin-bottom: 0.75rem;
}

.capacity-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-bottom: 4px;
}

.capacity-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.3s;
}

.capacity-text {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.day-slot-enrollments {
    border-top: 1px solid var(--gray-200);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.enrollments-title {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.enrollments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.enrollment-chip {
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 3px 10px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
}

.enrollment-more {
    color: var(--gray-500);
    font-size: 0.8rem;
    padding: 3px 10px;
}

/* Vacation notice */
.vacation-notice,
.no-slots-day {
    text-align: center;
    padding: 3rem;
    color: var(--gray-500);
}

.vacation-notice i,
.no-slots-day i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--warning);
}

.no-slots-day i {
    color: var(--gray-300);
}

/* Slot Details */
.slot-details-stats .stat-row {
    display: flex;
    gap: 2rem;
    padding: 0.5rem 0;
}

.slot-details-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.slot-enrollments-section h5 {
    margin-bottom: 1rem;
    color: var(--gray-700);
}

.enrollments-table {
    max-height: 300px;
    overflow-y: auto;
}

/* Child enroll modal */
.child-enroll-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
}

.child-enroll-item:last-child {
    border-bottom: none;
}

.child-enroll-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.children-list {
    max-height: 350px;
    overflow-y: auto;
}

/* Button group */
.btn-group {
    display: flex;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.btn-group .btn.active {
    background: var(--primary);
    color: white;
}

/* ========================================
   PLANNING GRID - Créneaux x Salles
   ======================================== */

/* Week summary view */
.week-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.week-day-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.week-day-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.week-day-card.vacation {
    background: rgba(245, 158, 11, 0.1);
}

.week-day-card-header {
    background: var(--primary);
    color: white;
    padding: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.week-day-card-header .day-name {
    font-weight: 600;
}

.week-day-card-header .day-date {
    font-size: 1.5rem;
    font-weight: 700;
}

.week-day-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.fill-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.fill-circle::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
}

.fill-circle span {
    position: relative;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
}

.day-stats {
    font-size: 0.8rem;
    color: var(--gray-600);
    text-align: center;
}

.day-stats div {
    margin: 2px 0;
}

.day-stats i {
    width: 16px;
    color: var(--gray-400);
}

/* Planning Grid (jour) */
.planning-grid {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.planning-grid-header {
    display: flex;
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.planning-corner {
    min-width: 160px;
    padding: 1.25rem 1rem;
    font-weight: 600;
    color: var(--gray-600);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-right: 1px solid var(--gray-200);
}

.planning-room-header {
    flex: 1;
    padding: 1.25rem 0.75rem;
    text-align: center;
    border-right: 1px solid var(--gray-200);
    min-width: 160px;
}

.planning-room-header:last-child {
    border-right: none;
}

.planning-room-header .room-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gray-800);
}

.planning-room-header .room-capacity {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 2px;
}

.planning-grid-body {
    display: flex;
    flex-direction: column;
}

.planning-row {
    display: flex;
    border-bottom: 2px solid var(--gray-100);
}

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

.planning-slot-header {
    min-width: 160px;
    padding: 1.5rem 1rem;
    background: var(--gray-50);
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.slot-delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--gray-400);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.planning-slot-header:hover .slot-delete-btn,
.slot-delete-btn:focus-visible {
    opacity: 1;
}

.slot-delete-btn:hover {
    background: var(--danger);
    color: #fff;
}

@media (hover: none), (max-width: 1024px) {
    .slot-delete-btn { opacity: 1; }
}

.slot-time-range {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
}

.slot-name {
    font-size: 0.8rem;
    color: var(--gray-500);
}

/* Planning Cells */
.planning-cell {
    flex: 1;
    min-width: 160px;
    min-height: 150px;
    padding: 1rem 0.85rem;
    border-right: 1px solid var(--gray-100);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
}

.planning-cell:last-child {
    border-right: none;
}

.planning-cell:hover {
    background: var(--gray-50);
}

.planning-cell.cell-empty {
    background: var(--gray-50);
}

.planning-cell.cell-available {
    background: rgba(16, 185, 129, 0.05);
}

.planning-cell.cell-almost-full {
    background: rgba(245, 158, 11, 0.1);
}

.planning-cell.cell-full {
    background: rgba(239, 68, 68, 0.1);
}

.planning-cell.cell-over-capacity {
    background: rgba(139, 0, 0, 0.15);
    border: 2px dashed var(--danger-dark);
}

/* ========================================
   DRAG & DROP - Planning Sessions (Premium)
   ======================================== */

/* Élément draggable */
.planning-cell.draggable-session {
    cursor: grab;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                opacity 0.2s ease;
    will-change: transform, box-shadow;
}

.planning-cell.draggable-session:active {
    cursor: grabbing;
}

/* Handle de drag (icône grip) */
.planning-cell .drag-handle {
    position: absolute;
    top: 6px;
    right: 6px;
    color: var(--gray-400);
    font-size: 0.85rem;
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    padding: 4px;
    border-radius: var(--radius-xs);
    z-index: 5;
    background: transparent;
}

.planning-cell:hover .drag-handle {
    opacity: 1;
}

.planning-cell .drag-handle:hover {
    color: var(--primary);
    background: rgba(67, 56, 202, 0.1);
    transform: scale(1.1);
}

/* Hover lift effect sur les cartes draggable */
.planning-cell.draggable-session:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1),
                0 4px 10px -5px rgba(0, 0, 0, 0.04);
}

/* État pendant le drag - carte source */
.planning-cell.dragging {
    opacity: 0.4;
    transform: scale(0.92) rotate(-1deg);
    box-shadow: 0 0 0 3px var(--primary),
                0 20px 40px -10px rgba(67, 56, 202, 0.3);
    z-index: 100;
    filter: grayscale(30%);
    animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
    0%, 100% { transform: scale(0.92) rotate(-1deg); }
    25% { transform: scale(0.92) rotate(1deg); }
    75% { transform: scale(0.92) rotate(-0.5deg); }
}

/* Zones de drop potentielles - effet subtil */
.planning-cell.potential-drop {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.planning-cell.potential-drop::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px dashed var(--primary-light);
    border-radius: var(--radius-sm);
    pointer-events: none;
    opacity: 0;
    animation: fadeInBorder 0.3s ease forwards;
}

@keyframes fadeInBorder {
    to { opacity: 0.6; }
}

/* Glow subtil sur les zones potentielles */
.planning-cell.potential-drop:not(.dragging) {
    animation: subtleGlow 2s ease-in-out infinite;
}

@keyframes subtleGlow {
    0%, 100% {
        box-shadow: inset 0 0 0 1px rgba(67, 56, 202, 0.1);
    }
    50% {
        box-shadow: inset 0 0 0 2px rgba(67, 56, 202, 0.2),
                    0 0 20px rgba(67, 56, 202, 0.05);
    }
}

/* Zone de drop survolée (cellule vide) - effet premium */
.planning-cell.drag-over {
    background: linear-gradient(135deg,
        rgba(67, 56, 202, 0.08) 0%,
        rgba(99, 102, 241, 0.12) 100%) !important;
    border: 2px solid var(--primary) !important;
    transform: scale(1.03);
    box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.15),
                0 10px 30px -5px rgba(67, 56, 202, 0.25),
                inset 0 0 30px rgba(67, 56, 202, 0.05);
    animation: dropZonePulse 1s ease-in-out infinite;
}

@keyframes dropZonePulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.15),
                    0 10px 30px -5px rgba(67, 56, 202, 0.25),
                    inset 0 0 30px rgba(67, 56, 202, 0.05);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(67, 56, 202, 0.1),
                    0 15px 40px -5px rgba(67, 56, 202, 0.3),
                    inset 0 0 40px rgba(67, 56, 202, 0.08);
    }
}

/* Label "Déposer ici" avec animation */
.planning-cell.drag-over::before {
    content: 'Déposer ici';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-xl);
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(67, 56, 202, 0.4);
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    letter-spacing: 0.5px;
}

@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Icône dans le label */
.planning-cell.drag-over::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center center no-repeat;
    background-size: 40px;
    opacity: 0.1;
    pointer-events: none;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 0.15; }
}

/* Zone de drop avec session existante (échange) - style warning */
.planning-cell.drag-over-swap {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.1) 0%,
        rgba(251, 191, 36, 0.15) 100%) !important;
    border: 2px solid var(--warning) !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15),
                0 10px 30px -5px rgba(245, 158, 11, 0.25);
    animation: swapPulse 0.8s ease-in-out infinite;
}

@keyframes swapPulse {
    0%, 100% {
        transform: scale(1.03);
    }
    50% {
        transform: scale(1.05);
    }
}

.planning-cell.drag-over-swap::before {
    content: '↔ Échanger';
    background: linear-gradient(135deg, var(--warning) 0%, #fbbf24 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.planning-cell.drag-over-swap::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4'/%3E%3C/svg%3E") center center no-repeat;
    background-size: 35px;
}

/* Cellule vide en mode drop */
.planning-cell.cell-empty.drag-over .cell-empty-content {
    opacity: 0.2;
    transform: scale(0.9);
    transition: all 0.3s ease;
}

/* Animation de succès après drop */
.planning-cell.drop-success {
    animation: dropSuccess 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dropSuccess {
    0% {
        transform: scale(1.1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Responsive - désactiver certaines animations sur mobile */
@media (max-width: 768px) {
    .planning-cell.draggable-session:hover {
        transform: none;
    }

    .planning-cell.potential-drop:not(.dragging) {
        animation: none;
    }
}

.cell-empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--gray-400);
    font-size: 0.85rem;
}

.cell-empty-content i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.cell-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
}

.cell-activity {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--gray-800);
    flex: 1;
}

.cell-count {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius);
    background: var(--gray-200);
    color: var(--gray-600);
}

.cell-full .cell-count {
    background: var(--danger);
    color: white;
}

.cell-almost-full .cell-count {
    background: var(--warning);
    color: white;
}

.cell-over-capacity .cell-count {
    background: var(--danger);
    color: white;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

/* Animation limitée à 3 iterations pour les alertes critiques */
@keyframes pulse-warning {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.cell-instructor {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.cell-progress {
    margin-top: auto;
}

.cell-progress .progress-bar {
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.cell-progress .progress-fill {
    height: 100%;
    background: var(--success);
    border-radius: var(--radius-xs);
    transition: width 0.3s;
}

.cell-almost-full .progress-fill {
    background: var(--warning);
}

.cell-full .progress-fill {
    background: var(--danger);
}

.cell-over-capacity .progress-fill {
    background: #8b0000;
}

/* Badge de dépassement de capacité */
.over-capacity-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--danger);
    color: white;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    /* Animation limitée à 3 pulsations puis stable */
    animation: pulse-warning 0.6s ease-out 3;
}

.over-capacity-badge::before {
    content: "⚠️ ";
}

/* Badge "session ponctuelle" (is_recurring=false) */
/* =========================================================
   SALLES — page dediee
   ========================================================= */
.salles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 16px;
}
.salle-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.salle-card-color {
    height: 6px;
    background: var(--primary);
}
.salle-card-body {
    padding: 16px 18px 12px;
    flex: 1;
}
.salle-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.salle-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: -0.01em;
}
.chip-capacity {
    background: var(--primary-50);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.salle-desc {
    color: var(--gray-600);
    font-size: 0.85rem;
    margin: 4px 0 8px;
    line-height: 1.4;
}
.salle-card-meta {
    color: var(--gray-500);
    font-size: 0.82rem;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.salle-card-meta i {
    color: var(--primary);
    margin-right: 4px;
}
.salle-card-actions {
    padding: 12px 18px 16px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.salle-card-actions .btn-primary {
    flex: 1;
    max-width: 200px;
}

/* Mobile salles */
@media (max-width: 768px) {
    body.page-salles .salles-grid {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
    }
}

/* Créneaux page */
.creneaux-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 16px;
}
.creneau-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.creneau-card-time {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--white);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.creneau-time-range {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.creneau-time-sep {
    margin: 0 4px;
    opacity: 0.7;
}
.creneau-duration {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.creneau-duration i {
    margin-right: 4px;
}
.creneau-card-body {
    padding: 14px 18px;
    flex: 1;
}
.creneau-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}
.creneau-days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.day-chip {
    background: var(--primary-50);
    color: var(--primary);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}
.creneau-meta {
    color: var(--gray-500);
    font-size: 0.82rem;
}
.creneau-meta i {
    color: var(--primary);
    margin-right: 4px;
}
.creneau-card-actions {
    padding: 12px 18px 16px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.creneau-card-actions .btn-primary {
    flex: 1;
    max-width: 200px;
}

/* Day checkboxes inside creneau modal */
.day-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.day-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.9rem;
}
.day-check:hover {
    border-color: var(--primary);
}
.day-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}
.day-check:has(input:checked) {
    background: var(--primary-50);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    body.page-creneaux .creneaux-grid {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
    }
}

.cell-badge-once {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--info);
    color: var(--white);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35);
}
.planning-cell.is-once {
    border-style: dashed !important;
    border-left-style: solid !important;
}

.cell-enrollments {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 0.5rem;
}

.mini-chip {
    background: var(--gray-100);
    color: var(--gray-600);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
}

.mini-chip.more {
    background: var(--primary);
    color: white;
}

/* Rooms Management */
.room-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.room-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.room-actions {
    display: flex;
    gap: 0.5rem;
}

.no-rooms-notice {
    text-align: center;
    padding: 3rem;
    color: var(--gray-500);
}

.no-rooms-notice i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--gray-300);
}

/* Over capacity warning modal */
.over-capacity-warning {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.over-capacity-warning h4 {
    color: var(--danger-dark);
    margin: 0 0 0.5rem 0;
}

.over-capacity-warning p {
    color: #7f1d1d;
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive planning */
@media (max-width: 1200px) {
    .week-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .planning-grid {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .week-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .planning-corner,
    .planning-room-header,
    .planning-cell,
    .planning-slot-header {
        min-width: 120px;
    }
}

/* Responsive calendar */
@media (max-width: 1024px) {
    .stats-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .week-header,
    .week-body {
        grid-template-columns: repeat(3, 1fr);
    }

    .day-slots-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .week-header,
    .week-body {
        grid-template-columns: repeat(2, 1fr);
    }

    .calendar-week-title {
        font-size: 0.9rem;
    }

    .slot-card {
        padding: 0.5rem;
    }

    .slot-activity {
        font-size: 0.75rem;
    }
}

/* ========================================
   ATTRIBUTION PLANNING MODAL
   ======================================== */

/* Bouton Planning dans activité */
.activity-badge-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.btn-planning {
    background: var(--secondary);
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-planning:hover {
    background: var(--secondary-dark);
    transform: translateY(-1px);
}

/* Modal d'attribution */
.planning-assign-info {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 1rem;
}

.planning-assign-info .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-200);
}

.planning-assign-info .info-row:last-child {
    border-bottom: none;
}

.planning-assign-info .info-label {
    color: var(--gray-600);
    font-weight: 500;
}

.planning-assign-info .info-value {
    font-weight: 600;
    color: var(--gray-800);
}

/* Grille de sélection des créneaux */
.planning-assign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.planning-assign-day {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
}

.planning-assign-day .day-title {
    background: var(--primary);
    color: white;
    padding: 0.5rem 0.75rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.planning-assign-day .day-slots {
    padding: 0.75rem;
}

.slot-rooms {
    margin-bottom: 0.75rem;
}

.slot-rooms:last-child {
    margin-bottom: 0;
}

.slot-rooms .slot-time {
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
    font-weight: 600;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed var(--gray-200);
}

.rooms-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.room-select-btn {
    background: var(--gray-100);
    border: 2px solid var(--gray-200);
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    position: relative;
}

.room-select-btn .room-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--gray-700);
}

.room-select-btn .room-capacity {
    font-size: 0.55rem;
    color: var(--gray-500);
}

.room-select-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    transform: scale(1.05);
}

.room-select-btn:hover .room-name,
.room-select-btn:hover .room-capacity {
    color: white;
}

.room-select-btn.selected {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: white;
}

.room-select-btn.selected .room-name,
.room-select-btn.selected .room-capacity {
    color: white;
}

.room-select-btn.selected i {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.5rem;
    background: white;
    color: var(--primary);
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Résumé des créneaux sélectionnés */
.selected-slots-summary {
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    color: white;
    border-radius: var(--radius);
    padding: 1rem;
}

.selected-slots-summary h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.selected-slots-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selected-slot-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.selected-slot-item .slot-day {
    font-weight: 700;
}

.selected-slot-item .slot-time {
    opacity: 0.9;
}

.selected-slot-item .slot-room {
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-size: 0.7rem;
}

.selected-slot-item .btn-remove {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.selected-slot-item .btn-remove:hover {
    background: var(--danger-dark);
}

/* ========================================
   COMMUNICATIONS MODULE
   ======================================== */

.comm-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: var(--white);
    padding: 0.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    width: fit-content;
}

.comm-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--gray-500);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
}

.comm-tab:hover,
.comm-tab:focus-visible {
    background: var(--gray-100);
    color: var(--primary);
}

.comm-tab.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, var(--primary)) 100%);
    color: var(--white);
    box-shadow: 0 2px 4px rgba(67, 56, 202, 0.3);
}

.comm-content {
    display: none;
}

.comm-content.active {
    display: block;
}

/* Channel Buttons */
.channel-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.channel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
}

.channel-btn:hover,
.channel-btn:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

.channel-btn.active {
    border-color: var(--primary);
    background: rgba(71, 68, 178, 0.1);
    color: var(--primary);
}

.channel-btn[data-channel="whatsapp"].active {
    border-color: var(--whatsapp);
    background: rgba(37, 211, 102, 0.1);
    color: var(--whatsapp-dark);
}

.channel-btn[data-channel="sms"].active {
    border-color: #4A90D9;
    background: rgba(74, 144, 217, 0.1);
    color: #4A90D9;
}

.channel-btn[data-channel="email"].active {
    border-color: #EA4335;
    background: rgba(234, 67, 53, 0.1);
    color: #EA4335;
}

/* Recipient Search */
.recipient-search {
    position: relative;
}

.recipient-search .search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.search-result-item:hover {
    background: var(--gray-50);
}

.search-result-item i {
    color: var(--gray-400);
}

.search-result-item small {
    color: var(--gray-500);
    margin-left: auto;
}

/* Selected Recipients */
.selected-recipients {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.recipient-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
}

.recipient-tag button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.8;
}

.recipient-tag button:hover {
    opacity: 1;
}

/* Templates Grid */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.template-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: var(--transition);
}

.template-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.template-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.template-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
}

.template-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.template-preview {
    font-size: 0.875rem;
    color: var(--gray-500);
    line-height: 1.4;
    margin-bottom: 12px;
}

.template-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* History List */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: var(--radius);
    transition: var(--transition);
}

.history-item:hover {
    background: var(--gray-100);
}

.history-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    font-size: 1.25rem;
}

.history-content {
    flex: 1;
    min-width: 0;
}

.history-recipient {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.history-preview {
    font-size: 0.875rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-meta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.75rem;
}

.history-date {
    color: var(--gray-400);
}

.history-status {
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}

.status-sent {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.status-failed {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* Form Textarea */
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    transition: var(--transition);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(71, 68, 178, 0.1);
}

.form-help {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 8px;
}

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

/* Preview Box */
.preview-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 16px;
    white-space: pre-wrap;
    font-family: inherit;
    line-height: 1.6;
}

/* Page Sections */
.page-section {
    display: none;
}

.page-section.active {
    display: block;
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

/* Text utilities */
.text-muted {
    color: var(--gray-500);
}

.text-danger {
    color: var(--danger);
}

/* ========================================
   DASHBOARD INLINE STYLES EXTRACTION
   ======================================== */

/* Alerts Panel */
.alerts-panel {
    border: none;
    overflow: hidden;
}

.alerts-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--danger);
    color: white;
    padding: 12px 16px;
}

.alerts-panel-header .card-title {
    color: white;
    margin: 0;
}

.alerts-badges {
    display: flex;
    gap: 10px;
}

.alerts-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Stat Card Variants */
.stat-card-primary {
    border-left: 4px solid var(--primary);
}

.stat-card-primary .stat-icon {
    background: var(--primary-50);
    color: var(--primary);
}

.stat-card-success {
    border-left: 4px solid var(--success);
}

.stat-card-success .stat-icon {
    background: var(--success-light);
    color: var(--success);
}

.stat-card-info {
    border-left: 4px solid var(--secondary);
}

.stat-card-info .stat-icon {
    background: #f0f9ff;
    color: var(--secondary);
}

.stat-card-warning {
    border-left: 4px solid var(--warning);
}

.stat-card-warning .stat-icon {
    background: var(--warning-light);
    color: var(--warning);
}

/* Planning Navigation */
.planning-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.planning-nav h3 {
    margin: 0;
    font-size: 1.25rem;
}

.planning-actions {
    display: flex;
    gap: 10px;
}

/* Communications Stats Grid */
.comm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.comm-stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.comm-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
}

.comm-stat-card .stat-label {
    color: var(--gray-500);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.comm-stat-card.whatsapp {
    border-bottom: 4px solid #22c55e;
}

.comm-stat-card.whatsapp .stat-value {
    color: #16a34a;
}

.comm-stat-card.sms {
    border-bottom: 4px solid var(--info);
}

.comm-stat-card.sms .stat-value {
    color: #2563eb;
}

.comm-stat-card.email {
    border-bottom: 4px solid #eab308;
}

.comm-stat-card.email .stat-value {
    color: #ca8a04;
}

.comm-stat-card.total .stat-value {
    color: var(--primary);
}

/* Reminders Header */
.reminders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.reminders-count-badge {
    background: linear-gradient(135deg, var(--warning), var(--warning-dark));
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reminders-count-badge .count {
    font-size: 1.5rem;
    font-weight: 700;
}

.reminders-count-badge .label {
    font-size: 0.8rem;
}

.reminders-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Communications Composer */
.composer-title {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.form-group-lg {
    margin-bottom: 2rem;
}

.form-group-md {
    margin-bottom: 1.5rem;
}

.form-label-bold {
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.input-with-icon {
    position: relative;
}

.input-with-icon .icon {
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: var(--gray-400);
}

.input-with-icon input {
    padding-left: 2.5rem;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--gray-400);
    margin-top: 0.5rem;
}

.btn-send {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
}

/* Communication Section */
.comm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.comm-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.card-borderless {
    border: none;
    box-shadow: var(--shadow-sm);
}

.card-header-white {
    background: white;
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    border-radius: var(--radius) var(--radius) 0 0;
}

/* Grid utilities */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Card body utilities */
.card-body-flush {
    padding: 0;
}

.table-flush {
    margin: 0;
}

/* Attendance info bar */
.attendance-info-bar {
    background: var(--gray-100);
    padding: 10px;
    border-radius: var(--radius-xs);
    display: flex;
    justify-content: space-between;
}

/* Flex utilities */
.flex-center {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Print styles for attendance sheet */
@media print {
    .modal-overlay {
        position: static;
        background: white;
    }

    .modal {
        position: static;
        box-shadow: none;
        max-width: 100%;
        width: 100%;
    }

    .modal-header,
    .modal-footer,
    .attendance-filters {
        display: none !important;
    }

    .modal-body {
        max-height: none !important;
        overflow: visible !important;
    }

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

    .attendance-table th,
    .attendance-table td {
        border: 1px solid #000;
        padding: 8px;
    }
}

/* ========================================
   ROOMS VIEW V2 - Optimized
   ========================================*/

/* Notice messages */
.rooms-notice {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rooms-notice i {
    font-size: 4rem;
    margin-bottom: 20px;
    display: block;
}

.rooms-notice--vacation i {
    color: var(--warning);
}

.rooms-notice--empty i {
    color: var(--muted);
}

.rooms-notice h3 {
    margin-bottom: 8px;
}

.rooms-notice p {
    color: var(--gray-500);
}

/* Grid layout */
.rooms-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}

/* Room card */
.room-card-v2 {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-top: 4px solid var(--room-color, var(--primary));
}

.room-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--room-color, var(--primary)) 10%, transparent), transparent);
    border-bottom: 1px solid #e5e7eb;
}

.room-info h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--room-color, var(--primary));
}

.room-info span {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.room-rate {
    text-align: right;
}

.room-rate .rate-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
}

.room-rate .rate-detail {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.room-rate.status-success .rate-value {
    color: var(--success);
}

.room-rate.status-warning .rate-value {
    color: var(--warning);
}

.room-rate.status-danger .rate-value {
    color: var(--danger);
}

.room-card-body {
    max-height: 300px;
    overflow-y: auto;
}

/* Slots table */
.slots-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.slots-table thead {
    position: sticky;
    top: 0;
    background: var(--gray-50);
    z-index: 1;
}

.slots-table th {
    padding: 10px 12px;
    font-weight: 600;
    text-align: left;
}

.slots-table th:nth-child(3) {
    text-align: center;
}

.slot-row {
    cursor: pointer;
    transition: background 0.15s;
}

.slot-row:hover {
    background: var(--gray-100) !important;
}

.slot-row.row-active {
    background: #f0fdf4;
}

.slot-row.row-full {
    background: #fffbeb;
}

.slot-row.row-over {
    background: #fef2f2;
}

.slot-row td {
    padding: 10px 12px;
}

.slot-time {
    font-weight: 500;
    white-space: nowrap;
}

.slot-activity {
    color: var(--gray-800);
}

.slot-places {
    text-align: center;
}

.slot-enrollees {
    font-size: 0.8rem;
    color: var(--gray-600);
}

/* Badge places */
.badge-places {
    display: inline-block;
    min-width: 42px;
    padding: 3px 8px;
    border-radius: var(--radius);
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    text-align: center;
}

.badge-places.status-success {
    background: var(--success);
}

.badge-places.status-warning {
    background: var(--warning);
}

.badge-places.status-danger {
    background: var(--danger);
}

.badge-places.status-muted {
    background: var(--gray-400);
}

/* Text utilities */
.text-muted {
    color: var(--gray-400);
    font-style: italic;
}

.text-danger {
    color: var(--danger);
}

.text-exceptional {
    color: var(--warning-dark);
}

/* Loading indicator */
.calendar-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background: white;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.calendar-loading.hidden {
    display: none;
}

.calendar-loading .loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--primary);
}

.calendar-loading .loading-spinner i {
    font-size: 2rem;
}

.calendar-loading .loading-spinner span {
    font-size: 1rem;
    color: var(--gray-500);
}

/* ========================================
   MOBILE STYLES
   ========================================
   Les styles mobiles sont dans mobile.css
   Les ameliorations desktop sont dans desktop-enhancements.css
*/
/* ========================================
   PREMIUM UI OVERRIDES & ENHANCEMENTS
   ======================================== */

/* 1. Dynamic Background */
body {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--primary-50) 100%);
    background-attachment: fixed;
}

/* 2. Glassmorphism Utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

/* Apply glass effect to Sidebar */
.sidebar {
    background: linear-gradient(135deg, rgba(67, 56, 202, 0.95) 0%, rgba(55, 48, 163, 0.98) 100%);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3. Modern Tables */
.table-container {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

thead th {
    background: var(--gray-50);
    color: var(--gray-600);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 16px 24px;
    border-bottom: 2px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 10;
}

tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--gray-100);
}

tbody tr:last-child {
    border-bottom: none;
}

tbody tr:hover {
    background-color: var(--gray-50);
    /* Gray 50 */
    transform: scale(1.002);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 5;
    position: relative;
}

td {
    padding: 16px 24px;
    color: var(--gray-700);
    font-size: 0.9rem;
    vertical-align: middle;
}

/* 4. Refined Cards */
.card {
    border: none;
    /* Cleaner look */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Subtle border for glass feel */
}

/* 5. Page Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-content {
    animation: fadeInUp 0.5s ease-out;
}

/* 6. Typography Polish */
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -0.025em;
    /* Tight formatting like Inter recommends */
}

.page-title {
    background: linear-gradient(to right, var(--gray-900), var(--gray-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ========================================
   PLANNING UI - MMAS PREMIUM CHARTER
   ======================================== */

/* 1. Container & Grid - Glassmorphism & Depth */
.planning-grid {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    /* Soft distinctive shadow */
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-top: 1rem;
}

/* 2. Header Architecture */
.planning-grid-header {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
}

.planning-corner {
    background: var(--white);
    color: var(--primary);
    /* Brand Color */
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    border-right: 1px solid var(--gray-200);
    width: 150px;
    /* Fixed width for time column align */
    min-width: 150px;
}

.planning-room-header {
    flex: 1;
    text-align: center;
    padding: 1rem 0.5rem;
    position: relative;
    background: var(--white);
    border-right: 1px solid var(--gray-100);
    transition: var(--transition);
}

.planning-room-header:last-child {
    border-right: none;
}

.planning-room-header .room-name {
    color: var(--gray-800);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.planning-room-header .room-capacity {
    color: var(--gray-500);
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--gray-100);
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius);
}

/* Colored accent line at top of room header */
.planning-room-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: currentColor;
    /* Uses color set inline in HTML */
    opacity: 0.8;
}

/* 3. Grid Row & Cells */
.planning-row {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
}

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

.planning-slot-header {
    width: 150px;
    min-width: 150px;
    background: var(--gray-50);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--gray-200);
    color: var(--gray-600);
    position: relative;
}

.slot-time-range {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--primary);
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.slot-name {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.planning-cell {
    flex: 1;
    min-height: 110px;
    padding: 8px;
    border-right: 1px solid var(--gray-100);
    position: relative;
    transition: var(--transition);
    background: var(--white);
    display: flex;
    flex-direction: column;
}

.planning-cell:last-child {
    border-right: none;
}

.planning-cell:hover {
    background: var(--gray-50);
}

/* 4. Session Cards - The "Jewel" of the UI */
.planning-cell .cell-header {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-left-width: 4px;
    /* Color handled inline */
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    box-shadow: var(--shadow-sm);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    transition: var(--transition-bounce);
    cursor: pointer;
}

.planning-cell .cell-header:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.cell-activity {
    font-weight: 700;
    color: var(--gray-800);
    font-size: 0.9rem;
    margin-bottom: 4px;
    line-height: 1.3;
}

.cell-count {
    font-size: 0.75rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cell-instructor {
    font-size: 0.7rem;
    color: var(--secondary);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 5. Progress Bars */
.cell-progress {
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    /* Default fallback */
    border-radius: 2px;
}

/* 6. Empty State - "Add" Button */
.cell-empty-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    opacity: 0;
    transform: scale(0.95);
    transition: var(--transition);
    border: 2px dashed var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.planning-cell:hover .cell-empty-content {
    opacity: 1;
    transform: scale(1);
    border-color: var(--primary-light);
    color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
    /* Very light primary tint */
}

.cell-empty-content i {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

/* 7. Tags / Chips for Kids */
.mini-chip {
    display: inline-block;
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: var(--radius-xs);
    margin-right: 2px;
    margin-top: 4px;
}

/* 8. Status Indication */
.cell-over-capacity .cell-header {
    border-color: var(--danger);
    background: #FEF2F2;
}

.over-capacity-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
    z-index: 10;
}

/* Agenda View Specifics */
.agenda-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    display: flex;
    overflow: hidden;
    transition: var(--transition);
}

.agenda-card:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.agenda-time {
    background: var(--gray-50);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 100px;
    border-right: 1px solid var(--gray-200);
}

.agenda-time .start {
    font-weight: 700;
    color: var(--gray-800);
    font-size: 1.1rem;
}

.agenda-time .end {
    color: var(--gray-500);
    font-size: 0.8rem;
}

.agenda-details {
    flex: 1;
    padding: 1rem;
}

.agenda-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    color: var(--gray-400);
    transition: var(--transition);
}

.agenda-card:hover .agenda-action {
    color: var(--primary);
    background: var(--gray-50);
}

/* COMMUNICATIONS MODULE - PREMIUM UI: voir définition dans section COMMUNICATIONS MODULE (~L5108) */

/* 2. Channel Selector (Segmented Control) */
.channel-selector {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.channel-btn {
    flex: 1;
    padding: 1rem;
    border-radius: var(--radius);
    border: 2px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-500);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-bounce);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    position: relative;
    overflow: hidden;
}

.channel-btn:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}

.channel-btn.active {
    border-color: transparent;
    color: white;
    box-shadow: var(--shadow-md);
}

/* Channel Specific Colors when Active */
.channel-btn[data-channel='whatsapp'].active {
    background: linear-gradient(135deg, var(--whatsapp) 0%, var(--whatsapp-dark) 100%);
}

.channel-btn[data-channel='sms'].active {
    background: linear-gradient(135deg, var(--info) 0%, #2563eb 100%);
}

.channel-btn[data-channel='email'].active {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%);
}

.channel-icon {
    font-size: 1.4rem;
}

/* 3. Search Results (Dropdown) */
.comm-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-100);
    z-index: 50;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.search-result-item {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--gray-50);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--gray-50);
    color: var(--primary);
}

.recipient-info {
    font-size: 0.8rem;
    color: var(--gray-400);
    display: flex;
    gap: 1rem;
}

/* 4. Selected Recipients (Chips) */
.selected-recipients-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.selected-recipient {
    background: var(--primary-light);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: fadeIn 0.3s ease;
}

.selected-recipient .remove-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 0.7rem;
    transition: var(--transition);
}

.selected-recipient .remove-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* 5. Message Composer */
.comm-composer-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    border: 1px solid var(--gray-200);
}

.composer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-100);
}

/* 6. History List */
.history-item {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1rem;
    transition: var(--transition);
    position: relative;
    padding-left: 1.5rem;
}

.history-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.2rem;
    bottom: 1.2rem;
    width: 4px;
    background: var(--gray-300);
    border-radius: 0 4px 4px 0;
}

.history-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.history-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.channel-badge {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-xs);
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
}

.channel-whatsapp {
    background: #dcfce7;
    color: #166534;
}

.channel-sms {
    background: var(--info-light);
    color: #1e40af;
}

.channel-email {
    background: var(--warning-light);
    color: #92400e;
}


/* ========================================
   FIX: FAMILY CARD ACTIONS
   ======================================== */
.family-card-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
}

.action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
    color: white !important;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.action-btn:hover,
.action-btn:focus-visible {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
    transform: translateY(-1px);
}

/* Specific Colors */
.action-btn.whatsapp {
    background: var(--whatsapp);
    /* WhatsApp Green */
    background: linear-gradient(135deg, var(--whatsapp) 0%, var(--whatsapp-dark) 100%);
}

.action-btn.edit {
    background: var(--gray-100);
    color: var(--gray-700) !important;
    /* Exception for edit: Dark Icon */
    border: 1px solid var(--gray-200);
}

.action-btn.edit:hover {
    background: var(--white);
    color: var(--primary) !important;
    border-color: var(--primary);
}

.action-btn.payment {
    background: var(--primary);
    /* Indigo */
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.action-btn.delete {
    background: var(--danger);
    /* Red */
    background: linear-gradient(135deg, var(--danger) 0%, #b91c1c 100%);
}

.action-btn.add-member {
    background: var(--info);
    /* Blue */
    background: linear-gradient(135deg, var(--info) 0%, #2563eb 100%);
}

/* ========================================
   MODERN CHILD FORM STYLES
   ======================================== */

/* Child Card Edit Container */
.child-card-edit {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.child-card-edit:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Child Card Header */
.child-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
}

.child-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.child-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    backdrop-filter: blur(10px);
}

.child-header-info {
    display: flex;
    flex-direction: column;
}

.child-label {
    font-size: 0.75rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.child-name-preview {
    font-size: 1.15rem;
    font-weight: 600;
}

.btn-icon-delete {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-icon-delete:hover {
    background: var(--danger);
    transform: scale(1.1);
}

/* Child Card Body */
.child-card-body {
    padding: 24px;
}

.child-info-section {
    margin-bottom: 24px;
}

/* Form Row - Layout horizontal pour formulaires */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Modern Form Row */
.form-row-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-600);
}

.field-label.required::after {
    content: ' *';
    color: var(--danger);
}

/* Input with Icon */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: 14px;
    color: var(--gray-400);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color 0.2s ease;
}

.input-with-icon:focus-within i {
    color: var(--primary);
}

.modern-input,
.modern-select {
    width: 100%;
    padding: 12px 14px 12px 46px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 0.95rem;
    color: var(--gray-800);
    background: var(--gray-50);
    transition: all 0.2s ease;
}

.modern-input:focus,
.modern-select:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.1);
}

.modern-input::placeholder {
    color: var(--gray-400);
}

/* Select without icon */
.modern-select-no-icon {
    width: 100%;
    padding: 12px 36px 12px 14px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 0.95rem;
    color: var(--gray-800);
    background: var(--gray-50);
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    cursor: pointer;
}

.modern-select-no-icon:focus {
    outline: none;
    border-color: var(--primary);
    background-color: white;
    box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.1);
}

/* Activity select without icon in activity cards */
.activity-select-modern {
    padding-left: 14px !important;
}

/* Activities Section Modern */
.activities-section-modern {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px dashed var(--gray-300);
}

.activities-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.activities-title-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--gray-700);
}

.activities-title-modern i {
    color: var(--primary);
    font-size: 1.1rem;
}

.activities-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-lg);
    font-size: 0.8rem;
    font-weight: 600;
}

.btn-add-activity {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-add-activity:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-add-activity i {
    font-size: 0.9rem;
}

/* Activities Container */
.activities-container-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 60px;
}

/* No Activities Placeholder */
.no-activities-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 20px;
    color: var(--gray-500);
    font-size: 0.9rem;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius);
    background: white;
}

.no-activities-placeholder i {
    color: var(--info);
}

/* Activity Card Modern */
.activity-card-modern {
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.2s ease;
}

.activity-card-modern:hover {
    border-color: var(--primary-light);
    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.1);
}

.activity-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
}

.activity-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Activity Select Wrapper */
.activity-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.activity-icon {
    position: absolute;
    left: 14px;
    color: var(--primary);
    font-size: 1rem;
    z-index: 1;
}

.activity-select-modern {
    width: 100%;
    padding: 12px 36px 12px 46px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-800);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}

.activity-select-modern:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.1);
}

/* Activity Details Row */
.activity-details {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Frequency Selector */
.frequency-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.frequency-label,
.amount-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.frequency-options {
    display: flex;
    gap: 6px;
}

.frequency-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.frequency-option:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}

.frequency-option.selected {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-color: var(--primary);
    color: white;
}

.frequency-option input[type="radio"] {
    display: none;
}

/* Amount Field */
.amount-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.amount-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.activity-amount-modern {
    width: 100px;
    padding: 8px 40px 8px 14px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800);
    text-align: right;
    transition: all 0.2s ease;
}

.activity-amount-modern:focus {
    outline: none;
    border-color: var(--success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.amount-currency {
    position: absolute;
    right: 12px;
    color: var(--gray-500);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Remove Activity Button */
.btn-remove-activity {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--gray-200);
    background: white;
    color: var(--gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-remove-activity:hover {
    border-color: var(--danger);
    background: var(--danger);
    color: white;
    transform: scale(1.1);
}

/* Activities Footer */
.activities-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px dashed var(--gray-300);
}

.total-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-600);
}

.total-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(30px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .form-row-modern {
        grid-template-columns: 1fr;
    }

    .activity-details {
        flex-direction: column;
        gap: 14px;
    }

    .frequency-options {
        width: 100%;
        justify-content: space-between;
    }

    .frequency-option {
        flex: 1;
        text-align: center;
    }

    .activity-amount-modern {
        width: 100%;
    }

    .amount-field {
        width: 100%;
    }
}

/* ========================================
   CLASSES UTILITAIRES (remplacent inline styles JS)
   ======================================== */

/* Status text colors */
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-subtle { color: var(--gray-500); }
.text-body { color: var(--gray-700); }
.text-strong { color: var(--gray-900); font-weight: 600; }

/* Status backgrounds */
.bg-success-light { background: var(--success-light); }
.bg-danger-light { background: var(--danger-light); }
.bg-warning-light { background: var(--warning-light); }
.bg-info-light { background: var(--info-light); }
.bg-primary-light { background: var(--primary-50); }

/* Row highlights */
.row-exceptional { background-color: #fffbeb; }
.row-non-recurring { background-color: #fffbeb; }
.row-highlight { background-color: var(--primary-50); }

/* Inline warning/info boxes */
.inline-warning {
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    background: var(--warning-light);
    border: 1px solid var(--warning);
    color: #92400e;
    font-size: 0.85rem;
}

.inline-info {
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    background: var(--info-light);
    border: 1px solid var(--info);
    color: #1e40af;
    font-size: 0.85rem;
}

.inline-success {
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    background: var(--success-light);
    border: 1px solid var(--success);
    color: #065f46;
    font-size: 0.85rem;
}

.inline-danger {
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    background: var(--danger-light);
    border: 1px solid var(--danger);
    color: #991b1b;
    font-size: 0.85rem;
}

/* Status badges (pour templates JS) */
.badge-sent {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    background: var(--success-light);
    color: #065f46;
}

.badge-failed {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    background: var(--danger-light);
    color: #991b1b;
}

.badge-pending {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    background: var(--warning-light);
    color: #92400e;
}

/* Attendance status */
.attendance-present { color: var(--success); }
.attendance-absent { color: var(--danger); }
.attendance-late { color: var(--warning); }

/* Slot/time displays */
.slot-time-label {
    font-weight: 600;
    color: var(--gray-700);
}

.slot-info-text {
    font-size: 0.85rem;
    color: var(--gray-500);
}

/* Amount displays */
.amount-positive { color: var(--success); font-weight: 600; }
.amount-negative { color: var(--danger); font-weight: 600; }
.amount-neutral { color: var(--gray-700); font-weight: 600; }

/* Loading states */
.loading-text {
    color: var(--gray-500);
    font-style: italic;
}

/* Flex utilities (pour templates JS) */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }

/* Exceptional/non-recurring badge */
.badge-exceptional {
    color: var(--warning-dark);
    font-size: 0.75rem;
    margin-left: 5px;
}

/* Attendance module */
.attendance-sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
}

.attendance-session-card .card-header {
    padding: 12px 16px;
}

.attendance-session-card .card-body {
    padding: 12px 16px;
}

.attendance-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 0.85rem;
}

.attendance-progress {
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.attendance-progress-fill {
    height: 100%;
    transition: width 0.3s;
}

/* ========================================
   DASHBOARD - Classes pour remplacer inline styles
   ======================================== */

/* Alerts panel header */
.alerts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--danger);
    color: white;
    padding: 12px 16px;
    border-radius: var(--radius) var(--radius) 0 0;
}

.alerts-header .badge,
.alerts-badges .badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Stat cards colored variants */
.stat-card.stat-primary { border-left: 4px solid var(--primary); }
.stat-card.stat-primary .stat-icon { background: var(--primary-50); color: var(--primary); }

.stat-card.stat-success { border-left: 4px solid var(--success); }
.stat-card.stat-success .stat-icon { background: var(--success-light); color: var(--success); }

.stat-card.stat-info { border-left: 4px solid var(--secondary); }
.stat-card.stat-info .stat-icon { background: #e0f2fe; color: var(--secondary); }

.stat-card.stat-warning { border-left: 4px solid var(--warning); }
.stat-card.stat-warning .stat-icon { background: var(--warning-light); color: var(--warning); }

.stat-card.stat-danger { border-left: 4px solid var(--danger); }
.stat-card.stat-danger .stat-icon { background: var(--danger-light); color: var(--danger); }

/* Charts grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Dashboard welcome card */
.welcome-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
}

/* Quick stats row */
.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Alert priority badges */
.priority-critical {
    background: var(--danger);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-high {
    background: var(--warning);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-medium {
    background: var(--info);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ========================================
   UTILITY CLASSES - Remplacement inline styles
   ======================================== */

/* Display */
.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }

/* Flex utilities */
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* Gap */
.gap-xs { gap: 0.5rem; }
.gap-sm { gap: 0.625rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }

/* Margins */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.mb-xl { margin-bottom: 2rem; }

/* Padding */
.p-0 { padding: 0; }
.p-sm { padding: 0.5rem; }
.p-md { padding: 1rem; }
.p-lg { padding: 1.5rem; }
.pt-lg { padding-top: 1.25rem; }

/* Text */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.8rem; }
.text-lg { font-size: 1.25rem; }

/* ========================================
   PLANNING HEADER
   ======================================== */
.planning-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.planning-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.planning-actions {
    display: flex;
    gap: 10px;
}

.planning-title {
    margin: 0;
    font-size: 1.25rem;
}

/* ========================================
   COMMUNICATIONS FORM
   ======================================== */
.comm-form-title {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.comm-label {
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.comm-input-wrapper {
    position: relative;
}

.comm-input-icon {
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: var(--gray-400);
}

.comm-textarea-hint {
    font-size: 0.8rem;
    color: var(--gray-400);
    margin-top: 0.5rem;
}

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

.comm-templates-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}

.comm-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* ========================================
   HISTORY PANEL
   ======================================== */
.history-card {
    border: none;
    box-shadow: var(--shadow-sm);
}

.history-header {
    background: white;
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    border-radius: var(--radius) 12px 0 0;
}

/* ========================================
   STATISTICS CARDS
   ======================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stats-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.stats-card-value {
    font-size: 2rem;
    font-weight: 700;
}

.stats-card-label {
    color: var(--gray-500);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.stats-card.stats-primary { border-bottom: 4px solid var(--primary); }
.stats-card.stats-primary .stats-card-value { color: var(--primary); }

.stats-card.stats-success { border-bottom: 4px solid var(--success); }
.stats-card.stats-success .stats-card-value { color: #16a34a; }

.stats-card.stats-info { border-bottom: 4px solid var(--info); }
.stats-card.stats-info .stats-card-value { color: #2563eb; }

.stats-card.stats-warning { border-bottom: 4px solid var(--warning); }
.stats-card.stats-warning .stats-card-value { color: #ca8a04; }

/* ========================================
   REMINDERS PANEL
   ======================================== */
.reminder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.reminder-badge {
    background: linear-gradient(135deg, var(--warning), var(--warning-dark));
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reminder-badge-count {
    font-size: 1.5rem;
    font-weight: 700;
}

.reminder-badge-label {
    font-size: 0.8rem;
}

/* ========================================
   FORM GRID LAYOUTS
   ======================================== */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========================================
   MODAL UTILITIES
   ======================================== */
.modal-narrow {
    max-width: 500px;
}

.modal-scrollable {
    max-height: 400px;
    overflow-y: auto;
}

.modal-summary {
    background: #f3f4f6;
    padding: 10px;
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
}

/* Table utilities */
.table-col-narrow { width: 50px; }
.table-col-action { width: 120px; }

/* Input sizing */
.input-w-sm { min-width: 120px; }
.input-w-md { min-width: 200px; }
.input-w-lg { min-width: 300px; }

.input-with-icon { padding-left: 2.5rem; }

/* Color picker */
.color-picker { height: 42px; padding: 2px; }

/* Send button */
.btn-send {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
}

/* ========================================
   CONFIRM MODAL
   ======================================== */
.confirm-modal {
    max-width: 400px;
    text-align: center;
    padding: 32px 24px;
}

.confirm-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--danger-light);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.5rem;
}

.confirm-icon.warning {
    background: var(--warning-light);
    color: var(--warning);
}

.confirm-icon.success {
    background: #dcfce7;
    color: var(--success);
}

.confirm-icon.info {
    background: #dbeafe;
    color: var(--info);
}

.confirm-modal h3 {
    margin-bottom: 8px;
    color: var(--gray-900);
}

.confirm-modal p {
    color: var(--gray-500);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-actions .btn {
    min-width: 120px;
}

/* ========================================
   ACCESSIBILITE - MOUVEMENT REDUIT
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   FIX: SIDEBAR NAV-ITEMS - Fond transparent
   ======================================== */
.sidebar .nav-item {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
}

.sidebar .nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sidebar .nav-item.active {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ========================================
   IMPORT BANCAIRE
   ======================================== */
.ib-upload-zone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 40px 20px;
    text-align: center;
    background: var(--gray-50);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.ib-upload-zone.drag-over {
    border-color: var(--primary);
    background: var(--primary-50);
}
.ib-upload-icon {
    font-size: 3rem;
    color: var(--primary);
    opacity: 0.7;
}
.ib-upload-text strong {
    display: block;
    font-size: 1.05rem;
    color: var(--gray-900);
    margin-bottom: 4px;
}
.ib-table-wrapper {
    overflow-x: auto;
}
.ib-table {
    margin: 0;
    font-size: 0.88rem;
}
.ib-table thead th {
    position: sticky;
    top: 0;
    background: var(--gray-50);
    z-index: 1;
}
.ib-row.ib-row-match { background: rgba(16, 185, 129, 0.04); }
.ib-row.ib-row-ambig { background: rgba(245, 158, 11, 0.06); }
.ib-row.ib-row-duplicate { background: rgba(59, 130, 246, 0.06); opacity: 0.65; }
.ib-row.ib-row-fresh { box-shadow: inset 4px 0 0 var(--primary); }
.ib-row.ib-row-fresh td:first-child { position: relative; }
.ib-row td { vertical-align: middle; }
.ib-new-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    margin-right: 4px;
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.15);
}

/* === Planning floor plan === */
.fp-wrap {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}
.fp-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--gray-700);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-200);
}
.fp-legend .fp-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 2px solid;
    vertical-align: middle;
    margin-right: 6px;
}
.fp-dot--busy   { background: rgba(34,197,94,0.25);   border-color: #16a34a; }
.fp-dot--almost { background: rgba(245,158,11,0.25);  border-color: #d97706; }
.fp-dot--full   { background: rgba(239,68,68,0.25);   border-color: #dc2626; }
.fp-dot--empty  { background: rgba(148,163,184,0.15); border-color: #94a3b8; }

.fp-stage {
    position: relative;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fafafa;
}
.fp-bg {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
}
.fp-overlays {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.fp-overlays.fp-no-image {
    /* If background image fails to load, show a soft hint background so the
       overlays remain visible. */
    background:
        repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e5e7eb 10px, #e5e7eb 20px);
    aspect-ratio: 1280 / 720;
    position: relative;
}
.fp-room {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.15;
    color: #1f2937;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    background: rgba(255,255,255,0.0);
    overflow: hidden;
}
.fp-room-name {
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    padding: 4px 6px;
    background: rgba(255,255,255,0.55);
    color: #0f172a;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-room-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4px 6px;
    overflow: hidden;
    min-height: 0;
}
.fp-room-roster {
    list-style: none;
    margin: 4px 0 2px;
    padding: 0;
    font-size: 0.68em;
    line-height: 1.25;
    width: 100%;
    overflow: hidden;
}
.fp-room-roster li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-room-roster-more {
    opacity: 0.7;
    font-style: italic;
}
.fp-room-when {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    margin-bottom: 4px;
    border-radius: 999px;
    background: rgba(99,102,241,0.15);
    color: #4338ca;
    white-space: nowrap;
}
.fp-room-when--today {
    background: rgba(16,185,129,0.18);
    color: #047857;
}
.fp-room:hover {
    transform: scale(1.02);
    background: rgba(255,255,255,0.92);
    z-index: 2;
}
.fp-room--busy {
    background: rgba(34,197,94,0.30);
    border-color: #16a34a;
    color: #14532d;
}
.fp-room--almost {
    background: rgba(245,158,11,0.30);
    border-color: #d97706;
    color: #78350f;
}
.fp-room--full {
    background: rgba(239,68,68,0.32);
    border-color: #dc2626;
    color: #7f1d1d;
}
.fp-room--empty {
    background: rgba(148,163,184,0.12);
    border-color: #94a3b8;
    border-style: dashed;
    color: #475569;
}
.fp-room--unassigned {
    background: rgba(99,102,241,0.06);
    border-color: #c7d2fe;
    border-style: dashed;
    color: #6366f1;
}

/* --- Editing mode (calibrate ROOM_OVERLAYS coords) --- */
.fp-editing .fp-stage { cursor: default; }
.fp-edit-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
}
.fp-edit-status {
    flex: 1;
    color: #4338ca;
    font-weight: 600;
    font-size: 0.9rem;
}
.fp-edit-active {
    margin-top: 10px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: #475569;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.fp-room--editing {
    background: rgba(99,102,241,0.18) !important;
    border: 2px solid #6366f1 !important;
    border-style: solid !important;
    color: #312e81;
    cursor: move;
    user-select: none;
}
.fp-room--editing.fp-room--active {
    background: rgba(99,102,241,0.32) !important;
    border-color: #4338ca !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.45);
    z-index: 5;
}
.fp-room--editing:hover { transform: none; }
.fp-edit-label {
    font-weight: 700;
    font-size: 0.78rem;
    text-align: center;
    pointer-events: none;
}
.fp-edit-handle {
    position: absolute;
    bottom: -7px;
    right: -7px;
    width: 14px;
    height: 14px;
    background: #6366f1;
    border: 2px solid white;
    border-radius: 3px;
    cursor: nwse-resize;
    z-index: 6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.fp-edit-del {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    border: 2px solid white;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 7;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    padding: 0;
}
.fp-edit-del:hover { background: #dc2626; }
.fp-edit-label[data-act="rename"] {
    cursor: text;
    pointer-events: auto;
}
.fp-edit-label[data-act="rename"]:hover {
    text-decoration: underline;
}
.fp-edit-link {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.92);
    color: white;
    border-radius: 50%;
    font-size: 9px;
    z-index: 5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    pointer-events: none;
}
.fp-edit-link--off {
    background: rgba(148, 163, 184, 0.85);
}
.fp-room-activity {
    font-weight: 700;
    font-size: 0.85em;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.fp-room-meta {
    font-size: 0.72em;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.fp-room-count {
    margin-top: 4px;
    font-size: 1em;
}
.fp-room-count strong {
    font-size: 1.4em;
}
.fp-room-empty {
    font-style: italic;
    font-size: 0.8em;
}
.fp-room-more {
    position: absolute;
    top: 4px;
    right: 6px;
    background: rgba(0,0,0,0.55);
    color: white;
    font-size: 0.65em;
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 700;
}

.ib-kpi-card,
.ib-exp-kpi,
.fam-kpi-card {
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    border: 2px solid transparent;
}
.ib-kpi-card:hover,
.ib-exp-kpi:hover,
.fam-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.ib-kpi-card.ib-kpi-active,
.ib-exp-kpi.ib-kpi-active,
.fam-kpi-card.fam-kpi-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.12);
    transform: translateY(-1px);
}

/* === Family picker overlay (used in import-bank rows) === */
.ib-family-picker-btn {
    width: 100%;
    min-width: 180px;
    max-width: 220px;
    text-align: left;
    cursor: pointer;
    background: var(--white);
    border: 1px solid var(--gray-200);
    padding: 6px 10px;
    font-size: 0.85rem;
    color: var(--gray-900);
    transition: border-color 0.15s ease;
}
.ib-family-picker-btn:hover:not(:disabled) {
    border-color: var(--primary);
}
.ib-family-picker-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--gray-50);
}
.ib-family-picker-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}
.ib-family-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--gray-100);
}
.ib-family-option:last-child {
    border-bottom: none;
}
.ib-family-option:hover {
    background: var(--primary-50);
    color: var(--primary);
}
.ib-family-empty {
    padding: 16px;
    text-align: center;
    color: var(--gray-500);
    font-style: italic;
    list-style: none;
}

/* Role-based visibility: hide cumulative DH KPIs from ASSISTANT users */
body.role-assistant .hide-from-assistant {
    display: none !important;
}

/* === Activity details modal === */
.activity-stat-card.clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.activity-stat-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.activity-details-summary {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
}
.ad-summary-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.ad-summary-stat {
    display: flex;
    flex-direction: column;
}
.ad-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
}
.ad-summary-label {
    font-size: 0.78rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ad-children-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}
.ad-child-row {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: var(--white);
}
.ad-child-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.ad-child-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--gray-900);
}
.ad-child-meta {
    color: var(--gray-600);
    font-size: 0.82rem;
    margin-top: 2px;
}
.ad-child-meta a {
    color: var(--primary);
    text-decoration: none;
}
.ad-child-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}
.ad-amount-chip {
    background: var(--primary-50);
    color: var(--primary);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.78rem;
}
.ad-sessions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ad-session-chip {
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
}

/* === Dépenses page: cell action group === */
.dep-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.dep-actions .btn {
    flex-shrink: 0;
}
body.page-depenses .dep-toolbar {
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}
body.page-depenses #depSearch {
    min-width: 180px;
    max-width: 280px;
}
@media (max-width: 900px) {
    body.page-depenses .dep-toolbar {
        justify-content: flex-start;
        width: 100%;
    }
    body.page-depenses #depSearch {
        flex: 1;
        max-width: none;
    }
}

/* === Activity details filter bar === */
.ad-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 2;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
}
.ad-search-wrap {
    position: relative;
}
.ad-search-wrap i.fa-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}
.ad-search-wrap input {
    padding-left: 34px;
    width: 100%;
}
.ad-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ad-chip {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid transparent;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ad-chip:hover {
    background: var(--gray-200);
}
.ad-chip.is-active {
    background: var(--primary);
    color: var(--white);
}
.ad-chip-ok:not(.is-active) {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}
.ad-chip-ok.is-active {
    background: var(--success);
    color: var(--white);
}
.ad-chip-count {
    background: rgba(255,255,255,0.25);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.ad-chip:not(.is-active) .ad-chip-count {
    background: var(--gray-300);
    color: var(--gray-700);
}

/* === Assign session picker (multi-select) === */
.ad-session-picker {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ad-session-limit {
    background: rgba(99,102,241,0.10);
    border: 1px solid rgba(99,102,241,0.25);
    color: #4338ca;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
}
.ad-session-limit.is-saturated {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.35);
    color: #92400e;
}
.ad-session-limit i { margin-right: 6px; }
.ad-session-pick-row.is-enrolled {
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.35);
    cursor: default;
}
.ad-session-state {
    margin-left: 6px;
    font-size: 0.7em;
    padding: 2px 8px;
}
.ad-session-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
    border: none;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 6px;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.ad-session-section-head:hover {
    background: var(--gray-50);
}
.ad-section-chevron {
    color: var(--gray-500);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.ad-session-section[data-collapsed="true"] .ad-section-chevron {
    transform: rotate(-90deg);
}
.ad-session-section[data-collapsed="true"] .ad-session-section-body {
    display: none;
}
.ad-session-pick-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ad-session-pick-row:hover {
    border-color: var(--primary-light);
    background: var(--gray-50);
}
.ad-session-pick-row.is-full {
    opacity: 0.55;
    cursor: not-allowed;
}
.ad-session-pick-row input[type="checkbox"] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
}
.ad-session-pick-info {
    flex: 1;
    min-width: 0;
}
.ad-session-pick-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}
.ad-session-pick-meta {
    color: var(--gray-600);
    font-size: 0.85rem;
    margin: 2px 0;
}
.ad-session-act {
    font-size: 0.72rem;
    font-weight: 500;
}
.ad-session-actions {
    position: sticky;
    bottom: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: 12px 0 0;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Frequency chips */
.activity-freq-tag {
    display: inline-block;
    background: rgba(255,255,255,0.7);
    color: var(--primary);
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}
.ad-freq-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.ad-freq-chip.ok {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}
.ad-freq-chip.warn {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
}

/* === Depenses page === */
.dep-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.dep-category-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.dep-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.dep-cat-name {
    font-weight: 700;
    font-size: 0.88rem;
}
.dep-cat-pct {
    font-size: 0.78rem;
    color: var(--gray-500);
    font-weight: 600;
}
.dep-cat-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 6px;
}
.dep-cat-bar {
    height: 4px;
    background: var(--gray-100);
    border-radius: 999px;
    overflow: hidden;
}
.dep-cat-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.dep-cat-select {
    min-width: 140px;
}
.ib-family-select {
    min-width: 180px;
    max-width: 220px;
    width: 100%;
    font-size: 0.85rem;
    padding: 6px 8px;
}
.ib-month-input {
    width: 130px;
    font-size: 0.85rem;
    padding: 6px 8px;
}

/* === Combobox (searchable select) === */
.combobox {
    position: relative;
}
.combobox-input {
    width: 100%;
}
.combobox-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 1100;
}
.combobox-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.92rem;
}
.combobox-option:hover {
    background: var(--primary-50);
    color: var(--primary);
}
.combobox-empty {
    padding: 10px 14px;
    color: var(--gray-500);
    font-size: 0.9rem;
    font-style: italic;
}

/* === Multi-month picker === */
.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}
.btn-link:hover {
    background: var(--primary-50);
}
.btn-xs {
    font-size: 0.78rem;
    padding: 3px 8px;
}
.months-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.month-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.month-row .month-input {
    flex: 1;
}
.remove-month-btn {
    flex-shrink: 0;
}

/* === Month block (with embedded activity selector) === */
.month-block {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--gray-50);
    margin-bottom: 8px;
}
.month-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.month-block-header .month-input {
    flex: 1;
}
.month-block .month-activities {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 6px;
}
.month-block .activity-row {
    padding: 6px 8px;
    margin: 0;
    border-bottom: 1px solid var(--gray-100);
}
.month-block .activity-row:last-child {
    border-bottom: none;
}

/* === Family details panel in payment modal === */
.family-details-panel {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 16px;
}
.family-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-700);
}
.family-details-total strong {
    color: var(--primary);
    font-size: 1rem;
    margin: 0 6px;
}
.activities-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}
.activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.88rem;
}
.activity-row:hover {
    background: var(--white);
}
.activity-row input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--primary);
}
.activity-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.activity-child {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.85rem;
}
.activity-name {
    color: var(--gray-600);
    font-size: 0.78rem;
}
.activity-amount {
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    font-size: 0.88rem;
}

/* === Bank reconciliation list === */
.rapproch-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    cursor: pointer;
    margin-bottom: 8px;
    text-align: left;
    transition: all 0.15s ease;
}
.rapproch-row:hover {
    border-color: var(--primary);
    background: var(--primary-50);
}
.rapproch-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rapproch-date {
    font-size: 0.85rem;
    color: var(--gray-700);
}
.rapproch-sender {
    color: var(--gray-900);
    font-weight: 600;
    font-size: 0.92rem;
}
.rapproch-amount {
    font-weight: 700;
    color: var(--success);
    font-size: 1rem;
    white-space: nowrap;
}

/* Month navigation (prev/next arrows around month input) */
.month-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.month-nav .form-input {
    margin: 0;
    min-width: 150px;
}
.month-nav .btn-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
}
.ib-table th, .ib-table td { padding: 8px 10px; }
.ib-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    body.page-import-bank .ib-table thead { display: none; }
    body.page-import-bank .ib-row {
        display: block;
        padding: 12px;
        border-bottom: 1px solid var(--gray-200);
    }
    body.page-import-bank .ib-row td {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border: none;
    }
    body.page-import-bank .ib-family-select { width: 100%; max-width: none; }
}

/* ========================================
   PLANNING — bandeau jour férié / vacances
   ======================================== */
.planning-holiday-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    margin: 0 0 16px;
    border-radius: var(--radius-md, 12px);
    border-left: 5px solid currentColor;
    font-size: 0.95rem;
}
.planning-holiday-banner.hidden { display: none; }
.planning-holiday-banner i { font-size: 1.4rem; }
.planning-holiday-banner.is-holiday {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
}
.planning-holiday-banner.is-vacation {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}
.planning-holiday-banner strong { font-weight: 700; letter-spacing: 0.5px; }

/* ========================================
   SUPPORT INBOX (page Support parents)
   ======================================== */
.support-inbox {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gray-100);
}
.support-thread {
    border-bottom: 1px solid var(--gray-100);
    background: white;
}
.support-thread.is-open { background: var(--gray-50); }
.support-thread-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.support-thread-head:hover { background: var(--gray-50); }
.support-thread-head-main { flex: 1; min-width: 0; }
.support-thread-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--gray-800);
}
.support-thread-subtitle {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.support-thread-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.support-thread-count {
    background: var(--gray-100);
    color: var(--gray-600);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.support-thread-body {
    padding: 8px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.support-msg {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: white;
    border: 1px solid var(--gray-100);
    max-width: 90%;
}
.support-msg--parent { align-self: flex-start; }
.support-msg--admin {
    align-self: flex-end;
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
}
.support-msg-meta {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin-bottom: 4px;
}
.support-msg-body {
    font-size: 0.9rem;
    color: var(--gray-800);
    line-height: 1.4;
    white-space: pre-wrap;
}
.support-reply-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    padding: 12px;
    background: white;
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius-md);
}
.support-reply-form textarea { resize: vertical; min-height: 70px; }
.support-reply-form .btn { align-self: flex-end; }

/* Attachment picker (admin + parent reply forms) */
.att-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 0.85rem;
    padding: 8px 0;
}
.att-picker input[type="file"] { display: none; }
.att-picker:hover { color: var(--primary); }

.att-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.att-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--gray-100);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--gray-700);
}

/* Attachments displayed inside a message bubble */
.att-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.att-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--gray-700);
    text-decoration: none;
    max-width: 220px;
}
.att-chip:hover { background: var(--gray-50); border-color: var(--gray-300); }
.att-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.att-chip-size { color: var(--gray-500); font-size: 0.7rem; }
.att-chip--img { padding: 0; overflow: hidden; }
.att-chip--img img {
    display: block;
    max-width: 140px;
    max-height: 140px;
    object-fit: cover;
}

/* Sidebar badge for support — red pill, small */
.nav-item-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    color: white;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-item-badge.hidden { display: none; }

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .sidebar,
    .bottom-nav,
    .main-header,
    .sidebar-overlay,
    .modal-overlay,
    #toastContainer,
    .btn,
    .card-actions,
    .family-card-actions,
    .export-buttons {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .page-section {
        display: block !important;
        break-inside: avoid;
    }

    .page-section:not(.active) {
        display: none !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    body {
        background: white !important;
        color: black !important;
        font-size: 12pt !important;
    }
}

/* =========================================================
   Filtres unifiés (toutes pages)
   Usage:
     <div class="card mb-4 filters-card">
       <div class="card-body">
         <div class="filters-grid">
           <div class="form-group">
             <label class="form-label"><i class="fas fa-x"></i> Label</label>
             <input class="form-input" ...>
           </div>
           ...
           <div class="form-group filters-grid-wide">…champ pleine largeur…</div>
         </div>
         <div class="filters-actions">
           <button class="btn btn-primary">Filtrer</button>
         </div>
       </div>
     </div>
   ========================================================= */
.filters-card {
    border: 1px solid var(--gray-100);
    background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 20px;
}

.filters-grid .form-group {
    margin-bottom: 0;
}

.filters-grid .form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-700);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.filters-grid .form-label i {
    color: var(--primary);
    width: 14px;
    text-align: center;
    font-size: 0.85rem;
}

.filters-grid-wide {
    grid-column: 1 / -1;
}

.filters-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
}

.filters-actions .btn {
    min-height: 44px;
}

@media (max-width: 768px) {
    .filters-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .filters-actions .btn {
        flex: 1;
    }
}

/* =========================================================
   Corbeille — éléments spécifiques (hors filtres)
   ========================================================= */
.page-corbeille .table td,
.page-corbeille .table th {
    vertical-align: middle;
}

.page-corbeille .table td .badge {
    white-space: nowrap;
}

.page-corbeille #corbCount {
    background: var(--primary);
    color: white;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* Modale détail Corbeille : grille de paires label/value */
.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 20px;
    background: var(--gray-50);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.snapshot-list {
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.snapshot-list li {
    margin-bottom: 6px;
}

/* =========================================================
   Présences — KPIs cliquables + mode consultation
   ========================================================= */
.att-kpi-card {
    cursor: pointer;
    border: none;
    text-align: left;
    width: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.att-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.att-kpi-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* =========================================================
   Présences — Mode pointage (édition)
   Chaque ligne élève = info à gauche, 4 boutons P/A/R/E à droite,
   couleurs explicites quand actif, contour sinon.
   ========================================================= */
.attendance-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attendance-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-left: 4px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: background 0.15s, border-color 0.15s;
}
.attendance-item:hover {
    background: var(--gray-50);
}

.attendance-item .student-info {
    flex: 1;
    min-width: 0;
}
.attendance-item .student-name {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 1rem;
    line-height: 1.2;
}
.attendance-item .student-details {
    color: var(--gray-500);
    font-size: 0.85rem;
    margin-top: 2px;
}

/* Couleur de bordure gauche selon le statut sélectionné */
.attendance-item.present   { border-left-color: #10b981; background: #f0fdf4; }
.attendance-item.absent    { border-left-color: #ef4444; background: #fef2f2; }
.attendance-item.late      { border-left-color: #f59e0b; background: #fffbeb; }
.attendance-item.excused   { border-left-color: #3b82f6; background: #eff6ff; }

/* Groupe de 4 boutons P / A / R / E */
.attendance-actions {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--gray-200);
    background: var(--white);
    border-radius: var(--radius-md);
    color: var(--gray-400);
    cursor: pointer;
    transition: all 0.12s ease;
    font-size: 1rem;
    padding: 0;
}
.btn-status:hover {
    border-color: var(--gray-300);
    transform: translateY(-1px);
}
.btn-status:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Hover colorés par type (preview) */
.btn-status.present:hover { border-color: #10b981; color: #10b981; }
.btn-status.absent:hover  { border-color: #ef4444; color: #ef4444; }
.btn-status.late:hover    { border-color: #f59e0b; color: #f59e0b; }
.btn-status.excused:hover { border-color: #3b82f6; color: #3b82f6; }

/* État actif : fond plein de la couleur, blanc dessus */
.btn-status.active {
    color: var(--white);
    border-color: transparent;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.btn-status.present.active { background: #10b981; }
.btn-status.absent.active  { background: #ef4444; }
.btn-status.late.active    { background: #f59e0b; }
.btn-status.excused.active { background: #3b82f6; }

/* =========================================================
   Centre de loisirs (Summer School)
   ========================================================= */
.summer-tarif-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.summer-tarif-tile {
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--gray-50), var(--white));
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
}
.summer-tarif-tile.dates { border-left-color: var(--accent); }
.summer-tarif-label {
    font-size: 0.8rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}
.summer-tarif-label i { margin-right: 6px; color: var(--primary); }
.summer-tarif-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

/* Bandeau "À valider" sur cartes famille créées par webhook */
.family-card-pending {
    border: 2px solid #f59e0b !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.18) !important;
}
.family-pending-banner {
    background: linear-gradient(90deg, #fef3c7, #fde68a);
    color: #92400e;
    padding: 8px 12px;
    border-bottom: 1px solid #fbbf24;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}
.family-pending-banner small {
    font-weight: 500;
    opacity: 0.85;
    font-size: 0.95em;
}
.family-pending-banner .btn-xs {
    padding: 3px 10px;
    font-size: 0.78rem;
    line-height: 1;
}

/* Chip activité dans les tableaux Summer */
.summer-act-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Pending parents — regroupement par famille (groupes dépliables) */
.pending-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}
.pending-group {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    transition: box-shadow 0.15s ease;
}
.pending-group:hover { box-shadow: var(--shadow-sm); }
.pending-group[open] {
    border-color: var(--warning);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}
.pending-group > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    user-select: none;
}
.pending-group > summary::-webkit-details-marker { display: none; }
.pg-summary-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pg-chevron { transition: transform 0.2s ease; color: var(--gray-400); }
.pending-group[open] .pg-chevron { transform: rotate(90deg); color: var(--warning); }
.pg-icon { color: var(--primary); font-size: 0.9em; margin-right: 4px; }
.pg-stats { display: inline-flex; align-items: center; flex-wrap: wrap; }
.pg-summary-actions { display: flex; align-items: center; flex-shrink: 0; }
.pg-details {
    padding: 0 16px 12px;
    border-top: 1px solid var(--gray-100);
}
.pg-details .table { background: transparent; }
.pg-details .table th { background: var(--gray-50); font-size: 0.78rem; }
.pg-details .table td { padding: 6px 10px; vertical-align: middle; }
.table-sm th, .table-sm td { padding: 6px 10px; font-size: 0.88rem; }

/* Matériel d'activité — modal éditeur + affichage carte */
.materials-list .material-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    align-items: center;
}
.materials-list .material-row .form-input { font-size: 0.9rem; padding: 8px 10px; }

.summer-act-materials {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: 8px;
    border-left: 2px solid var(--gray-300);
}
.summer-act-materials-title {
    font-size: 0.8rem;
    color: var(--gray-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}
.summer-act-materials-title i { margin-right: 4px; color: var(--gray-500); }
.summer-act-materials ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}
.summer-act-materials li { padding: 2px 0; }

/* Catalogue activités — grille de cards */
.summer-activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.summer-act-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    transition: box-shadow 0.15s;
}
.summer-act-card:hover { box-shadow: var(--shadow-md); }
.summer-act-card.inactive { opacity: 0.55; }
.summer-act-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* Onglets Summer (Inscriptions / Pointage) */
.summer-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 6px;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    width: fit-content;
}
.summer-tab {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    color: var(--gray-600);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.summer-tab:hover { color: var(--gray-900); background: rgba(255,255,255,0.5); }
.summer-tab.active {
    background: var(--white);
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.summer-tab i { font-size: 0.95em; }
.summer-section.hidden { display: none; }

/* Période chips dans la modale d'inscription */
.period-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-100);
    max-height: 280px;
    overflow-y: auto;
}
.period-chip-group.period-days {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    display: grid;
}
.period-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.12s ease;
    min-width: 160px;
}
.period-chip:hover {
    border-color: var(--primary-light);
}
.period-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.period-chip.checked {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(67, 56, 202, 0.3);
}
.period-chip-label {
    font-weight: 600;
}
.period-chip-amount {
    font-size: 0.78rem;
    opacity: 0.85;
}

/* Tabs périodes */
.enroll-tabs .btn-primary {
    box-shadow: 0 2px 6px rgba(67, 56, 202, 0.25);
}

/* Combobox famille (réutilisable) */
.combobox { position: relative; }
.combobox-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
}
.combobox-list li:hover {
    background: var(--gray-50);
}

/* =========================================================
   Multi-select chips (Spécialités animateur, etc.)
   ========================================================= */
.specialty-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-100);
}
.specialty-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
    user-select: none;
}
.specialty-chip:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}
.specialty-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.specialty-chip.checked {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(67, 56, 202, 0.25);
}
.specialty-chip.checked::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 4px;
    font-size: 0.85em;
}
.specialty-chip small { opacity: 0.7; font-size: 0.8em; }

/* Bandeau actions rapides (Tous présents / Tous absents / Reset) */
.attendance-bulk-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-100);
}

/* Bandeau résumé en haut de la modale (date + horaire) */
.attendance-info.modal-summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--gray-50), var(--white));
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-100);
    margin-bottom: 16px;
}
.attendance-info.modal-summary > div {
    font-size: 0.9rem;
    color: var(--gray-700);
}
.attendance-info.modal-summary strong {
    color: var(--gray-500);
    font-weight: 500;
    margin-right: 6px;
}

/* Mode consultation : on cache les anciens btn-status (la liste est rerendue
   avec un badge clair par élève via .attendance-view-item ci-dessous) */
.attendance-view-only .btn-status {
    display: none;
}

@media (max-width: 768px) {
    .attendance-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .attendance-actions {
        justify-content: space-around;
    }
    .btn-status {
        flex: 1;
        max-width: 60px;
    }
}

/* Résumé en chips en tête de modale (consultation) */
.attendance-view-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-100);
}
.att-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--white);
    border: 1px solid var(--gray-200);
}
.att-chip.present  { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.att-chip.absent   { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.att-chip.late     { color: #b45309; background: #fef3c7; border-color: #fde68a; }
.att-chip.excused  { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
.att-chip.notmarked { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }

/* Ligne élève en mode consultation : fond teinté + badge à droite */
.attendance-view-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-left: 4px solid var(--gray-300);
    transition: background 0.15s;
}
.attendance-view-item:hover {
    background: var(--gray-50);
}
.attendance-view-item .student-info { flex: 1; }
.attendance-view-item .student-name {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 1rem;
}
.attendance-view-item .student-details {
    color: var(--gray-500);
    font-size: 0.85rem;
    margin-top: 2px;
}

/* Couleur de bordure gauche selon le statut */
.attendance-view-item.present   { border-left-color: #10b981; background: #f0fdf4; }
.attendance-view-item.absent    { border-left-color: #ef4444; background: #fef2f2; }
.attendance-view-item.late      { border-left-color: #f59e0b; background: #fffbeb; }
.attendance-view-item.excused   { border-left-color: #3b82f6; background: #eff6ff; }
.attendance-view-item.notmarked { border-left-color: #94a3b8; }

/* Badge statut à droite */
.att-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.att-status-badge.present  { color: #15803d; background: #bbf7d0; }
.att-status-badge.absent   { color: #b91c1c; background: #fecaca; }
.att-status-badge.late     { color: #b45309; background: #fde68a; }
.att-status-badge.excused  { color: #1e40af; background: #bfdbfe; }
.att-status-badge.notmarked { color: #475569; background: #e2e8f0; }

@media (max-width: 768px) {
    .attendance-view-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .att-status-badge { align-self: flex-end; }
}