/* ============================================
   PingPerf - Jetons de design « La table et la balle »
   Référence : docs/SPEC_Refonte_Graphique_Mobile.md
   Chargé APRÈS bootstrap.min.css pour surcharger ses variables.
   ============================================ */

/* ============================================
   Jetons PingPerf - Thème clair (par défaut)
   ============================================ */
:root,
[data-bs-theme="light"] {
    /* Table : navigation, actions principales */
    --ttpc-table: #1E4FC2;
    --ttpc-table-rgb: 30, 79, 194;
    --ttpc-table-deep: #173E9C;
    --ttpc-table-soft: #E2EAFB;
    --ttpc-btn-primary: #1E4FC2;
    --ttpc-btn-primary-hover: #1A45AA;
    --ttpc-btn-primary-active: #173E9C;

    /* Balle : actions attendues, compteurs, création */
    --ttpc-ball: #FF6B35;
    --ttpc-ball-rgb: 255, 107, 53;
    --ttpc-ball-soft: #FFE7DC;
    --ttpc-ball-ink: #B4401A; /* Texte orange lisible sur fond clair */
    --ttpc-on-ball: #2A1206;

    /* Sémantique */
    --ttpc-win: #157F3B;
    --ttpc-win-soft: #DBF3E3;
    --ttpc-loss: #B42318;
    --ttpc-loss-soft: #FCE3E0;
    --ttpc-warn: #9A5B05;
    --ttpc-warn-soft: #FDF0D5;
    --ttpc-info: #0E7490;

    /* Neutres (gris froids teintés de bleu) */
    --ttpc-ink: #0F1B2D;
    --ttpc-ink-rgb: 15, 27, 45;
    --ttpc-ink-2: #4A5872;
    --ttpc-ink-2-rgb: 74, 88, 114;
    --ttpc-ink-3: #7A869B;
    --ttpc-bg: #F3F5F9;
    --ttpc-surface: #FFFFFF;
    --ttpc-surface-rgb: 255, 255, 255;
    --ttpc-surface-2: #EAEEF5;
    --ttpc-line: #DCE2EC;
    --ttpc-night: #0F1B2D;

    /* Catégories d'exercices (palette catégorielle, hors couleurs sémantiques) */
    --ttpc-cat-technique: #1E4FC2;
    --ttpc-cat-tactical: #6D45B8;
    --ttpc-cat-physical: #A8336F;
    --ttpc-cat-mental: #0E7490;
    --ttpc-cat-warm_up: #96560A;
    --ttpc-cat-cool_down: #3B6585;

    --ttpc-focus-ring: rgba(30, 79, 194, 0.22);
    --ttpc-shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
    --ttpc-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 8px 24px rgba(15, 27, 45, 0.08);

    /* Typographie */
    --ttpc-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --ttpc-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Rayons */
    --ttpc-r-sm: 8px;
    --ttpc-r-md: 14px;
    --ttpc-r-lg: 22px;

    /* Compatibilité avec les anciennes variables */
    --ttpc-primary: var(--ttpc-table);
    --ttpc-table-tennis: var(--ttpc-ball);
    --ttpc-dark: var(--ttpc-night);

    /* ---------- Surcharge des variables Bootstrap ---------- */
    --bs-primary: #1E4FC2;
    --bs-primary-rgb: 30, 79, 194;
    --bs-secondary: #5B6780;
    --bs-secondary-rgb: 91, 103, 128;
    --bs-success: #157F3B;
    --bs-success-rgb: 21, 127, 59;
    --bs-danger: #B42318;
    --bs-danger-rgb: 180, 35, 24;
    --bs-warning: #F5B82E;
    --bs-warning-rgb: 245, 184, 46;
    --bs-info: #0E7490;
    --bs-info-rgb: 14, 116, 144;

    --bs-primary-text-emphasis: #173E9C;
    --bs-primary-bg-subtle: #E2EAFB;
    --bs-primary-border-subtle: #B9CBF3;

    --bs-body-font-family: var(--ttpc-font-body);
    --bs-body-color: #0F1B2D;
    --bs-body-color-rgb: 15, 27, 45;
    /* Les composants Bootstrap (cartes, champs, menus) prennent --bs-body-bg : on y met la surface,
       le fond de page est porté par body (voir app.css) */
    --bs-body-bg: #FFFFFF;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #0F1B2D;
    --bs-emphasis-color-rgb: 15, 27, 45;
    --bs-secondary-color: rgba(74, 88, 114, 0.95);
    --bs-secondary-color-rgb: 74, 88, 114;
    --bs-secondary-bg: #EAEEF5;
    --bs-tertiary-bg: #F3F5F9;
    --bs-border-color: #DCE2EC;
    --bs-border-color-translucent: rgba(15, 27, 45, 0.1);
    --bs-heading-color: inherit;

    --bs-link-color: #1E4FC2;
    --bs-link-color-rgb: 30, 79, 194;
    --bs-link-hover-color: #173E9C;
    --bs-link-hover-color-rgb: 23, 62, 156;

    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.875rem;
    --bs-border-radius-xl: 1.375rem;
    --bs-focus-ring-color: var(--ttpc-focus-ring);
}

