/* =========================================================================
   Esai Studio — peau du panel txAdmin (esaistudio UNIQUEMENT)
   =========================================================================
   Meme langage que les NUI du serveur (essr_framework) : plaques de metal
   bleu nuit biseautees, boutons bombes, champs creuses, Barlow Semi
   Condensed. Couleurs du logo : bleu electrique #2370FF, cyan #7CC8FF.

   Design seul : aucune taille de mise en page ni comportement change. Le
   panel passe par des variables shadcn (`hsl(var(--x))`) : les repeindre
   repeint l'interface. PAS de backdrop-filter.

   Chargee APRES index-*.css (index.html). Retour arriere : retirer la ligne
   <link> de index.html. Sauvegarde : esaistudio/BACKUP/txadmin-avant-peau-20261102.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700;800&display=swap');

/* Un seul theme : memes valeurs en clair et en sombre. */
:root,
.dark {
    --background: 225 71% 7%;
    --foreground: 213 100% 95%;

    --card: 224 58% 13%;
    --card-foreground: 213 100% 95%;
    --popover: 224 57% 10%;
    --popover-foreground: 213 100% 95%;

    --primary: 219 100% 57%;
    --primary-foreground: 0 0% 100%;

    --secondary: 221 51% 18%;
    --secondary-foreground: 213 100% 95%;
    --muted: 223 54% 14%;
    --muted-foreground: 215 40% 72%;

    --accent: 219 100% 57%;
    --accent-foreground: 0 0% 100%;

    --border: 220 59% 28%;
    --input: 220 54% 31%;
    --ring: 205 100% 74%;

    --destructive: 358 100% 68%;
    --destructive-foreground: 0 0% 100%;
    --destructive-hint: 356 60% 13%;
    --destructive-inline: 358 100% 74%;

    --warning: 38 95% 56%;
    --warning-foreground: 0 0% 4%;
    --warning-hint: 38 60% 11%;
    --warning-inline: 38 95% 64%;

    --success: 150 65% 49%;
    --success-foreground: 0 0% 100%;
    --success-hint: 150 45% 10%;
    --success-inline: 150 60% 56%;

    --info: 205 100% 74%;
    --info-foreground: 225 71% 7%;
    --info-hint: 219 55% 14%;
    --info-inline: 205 100% 78%;

    --radius: .6rem;

    --es-font: 'Barlow Semi Condensed', 'Inter Variable', system-ui, sans-serif;
    --es-metal: linear-gradient(180deg, #1A2A52 0%, #0E1835 55%, #0A1230 100%);
    --es-plate: linear-gradient(180deg, #13214A 0%, #0B1532 100%);
    --es-btn: linear-gradient(180deg, #4D9BFF 0%, #2370FF 48%, #1450D8 52%, #0F3FB0 100%);
    --es-btn-hover: linear-gradient(180deg, #67AAFF 0%, #3A80FF 48%, #1E5CE6 52%, #164AC0 100%);
    --es-btn-off: linear-gradient(180deg, #22355F 0%, #172647 52%, #121F3C 100%);
    --es-well: #070D1F;
    --es-edge: #1E3A73;
    --es-edge-dk: #050A18;
    --es-hi: inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* --- Typo ---------------------------------------------------------------- */
body {
    font-family: var(--es-font);
    font-size: 15px;
}

.font-mono,
.xterm,
.xterm * {
    font-family: 'JetBrains Mono Variable', ui-monospace, monospace;
}

h1, h2, h3, h4,
[data-slot="card-title"] {
    font-family: var(--es-font);
    font-weight: 700;
    letter-spacing: .03em;
    text-shadow: 0 1px 0 #000;
}

/* --- Fond : marine profond, comme la banniere --------------------------- */
body {
    background-color: hsl(var(--background));
    background-image:
        radial-gradient(1100px 620px at 50% -18%, rgba(35, 112, 255, .16), transparent 62%),
        linear-gradient(180deg, #071029 0%, #040915 100%);
    background-attachment: fixed;
}

/* --- Plaques : metal bleu nuit biseaute --------------------------------- */
.bg-card {
    background-image: var(--es-metal) !important;
    background-color: #0E1835 !important;
    border: 2px solid var(--es-edge) !important;
    box-shadow: var(--es-hi), inset 0 -2px 0 rgba(0, 0, 0, .45), 0 14px 32px -16px rgba(0, 0, 0, .8) !important;
}

/* Plaque dans une plaque : creusee plutot que bombee. */
.bg-card .bg-card {
    background-image: none !important;
    background-color: var(--es-well) !important;
    border: 1.5px solid var(--es-edge-dk) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 1px 0 rgba(124, 200, 255, .07) !important;
}

.bg-secondary\/35 {
    background-color: rgba(124, 200, 255, .05) !important;
}

/* --- Champs : creuses --------------------------------------------------- */
input.bg-background,
textarea.bg-background,
button.bg-background,
.bg-black\/5 {
    background-color: var(--es-well) !important;
    border-color: var(--es-edge-dk) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .65), 0 1px 0 rgba(124, 200, 255, .07) !important;
}

input.bg-background:focus,
textarea.bg-background:focus {
    border-color: hsl(var(--primary)) !important;
}

*:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 1px;
}

::selection {
    background: rgba(35, 112, 255, .45);
    color: #fff;
}

/* --- Boutons : bombes --------------------------------------------------- */
button.bg-primary,
a.bg-primary {
    background-image: var(--es-btn) !important;
    border: 1.5px solid #0A2F8A !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #061F5E !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
    font-weight: 700;
    letter-spacing: .03em;
}

button.bg-primary:hover,
a.bg-primary:hover {
    background-image: var(--es-btn-hover) !important;
}

button.bg-secondary,
button.border-input,
button.bg-background {
    background-image: var(--es-btn-off);
    border-color: var(--es-edge-dk) !important;
    box-shadow: var(--es-hi), 0 2px 0 rgba(0, 0, 0, .4);
}

button.bg-primary:active,
button.bg-secondary:active,
button.border-input:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55) !important;
}

button.border-foreground.grow {
    border-color: hsl(var(--primary)) !important;
}

/* --- Menus deroulants / dialogues : plaques opaques (pas de flou) ------- */
.bg-popover,
[role="dialog"].bg-background,
[role="alertdialog"].bg-background {
    background-image: var(--es-plate) !important;
    background-color: #0B1532 !important;
    border: 2px solid var(--es-edge) !important;
    box-shadow: var(--es-hi), 0 24px 50px -18px rgba(0, 0, 0, .9) !important;
}

[role="menuitem"] {
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

[role="menuitem"] svg {
    color: hsl(var(--info));
}

[role="menuitem"]:focus,
[role="menuitem"][data-highlighted],
[role="option"][data-highlighted] {
    background-image: var(--es-btn) !important;
    color: #fff !important;
}

[role="menuitem"][data-highlighted] svg {
    color: #fff;
}

.fixed.inset-0.bg-black\/80 {
    background-color: rgba(3, 7, 18, .72) !important;
}

/* --- Tableaux ------------------------------------------------------------ */
tr.sticky.top-0.z-10 {
    background-image: var(--es-plate) !important;
    border-bottom: 2px solid var(--es-edge-dk);
    box-shadow: 0 1px 0 rgba(124, 200, 255, .08);
}

tr.sticky.top-0.z-10 th {
    background-color: transparent !important;
}

tr.sticky.top-0.z-10 th:hover {
    background-color: rgba(35, 112, 255, .14) !important;
}

tr.sticky.top-0.z-10 th.font-medium {
    background-color: transparent !important;
    color: hsl(var(--info)) !important;
}

tbody tr:hover {
    background-color: rgba(35, 112, 255, .08);
}

/* --- Ascenseurs ---------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #2370FF transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4D9BFF, #1450D8);
    border: 3px solid transparent;
    border-radius: 6px;
    background-clip: content-box;
}

/* =========================================================================
   LOGO
   Le mot-symbole « txAdmin » est un SVG en dur dans le bundle (viewBox
   1115x288, sa seule signature stable). On masque son trace et on peint
   l'etoile Esai Studio, en tuile biseautee.
   ========================================================================= */
svg[viewBox="0 0 1115 288"] {
    width: 9rem;
    height: 9rem;
    border-radius: 1.1rem;
    border: 2px solid var(--es-edge);
    background-color: #070D1F;
    background-image: url('./img/esai-logo.v800.png');
    background-size: 78%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: var(--es-hi), 0 10px 26px -8px rgba(35, 112, 255, .55);
}

svg[viewBox="0 0 1115 288"] > * {
    display: none;
}

svg[viewBox="0 0 1115 288"].h-9 {
    height: 2.6rem;
    width: 2.6rem;
    border-radius: .55rem;
    border-width: 1.5px;
    box-shadow: var(--es-hi), 0 2px 8px rgba(35, 112, 255, .45);
}

.cfxrebtn {
    border: 1.5px solid #0A2F8A !important;
    background: var(--es-btn) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #061F5E !important;
    color: #fff !important;
}

.cfxrebtn:hover {
    background: var(--es-btn-hover) !important;
}

.text-primary {
    color: hsl(var(--info)) !important;
}

a.underline,
.text-accent {
    color: hsl(var(--info));
}

/* =========================================================================
   GRIS ECRITS EN DUR DANS LE BUNDLE (utilitaires zinc/gray)
   Le theme « clair » recoit les memes couleurs que le sombre.
   ========================================================================= */
.dark .dark\:bg-zinc-900 { background-color: #0A1230 !important; }
.dark .dark\:bg-zinc-800,
.dark .dark\:bg-zinc-800\/90 { background-color: rgba(17, 28, 56, .94) !important; }
.dark .dark\:bg-zinc-700 { background-color: #172647 !important; }
.dark .dark\:bg-zinc-600 { background-color: #22355F !important; }
.dark .dark\:bg-zinc-600\/50 { background-color: rgba(34, 53, 95, .5) !important; }
.dark .dark\:border-zinc-800 { border-color: var(--es-edge) !important; }
.dark .dark\:text-zinc-400,
.dark .dark\:text-gray-400 { color: hsl(215 40% 72%) !important; }

html:not(.dark) .bg-zinc-100,
html:not(.dark) .bg-zinc-200,
html:not(.dark) .bg-zinc-200\/90 { background-color: rgba(17, 28, 56, .94) !important; }
html:not(.dark) .bg-zinc-300\/75 { background-color: rgba(23, 38, 71, .75) !important; }
html:not(.dark) .border-zinc-200 { border-color: var(--es-edge) !important; }
html:not(.dark) .text-gray-900,
html:not(.dark) .text-black\/75 { color: hsl(213 100% 95%) !important; }
html:not(.dark) .text-zinc-500,
html:not(.dark) .text-gray-500 { color: hsl(215 40% 70%) !important; }