/* ==========================================
   THEME VARIABLES
   ========================================== */
:root {
    /* Light theme (default) - Modern warm palette */
    --bg-body: #f5f7fa;
    --bg-secondary: #eef1f5;
    --bg-card: rgba(255, 255, 255, 0.8);
    --bg-card-solid: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: rgba(99, 102, 241, 0.08);

    --text-primary: #1e293b;
    /* Assombri depuis #64748b, qui ne tenait AA sur aucun fond un peu soutenu : 4,43:1 sur
       --bg-body (.dl devenue transparente sous 768px, .dr ne reposant sur rien d'autre —
       côté /games, .gl fait de même mais .gr se redonne un fond glass), 4,20:1 sur --bg-secondary
       (.oa__head, .suggestions-header) et 4,22:1 sur --bg-hover composé. Le pire fond réel
       est --bg-secondary, pas --bg-body. Ici, 4,72:1 au pire et 4,98:1 sur --bg-body.
       Mesurer en composant l'alpha des fonds superposés : traiter un rgba() comme un opaque
       surévalue le rapport. Ne pas éclaircir sans revérifier ces trois fonds. */
    --text-secondary: #5d6c81;
    /* #6b7280 passait au repos (4,73:1) mais échouait sur une ligne survolée (4,40:1), le
       même pire cas réel qu'en thème sombre. Ici 4,57:1 là, et 4,91:1 sur une carte au repos.
       Fenêtre étroite et voulue : au-dessus de 4,5, et en dessous de --text-secondary
       (#5d6c81, 4,87:1 sur le même fond). Les deux tokens sont donc couplés — #626c7a (4,84 ;
       clarté L* 45,3 contre 45,1) était exclu pour cette raison, indiscernable du secondaire.
       La hiérarchie que les noms annoncent était inversée dans la version livrée (--text-muted
       4,40 contre --text-secondary 4,33, et L* 47,9 contre 48,3) ; les deux correctifs réunis
       la remettent à l'endroit, avec 0,30 de séparation. Ne pas livrer l'un sans l'autre. */
    --text-muted: #66707e;

    --border-color: rgba(148, 163, 184, 0.3);
    --border-color-light: rgba(148, 163, 184, 0.15);
    /* Bordure des champs de saisie UNIQUEMENT — input, select, textarea. Opaque et bien plus
       soutenue que --border-color, qui composé sur un fond blanc ne donne que 1,28:1.
       WCAG SC 1.4.11 exige 3:1 pour ce qui identifie un composant d'interface, et le fond
       d'un champ étant ici identique à celui de sa carte, la bordure est le seul indice de
       l'étendue du champ. 3,46:1 sur --bg-input. Ne pas l'employer pour les cartes, les
       séparateurs ni les pastilles : ceux-là sont décoratifs et gardent --border-color. */
    --border-input: #7f8b9c;

    --top-row-bg: rgba(255, 255, 255, 0.85);
    --top-row-border: rgba(148, 163, 184, 0.2);

    --link-color: #6366f1;
    --link-hover-color: #4f46e5;

    --table-striped-bg: rgba(99, 102, 241, 0.03);
    --table-hover-bg: rgba(99, 102, 241, 0.06);

    --shadow-color: rgba(99, 102, 241, 0.08);
    --shadow-heavy: rgba(99, 102, 241, 0.15);

    --scrollbar-track: #eef1f5;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;

    /* Modern accent colors */
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    /* Un cran plus sombre que --accent-primary, pour les aplats portant du texte blanc :
       blanc sur --accent-primary ne donne que 4,47:1, sous le seuil AA de 4,5. Ici, 6,29:1. */
    --accent-strong: #4f46e5;
    /* Accent pour du TEXTE posé sur une carte. Distinct de --accent-strong, et l'inverse de
       lui d'un thème à l'autre : un aplat doit foncer en thème sombre pour porter du blanc,
       un texte doit s'éclaircir. Employer --accent-strong comme couleur de texte en sombre
       tomberait à 2,86:1. Ici, 6,29:1 en clair. */
    --accent-text: #4f46e5;

    /* Texte posé SUR un aplat ou un dégradé d'accent — pas sur une carte. Identique dans les
       deux thèmes, à dessein : --accent-strong et --accent-gradient restent foncés en sombre,
       donc ce qu'on pose dessus ne doit pas s'inverser. Ne pas remplacer par --bg-card-solid,
       qui vaut #1e1e32 en sombre. */
    --text-on-accent: #ffffff;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: 12px;

    /* Card styling */
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --card-radius: 16px;

    /* Fond de modale — remplace le rgba(0,0,0,0.5) posé en style inline sur chaque modale. */
    --modal-backdrop: rgba(15, 23, 42, 0.45);

    /* Semantic result colors — see docs/superpowers/specs/2026-09-01-widgets-dashboard-lisibilite-design.md
       Bootstrap's text-success/-danger keep their light values here because the app
       drives theming with [data-theme], never data-bs-theme. */
    --win: #047857;
    --draw: #b45309;
    --loss: #b91c1c;
    --win-soft: rgba(4, 120, 87, 0.1);
    --loss-soft: rgba(185, 28, 28, 0.1);
    /* Les deux moities du compteur de points. Ni --win ni --loss : ces deux aplats disent
       « a moi » et « a lui », pas « bien » et « mal ». Peindre la moitie du joueur en vert
       raconterait qu'il gagne, y compris mene 2-7. */
    --counter-mine: #4f46e5;
    --counter-theirs: #1e293b;
    /* --draw assez fonce pour du texte : --draw lui-meme ne tient que 3,78:1 sur --bar-track. 5,33:1. */
    --draw-strong: #92400e;
    --bar-track: rgba(148, 163, 184, 0.22);

    color-scheme: light;
}

