/* -----------------------------------------
   TATOU CVC - CSS GLOBAL UNIFIÉ (corrigé + variables thème)
   => style.css reste GLOBAL
   => le chat doit sortir dans assets/chat.css
   ----------------------------------------- */

/* ----- RESET ----- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ----- VARIABLES (thèmes) ----- */
:root{
    --bg: #070a12;
    --text: rgba(233,245,255,0.92);
    --link: #00f5ff;

    --topbar-bg: rgba(10,14,25,0.78);

    --badge-bg: rgba(179,0,255,0.10);
    --badge-text: rgba(233,245,255,0.92);

    --muted: rgba(233,245,255,0.64);
    --welcome-muted: rgba(233,245,255,0.72);

    --card-bg: rgba(10,14,25,0.74);
    --card-border: rgba(0,245,255,0.24);
    --shadow: 0 18px 60px rgba(0,0,0,0.65);

    --input-bg: rgba(10,14,25,0.70);
    --input-border: rgba(0,245,255,0.22);
    --focus: #00f5ff;

    --btn-primary-bg: rgba(0,245,255,0.22);
    --btn-primary-bg-hover: rgba(0,245,255,0.32);

    --btn-secondary-bg: rgba(255,255,255,0.08);
    --btn-secondary-bg-hover: rgba(255,255,255,0.14);

    --btn-danger-bg: #dc2626;
    --btn-danger-bg-hover: #b91c1c;

    --switch-bg: rgba(255,255,255,0.08);
    --switch-bg-on: rgba(92,255,122,0.24);
    --switch-border: rgba(0,245,255,0.20);
    --switch-border-on: rgba(92,255,122,0.50);

    --accent: #00f5ff;
    --accent-2: #b300ff;
    --accent-3: #5cff7a;
    --radius: 8px;
}

html[data-theme="dark"]{
    --bg: #0b0f17;
    --text: rgba(255,255,255,0.92);
    --link: #60a5fa;
    --topbar-bg: rgba(255,255,255,0.06);
    --badge-bg: rgba(255,255,255,0.07);
    --badge-text: rgba(255,255,255,0.86);
    --muted: rgba(255,255,255,0.62);
    --welcome-muted: rgba(255,255,255,0.72);
    --card-bg: rgba(255,255,255,0.06);
    --card-border: rgba(255,255,255,0.14);
    --shadow: 0 18px 60px rgba(0,0,0,0.55);
    --input-bg: rgba(255,255,255,0.08);
    --input-border: rgba(255,255,255,0.16);
    --focus: #60a5fa;
    --btn-primary-bg: rgba(96,165,250,0.95);
    --btn-primary-bg-hover: rgba(147,197,253,0.95);
    --btn-secondary-bg: rgba(255,255,255,0.08);
    --btn-secondary-bg-hover: rgba(255,255,255,0.14);
    --accent: #60a5fa;
    --accent-2: #22c55e;
    --accent-3: #a7f3d0;
}

html[data-theme="futuristic_plus"]{
    --bg: #040611;
    --text: rgba(236,247,255,0.96);
    --link: #6ff7ff;
    --topbar-bg: rgba(4,8,20,0.90);
    --badge-bg: rgba(255,46,166,0.16);
    --badge-text: #f7fbff;
    --muted: rgba(205,223,255,0.70);
    --welcome-muted: rgba(222,235,255,0.82);
    --card-bg: rgba(6,10,24,0.86);
    --card-border: rgba(111,247,255,0.34);
    --shadow: 0 24px 80px rgba(0,0,0,0.78);
    --input-bg: rgba(7,12,28,0.92);
    --input-border: rgba(111,247,255,0.28);
    --focus: #6ff7ff;
    --btn-primary-bg: rgba(18,74,102,0.94);
    --btn-primary-bg-hover: rgba(24,107,146,0.96);
    --btn-secondary-bg: rgba(255,255,255,0.06);
    --btn-secondary-bg-hover: rgba(255,255,255,0.12);
    --accent: #6ff7ff;
    --accent-2: #ff2ea6;
    --accent-3: #9bff4f;
}

