/* ==========================================================
   root.css — Album Sport
   Variables CSS, Reset, Debug
   ========================================================== */

:root {
    /* -- Couleurs -- */
    --app-primary: #00BE3D;
    --app-primary-hover: #009E33;
    --app-primary-light: #E3FAEB;
    --app-secondary: #0046FF;
    --app-secondary-hover: #0036CC;
    --app-secondary-light: #E8EEFF;

    --app-success: #00BE3D;
    --app-success-light: #E3FAEB;
    --app-warning: #F77F00;
    --app-warning-light: #FFF3E0;
    --app-danger: #D62828;
    --app-danger-light: #FDEAEA;
    --app-info: #0046FF;
    --app-info-light: #E8EEFF;

    --app-white: #FFFFFF;
    --app-black: #000000;
    --app-light: #F8F9FA;
    --app-gray-100: #F5F5F5;
    --app-gray-200: #E0E0E0;
    --app-gray-300: #BDBDBD;
    --app-gray-400: #9E9E9E;
    --app-gray-500: #767676;
    --app-gray-600: #555555;
    --app-gray-700: #333333;
    --app-dark: #1A1A1A;

    /* -- Typographie -- */
    --app-font-family: 'neulis-neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --app-font-size-xs: 0.75rem;
    --app-font-size-sm: 0.875rem;
    --app-font-size-base: 1rem;
    --app-font-size-md: 1.125rem;
    --app-font-size-lg: 1.25rem;
    --app-font-size-xl: 1.5rem;
    --app-font-size-xxl: 2rem;
    --app-font-size-xxxl: 2.5rem;
    --app-line-height: 1.2;

    /* -- Espacement -- */
    --app-spacer: 1rem;
    --app-spacer-xs: 0.25rem;
    --app-spacer-sm: 0.5rem;
    --app-spacer-md: 1.5rem;
    --app-spacer-lg: 2rem;
    --app-spacer-xl: 3rem;
    --app-spacer-xxl: 4rem;

    /* -- Layout -- */
    --app-container: 1200px;
    --app-sidebar-width: 300px;
    --app-header-height: 64px;
    --app-radius: 8px;
    --app-radius-sm: 4px;
    --app-radius-lg: 12px;
    --app-radius-xl: 16px;

    /* -- Ombres -- */
    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --app-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --app-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --app-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* -- Transitions -- */
    --app-transition: 200ms ease;
    --app-transition-slow: 400ms ease;

    /* -- Surcharge Tabler — harmonisation avec le design system PB -- */
    --tblr-font-sans-serif: 'neulis-neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --tblr-border-radius: var(--app-radius);
    --tblr-border-radius-sm: var(--app-radius-sm);
    --tblr-border-radius-lg: var(--app-radius-lg);
    --tblr-border-radius-xl: var(--app-radius-xl);
    --tblr-border-color: var(--app-gray-200);
    /* Force la primaire Tabler en vert PB (sinon Tabler par défaut = bleu #066fd1) */
    --tblr-primary: #00BE3D;
    --tblr-primary-rgb: 0, 190, 61;
    --tblr-primary-fg: #ffffff;
    --tblr-link-color: #00BE3D;
    --tblr-link-color-rgb: 0, 190, 61;
    --tblr-link-hover-color: #009E33;
    --tblr-link-hover-color-rgb: 0, 158, 51;

    /* -- Typographie mono -- */
    --app-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

    /* -- Gris étendus -- */
    --app-gray-50: #FAFAFA;
    --app-gray-800: #212121;

    /* -- Primary RGB (pour rgba()) -- */
    --app-primary-rgb: 0, 190, 61;

    /* -- Hover boutons -- */
    --app-danger-hover: #B71C1C;
    --app-warning-hover: #D96E00;
    --app-success-hover: #009E33;

    /* -- Alert colors -- */
    --app-alert-warning-bg: #fff8e1;
    --app-alert-warning-border: #ffe082;
    --app-alert-warning-text: #8d6e00;
    --app-alert-danger-bg: #fef2f2;
    --app-alert-danger-border: #fecaca;
    --app-alert-danger-text: #991b1b;

    /* -- Accent -- */
    --app-accent: #7b1fa2;
    --app-accent-light: #f3e5f5;
}

/* -- Reset -- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--app-font-family);
    font-size: var(--app-font-size-base);
    line-height: var(--app-line-height);
    color: var(--app-dark);
    background: var(--app-white);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -- Avatar : empêcher la déformation -- */
.avatar {
    flex-shrink: 0;
    aspect-ratio: 1;
}

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