[data-theme="dark"] {
    /* Dark theme - Deep purple modern palette */
    --bg-body: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-card: rgba(30, 30, 50, 0.8);
    --bg-card-solid: #1e1e32;
    --bg-input: rgba(40, 40, 65, 0.9);
    --bg-hover: rgba(139, 92, 246, 0.15);

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    /* #64748b échouait AA partout en sombre. Le pire fond RÉEL n'est ni le fond de page ni
       --bg-hover pur : c'est une ligne survolée dans une carte de verre — rgb(36,31,61) —
       où il ne donnait que 3,30:1. Ici 4,62:1 là, et 5,15:1 sur une carte au repos.
       Valeur choisie au minimum qui franchit le seuil : plus clair inverserait la hiérarchie
       avec --text-secondary (#94a3b8, 6,12:1 sur le même fond), et un texte « atténué » plus
       lisible que le texte secondaire ne veut plus rien dire. */
    --text-muted: #7f8ca3;

    --border-color: rgba(139, 92, 246, 0.2);
    --border-color-light: rgba(139, 92, 246, 0.1);
    /* Même rôle qu'en thème clair. Le violet est conservé, mais opaque et éclairci : à 20 %
       d'opacité il se composait à 1,26:1 sur le fond du champ. 4,20:1 ici. */
    --border-input: #8b84b8;

    --top-row-bg: rgba(26, 26, 46, 0.9);
    --top-row-border: rgba(139, 92, 246, 0.15);

    --link-color: #a78bfa;
    --link-hover-color: #c4b5fd;

    --table-striped-bg: rgba(139, 92, 246, 0.05);
    --table-hover-bg: rgba(139, 92, 246, 0.1);

    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.6);

    --scrollbar-track: #1a1a2e;
    --scrollbar-thumb: #3f3f5a;
    --scrollbar-thumb-hover: #5a5a7a;

    /* Modern accent colors */
    --accent-primary: #8b5cf6;
    --accent-secondary: #a78bfa;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    /* Blanc sur --accent-primary ne donne que 4,23:1 en sombre. Ici, 5,70:1. */
    --accent-strong: #7c3aed;
    /* Texte accentué sur carte sombre : il s'éclaircit là où --accent-strong fonce. 6,00:1. */
    --accent-text: #a78bfa;

    /* Identique au thème clair : voir le commentaire du bloc clair. */
    --text-on-accent: #ffffff;

    /* Glassmorphism */
    --glass-bg: rgba(30, 30, 50, 0.6);
    --glass-border: rgba(139, 92, 246, 0.2);
    --glass-blur: 16px;

    /* Card styling */
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 10px 15px -3px rgba(139, 92, 246, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --card-radius: 16px;

    --modal-backdrop: rgba(0, 0, 0, 0.65);

    /* Semantic result colors */
    --win: #34d399;
    --draw: #fbbf24;
    --loss: #f87171;
    --win-soft: rgba(52, 211, 153, 0.12);
    --loss-soft: rgba(248, 113, 113, 0.12);
    --counter-mine: #7c3aed;
    --counter-theirs: #252540;
    --draw-strong: #fbbf24;
    --bar-track: rgba(148, 163, 184, 0.1);

    color-scheme: dark;
}