html[data-theme="clean"]{
    --bg: #f7faf9;
    --text: #06211b;
    --link: #00785f;
    --topbar-bg: #ffffff;
    --badge-bg: #e8f7f1;
    --badge-text: #064e3b;
    --muted: #4b635c;
    --welcome-muted: #35504a;
    --card-bg: #ffffff;
    --card-border: rgba(6,33,27,0.12);
    --shadow: 0 18px 60px rgba(6,33,27,0.12);
    --input-bg: #ffffff;
    --input-border: rgba(6,33,27,0.18);
    --focus: #00a981;
    --btn-primary-bg: #00a981;
    --btn-primary-bg-hover: #008f70;
    --btn-secondary-bg: #e8f7f1;
    --btn-secondary-bg-hover: #d8efe6;
    --accent: #00a981;
    --accent-2: #0f766e;
    --accent-3: #166534;
}

html[data-theme="cartoon"]{
    --bg: #fff4d9;
    --text: #151515;
    --link: #d90452;
    --topbar-bg: #fffef8;
    --badge-bg: #ffe66a;
    --badge-text: #151515;
    --muted: #4a4a4a;
    --welcome-muted: #232323;
    --card-bg: #fffef8;
    --card-border: #111111;
    --shadow: 8px 8px 0 #111111;
    --input-bg: #ffffff;
    --input-border: #111111;
    --focus: #00a8ff;
    --btn-primary-bg: #ff4f87;
    --btn-primary-bg-hover: #e11d66;
    --btn-secondary-bg: #9ef01a;
    --btn-secondary-bg-hover: #7fd10a;
    --accent: #ff4f87;
    --accent-2: #00a8ff;
    --accent-3: #ffe66a;
}

html, body {
    font-family: system-ui, -apple-system, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100%;
}

body {
    background:
        radial-gradient(900px 600px at 20% 0%, rgba(0,245,255,0.12), transparent 55%),
        radial-gradient(800px 550px at 90% 10%, rgba(179,0,255,0.10), transparent 55%),
        radial-gradient(900px 650px at 40% 110%, rgba(92,255,122,0.08), transparent 60%),
        var(--bg) !important;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(1000px 700px at 20% 0%, rgba(37,99,235,0.25), transparent 55%),
        radial-gradient(900px 600px at 100% 20%, rgba(34,197,94,0.18), transparent 55%),
        var(--bg) !important;
}

html[data-theme="futuristic_plus"] body {
    background:
        radial-gradient(1200px 760px at 12% -10%, rgba(0,247,255,0.18), transparent 52%),
        radial-gradient(1000px 680px at 100% 8%, rgba(255,46,166,0.18), transparent 54%),
        radial-gradient(900px 620px at 50% 115%, rgba(155,255,79,0.12), transparent 58%),
        linear-gradient(180deg, rgba(4,6,17,1) 0%, rgba(6,8,22,1) 48%, rgba(3,6,18,1) 100%),
        var(--bg) !important;
}

html[data-theme="clean"] body {
    background:
        radial-gradient(900px 600px at 20% 0%, rgba(0,169,129,0.12), transparent 55%),
        radial-gradient(900px 600px at 95% 10%, rgba(14,165,233,0.10), transparent 55%),
        var(--bg) !important;
}

html[data-theme="cartoon"] body {
    background:
        radial-gradient(circle at 15% 10%, rgba(0,168,255,0.30), transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(255,79,135,0.30), transparent 42%),
        radial-gradient(circle at 30% 90%, rgba(255,230,106,0.25), transparent 40%),
        radial-gradient(circle, rgba(17,17,17,0.10) 1.2px, transparent 1.2px),
        var(--bg) !important;
    background-size: auto, auto, auto, 18px 18px !important;
}