/* ============================================
   Jetons PingPerf - Thème sombre
   ============================================ */
[data-bs-theme="dark"] {
    --ttpc-table: #4C7BF2;
    --ttpc-table-rgb: 76, 123, 242;
    --ttpc-table-deep: #1C3F97;
    --ttpc-table-soft: #182850;
    --ttpc-btn-primary: #3563DA;
    --ttpc-btn-primary-hover: #4170EA;
    --ttpc-btn-primary-active: #2B55C2;

    --ttpc-ball: #FF7C4A;
    --ttpc-ball-rgb: 255, 124, 74;
    --ttpc-ball-soft: #3A2116;
    --ttpc-ball-ink: #FF7C4A;

    --ttpc-win: #4ADE80;
    --ttpc-win-soft: #12301F;
    --ttpc-loss: #F87171;
    --ttpc-loss-soft: #3A1618;
    --ttpc-warn: #FBBF24;
    --ttpc-warn-soft: #3A2B0C;
    --ttpc-info: #67C6DC;

    --ttpc-ink: #E7ECF5;
    --ttpc-ink-rgb: 231, 236, 245;
    --ttpc-ink-2: #A6B1C5;
    --ttpc-ink-2-rgb: 166, 177, 197;
    --ttpc-ink-3: #75819A;
    --ttpc-bg: #0A101C;
    --ttpc-surface: #131C2C;
    --ttpc-surface-rgb: 19, 28, 44;
    --ttpc-surface-2: #1A2539;
    --ttpc-line: #25314A;
    --ttpc-night: #060A12;

    --ttpc-cat-technique: #7FA0F6;
    --ttpc-cat-tactical: #B39AF0;
    --ttpc-cat-physical: #F08DC0;
    --ttpc-cat-mental: #67C6DC;
    --ttpc-cat-warm_up: #F5B95E;
    --ttpc-cat-cool_down: #93B8D4;

    --ttpc-focus-ring: rgba(76, 123, 242, 0.35);
    --ttpc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ttpc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);

    --bs-primary: #4170EA;
    --bs-primary-rgb: 65, 112, 234;
    --bs-secondary: #6B7891;
    --bs-secondary-rgb: 107, 120, 145;
    --bs-primary-text-emphasis: #9DB6F7;
    --bs-primary-bg-subtle: #182850;
    --bs-primary-border-subtle: #2A3F78;

    --bs-body-color: #E7ECF5;
    --bs-body-color-rgb: 231, 236, 245;
    --bs-body-bg: #131C2C;
    --bs-body-bg-rgb: 19, 28, 44;
    --bs-emphasis-color: #FFFFFF;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(166, 177, 197, 0.95);
    --bs-secondary-color-rgb: 166, 177, 197;
    --bs-secondary-bg: #1A2539;
    --bs-tertiary-bg: #172133;
    --bs-border-color: #25314A;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);

    --bs-link-color: #4C7BF2;
    --bs-link-color-rgb: 76, 123, 242;
    --bs-link-hover-color: #7FA0F6;
    --bs-link-hover-color-rgb: 127, 160, 246;
}

/* ============================================
   Composants Bootstrap aux couleurs compilées en dur
   ============================================ */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ttpc-btn-primary);
    --bs-btn-border-color: var(--ttpc-btn-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ttpc-btn-primary-hover);
    --bs-btn-hover-border-color: var(--ttpc-btn-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--ttpc-table-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ttpc-btn-primary-active);
    --bs-btn-active-border-color: var(--ttpc-btn-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ttpc-btn-primary);
    --bs-btn-disabled-border-color: var(--ttpc-btn-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--ttpc-table);
    --bs-btn-border-color: var(--ttpc-table);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ttpc-btn-primary);
    --bs-btn-hover-border-color: var(--ttpc-btn-primary);
    --bs-btn-focus-shadow-rgb: var(--ttpc-table-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ttpc-btn-primary-active);
    --bs-btn-active-border-color: var(--ttpc-btn-primary-active);
    --bs-btn-disabled-color: var(--ttpc-table);
    --bs-btn-disabled-border-color: var(--ttpc-table);
}

.btn-success {
    --bs-btn-bg: #157F3B;
    --bs-btn-border-color: #157F3B;
    --bs-btn-hover-bg: #126D33;
    --bs-btn-hover-border-color: #126D33;
    --bs-btn-active-bg: #0F5C2B;
    --bs-btn-active-border-color: #0F5C2B;
    --bs-btn-disabled-bg: #157F3B;
    --bs-btn-disabled-border-color: #157F3B;
}