/* ==========================================
   BASE STYLES
   ========================================== */
html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    transition: background 0.3s ease, color 0.3s ease;
    min-height: 100vh;
}

/* Subtle background pattern for light mode */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

[data-theme="dark"] body::before {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
}

a, .btn-link {
    color: var(--link-color);
    transition: color 0.2s ease;
}

a:hover, .btn-link:hover {
    color: var(--link-hover-color);
}

/* Modern buttons */
.btn-primary {
    color: #fff;
    background: var(--accent-gradient);
    border: none;
    border-radius: 10px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    background: var(--accent-gradient);
    filter: brightness(1.1);
}

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

.btn-secondary {
    border-radius: 10px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-outline-primary {
    border-radius: 10px;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transition: all 0.2s ease;
}

.btn-outline-primary:hover {
    background: var(--accent-gradient);
    border-color: transparent;
    transform: translateY(-1px);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* Boutons d'action posés directement sur une page — le pendant de .modal-btn, que
   ModalShell dessine par ::deep pour le balisage passé dans ses fentes. Ces boutons-ci
   ne sont dans aucune coque : les pages de l'espace Teams qui les emploient sont
   structurellement différentes et n'ont pas d'enveloppe commune, d'où une définition
   globale plutôt que des copies scopées par page.

   Ne pas confondre avec les surcharges .btn-* ci-dessus, qui habillent Bootstrap pour le
   reste de l'application. */
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid transparent;
}

.page-btn--ghost {
    color: var(--text-secondary);
    background: transparent;
    border-color: var(--border-color);
}

.page-btn--ghost:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.page-btn--primary {
    color: var(--text-on-accent);
    background: var(--accent-gradient);
}

/* Le survol du bouton principal : présent au lot 2, absent au lot 1. Réconcilié ici dans
   le sens du lot 2 — le bouton « Créer » de CreateTeam gagne donc un retour au survol
   qu'il n'avait pas. C'est le seul écart d'apparence de ce lot. */
.page-btn--primary:hover:not(:disabled) {
    color: var(--text-on-accent);
    opacity: 0.9;
}

/* :disabled sur les QUATRE variantes. La pseudo-classe ne matche rien sur un <a>, donc
   l'étendre au fantôme est sans effet là où le bouton est un lien, et corrige l'omission
   là où c'en est un — le « Refuser » d'AcceptInvitation. */
.page-btn--primary:disabled,
.page-btn--ghost:disabled,
.page-btn--danger:disabled,
.page-btn--warning:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Ton destructeur, pour une action de page qui supprime ou retire. Le fantôme reste le
   choix par défaut d'une action secondaire ; --danger est réservé à ce qu'on ne peut pas
   défaire. */
.page-btn--danger {
    color: var(--loss);
    background: transparent;
    border-color: var(--loss);
}

.page-btn--danger:hover:not(:disabled) {
    background: var(--loss-soft);
    color: var(--loss);
}

/* Ton d'avertissement, pour une action de page réversible dont les conséquences méritent
   encore du poids. Contrairement à --danger, réservé à ce qui ne peut pas être défait. */
.page-btn--warning {
    color: var(--draw);
    background: transparent;
    border-color: var(--draw);
}

.page-btn--warning:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--draw);
}