/* ----- PAGE WRAPPER ----- */
.page {
    max-width: 900px;
    margin: 0 auto;
    padding: 12px;
}

/* ----- LIENS GÉNÉRAUX ----- */
a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* ----- TOPBAR ----- */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    background: var(--topbar-bg);
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
}

.topbar-left strong {
    font-size: 16px;
}

.topbar-right {
    font-size: 12px;
    color: var(--muted);
    text-align: right;
}

/* Boutons/links dans la topbar (si on en met) */
.topbar a,
.topbar button {
    text-decoration: none;
}

/* ----- BADGE RÔLE ----- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius);
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: 11px;
    text-transform: uppercase;
    margin-left: 6px;
}

/* ----- WELCOME BLOCK ----- */
.welcome {
    margin-bottom: 16px;
}

.welcome h1 {
    margin: 0 0 6px 0;
    font-size: 22px;
}

.welcome p {
    margin: 0;
    font-size: 14px;
    color: var(--welcome-muted);
}

.welcome .admin-link {
    margin-top: 8px;
    font-size: 13px;
}

/* ----- DISPOSITION DES MODULES ----- */
.modules-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ----- CARTES GÉNÉRALES ----- */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--card-border);
    margin-bottom: 12px;
}

/* Carte "module" horizontale avec bouton à droite */
.card-module {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.card-header {
    flex: 1;
}

.card h2 {
    margin: 0 0 4px 0;
    font-size: 17px;
}

.card p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

/* ----- BOUTONS ----- */
.btn {
    padding: 10px 14px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
}

/* bouton principal */
.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--text);
    text-decoration: none;
}
.btn-primary:hover {
    background: var(--btn-primary-bg-hover);
}

/* variantes génériques */
.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--text);
}
.btn-secondary:hover {
    background: var(--btn-secondary-bg-hover);
}

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

/* ----- FORMULAIRES GÉNÉRAUX ----- */
form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

label {
    font-size: 14px;
    opacity: 0.9;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    padding: 10px;
    border-radius: 8px;
    color: var(--text);
    width: 100%;
    font-size: 15px;
}

textarea {
    min-height: 90px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--focus);
    outline: none;
}

/* ----- TABLEAUX GÉNÉRAUX ----- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

th, td {
    padding: 10px;
    border-bottom: 1px solid var(--input-border);
}

th {
    background: var(--topbar-bg);
    text-align: left;
}

/* ----- ALERTES / MESSAGES ----- */
.alert {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 15px;
}

.alert-success {
    background: #064e3b;
    color: #a7f3d0;
}

.alert-error {
    background: #7f1d1d;
    color: #fecaca;
}

.alert-warning {
    background: #78350f;
    color: #fcd34d;
}

/* ----- UTILITAIRES ----- */
.text-muted { font-size: 12px; opacity: 0.8; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }

/* ----- GRILLES ----- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

/* ----- TITRES DE PAGE (quand pas de topbar) ----- */
.page-title {
    font-size: 22px;
    margin: 0 0 12px;
}