a:hover {
    color: var(--app-primary-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    font-weight: 600;
}

/* -- Utilitaires -- */
.app-container {
    max-width: var(--app-container);
    margin: 0 auto;
    padding: 0 var(--app-spacer);
}

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

.app-text-center { text-align: center; }
.app-text-right { text-align: right; }
.app-text-muted { color: var(--app-gray-500); }
.app-hidden { display: none !important; }
.app-text-light { color: var(--app-gray-400); }
.app-text-dark { color: var(--app-dark); }
.app-text-success { color: var(--app-success); }
.app-text-danger { color: var(--app-danger); }
.app-text-warning { color: var(--app-warning); }
.app-text-xs { font-size: var(--app-font-size-xs); }
.app-text-sm { font-size: var(--app-font-size-sm); }
.app-text-bold { font-weight: 600; }
.app-d-block { display: block; }

.app-mt-xs { margin-top: var(--app-spacer-xs); }
.app-mt-sm { margin-top: var(--app-spacer-sm); }
.app-mt { margin-top: var(--app-spacer); }
.app-mt-md { margin-top: var(--app-spacer-md); }
.app-mt-lg { margin-top: var(--app-spacer-lg); }
.app-mb-xs { margin-bottom: var(--app-spacer-xs); }
.app-mb-sm { margin-bottom: var(--app-spacer-sm); }
.app-mb { margin-bottom: var(--app-spacer); }
.app-mb-md { margin-bottom: var(--app-spacer-md); }
.app-mb-lg { margin-bottom: var(--app-spacer-lg); }
.app-ml-auto { margin-left: auto; }
.app-ml-xs { margin-left: 0.25rem; }
.app-ml-sm { margin-left: 0.5rem; }

/* -- Field box : generic grey container -- */
.app-field-box {
    background: var(--app-gray-50);
    border: 1px solid var(--app-gray-200);
    border-radius: var(--app-radius);
    padding: var(--app-spacer);
}

/* -- Separator -- */
.app-separator {
    border: none;
    border-top: 1px solid var(--app-gray-100);
    opacity: 1;
    margin: var(--app-spacer-md) 0;
}

/* -- Background pattern -- */
.app-bg-pattern {
    background-image: url('../img/img-background-pattern-1.svg');
    background-repeat: repeat;
    background-size: 400px;
    background-position: center;
}

/* -- Media object (image + body side by side) -- */
.app-media { display: flex; gap: var(--app-spacer); align-items: flex-start; }
.app-media--center { align-items: center; }
.app-media__body { flex: 1; }

/* -- File / upload info patterns -- */
.app-file-meta { font-size: 0.8125rem; color: var(--app-gray-600); line-height: 1.6; }
.app-file-actions { display: flex; gap: var(--app-spacer-sm); margin-top: var(--app-spacer-sm); }
.app-upload-hint { display: block; margin-bottom: var(--app-spacer-sm); }

/* -- Feedback box (success / warning / error states) -- */
.app-feedback-box { text-align: center; padding: var(--app-spacer); }
.app-feedback-box__icon { font-size: 2.5rem; display: block; margin-bottom: var(--app-spacer-sm); }
.app-feedback-box__title { font-weight: 600; color: var(--app-dark); margin-bottom: var(--app-spacer-xs); }

/* -- Inline code display (API tokens, hashes) -- */
.app-code-inline {
    padding: 0.4rem 0.75rem;
    background: var(--app-gray-100);
    border-radius: var(--app-radius);
    font-size: var(--app-font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -- Inline form row (align items in a row) -- */
.app-inline-form { display: flex; gap: var(--app-spacer-sm); align-items: center; margin-top: var(--app-spacer-sm); }

/* -- Description paragraph (common pattern for form descriptions) -- */
.app-text-description { color: var(--app-gray-500); font-size: var(--app-font-size-sm); margin-bottom: var(--app-spacer); }

/* -- Sport icon thumbnail -- */
.app-sport-icon-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: var(--app-radius-sm);
    background: var(--app-gray-100);
    padding: 4px;
}

/* -- Video preview -- */
.app-video-preview {
    width: 100%;
    max-height: 400px;
    border-radius: var(--app-radius-sm);
    background: var(--app-black);
}

/* -- Toast container -- */
#app-toasts { z-index: 9999; }

/* -- Card body flush (no padding, for tables) -- */
.app-card__body--flush { padding: 0; }

/* -- Form select narrow -- */
.app-form-select--narrow { max-width: 250px; }

/* -- Boutons de base -- */
.app-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--app-spacer-sm);
    padding: 0.5rem 1.25rem;
    border-radius: var(--app-radius);
    font-size: var(--app-font-size-sm);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    transition: all var(--app-transition);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

.app-btn i { font-size: 1.1em; }

.app-btn--primary {
    background: var(--app-primary);
    color: var(--app-white);
}
.app-btn--primary:hover {
    background: var(--app-primary-hover);
    color: var(--app-white);
}

.app-btn--secondary {
    background: var(--app-secondary);
    color: var(--app-white);
}
.app-btn--secondary:hover {
    background: var(--app-secondary-hover);
    color: var(--app-white);
}

.app-btn--danger {
    background: var(--app-danger);
    color: var(--app-white);
}
.app-btn--danger:hover {
    background: var(--app-danger-hover);
    color: var(--app-white);
}
.app-btn--danger-outline {
    color: var(--app-danger);
    border-color: var(--app-danger);
}
.app-btn--danger-outline:hover {
    background: var(--app-danger);
    color: var(--app-white);
}

.app-btn--warning {
    background: var(--app-warning);
    color: var(--app-white);
}
.app-btn--warning:hover {
    background: var(--app-warning-hover);
    color: var(--app-white);
}

.app-btn--success {
    background: var(--app-success);
    color: var(--app-white);
}
.app-btn--success:hover {
    background: var(--app-success-hover);
    color: var(--app-white);
}

/* Variante "light green" : fond vert très clair, texte vert primaire — utilisé pour
   les actions secondaires/contextuelles dans la zone haute (ex : Encodage NFC). */
.app-btn--primary-light {
    background: var(--app-primary-light);
    color: var(--app-primary);
    border-color: transparent;
    font-weight: 600;
}
.app-btn--primary-light:hover {
    background: var(--app-primary);
    color: var(--app-white);
}

.app-btn--outline {
    background: transparent;
    color: var(--app-gray-700);
    border-color: var(--app-gray-200);
}
.app-btn--outline:hover {
    background: var(--app-gray-100);
    color: var(--app-dark);
}

.app-btn:disabled,
.app-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.app-btn--sm {
    padding: 0.25rem 0.75rem;
    font-size: var(--app-font-size-xs);
}

.app-btn--lg {
    padding: 0.75rem 1.75rem;
    font-size: var(--app-font-size-base);
}

.app-btn--icon {
    padding: 0.5rem;
    line-height: 1;
}

.app-btn--icon.app-btn--sm {
    padding: 0.25rem;
}

.app-btn--icon.app-btn--xs {
    padding: 0.125rem;
    font-size: var(--app-font-size-xs);
    margin-left: var(--app-spacer-xs);
}

/* -- Action buttons (Tabler .btn-action override) -- */
.btn-action {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--app-gray-100);
    border: none;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-gray-600);
    transition: background var(--app-transition), color var(--app-transition);
}

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

