/* ============================================================
   Liquid Glass — thème global Skuyrel
   ============================================================

   Overrides automatiques : toutes les cartes/panneaux bg-white
   avec border-gray-100 ou border-gray-200 passent en verre.
   Les inputs (bg-gray-50, bg-white sans border-gray-*) ne sont
   pas ciblés intentionnellement.
   ============================================================ */

/* Cartes rondes avec bordure légère → glass */
.rounded-2xl.border-gray-100,
.rounded-2xl.border-gray-200,
.rounded-xl.border-gray-200,
.rounded-xl.border-gray-100 {
    background: rgba(255,255,255,.62) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-color: rgba(255,255,255,.72) !important;
    box-shadow:
        0 1px 3px rgba(0,0,0,.05),
        0 8px 32px rgba(60,80,130,.07),
        inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* Hover subtil pour cartes cliquables */
.rounded-2xl.border-gray-100:hover,
.rounded-2xl.border-gray-200:hover {
    background: rgba(255,255,255,.72) !important;
    box-shadow:
        0 2px 6px rgba(0,0,0,.06),
        0 16px 48px rgba(60,80,130,.10),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* En-têtes de tableau dans les panels glass */
.rounded-2xl table thead tr,
.rounded-xl table thead tr {
    background: rgba(240,245,255,.55) !important;
}

/* ---------- fond animé ---------- */
body {
    font-family: 'Inter', system-ui, sans-serif;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 60% at 10%  10%, rgba(147,197,253,.45) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 90%  20%, rgba(196,181,253,.40) 0%, transparent 70%),
        radial-gradient(ellipse 70% 60% at 50%  90%, rgba(252,211,218,.45) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80%  70%, rgba(167,243,208,.30) 0%, transparent 70%),
        #e8edf5;
    background-attachment: fixed;
}

/* ---------- surface glass générique ---------- */
.glass {
    background: rgba(255,255,255,.60);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow:
        0 2px 32px rgba(60,80,130,.07),
        inset 0 1px 0 rgba(255,255,255,.90);
}

/* navbar fixe */
.glass-navbar {
    background: rgba(255,255,255,.70);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-bottom: 1px solid rgba(255,255,255,.65);
    box-shadow:
        0 1px 0 rgba(0,0,0,.04),
        0 4px 24px rgba(60,80,130,.06),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* sidebar */
.glass-sidebar {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-right: 1px solid rgba(255,255,255,.60);
    box-shadow:
        2px 0 24px rgba(60,80,130,.06),
        inset -1px 0 0 rgba(255,255,255,.50);
}

/* carte / panneau */
.glass-card {
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow:
        0 1px 3px rgba(0,0,0,.06),
        0 12px 48px rgba(60,80,130,.08),
        inset 0 1px 0 rgba(255,255,255,.90);
    border-radius: 1.25rem;
}

/* overlay sidebar mobile */
.glass-overlay {
    background: rgba(60,70,100,.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ---------- séparateur ---------- */
.glass-divider {
    background: rgba(180,190,210,.35);
}

/* ---------- nav link actif (CIS rouge) ---------- */
.nav-active-red {
    background: rgba(204,26,17,.12) !important;
    color: #9a1309 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- nav link actif (Mécanique ambre) ---------- */
.nav-active-amber {
    background: rgba(217,119,6,.11) !important;
    color: #b45309 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- hover nav générique ---------- */
.nav-hover:hover {
    background: rgba(255,255,255,.55);
    color: #1e293b;
}

/* ---------- input glass ---------- */
.input-glass {
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(180,190,220,.40);
    transition: border-color .2s, box-shadow .2s;
}
.input-glass:focus {
    outline: none;
    background: rgba(255,255,255,.90);
    border-color: #cc1a11;
    box-shadow: 0 0 0 3px rgba(204,26,17,.12);
}
.input-glass::placeholder { color: rgba(100,116,139,.55); }

/* ---------- bouton primaire rouge ---------- */
.btn-red {
    background: linear-gradient(135deg, #e02b22 0%, #cc1a11 60%, #b51509 100%);
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: 0 4px 16px rgba(204,26,17,.30), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .15s, box-shadow .15s;
}
.btn-red:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(204,26,17,.40), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-red:active { transform: translateY(0); }

/* ---------- badge avatar ---------- */
.avatar-red {
    background: linear-gradient(135deg, #e02b22 0%, #cc1a11 100%);
    box-shadow: 0 2px 8px rgba(204,26,17,.35);
}

/* ---------- badge CIS tag ---------- */
.badge-cis {
    background: rgba(204,26,17,.10);
    color: #9a1309;
    border: 1px solid rgba(204,26,17,.20);
    backdrop-filter: blur(8px);
}

/* ---------- header icon CIS ---------- */
.icon-bg-red {
    background: rgba(204,26,17,.12);
}
.icon-bg-amber {
    background: rgba(217,119,6,.12);
}

/* ---------- flash messages ---------- */
.flash-success {
    background: rgba(220,252,231,.75);
    border: 1px solid rgba(134,239,172,.60);
    backdrop-filter: blur(12px);
}
.flash-error {
    background: rgba(254,226,226,.75);
    border: 1px solid rgba(252,165,165,.60);
    backdrop-filter: blur(12px);
}