/* Taille réduite, pour une rangée d'actions d'en-tête ou un panneau latéral. */
.page-btn--sm {
    padding: 5px 12px;
    font-size: 0.8125rem;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================
   SCROLLBAR STYLING
   ========================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

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

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* ==========================================
   MODERN CARDS - Glassmorphism
   ========================================== */
.card {
    /* Bootstrap impose color: var(--bs-body-color) sur .card, soit #212529.
       On surcharge le fond ci-dessous sans toucher au texte, ce qui donne du
       quasi-noir sur quasi-noir en thème sombre : le texte de prose d'une carte
       devient illisible. On aligne donc la couleur sur celle du thème. */
    color: var(--text-primary);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: var(--card-shadow-hover);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color-light);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    font-weight: 600;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--border-color-light);
    border-radius: 0 0 var(--card-radius) var(--card-radius);
}

/* ==========================================
   MODERN FORMS
   ========================================== */
.form-control, .form-select {
    background-color: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 10px;
    padding: 0.625rem 1rem;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    background-color: var(--bg-input);
}

/* Dark mode for select dropdowns - including native option styling */
[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a78bfa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] .form-select option,
[data-theme="dark"] .form-select optgroup {
    background-color: #1e1e32;
    color: #f1f5f9;
}

[data-theme="dark"] .form-select option:checked,
[data-theme="dark"] .form-select option:hover {
    background-color: #3f3f5a;
}

[data-theme="dark"] .form-select optgroup {
    font-weight: 600;
    color: #a78bfa;
}

.form-label {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-floating > label {
    color: var(--text-muted);
}

.input-group .form-control {
    border-radius: 10px;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Masque un élément là où la barre de navigation basse prend le relais — même seuil qu'elle
   (voir Layout/MobileBottomNav.razor.css). Sert aux boutons d'en-tête que remplace un
   FloatingAction : c'est le même bouton qui change de place, jamais deux boutons à l'écran.
   Cette règle vit ici et non dans le CSS scopé d'une page parce que le seuil appartient à la
   mise en page, pas à une page : le recopier dans chaque fichier scopé le ferait diverger.
   Le !important est nécessaire, pas décoratif : les utilitaires d'affichage de Bootstrap
   (.d-flex, .d-none…) sont eux-mêmes en !important et gagneraient sinon. */
@media (max-width: 640.98px) {
    .hidden-when-bottom-nav {
        display: none !important;
    }
}

/* ==========================================
   MODERN MODALS
   ========================================== */
/* Ensure modals appear above dropdowns and mobile bottom nav */
.modal {
    z-index: 1300 !important;
}

.modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Dark mode: make modal content less transparent */
[data-theme="dark"] .modal-content {
    background: rgba(30, 30, 50, 0.95);
}

.modal-header {
    border-bottom: 1px solid var(--border-color-light);
    padding: 1.25rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--border-color-light);
    padding: 1.25rem 1.5rem;
}

.modal-backdrop {
    z-index: 1299 !important;
}

.modal-backdrop.show {
    opacity: 0.6;
}

/* ==========================================
   MODERN TABLES
   ========================================== */
.table {
    --bs-table-bg: transparent;
    border-collapse: separate;
    border-spacing: 0;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--border-color-light);
}

.table > thead {
    background: var(--bg-secondary);
}

.table > thead > tr > th {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.875rem 1rem;
    border-bottom: 2px solid var(--border-color);
}

.table > tbody > tr {
    transition: background-color 0.15s ease;
}

.table-hover > tbody > tr:hover {
    background-color: var(--table-hover-bg);
}

/* Better table striping visibility - increase contrast */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(99, 102, 241, 0.06);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(139, 92, 246, 0.15) !important;
}

/* Tables inside cards need solid background for better visibility */
.card .table {
    background-color: var(--bg-card-solid);
}

[data-theme="dark"] .card .table {
    background-color: transparent;
}

[data-theme="dark"] .card .table > tbody > tr {
    background-color: rgba(30, 30, 50, 0.4);
}

[data-theme="dark"] .card .table > tbody > tr:nth-of-type(odd) {
    background-color: rgba(139, 92, 246, 0.1);
}

/* ==========================================
   MODERN BADGES
   ========================================== */
.badge {
    border-radius: 8px;
    padding: 0.35em 0.75em;
    font-weight: 500;
}

.badge.bg-primary {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
}