/* -- Color field (preview + native picker + text input) -- */
.app-color-field {
    display: flex;
    align-items: center;
    gap: var(--app-spacer-xs);
    flex-shrink: 0;
}

.app-color-field__native {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.app-color-field__preview {
    width: 38px;
    height: 38px;
    border-radius: var(--app-radius);
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.app-color-field__input {
    flex: 1 1 auto;
    min-width: 70px;
    font-family: var(--app-font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.app-btn--block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* -- Formulaires de base -- */
.app-form-group {
    margin-bottom: var(--app-spacer);
}

.app-form-label {
    display: block;
    margin-bottom: var(--app-spacer-xs);
    font-size: var(--app-font-size-sm);
    font-weight: 500;
    color: var(--app-gray-700);
}

/* Label + bouton d'action sur la même ligne (label à gauche, bouton à droite) */
.app-form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-spacer-sm);
    margin-bottom: var(--app-spacer-xs);
}

.app-form-label-row .app-form-label {
    margin-bottom: 0;
}

.app-form-input,
.app-form-select,
.app-form-textarea {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--app-font-size-base);
    line-height: 1.5;
    color: var(--app-dark);
    background: var(--app-white);
    border: 1px solid var(--app-gray-200);
    border-radius: var(--app-radius);
    transition: border-color var(--app-transition), box-shadow var(--app-transition);
}

.app-form-input:focus,
.app-form-select:focus,
.app-form-textarea:focus {
    outline: none;
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px var(--app-primary-light);
}

.app-form-input.is-invalid,
.app-form-select.is-invalid {
    border-color: var(--app-danger);
}

.app-form-error {
    font-size: var(--app-font-size-xs);
    color: var(--app-danger);
    margin-top: var(--app-spacer-xs);
}

.app-form-textarea {
    resize: vertical;
    min-height: 100px;
}

.app-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23767676'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* -- Password toggle -- */
.app-password-wrapper {
    position: relative;
}

.app-password-wrapper > .app-form-input,
.app-password-wrapper > .form-control {
    padding-right: 2.5rem;
}

.app-password-toggle {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--app-gray-400);
    padding: 0.25rem;
    font-size: 1.125rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.app-password-toggle:hover {
    color: var(--app-gray-600);
}

/* -- Password generator button -- */
.app-password-generate {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--app-gray-400);
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.app-password-generate:hover {
    color: var(--app-primary);
}

.app-password-wrapper:has(.app-password-generate) > .app-form-input,
.app-password-wrapper:has(.app-password-generate) > .form-control {
    padding-right: 4.5rem;
}

.app-password-generate.is-copied::after {
    content: 'Copié !';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--app-gray-800);
    color: var(--app-white);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    animation: app-fade-in-up 0.2s ease;
    pointer-events: none;
}

