/* ============================================================
 * admin-overrides.css — Custom skin Ludovic Benoit pour Pingvin
 * Injecté par Nginx (sub_filter) dans toutes les pages HTML.
 * Aligné avec download-client.html (fond, grid, palette).
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  --lb-bg: #050810;
  --lb-fg: #e9ecf3;
  --lb-fg-dim: #8a93a8;
  --lb-fg-faint: #4a5168;
  --lb-cyan: #6fd9ff;
  --lb-grid: rgba(140, 160, 200, 0.22);
}

/* Background : fond noir bleuté + grid de points identique à la page download */
body, .mantine-AppShell-main, [class*='AppShell-main'] {
  background-color: var(--lb-bg) !important;
  background-image: radial-gradient(circle at 1px 1px, var(--lb-grid) 1px, transparent 0) !important;
  background-size: 26px 26px !important;
}

/* Typo Inter partout */
body, html, * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif !important;
  letter-spacing: -0.005em;
}

/* Header transparent + bordure subtile */
.mantine-AppShell-header, [class*='AppShell-header'] {
  background: transparent !important;
  border-bottom: 1px solid rgba(140, 160, 200, 0.08) !important;
  backdrop-filter: blur(8px);
}

/* Boutons filled Mantine : violet → cyan */
.mantine-Button-filled, [class*='Button-filled'] {
  background-color: rgba(111, 217, 255, 0.12) !important;
  color: var(--lb-cyan) !important;
  border: 1px solid rgba(111, 217, 255, 0.45) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.mantine-Button-filled:hover, [class*='Button-filled']:hover {
  background-color: rgba(111, 217, 255, 0.22) !important;
  border-color: var(--lb-cyan) !important;
}
.mantine-Button-filled:disabled, [class*='Button-filled']:disabled {
  opacity: 0.4 !important;
}

/* Liens : cyan */
a, a:visited { color: var(--lb-cyan) !important; }

/* Footer "Powered by Pingvin Share" : masqué */
footer, .mantine-AppShell-footer, [class*='AppShell-footer'] {
  display: none !important;
}

/* Dropzone */
[class*='Dropzone'] {
  border-color: rgba(140, 160, 200, 0.20) !important;
  background: rgba(255, 255, 255, 0.015) !important;
}
[class*='Dropzone']:hover, [class*='Dropzone--accept'] {
  border-color: var(--lb-cyan) !important;
  background: rgba(111, 217, 255, 0.04) !important;
}

/* ActionIcon (bouton circulaire central upload) : violet → cyan */
button[class*='ActionIcon'][class*='violet'],
button[class*='ActionIcon-filled'] {
  background-color: rgba(111, 217, 255, 0.10) !important;
  color: var(--lb-cyan) !important;
}

/* Modales */
.mantine-Modal-content, [class*='Modal-content'] {
  background: #0a0f1c !important;
  border: 1px solid rgba(140, 160, 200, 0.12);
}

/* Inputs */
.mantine-Input-input, [class*='Input-input'] {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(140, 160, 200, 0.20) !important;
}
.mantine-Input-input:focus, [class*='Input-input']:focus {
  border-color: var(--lb-cyan) !important;
}

/* Canvas background pour le donut de particules */
#lb-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: opacity;
}

/* Empêche le canvas de couvrir le contenu Pingvin (AppShell + ses enfants au-dessus) */
.mantine-AppShell-root,
[class*='AppShell-root'],
.mantine-AppShell-header,
[class*='AppShell-header'],
.mantine-AppShell-main > *,
[class*='AppShell-main'] > * {
  position: relative;
  z-index: 1;
}