/* Secondary badge - better contrast */
.badge.bg-secondary {
    background-color: #64748b !important;
    color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: rgba(100, 116, 139, 0.8) !important;
    color: #f1f5f9 !important;
}

/* ==========================================
   MODERN ALERTS
   ========================================== */
.alert {
    border-radius: 12px;
    border: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.alert-info {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ==========================================
   MODERN DROPDOWNS
   ========================================== */
.dropdown-menu {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
}

.dropdown-item {
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: all 0.15s ease;
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--bg-hover);
}

/* ==========================================
   MODERN LIST GROUPS
   ========================================== */
.list-group {
    border-radius: var(--card-radius);
    overflow: hidden;
}

.list-group-item {
    background: var(--glass-bg);
    border-color: var(--border-color-light);
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.list-group-item:first-child {
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
}

.list-group-item-action:hover {
    background-color: var(--bg-hover);
}

/* ==========================================
   DARK THEME - Additional Overrides
   ========================================== */
[data-theme="dark"] .table {
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--table-striped-bg);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--table-hover-bg);
    --bs-table-hover-color: var(--text-primary);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(139, 92, 246, 0.12);
}

/* Better table striped contrast in dark mode */
[data-theme="dark"] .table-striped {
    --bs-table-striped-bg: rgba(139, 92, 246, 0.12);
}

[data-theme="dark"] .table-secondary {
    --bs-table-bg: rgba(255, 255, 255, 0.05);
    --bs-table-color: var(--text-muted);
}

/* Fix table-light header in dark mode */
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light {
    --bs-table-bg: var(--bg-secondary);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .table-light th,
[data-theme="dark"] thead.table-light th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Explicit dark mode styling for form-control */
[data-theme="dark"] .form-control {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-input) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
    background-color: var(--bg-input) !important;
}

/* --text-secondary et non --text-muted : sur --bg-input compose en sombre (rgb 39,39,64),
   --text-muted ne donne que 4,26:1, sous le seuil AA de 4,5. --text-secondary y atteint 5,65
   sans pour autant faire passer l'invite pour une valeur deja saisie (--text-primary
   monterait a 13,2). Mesure faite au navigateur sur /register. */
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Fix form-check-label visibility in dark mode */
[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}