@keyframes app-fade-in-up {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* -- Password strength indicator -- */
.app-password-strength {
    margin-top: var(--app-spacer-xs);
}

.app-password-strength__track {
    height: 4px;
    background: var(--app-gray-100);
    border-radius: 2px;
    overflow: hidden;
}

.app-password-strength__bar {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
}

.app-password-strength__label {
    font-size: var(--app-font-size-xs);
    color: var(--app-gray-500);
    margin-top: var(--app-spacer-xs);
}

/* -- Badges -- */
.app-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    font-size: var(--app-font-size-xs);
    font-weight: 500;
    border-radius: 50px;
    line-height: 1.5;
    white-space: nowrap;
}

.app-badge--primary { background: var(--app-primary-light); color: var(--app-primary); }
.app-badge--secondary { background: var(--app-secondary-light); color: var(--app-secondary); }
.app-badge--success { background: var(--app-success-light); color: var(--app-success); }
.app-badge--danger { background: var(--app-danger-light); color: var(--app-danger); }
.app-badge--warning { background: var(--app-warning-light); color: var(--app-warning); }
.app-badge--info { background: var(--app-info-light); color: var(--app-info); }
.app-badge--neutral { background: var(--app-gray-100); color: var(--app-gray-600); }
.app-badge--light { background: var(--app-success-light); color: var(--app-success); }

/* Soft variants — fond blanc, couleur texte conservée (utile dans les inner-cards sur fond gris) */
.app-badge--soft-primary { background: var(--app-white); color: var(--app-primary); }
.app-badge--soft-secondary { background: var(--app-white); color: var(--app-secondary); }
.app-badge--soft-success { background: var(--app-white); color: var(--app-success); }
.app-badge--soft-danger { background: var(--app-white); color: var(--app-danger); }
.app-badge--soft-warning { background: var(--app-white); color: var(--app-warning); }
.app-badge--soft-info { background: var(--app-white); color: var(--app-info); }
.app-badge--soft-neutral { background: var(--app-white); color: var(--app-gray-600); }

/* Size variants */
.app-badge--xs {
    padding: 0.1rem 0.35rem;
    font-size: 0.625rem;
    line-height: 1.3;
}

a.app-badge:hover { opacity: 0.8; }

/* -- Cartes -- */
.app-card {
    background: var(--app-white);
    border: 1px solid var(--app-gray-200);
    border-radius: var(--app-radius-lg);
    overflow: hidden;
}

.app-card__header {
    padding: var(--app-spacer) var(--app-spacer-md);
    border-bottom: 1px solid var(--app-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-card__title {
    font-size: var(--app-font-size-md);
    font-weight: 600;
    margin: 0;
}

.app-card__body {
    padding: var(--app-spacer-md);
}

.app-card__footer {
    padding: var(--app-spacer) var(--app-spacer-md);
    border-top: 1px solid var(--app-gray-100);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--app-spacer-sm);
}

.app-card__footer--flat {
    border-top: 1px solid var(--app-gray-200);
    padding: var(--app-spacer) 0 0;
    margin-top: var(--app-spacer);
}

.app-card__subtitle {
    font-size: var(--app-font-size-base);
    font-weight: 600;
    margin: 0 0 var(--app-spacer-sm) 0;
    color: var(--app-gray-700);
}

/* -- Divider (visible globalement, contraste augmenté) -- */
.app-divider {
    border: none;
    border-top: 1px solid var(--app-gray-300);
    margin: var(--app-spacer-md) 0;
}

/* -- Selectgroup overrides (Tabler) -- */
.form-selectgroup-label {
    border-radius: var(--app-radius) !important;
}

.form-selectgroup-input:checked + .form-selectgroup-label {
    background-color: var(--app-primary-light);
    border-color: var(--app-primary);
    color: var(--app-primary);
    z-index: 1;
}

.form-selectgroup-input:disabled + .form-selectgroup-label {
    opacity: 0.45;
    cursor: not-allowed;
    background-color: var(--app-gray-100);
}

.form-selectgroup-input:disabled:checked + .form-selectgroup-label {
    opacity: 1;
    background-color: var(--app-primary-light);
    border-color: var(--app-primary);
    color: var(--app-primary);
    cursor: default;
}

/* ==========================================================
   Pagination (shared admin + client)
   ========================================================== */

.app-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-spacer-sm);
    margin-top: var(--app-spacer-md);
    font-size: var(--app-font-size-sm);
}

.app-pagination__pages {
    display: flex;
    align-items: center;
    gap: var(--app-spacer-xs);
}

.app-pagination__link,
.app-pagination__page {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--app-radius);
    color: var(--app-gray-600);
    text-decoration: none;
    transition: all var(--app-transition);
}

.app-pagination__link:hover,
.app-pagination__page:hover {
    background: var(--app-gray-100);
    color: var(--app-primary);
}

.app-pagination__page--active {
    background: var(--app-primary);
    color: var(--app-white);
}

.app-pagination__page--active:hover {
    background: var(--app-primary-hover);
    color: var(--app-white);
}

.app-pagination__link--disabled {
    opacity: 0.4;
    pointer-events: none;
}

.app-pagination__ellipsis {
    padding: 0.375rem;
    color: var(--app-gray-400);
}

.app-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: var(--app-spacer-md);
    min-height: 36px;
}