/* ----- SWITCH topbar - partage position (GLOBAL, ok) ----- */
.topbar-right{
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.topbar-switch{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.topbar-switch-label{
    font-size: 12px;
    color: var(--welcome-muted);
    opacity: 0.95;
}

.topbar-switch-hint{
    font-size: 11px;
    color: var(--muted);
}

/* Switch */
.switch{
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input{
    opacity: 0;
    width: 0;
    height: 0;
}

.slider{
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--switch-bg);
    transition: .2s;
    border-radius: var(--radius);
    border: 1px solid var(--switch-border);
}

.slider:before{
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--text);
    transition: .2s;
    border-radius: calc(var(--radius) - 2px);
}

/* ----- Harmonisation des pages qui avaient encore du CSS local ----- */
.login-container,
.container,
.wrap,
.box,
.panel,
.admin-panel,
.admin-card,
.section,
.content-card,
.form-card,
.table-card {
    background: var(--card-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}

button,
input[type="submit"],
input[type="button"] {
    border-radius: var(--radius) !important;
}

button:not(.btn-secondary):not(.btn-danger),
input[type="submit"]:not(.btn-secondary):not(.btn-danger) {
    background: var(--btn-primary-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--card-border) !important;
}

button:not(.btn-secondary):not(.btn-danger):hover,
input[type="submit"]:not(.btn-secondary):not(.btn-danger):hover {
    background: var(--btn-primary-bg-hover) !important;
}

.small,
.footer-info,
.muted,
small {
    color: var(--muted) !important;
}

html[data-theme="futuristic"] .topbar,
html[data-theme="futuristic"] .card,
html[data-theme="futuristic"] .login-container,
html[data-theme="futuristic"] .panel,
html[data-theme="futuristic"] .box {
    clip-path: polygon(0% 12px, 12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px));
}

html[data-theme="futuristic"] .btn,
html[data-theme="futuristic"] button,
html[data-theme="futuristic"] .badge {
    letter-spacing: .08em;
    text-transform: uppercase;
}

html[data-theme="futuristic_plus"] .topbar,
html[data-theme="futuristic_plus"] .card,
html[data-theme="futuristic_plus"] .login-container,
html[data-theme="futuristic_plus"] .panel,
html[data-theme="futuristic_plus"] .box {
    clip-path: polygon(0% 12px, 12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px));
    box-shadow:
        0 0 0 1px rgba(111,247,255,0.14),
        0 0 28px rgba(0,247,255,0.10),
        0 0 54px rgba(255,46,166,0.08),
        var(--shadow);
}

html[data-theme="futuristic_plus"] .btn,
html[data-theme="futuristic_plus"] button,
html[data-theme="futuristic_plus"] .badge {
    letter-spacing: .12em;
    text-transform: uppercase;
}

html[data-theme="cartoon"] .topbar,
html[data-theme="cartoon"] .card,
html[data-theme="cartoon"] .login-container,
html[data-theme="cartoon"] .panel,
html[data-theme="cartoon"] .box {
    border: 3px solid #111111 !important;
    box-shadow: 8px 8px 0 #111111, var(--shadow) !important;
    border-radius: 18px !important;
}

html[data-theme="cartoon"] .btn,
html[data-theme="cartoon"] button,
html[data-theme="cartoon"] .badge {
    border: 3px solid #111111 !important;
    box-shadow: 4px 4px 0 #111111 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 800 !important;
}

html[data-theme="cartoon"] input,
html[data-theme="cartoon"] textarea,
html[data-theme="cartoon"] select {
    border: 3px solid #111111 !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45);
    border-radius: 14px !important;
}

html[data-theme="cartoon"] h1,
html[data-theme="cartoon"] h2,
html[data-theme="cartoon"] h3,
html[data-theme="cartoon"] .page-title {
    letter-spacing: .03em;
    text-transform: uppercase;
}

.switch input:checked + .slider{
    background: var(--switch-bg-on);
    border-color: var(--switch-border-on);
}

.switch input:checked + .slider:before{
    transform: translate(20px, -50%);
}

/* ----- RESPONSIVE GLOBAL ----- */
@media (max-width: 640px) {
    .page {
        padding: 10px;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .topbar-right {
        text-align: left;
        align-items: flex-start;
    }

    .welcome h1 {
        font-size: 20px;
    }

    .card-module {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-module .btn-primary {
        width: 100%;
    }

    /* Mobile: topbar switch clean */
    .topbar-switch{
        width: 100%;
        justify-content: space-between;
    }
}

/* -----------------------------------------
   IMPORTANT
   Le CSS du chat a été retiré de ce fichier.
   Mets-le dans assets/chat.css (scopé .page.chat-page)
   ----------------------------------------- */