.form-check-label {
    color: var(--text-primary);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .btn-secondary {
    background-color: rgba(75, 85, 99, 0.8);
    border-color: rgba(75, 85, 99, 0.8);
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
}

[data-theme="dark"] .alert-info {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}

[data-theme="dark"] .alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

[data-theme="dark"] .alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

[data-theme="dark"] .alert-success {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .progress {
    background-color: rgba(30, 30, 50, 0.6);
}

[data-theme="dark"] .progress-bar {
    background: var(--accent-gradient);
}

/* ==========================================
   BOOTSTRAP UTILITIES - Dark Mode Fixes
   ========================================== */
/* Fix border color for dark mode */
.border {
    border-color: var(--border-color) !important;
}

.rounded {
    border-radius: 10px !important;
}

/* Table success/danger rows for Games page */
.table-success {
    --bs-table-bg: rgba(34, 197, 94, 0.08);
    --bs-table-color: #15803d;
    --bs-table-border-color: rgba(34, 197, 94, 0.2);
    --bs-table-hover-bg: rgba(34, 197, 94, 0.12);
}

.table-danger {
    --bs-table-bg: rgba(239, 68, 68, 0.08);
    --bs-table-color: #b91c1c;
    --bs-table-border-color: rgba(239, 68, 68, 0.2);
    --bs-table-hover-bg: rgba(239, 68, 68, 0.12);
}

.table-warning {
    --bs-table-bg: rgba(245, 158, 11, 0.08);
    --bs-table-color: #b45309;
    --bs-table-border-color: rgba(245, 158, 11, 0.2);
    --bs-table-hover-bg: rgba(245, 158, 11, 0.12);
}

/* Draw/equality rows - subtle neutral gray instead of bright blue */
.table-primary {
    --bs-table-bg: rgba(100, 116, 139, 0.08);
    --bs-table-color: #475569;
    --bs-table-border-color: rgba(100, 116, 139, 0.2);
    --bs-table-hover-bg: rgba(100, 116, 139, 0.12);
}

[data-theme="dark"] .table-success {
    --bs-table-bg: rgba(34, 197, 94, 0.15);
    --bs-table-color: #86efac;
    --bs-table-border-color: rgba(34, 197, 94, 0.3);
    --bs-table-striped-bg: rgba(34, 197, 94, 0.2);
    --bs-table-striped-color: #86efac;
    --bs-table-hover-bg: rgba(34, 197, 94, 0.25);
    --bs-table-hover-color: #86efac;
    color: #86efac;
}

[data-theme="dark"] .table-danger {
    --bs-table-bg: rgba(239, 68, 68, 0.15);
    --bs-table-color: #fca5a5;
    --bs-table-border-color: rgba(239, 68, 68, 0.3);
    --bs-table-striped-bg: rgba(239, 68, 68, 0.2);
    --bs-table-striped-color: #fca5a5;
    --bs-table-hover-bg: rgba(239, 68, 68, 0.25);
    --bs-table-hover-color: #fca5a5;
    color: #fca5a5;
}

[data-theme="dark"] .table-warning {
    --bs-table-bg: rgba(245, 158, 11, 0.15);
    --bs-table-color: #fcd34d;
    --bs-table-border-color: rgba(245, 158, 11, 0.3);
    --bs-table-striped-bg: rgba(245, 158, 11, 0.2);
    --bs-table-striped-color: #fcd34d;
    --bs-table-hover-bg: rgba(245, 158, 11, 0.25);
    --bs-table-hover-color: #fcd34d;
    color: #fcd34d;
}

/* Draw/equality rows in dark mode - subtle gray */
[data-theme="dark"] .table-primary {
    --bs-table-bg: rgba(148, 163, 184, 0.12);
    --bs-table-color: #cbd5e1;
    --bs-table-border-color: rgba(148, 163, 184, 0.25);
    --bs-table-striped-bg: rgba(148, 163, 184, 0.15);
    --bs-table-striped-color: #cbd5e1;
    --bs-table-hover-bg: rgba(148, 163, 184, 0.2);
    --bs-table-hover-color: #cbd5e1;
    color: #cbd5e1;
}

/* Modern background colors for badges and card headers */
.bg-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}

.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.bg-info {
    background: var(--accent-gradient) !important;
}

[data-theme="dark"] .bg-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.9) 100%) !important;
}

[data-theme="dark"] .bg-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 0.9) 100%) !important;
}

/* Card headers with success/danger backgrounds */
.card-header.bg-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.15) 100%) !important;
    color: #15803d !important;
    border-color: rgba(34, 197, 94, 0.3);
}

.card-header.bg-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%) !important;
    color: #b91c1c !important;
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .card-header.bg-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(22, 163, 74, 0.25) 100%) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, 0.4);
}

[data-theme="dark"] .card-header.bg-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.25) 100%) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.4);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
}

h1 {
    font-size: 1.875rem;
    letter-spacing: -0.025em;
}

h2 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

/* Mobile card layout adjustments */
@media (max-width: 640.98px) {
    /* Constrain card headers with flex content to prevent overflow */
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .card-header .form-select {
        max-width: 100%;
    }
}

/* ==========================================
   PAGE ANIMATIONS
   ========================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content > * {
    animation: fadeInUp 0.3s ease-out;
}

/* ==========================================
   NOTIFICATION BELL
   ========================================== */
.notification-bell-container {
    position: relative;
    display: inline-block;
    margin-right: 1rem;
}

.notification-bell-btn {
    background: var(--bg-hover);
    border: 1px solid var(--border-color-light);
    border-radius: 10px;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    position: relative;
    font-size: 1.1rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.notification-bell-btn:hover {
    transform: scale(1.05);
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-radius: 50%;
    font-size: 0.65rem;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 420px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 20px 40px var(--shadow-heavy);
    z-index: 1050;
    overflow: hidden;
    animation: fadeInUp 0.2s ease-out;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color-light);
    font-weight: 600;
    font-size: 0.9rem;
}

.notification-list {
    max-height: 340px;
    overflow-y: auto;
}