.btn-outline-success {
    --bs-btn-color: var(--ttpc-win);
    --bs-btn-border-color: var(--ttpc-win);
    --bs-btn-hover-bg: #157F3B;
    --bs-btn-hover-border-color: #157F3B;
    --bs-btn-active-bg: #126D33;
    --bs-btn-active-border-color: #126D33;
}

.btn-danger {
    --bs-btn-bg: #B42318;
    --bs-btn-border-color: #B42318;
    --bs-btn-hover-bg: #9B1E14;
    --bs-btn-hover-border-color: #9B1E14;
    --bs-btn-active-bg: #841A11;
    --bs-btn-active-border-color: #841A11;
    --bs-btn-disabled-bg: #B42318;
    --bs-btn-disabled-border-color: #B42318;
}

.btn-outline-danger {
    --bs-btn-color: var(--ttpc-loss);
    --bs-btn-border-color: var(--ttpc-loss);
    --bs-btn-hover-bg: #B42318;
    --bs-btn-hover-border-color: #B42318;
    --bs-btn-active-bg: #9B1E14;
    --bs-btn-active-border-color: #9B1E14;
}

.btn-warning {
    --bs-btn-color: var(--ttpc-on-ball);
    --bs-btn-bg: #F5B82E;
    --bs-btn-border-color: #F5B82E;
    --bs-btn-hover-color: var(--ttpc-on-ball);
    --bs-btn-hover-bg: #E9A915;
    --bs-btn-hover-border-color: #E9A915;
    --bs-btn-active-color: var(--ttpc-on-ball);
    --bs-btn-active-bg: #D99A0B;
    --bs-btn-active-border-color: #D99A0B;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0E7490;
    --bs-btn-border-color: #0E7490;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0C637B;
    --bs-btn-hover-border-color: #0C637B;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0A5367;
    --bs-btn-active-border-color: #0A5367;
}

.btn-outline-info {
    --bs-btn-color: var(--ttpc-info);
    --bs-btn-border-color: var(--ttpc-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0E7490;
    --bs-btn-hover-border-color: #0E7490;
}

.btn-secondary {
    --bs-btn-bg: #5B6780;
    --bs-btn-border-color: #5B6780;
    --bs-btn-hover-bg: #4D586E;
    --bs-btn-hover-border-color: #4D586E;
    --bs-btn-active-bg: #414A5D;
    --bs-btn-active-border-color: #414A5D;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ttpc-ink-2);
    --bs-btn-border-color: var(--ttpc-line);
    --bs-btn-hover-color: var(--ttpc-ink);
    --bs-btn-hover-bg: var(--ttpc-surface-2);
    --bs-btn-hover-border-color: var(--ttpc-line);
    --bs-btn-active-color: var(--ttpc-ink);
    --bs-btn-active-bg: var(--ttpc-surface-2);
    --bs-btn-active-border-color: var(--ttpc-ink-3);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ttpc-btn-primary);
}

.nav {
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
}

.list-group {
    --bs-list-group-active-bg: var(--ttpc-btn-primary);
    --bs-list-group-active-border-color: var(--ttpc-btn-primary);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ttpc-btn-primary);
}

.pagination {
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-active-bg: var(--ttpc-btn-primary);
    --bs-pagination-active-border-color: var(--ttpc-btn-primary);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--ttpc-btn-primary);
}

.form-check-input:checked {
    background-color: var(--ttpc-btn-primary);
    border-color: var(--ttpc-btn-primary);
}

.form-check-input:focus,
.form-range:focus::-webkit-slider-thumb {
    border-color: var(--ttpc-table);
    box-shadow: 0 0 0 0.25rem var(--ttpc-focus-ring);
}

.form-range::-webkit-slider-thumb { background-color: var(--ttpc-btn-primary); }
.form-range::-moz-range-thumb { background-color: var(--ttpc-btn-primary); }

/* Avertissement : texte ambré lisible sur fond clair */
.text-warning {
    color: var(--ttpc-warn) !important;
}

/* ============================================
   Compatibilité thème sombre
   Les templates contiennent encore des classes de surface claires (phase 4 de la refonte)
   ============================================ */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .card-footer.bg-light,
[data-bs-theme="dark"] .card-header.bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--ttpc-surface) !important;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-secondary-bg);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .text-primary { color: var(--ttpc-table) !important; }
[data-bs-theme="dark"] .text-success { color: var(--ttpc-win) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--ttpc-loss) !important; }
[data-bs-theme="dark"] .text-info { color: var(--ttpc-info) !important; }

/* Texte foncé conservé sur les fonds clairs (badges jaunes, etc.) */
[data-bs-theme="dark"] .bg-light .text-dark,
[data-bs-theme="dark"] .bg-white .text-dark {
    color: var(--bs-body-color) !important;
}