.app-pagination-wrapper .app-pagination {
    margin-top: 0;
}

.app-pagination-per-page {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--app-font-size-sm);
    color: var(--app-gray-500);
}

.app-pagination-per-page__select {
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    border: 1px solid var(--app-gray-300);
    border-radius: var(--app-radius);
    font-size: var(--app-font-size-sm);
    color: var(--app-gray-600);
    background: var(--app-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.4rem center / 0.75rem;
    appearance: none;
    cursor: pointer;
    transition: border-color var(--app-transition);
}

.app-pagination-per-page__select:hover {
    border-color: var(--app-gray-400);
}

.app-pagination-per-page__select:focus {
    outline: none;
    border-color: var(--app-primary);
    box-shadow: 0 0 0 2px rgba(var(--app-primary-rgb), 0.15);
}

@media (max-width: 768px) {
    .app-pagination-wrapper {
        flex-direction: column;
        gap: var(--app-spacer-sm);
    }

    .app-pagination {
        flex-wrap: wrap;
        gap: var(--app-spacer-xs);
    }

    .app-pagination__pages {
        flex-wrap: wrap;
        justify-content: center;
    }

    .app-pagination__link,
    .app-pagination__page {
        padding: 0.3rem 0.5rem;
        font-size: var(--app-font-size-xs);
    }

    .app-pagination-per-page {
        position: static;
    }
}

/* -- Club sports inline display (shared admin + client) -- */
.app-club-sports {
    display: flex;
    align-items: center;
    gap: var(--app-spacer-xs);
    font-size: var(--app-font-size-xs);
    color: var(--app-gray-500);
    margin-top: 2px;
}

.app-club-sports i {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.app-club-sports--alert {
    color: var(--app-danger);
    font-weight: 500;
}

/* -- Empty state -- */
.app-empty-state {
    text-align: center;
    padding: var(--app-spacer-xl) var(--app-spacer);
    color: var(--app-gray-400);
}

.app-empty-state i {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--app-spacer-sm);
}

/* -- List empty (icon) -- */
.app-list__empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--app-spacer-xs);
}

/* -- Inline forms (delete forms in modals, etc.) -- */
.app-form-inline {
    display: inline;
}

/* -- Required asterisk -- */
.app-required {
    color: var(--app-danger);
}

/* -- Player row (inline flag + name) -- */
.app-player-row {
    display: flex;
    gap: var(--app-spacer-sm);
    align-items: center;
}

.app-player-row__flag {
    width: 70px;
    flex-shrink: 0;
    font-size: 1.25rem;
    text-align: center;
}

/* Searchable select wrapper inside player row */
.app-player-row .app-search-select {
    width: 110px;
    flex-shrink: 0;
}

.app-player-row .app-search-select__trigger {
    padding: 0.5rem 0.5rem;
    justify-content: center;
    gap: 0.25rem;
}