.notification-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.notification-empty::before {
    content: '🔔';
    display: block;
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.notification-item {
    display: flex;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color-light);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.notification-item:hover {
    background-color: var(--bg-hover);
}

.notification-item.actioned {
    opacity: 0.5;
    cursor: default;
}

.notification-item.unread {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.08) 0%, transparent 100%);
}

[data-theme="dark"] .notification-item.unread {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.12) 0%, transparent 100%);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-gradient);
    border-radius: 0 2px 2px 0;
}

.notification-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-right: 1rem;
    background: var(--bg-hover);
    border-radius: 10px;
}

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

.notification-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.notification-message {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
    line-height: 1.5;
}

.notification-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Mobile: constrain notification dropdown within viewport */
@media (max-width: 640.98px) {
    .notification-bell-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
    }

    .notification-dropdown {
        position: fixed;
        top: 3.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: calc(100vw - 1rem);
        z-index: 9999;
    }

    .notification-bell-container {
        margin-right: 0;
    }
}

/* Dark mode: make notification dropdown less transparent */
[data-theme="dark"] .notification-dropdown {
    background: rgba(30, 30, 50, 0.95);
    border-color: var(--border-color);
}

[data-theme="dark"] .notification-header {
    background: var(--bg-secondary);
}

[data-theme="dark"] .notification-item {
    border-bottom-color: var(--border-color-light);
}

[data-theme="dark"] .notification-item:hover {
    background-color: var(--bg-hover);
}

[data-theme="dark"] .notification-item:active {
    background-color: var(--bg-hover);
}

/* Mobile + dark mode: make notification dropdown fully opaque */
@media (max-width: 640.98px) {
    [data-theme="dark"] .notification-dropdown {
        background: rgb(30, 30, 50);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }

    .notification-dropdown {
        background: rgb(255, 255, 255);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }
}

/* Notification deck selection modal - must appear above all content */
.notification-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* 5rem on desktop (vs 4rem mobile) - accounts for backdrop-filter containing block on .top-row */
    padding-top: 5rem;
}

.notification-modal-backdrop .modal-dialog {
    position: relative;
    z-index: 10000;
    margin: 1.75rem;
    max-width: 500px;
    width: 100%;
}

.notification-modal-backdrop .modal-content {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .notification-modal-backdrop .modal-content {
    background: rgb(30, 30, 50);
}

/* Mobile styles for notification modal */
@media (max-width: 640.98px) {
    .notification-modal-backdrop {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 4rem;
    }

    .notification-modal-backdrop .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
    }

    .notification-modal-backdrop .modal-content {
        border-radius: 12px;
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
    }

    .notification-modal-backdrop .modal-body {
        max-height: calc(100vh - 12rem);
        overflow-y: auto;
    }

    .notification-modal-backdrop .list-group-item {
        padding: 1rem;
    }
}

/* List group action states (for selectable items like deck selection) */
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item-action.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;
}

/* ==========================================
   DASHBOARD WIDGETS
   ========================================== */
.dashboard-widget {
    margin-bottom: 1.5rem;
}

.dashboard-widget .card {
    height: 100%;
    transition: all 0.3s ease;
}

.dashboard-widget .card:hover {
    transform: translateY(-2px);
}

.dashboard-widget .card-header {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 1rem 1.25rem;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
.glass-effect {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.gradient-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}

[data-theme="dark"] .shadow-glow {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.loading-shimmer {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-hover) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ==========================================
   DARK MODE CONTRAST FIXES
   ========================================== */

/* Fix bg-light and text-dark badges in dark mode */
[data-theme="dark"] .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge.bg-light.text-dark {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

/* Improve text-muted visibility in dark mode */
[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

/* Small text elements need explicit colors */
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--text-secondary);
}

[data-theme="dark"] small.text-muted,
[data-theme="dark"] .small.text-muted {
    color: #94a3b8 !important;
}

/* Fix inline text-secondary */
[data-theme="dark"] .text-secondary {
    color: #94a3b8 !important;
}

/* Fix bg-body and bg-light utility classes */
[data-theme="dark"] .bg-body {
    background-color: var(--bg-body) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
}

/* Fix nav links and general text elements */
[data-theme="dark"] .nav-link {
    color: var(--text-primary);
}

[data-theme="dark"] .nav-link:hover {
    color: var(--accent-secondary);
}

/* Fix breadcrumb visibility */
[data-theme="dark"] .breadcrumb-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-muted);
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--link-color);
}

