:root{
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Rythme & arrondis */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;

    /* Élévation */
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.10);
    --shadow-md: 0 14px 42px rgba(15, 23, 42, 0.16);

    /* Animation */
    --transition-fast: 0.15s ease-in-out;

    /* Brand */
    --brand: #2563eb;
    --brand-2: #14b8a6;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;

    /* Fallback “surfaces” (seront écrasées par tes variables inline PHP) */
    --surface-0: rgba(255,255,255,0.55);
    --surface-1: rgba(255,255,255,0.70);
    --surface-2: rgba(255,255,255,0.90);

    --border-1: rgba(15,23,42,0.10);
    --border-2: rgba(15,23,42,0.16);

    --nav-bg: rgba(255,255,255,0.55);
    --nav-border: rgba(15,23,42,0.10);
    --nav-text: #0f172a;

    --focus-ring: 0 0 0 0.22rem rgba(37, 99, 235, 0.18);
}

/* Clair par défaut */
.theme-light{
    --bg-start: #f7f8ff;
    --bg-end:   #eef2ff;

    --text-color: #0f172a;
    --muted-color: #64748b;

    --card-bg: rgba(255,255,255,0.76);
    --card-border: rgba(15,23,42,0.10);

    --table-header: rgba(15,23,42,0.03);
    --table-row: rgba(15,23,42,0.02);

    --primary: var(--brand);
    --accent: var(--brand-2);
    --link: #1d4ed8;

    --bg-variant-1: rgba(255,255,255,0.60);
    --bg-variant-2: rgba(255,255,255,0.92);

    --surface-0: rgba(255,255,255,0.52);
    --surface-1: rgba(255,255,255,0.68);
    --surface-2: rgba(255,255,255,0.88);

    --border-1: rgba(15,23,42,0.10);
    --border-2: rgba(15,23,42,0.16);

    --nav-bg: rgba(255,255,255,0.60);
    --nav-border: rgba(15,23,42,0.10);
    --nav-text: #0f172a;

    --focus-ring: 0 0 0 0.22rem rgba(37, 99, 235, 0.18);
}

/* Sombre */
.theme-dark{
    --bg-start: #0b1224;
    --bg-end:   #111b33;

    --text-color: #e5e7eb;
    --muted-color: #a9b4c7;

    --card-bg: rgba(17, 27, 51, 0.82);
    --card-border: rgba(255,255,255,0.12);

    --table-header: rgba(255,255,255,0.06);
    --table-row: rgba(255,255,255,0.04);

    --primary: #60a5fa;
    --accent: #2dd4bf;
    --link: #93c5fd;

    --bg-variant-1: rgba(17, 27, 51, 0.64);
    --bg-variant-2: rgba(17, 27, 51, 0.92);

    --surface-0: rgba(10, 18, 38, 0.42);
    --surface-1: rgba(14, 24, 52, 0.60);
    --surface-2: rgba(16, 30, 66, 0.82);

    --border-1: rgba(255,255,255,0.10);
    --border-2: rgba(255,255,255,0.16);

    --nav-bg: rgba(10, 18, 38, 0.48);
    --nav-border: rgba(255,255,255,0.12);
    --nav-text: #eaf0ff;

    --focus-ring: 0 0 0 0.22rem rgba(96, 165, 250, 0.22);
}

body{
    font-family: var(--font-sans);
    background:
            radial-gradient(1200px 700px at 15% 10%, rgba(20,184,166,0.14), transparent 55%),
            radial-gradient(900px 600px at 85% 15%, rgba(37,99,235,0.16), transparent 55%),
            linear-gradient(135deg, var(--bg-start), var(--bg-end));
    color: var(--text-color);
}

/* Liens */
a{ color: var(--link); }
a:hover{ color: var(--primary); }