.app-player-row .app-search-select__trigger-text {
    flex: 1;
    min-width: 0;
    font-size: var(--app-font-size-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-player-row .app-search-select__trigger-icon {
    font-size: 0.85rem;
    margin-left: 0;
}

/* Flag icons inside searchable select options + trigger */
.app-search-select__option .fi,
.app-search-select__trigger-text .fi {
    display: inline-block;
    width: 1.3em;
    line-height: 1em;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 0.3em;
}

.app-player-row .app-search-select__dropdown {
    min-width: 260px;
}

.app-player-row .form-control,
.app-player-row .app-form-input {
    flex: 1;
    min-width: 0;
}

.app-player-row {
    margin-bottom: var(--app-spacer-xs);
}

/* -- Variante "stacked" : flag, name et position empilés en colonne dans une boîte
      (utilisée dans la modale d'upload public pour clarifier la saisie) -- */
.app-player-row--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: var(--app-spacer-sm);
    padding: var(--app-spacer);
    background: var(--app-gray-100);
    border: 1px solid var(--app-gray-200);
    border-radius: var(--app-radius);
}

.app-player-row--stacked .app-player-row__flag,
.app-player-row--stacked .app-search-select {
    width: 100%;
    flex: 0 0 auto;
}

.app-player-row--stacked .form-control,
.app-player-row--stacked .app-form-input {
    width: 100%;
    flex: 0 0 auto;
}


/* ==========================================================
   Responsive global — Réduction titres, boutons, cards
   ========================================================== */
@media (max-width: 768px) {
    /* -- Variables de taille réduites -- */
    :root {
        --app-font-size-xxl:  1.5rem;
        --app-font-size-xl:   1.25rem;
        --app-font-size-lg:   1.1rem;
        --app-font-size-md:   0.9375rem;
        --app-font-size-base: 0.875rem;
        --app-font-size-sm:   0.8125rem;
        --app-font-size-xs:   0.6875rem;
    }

    /* -- Boutons : plus compacts -- */
    .app-btn {
        padding: 0.4rem 1rem;
        font-size: var(--app-font-size-xs);
    }

    .app-btn--lg {
        padding: 0.5rem 1.25rem;
        font-size: var(--app-font-size-sm);
    }

    .app-btn--sm {
        padding: 0.2rem 0.6rem;
    }

    /* -- Badges : plus compacts -- */
    .app-badge {
        padding: 0.1rem 0.4rem;
        font-size: 0.625rem;
    }

    /* -- Cards : padding réduit -- */
    .app-card__header {
        padding: var(--app-spacer-sm) var(--app-spacer);
    }

    .app-card__body {
        padding: var(--app-spacer);
    }

    .app-card__footer {
        padding: var(--app-spacer-sm) var(--app-spacer);
    }

    .app-card__footer--flat {
        padding: var(--app-spacer-sm) 0 0;
    }

    .app-card__footer .app-btn {
        flex: 1;
        justify-content: center;
    }

    /* -- Formulaires : inputs plus petits en mobile -- */
    .form-control,
    .form-select,
    .app-form-input,
    .app-form-select,
    .app-form-textarea {
        font-size: var(--app-font-size-sm);
        padding: 0.375rem 0.625rem;
    }

    /* -- Labels formulaire -- */
    .col-form-label {
        font-size: var(--app-font-size-xs);
        padding-bottom: 0;
    }

    /* -- Selectgroup : plus compact -- */
    .form-selectgroup-label {
        font-size: var(--app-font-size-xs);
        padding: 0.25rem 0.5rem;
    }

    /* -- Avatars grand format : réduire -- */
    .avatar-xl {
        width: 3rem !important;
        height: 3rem !important;
        font-size: 0.875rem !important;
    }

    .avatar-lg {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 0.75rem !important;
    }

    /* -- Rows Bootstrap : empiler label + input -- */
    .app-card__body .row.mb-3 {
        margin-bottom: var(--app-spacer-sm) !important;
    }

    .app-card__body .row .col-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.125rem;
    }

    .app-card__body .row .col {
        min-width: 0;
        overflow: hidden;
    }

    /* -- Inline form : wrap en mobile -- */
    .app-inline-form {
        flex-wrap: wrap;
    }

    /* -- Color pickers : empiler verticalement -- */
    .row.g-3:has(.app-color-field) {
        flex-wrap: wrap;
    }

    .row.g-3:has(.app-color-field) > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row.g-3:has(.app-color-field) .form-label {
        font-size: var(--app-font-size-xs);
        margin-bottom: 0.125rem;
    }

    .app-color-field__preview {
        width: 32px;
        height: 32px;
    }

    /* -- Boutons télécharger/supprimer : empiler -- */
    .app-card__body div[style*="display: flex; gap: 0.5rem; margin-top"] {
        flex-wrap: wrap !important;
    }

    .app-card__body div[style*="display: flex; gap: 0.5rem; margin-top"] .app-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================
   Shared list component (admin + client)
   ========================================================== */

.app-list {
    background: var(--app-white);
    border: 1px solid var(--app-gray-200);
    border-radius: var(--app-radius-lg);
    overflow: hidden;
}

.app-list__header {
    display: grid;
    gap: var(--app-spacer-sm);
    padding: var(--app-spacer-sm) var(--app-spacer);
    background: var(--app-gray-100);
    border-bottom: 1px solid var(--app-gray-200);
    font-size: var(--app-font-size-xs);
    font-weight: 600;
    color: var(--app-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.app-list__row {
    display: grid;
    gap: var(--app-spacer-sm);
    padding: var(--app-spacer-sm) var(--app-spacer);
    border-bottom: 1px solid var(--app-gray-200);
    align-items: center;
    font-size: var(--app-font-size-sm);
    transition: background var(--app-transition);
}

.app-list__row:last-child {
    border-bottom: none;
}

.app-list__row:hover {
    background: var(--app-gray-100);
}

.app-list__col--actions {
    display: flex;
    gap: var(--app-spacer-xs);
    justify-content: flex-end;
}

.app-list__empty {
    padding: var(--app-spacer-xl);
    text-align: center;
    color: var(--app-gray-400);
}

/* -- Responsive: chaque ligne = carte indépendante -- */
@media (max-width: 768px) {
    .app-list {
        background: none;
        border: none;
        border-radius: 0;
    }

    .app-list .app-list__header {
        display: none;
    }

    .app-list .app-list__row {
        background: var(--app-white);
        border: 1px solid var(--app-gray-200);
        border-radius: var(--app-radius-lg);
        margin-bottom: var(--app-spacer-sm);
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        position: relative;
    }

    .app-list .app-list__row:last-child {
        margin-bottom: 0;
    }

    .app-list .app-list__row:hover {
        background: var(--app-white);
    }

    .app-list .app-list__col {
        grid-column: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: var(--app-spacer-sm);
        padding: var(--app-spacer-sm) var(--app-spacer);
        border-bottom: 1px solid var(--app-gray-100);
    }

    .app-list .app-list__col:last-child {
        border-bottom: none;
    }

    .app-list .app-list__col::before {
        content: attr(data-label);
        flex-shrink: 0;
        width: 50px;
        font-size: 0.625rem;
        font-weight: 600;
        color: var(--app-gray-400);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-list .app-list__col--actions {
        position: absolute;
        top: var(--app-spacer-sm);
        right: var(--app-spacer-sm);
        flex-direction: column;
        align-items: center;
        gap: var(--app-spacer-xs);
        padding: 0;
        border-bottom: none;
    }

    .app-list .app-list__col--actions::before {
        display: none;
    }
}

/* ==========================================================
   Shared item patterns (balls/cards — admin + client)
   ========================================================== */

/* -- Photo thumbnail (table view, listes inline) -- */
.app-card-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--app-radius-sm);
    object-fit: cover;
    border: 1px solid var(--app-gray-200);
}

.app-card-thumb--empty {
    width: 40px;
    height: 40px;
    border-radius: var(--app-radius-sm);
    border: 1px dashed var(--app-gray-200);
    background: var(--app-gray-50, var(--app-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-gray-300);
    font-size: 1rem;
}

/* -- Hash monospace : pastilles distinctes carte / récompense / NFC -- */
.app-hash,
.app-ball-hash {
    font-family: var(--app-font-mono);
    font-size: var(--app-font-size-sm);
    padding: 0.1rem 0.4rem;
    border-radius: var(--app-radius-sm);
    letter-spacing: 0.03em;
    user-select: all;
    display: inline-block;
}

/* Hash carte (par défaut) — gris */
.app-hash,
.app-hash--card,
.app-ball-hash {
    background: var(--app-gray-100);
    color: var(--app-gray-700);
}

/* Hash récompense — primaire clair */
.app-hash--reward {
    background: var(--app-primary-light);
    color: var(--app-primary);
}

/* UID NFC — sombre */
.app-hash--nfc {
    background: var(--app-gray-700);
    color: var(--app-white);
}

.app-ball-hash-display {
    display: flex;
    align-items: center;
    gap: var(--app-spacer-sm);
}

.app-ball-hash-row {
    display: flex;
    align-items: center;
    gap: var(--app-spacer-sm);
}

/* -- NFC indicators -- */
.app-ball-nfc {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    padding-left: 1.35rem;
}

.app-ball-nfc__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.app-ball-nfc__dot--ok {
    background-color: var(--app-success);
    box-shadow: 0 0 0 2px rgba(0, 190, 61, 0.15);
}

.app-ball-nfc__dot--pending {
    background-color: var(--app-danger);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

.app-ball-nfc__uid {
    font-family: var(--app-font-mono);
    font-size: var(--app-font-size-sm);
    color: var(--app-white);
    background: var(--app-gray-700);
    padding: 0.1rem 0.4rem;
    border-radius: var(--app-radius-sm);
    letter-spacing: 0.03em;
    user-select: all;
    display: inline-block;
}

.app-ball-nfc__label {
    font-size: 0.68rem;
    color: var(--app-gray-400);
    font-style: italic;
}

.app-ball-nfc__encode {
    font-size: 0.68rem;
    color: var(--app-gray-400);
    text-decoration: none;
    font-style: italic;
    transition: color var(--app-transition);
}

.app-ball-nfc__encode:hover {
    color: var(--app-gray-600);
}

/* -- NFC detail (edit page) -- */
.app-ball-nfc-detail {
    display: flex;
    align-items: center;
    gap: var(--app-spacer-sm);
    min-height: 38px;
}

.app-ball-nfc-detail--box {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--app-spacer-sm);
}

.app-ball-nfc-detail--box .app-ball-nfc-detail__row {
    display: flex;
    align-items: center;
    gap: var(--app-spacer-sm);
    width: 100%;
}

.app-ball-nfc-detail--box .app-ball-nfc-detail__actions {
    display: flex;
    align-items: center;
    gap: var(--app-spacer-sm);
    width: 100%;
    padding-top: var(--app-spacer-xs);
    border-top: 1px solid var(--app-gray-200);
}

.app-ball-nfc-detail__date {
    font-size: var(--app-font-size-xs);
    color: var(--app-gray-400);
}

.app-ball-nfc-detail__pending {
    font-size: var(--app-font-size-sm);
    color: var(--app-gray-400);
    font-style: italic;
}

/* -- Lock indicators -- */
.app-ball-lock { color: var(--app-danger); font-size: 0.9rem; }
.app-ball-unlock { color: var(--app-success); font-size: 0.9rem; }

/* -- Locked form: fields disabled overlay -- */
.app-locked-section {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

/* -- Photo -- */
.app-ball-photo-thumb {
    width: 120px;
    height: 120px;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-gray-200);
    object-fit: cover;
    background: var(--app-gray-100);
    flex-shrink: 0;
}

.app-ball-current-photo {
    display: flex;
    flex-direction: column;
    gap: var(--app-spacer-xs);
}

@media (max-width: 768px) {
    .app-ball-photo-thumb {
        width: 90px;
        height: 90px;
    }

    /* -- Ball / Card detail : wrap en mobile -- */
    .app-ball-nfc-detail,
    .app-ball-hash-display {
        flex-wrap: wrap;
    }

    .app-ball-nfc-detail .app-ball-hash,
    .app-ball-hash-display .app-ball-hash {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-ball-nfc-detail .app-text-muted {
        flex-basis: 100%;
    }

    .app-ball-nfc-detail .app-inline-form {
        flex-basis: 100%;
        margin-left: 0;
    }

    .app-ball-hash-display a {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ==========================================================
   CTA banner — bandeau d'appel à l'action en pleine largeur
   Utilisé pour orienter l'utilisateur vers une action liée
   (ex. faire une demande, créer une ressource, etc.)
   ========================================================== */
.app-cta-banner {
    display: flex;
    align-items: center;
    gap: var(--app-spacer);
    margin: var(--app-spacer) 0;
    padding: var(--app-spacer);
    border-radius: var(--app-radius);
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.app-cta-banner:hover {
    opacity: 0.88;
    transform: translateX(2px);
    text-decoration: none;
}

.app-cta-banner > i:first-child {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.app-cta-banner__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-cta-banner__body strong {
    font-size: var(--app-font-size-base);
    font-weight: 600;
}

.app-cta-banner__body span {
    font-size: var(--app-font-size-sm);
    opacity: 0.85;
}

.app-cta-banner--warning {
    background: var(--app-warning-light);
    color: var(--app-warning);
}
.app-cta-banner--warning:hover { color: var(--app-warning); }

.app-cta-banner--primary {
    background: var(--app-primary-light);
    color: var(--app-primary);
}
.app-cta-banner--primary:hover { color: var(--app-primary); }

.app-cta-banner--info {
    background: var(--app-info-light);
    color: var(--app-info);
}
.app-cta-banner--info:hover { color: var(--app-info); }

.app-cta-banner--neutral {
    background: var(--app-gray-100);
    color: var(--app-gray-700);
}
.app-cta-banner--neutral:hover { color: var(--app-gray-700); }

/* -- Club link in lists -- */
.app-list__club-link {
    color: var(--app-dark);
    text-decoration: none;
}

.app-list__club-link:hover {
    color: var(--app-primary);
}

/* -- Tabs -- */
.app-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--app-gray-200);
}

.app-tabs__btn {
    flex: 1;
    padding: 0.625rem 1.25rem;
    font-size: var(--app-font-size-sm);
    font-weight: 500;
    color: var(--app-gray-500);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all var(--app-transition);
    text-align: center;
}

.app-tabs__btn:hover {
    color: var(--app-primary);
}

.app-tabs__btn.is-active {
    color: var(--app-primary);
    border-bottom-color: var(--app-primary);
}

.app-tab-panel {
    display: none;
}

.app-tab-panel.is-active {
    display: block;
}

/* -- Switch row (toggle + label + hint) -- */
.app-switch-row .form-check.form-switch {
    display: flex;
    align-items: center;
    gap: var(--app-spacer-sm);
}

.app-switch-row .form-check-label {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* -- Bootstrap switch color overrides -- */
.form-check-input:checked {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

.form-check-input:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 190, 61, 0.25);
}

.app-switch-row__hint {
    display: block;
    font-weight: 400;
}

/* -- Scan empty & load more -- */
.app-scan-empty {
    text-align: center;
    padding: var(--app-spacer-xl) var(--app-spacer);
    color: var(--app-gray-400);
}

.app-scan-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: var(--app-spacer-sm);
}

.app-scan-empty p {
    font-size: var(--app-font-size-sm);
    margin: 0;
}

.app-scan-load-more {
    text-align: center;
    padding: var(--app-spacer-sm) 0;
}

.app-scan-more {
    text-align: center;
    font-size: var(--app-font-size-xs);
    color: var(--app-gray-400);
    padding: var(--app-spacer-sm);
    border-top: 1px solid var(--app-gray-100);
}

/* ==========================================================
   Shared club patterns (admin + client)
   ========================================================== */

/* -- Color dots -- */
.app-club-colors {
    display: inline-flex;
    align-items: center;
    gap: var(--app-spacer-xs);
}

.app-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    /* Permet de passer la couleur via la CSS variable --event-color
       (l'attribut style="background: ..." inline reste prioritaire) */
    background: var(--event-color, transparent);
}

/* -- Logo thumbnail -- */
.app-club-logo-thumb {
    width: 120px;
    height: 120px;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-gray-200);
    object-fit: cover;
    background: var(--app-gray-100);
    flex-shrink: 0;
}

.app-club-current-logo {
    display: flex;
    flex-direction: column;
    gap: var(--app-spacer-xs);
}

@media (max-width: 768px) {
    .app-club-logo-thumb {
        width: 90px;
        height: 90px;
    }
}

/* -- Debug (decommenter en developpement) --
* { outline: 1px solid rgba(255, 0, 0, 0.15); }
*:hover { outline: 1px solid rgba(255, 0, 0, 0.4); }
*/