/* Fix pagination visibility */
[data-theme="dark"] .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .page-item.active .page-link {
    background: var(--accent-gradient);
    border-color: var(--accent-primary);
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
}

/* Fix card-title visibility */
[data-theme="dark"] .card-title {
    color: var(--text-primary) !important;
}

/* Fix card-text visibility */
[data-theme="dark"] .card-text {
    color: var(--text-secondary);
}

/* Fix lead text */
[data-theme="dark"] .lead {
    color: var(--text-secondary);
}

/* Fix figure caption */
[data-theme="dark"] .figure-caption {
    color: var(--text-muted);
}

/* Fix blockquote footer */
[data-theme="dark"] .blockquote-footer {
    color: var(--text-muted);
}

/* Fix input group text */
[data-theme="dark"] .input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Fix tooltip and popover */
[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-card-solid);
    color: var(--text-primary);
}

[data-theme="dark"] .popover {
    background-color: var(--bg-card-solid);
    border-color: var(--border-color);
}

[data-theme="dark"] .popover-header {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .popover-body {
    color: var(--text-primary);
}

/* Fix accordion */
[data-theme="dark"] .accordion-button {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--bg-hover);
    color: var(--accent-secondary);
}

[data-theme="dark"] .accordion-body {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* Fix offcanvas */
[data-theme="dark"] .offcanvas {
    background-color: var(--bg-card-solid);
    color: var(--text-primary);
}

[data-theme="dark"] .offcanvas-header {
    border-color: var(--border-color);
}

/* Fix toast */
[data-theme="dark"] .toast {
    background-color: var(--bg-card-solid);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .toast-header {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Fix help/note text patterns commonly used */
[data-theme="dark"] .help-text,
[data-theme="dark"] .form-text,
[data-theme="dark"] .hint {
    color: var(--text-muted);
}

/* Fix span elements without explicit classes inside tables/cards */
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .card td,
[data-theme="dark"] .card th {
    color: var(--text-primary);
}

/* Fix specific widget patterns */
[data-theme="dark"] .stat-value,
[data-theme="dark"] .stat-label {
    color: var(--text-primary);
}

/* Fix inline badge in any context */
[data-theme="dark"] .badge {
    color: #ffffff;
}

/* Ensure badge text is always readable */
[data-theme="dark"] .badge.bg-info {
    color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-warning {
    color: #000000 !important;
}

/* Fix list items in any context */
[data-theme="dark"] li {
    color: var(--text-primary);
}

/* Fix description lists */
[data-theme="dark"] dt {
    color: var(--text-primary);
}

[data-theme="dark"] dd {
    color: var(--text-secondary);
}

/* Meme raison que la regle sur .form-control::placeholder plus haut : --text-muted echoue le
   contraste AA sur un champ en sombre. Cette regle-ci vise le selecteur universel, donc elle
   ecrasait aussi toute couleur d'invite posee par un composant. */
[data-theme="dark"] ::placeholder {
    color: var(--text-secondary) !important;
    opacity: 1;
}

/* Fix disabled form elements */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
}

/* Fix readonly form elements */
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Fix hr elements */
[data-theme="dark"] hr {
    border-color: var(--border-color);
    opacity: 0.5;
}

/* Fix code elements */
[data-theme="dark"] code {
    color: #e879f9;
    background-color: rgba(139, 92, 246, 0.15);
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
}

[data-theme="dark"] pre {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

/* Fix kbd elements */
[data-theme="dark"] kbd {
    background-color: var(--bg-card-solid);
    color: var(--text-primary);
}

/* ==========================================
   SETTINGS PAGE - Dark Mode
   ========================================== */
[data-theme="dark"] .settings-container h1 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .settings-section {
    background: var(--bg-card-solid) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .settings-section h2 {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .setting-item {
    border-bottom-color: var(--border-color-light) !important;
}

[data-theme="dark"] .setting-info label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .setting-info small {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .loading {
    color: var(--text-secondary) !important;
}