/* =========================
   NAVBAR “verre” + dégradé
========================= */
.navbar.app-navbar{
    /* fallback */
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);

    /* rendu “produit” */
    box-shadow: 0 10px 30px rgba(0,0,0,0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Dégradé basé sur tes couleurs de thème (bg-start/bg-end/surfaces) */
.navbar.app-navbar{
    background:
            linear-gradient(
                    90deg,
                    color-mix(in srgb, var(--bg-start) 72%, transparent),
                    color-mix(in srgb, var(--bg-end)   72%, transparent)
            ),
            linear-gradient(
                    180deg,
                    color-mix(in srgb, var(--surface-2) 40%, transparent),
                    color-mix(in srgb, var(--surface-0) 40%, transparent)
            );
}

/* Texte navbar */
.navbar.app-navbar .navbar-brand,
.navbar.app-navbar .navbar-text,
.navbar.app-navbar .nav-user{
    color: var(--nav-text) !important;
}
.navbar.app-navbar .nav-user:hover{
    color: color-mix(in srgb, var(--nav-text) 70%, var(--primary)) !important;
}

/* Boutons navbar : cohérents avec fond transparent */
.navbar.app-navbar .btn{
    border-radius: 999px;
}
.navbar.app-navbar .btn-outline-secondary{
    color: color-mix(in srgb, var(--nav-text) 78%, transparent);
    border-color: color-mix(in srgb, var(--nav-border) 70%, transparent);
    background: color-mix(in srgb, var(--surface-0) 30%, transparent);
}
.navbar.app-navbar .btn-outline-secondary:hover{
    color: var(--nav-text);
    border-color: color-mix(in srgb, var(--nav-border) 90%, transparent);
    background: color-mix(in srgb, var(--surface-1) 55%, transparent);
}

/* =========================
   Cards
========================= */
.card{
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--text-color);
}
.card:hover{
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

/* Texte muted */
.text-muted,
.text-body-secondary,
.form-text{
    color: var(--muted-color) !important;
}

/* Tables */
.table{
    --bs-table-color: var(--text-color);
    --bs-table-bg: transparent;
    --bs-table-striped-color: var(--text-color);
    --bs-table-striped-bg: var(--table-row);
    --bs-table-hover-color: var(--text-color);
    --bs-table-hover-bg: color-mix(in srgb, var(--table-row) 65%, transparent);
    --bs-table-border-color: var(--card-border);
}
.table-light{
    --bs-table-color: var(--text-color);
    --bs-table-bg: var(--table-header);
    --bs-table-striped-bg: var(--table-row);
    --bs-table-hover-bg: color-mix(in srgb, var(--table-header) 70%, transparent);
}
.table thead{ background-color: var(--table-header); }
.table-striped tbody tr:nth-of-type(odd){ background-color: var(--table-row); }

/* Boutons */
.btn-primary{
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 10px 26px rgba(37,99,235,0.18);
}
.btn-primary:hover{ filter: brightness(0.97); }

.btn-outline-primary{
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
.btn-outline-primary:hover{
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Accent optionnel */
.btn-accent{
    background-color: var(--accent);
    border-color: var(--accent);
    color: #062a2a;
}
.btn-accent:hover{ filter: brightness(0.97); }

/* Form controls */
.form-control,
.form-select,
.form-control[readonly],
textarea{
    background-color: var(--bg-variant-2);
    color: var(--text-color);
    border-color: var(--card-border);
}
.form-control:disabled{
    background-color: var(--bg-variant-1);
}
.form-control::placeholder,
textarea::placeholder{
    color: color-mix(in srgb, var(--muted-color) 92%, transparent);
    opacity: 1;
}
.form-control:focus,
.form-select:focus,
textarea:focus{
    background-color: var(--bg-variant-2);
    color: var(--text-color);
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

/* Pills nav */
.nav-pills .nav-link{
    color: var(--text-color);
    border: 1px solid var(--card-border);
    border-radius: 999px;
}
.nav-pills .nav-link.active{
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Badges */
.badge{ border-radius: 999px; }

/* Modals / list group / input group */
.modal-content,
.list-group-item,
.input-group-text{
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--card-border);
}

/* Code blocks */
pre{
    background-color: var(--bg-variant-1);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 0.85rem;
}
.bg-purple-subtle{ background-color: rgba(111,66,193,.15)!important; }
.text-purple-emphasis{ color: rgba(111,66,193,1)!important; }

/* =========================
   SUPERADMIN DEBUG : angles propres + header “bar”
========================= */
.superadmin-debug{
    overflow: hidden; /* << clé : empêche les coins “cassés” (header/collapse) */
    border-radius: var(--radius-lg);
}

.superadmin-debug__header{
    /* barre “glass” + dégradé discret */
    background:
            linear-gradient(90deg,
            color-mix(in srgb, var(--bg-start) 60%, transparent),
            color-mix(in srgb, var(--bg-end) 60%, transparent)
            );
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid color-mix(in srgb, var(--border-2) 85%, transparent);
    padding: .85rem 1rem;
}

.superadmin-debug__title{
    color: var(--warning);
    font-weight: 700;
}

.superadmin-debug__toggle{
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Quand le panel est ouvert : petite séparation propre */
.superadmin-debug .collapse.show{
    background-color: color-mix(in srgb, var(--surface-1) 82%, transparent);
}