/* ============================================================
   AUTHELIA — CYBER HOMELAB THEME  v3
   NPM > Proxy Host > Advanced > Custom CSS
   ============================================================ */

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

/* -- Variables ----------------------------------------------- */
:root {
  --cy-bg:        #020b18;
  --cy-surface:   rgba(5, 20, 40, 0.82);
  --cy-border:    rgba(0, 200, 255, 0.22);
  --cy-border-h:  rgba(0, 220, 255, 0.65);
  --cy-accent:    #00dcff;
  --cy-accent2:   #0066cc;
  --cy-text:      #c8eeff;
  --cy-text-dim:  rgba(180, 230, 255, 0.55);
  --cy-glow:      rgba(0, 180, 255, 0.18);
  --cy-radius:    10px;
  --font-display: 'Orbitron', monospace;
  --font-body:    'Rajdhani', sans-serif;

  /* ----------------------------------------
     TAILLE DES INPUTS — modifie ici
     ---------------------------------------- */
  --input-height:      52px;   /* hauteur de la boîte */
  --input-font-size:   17px;   /* taille du texte dans l'input */
  --input-padding:     0 16px; /* espace intérieur gauche/droite */
  --label-font-size:   13px;   /* taille du label au-dessus */
}

/* -- Reset ---------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box !important;
}

/* -- Body ----------------------------------------------------- */
body {
  font-family: var(--font-body) !important;
  background-color: var(--cy-bg) !important;
  color: var(--cy-text) !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  position: relative !important;
}

/* --------------------------------------------------------------
   CANVAS PARTICULES — injecté via JS embarqué dans le CSS
   (body::before/after sont pris par Vuetify, on contourne ça)
   -------------------------------------------------------------- */

/* Le canvas est positionné en fixed derrière tout */
#cy-particles-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
}

/* -- Grid animée (derrière le canvas) ------------------------- */
#cy-grid-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(0, 160, 220, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 160, 220, 0.07) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  animation: gridDrift 30s linear infinite !important;
}

/* -- Ambient glow --------------------------------------------- */
#cy-ambient-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(0, 60, 150, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 85% 15%, rgba(0, 100, 200, 0.25) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(0, 30, 80, 0.40) 0%, transparent 100%) !important;
  animation: ambientPulse 8s ease-in-out infinite alternate !important;
}

@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}

@keyframes ambientPulse {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* -- Scan line ------------------------------------------------ */
#cy-scanline {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  z-index: 9998 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 220, 255, 0.08) 25%,
    rgba(0, 220, 255, 0.25) 50%,
    rgba(0, 220, 255, 0.08) 75%,
    transparent 100%
  ) !important;
  animation: scanLine 6s linear infinite !important;
}

@keyframes scanLine {
  from { top: -2px; }
  to   { top: 100vh; }
}

/* -- Z-index du contenu principal ----------------------------- */
.v-application,
.v-application--wrap,
.container,
[class*="container"],
.application {
  position: relative !important;
  z-index: 10 !important;
}

/* -- Cards ---------------------------------------------------- */
.v-card,
.v-sheet.v-card,
[class*="v-card"] {
  background: var(--cy-surface) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border: 1px solid var(--cy-border) !important;
  border-radius: var(--cy-radius) !important;
  box-shadow:
    0 0 0 1px rgba(0, 200, 255, 0.06),
    0 8px 40px rgba(0, 0, 0, 0.65),
    0 0 60px var(--cy-glow) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Barre lumineuse en haut de chaque card */
.v-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 220, 255, 0.90),
    transparent
  ) !important;
}

/* -- Titres --------------------------------------------------- */
h1, h2, h3,
.v-card__title,
[class*="title"],
.application-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--cy-text) !important;
  text-shadow: 0 0 20px rgba(0, 200, 255, 0.50) !important;
}

/* -- Texte courant -------------------------------------------- */
p, span, label,
.v-label,
.v-card__subtitle {
  font-family: var(--font-body) !important;
  color: var(--cy-text-dim) !important;
  letter-spacing: 0.5px !important;
}

/* --------------------------------------------------------------
   INPUTS — taille contrôlée par les variables en haut du fichier
   -------------------------------------------------------------- */

/* Wrapper Vuetify */
.v-input__slot {
  min-height: var(--input-height) !important;
  height: var(--input-height) !important;
  background: rgba(0, 8, 20, 0.65) !important;
  border: 1px solid var(--cy-border) !important;
  border-radius: 6px !important;
  padding: var(--input-padding) !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
}

/* Input natif à l'intérieur */
.v-text-field__slot input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
  height: var(--input-height) !important;
  min-height: var(--input-height) !important;
  font-family: var(--font-body) !important;
  font-size: var(--input-font-size) !important;
  color: var(--cy-text) !important;
  letter-spacing: 0.5px !important;
  padding: var(--input-padding) !important;
  background: transparent !important;
}

/* Focus */
.v-input__slot:focus-within {
  border-color: var(--cy-border-h) !important;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.20) !important;
  outline: none !important;
}

input:focus {
  outline: none !important;
}

/* Label flottant */
.v-label,
.v-text-field .v-label {
  font-family: var(--font-body) !important;
  font-size: var(--label-font-size) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(0, 200, 255, 0.55) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.v-label--active {
  color: var(--cy-accent) !important;
  font-size: 11px !important;
  top: 8px !important;
  transform: none !important;
}

/* Ligne basse Vuetify */
.v-text-field > .v-input__control > .v-input__slot::before,
.v-text-field > .v-input__control > .v-input__slot::after {
  border-color: transparent !important;
}

/* Placeholder */
input::placeholder {
  color: rgba(0, 180, 220, 0.28) !important;
  font-style: normal !important;
}

/* -- Boutons -------------------------------------------------- */
.v-btn,
button[type="submit"],
.v-btn--contained {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--cy-text) !important;
  min-height: 48px !important;    /* ? hauteur du bouton */
  background: linear-gradient(
    135deg,
    rgba(0, 80, 160, 0.80) 0%,
    rgba(0, 180, 255, 0.28) 100%
  ) !important;
  border: 1px solid rgba(0, 200, 255, 0.40) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.12s !important;
  position: relative !important;
  overflow: hidden !important;
}

.v-btn:hover,
button[type="submit"]:hover {
  border-color: rgba(0, 220, 255, 0.72) !important;
  box-shadow:
    0 0 24px rgba(0, 180, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  transform: translateY(-1px) !important;
}

.v-btn:active,
button[type="submit"]:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Shimmer */
.v-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(0, 220, 255, 0.13) 50%,
    transparent 70%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 2.5s ease infinite !important;
  pointer-events: none !important;
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* -- Checkbox / icônes ---------------------------------------- */
.v-icon,
.v-input--selection-controls__input {
  color: var(--cy-accent) !important;
}

.v-input--selection-controls__input::before {
  background: rgba(0, 200, 255, 0.12) !important;
}

/* -- Liens ---------------------------------------------------- */
a {
  color: var(--cy-accent) !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
  transition: text-shadow 0.2s !important;
}

a:hover {
  text-shadow: 0 0 10px rgba(0, 220, 255, 0.70) !important;
}

/* -- Alertes -------------------------------------------------- */
.v-alert {
  background: rgba(0, 40, 80, 0.70) !important;
  border: 1px solid var(--cy-border) !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  color: var(--cy-text) !important;
}

.v-alert--type-error {
  border-color: rgba(255, 60, 80, 0.45) !important;
  background: rgba(60, 0, 15, 0.60) !important;
}

.v-alert--type-success {
  border-color: rgba(0, 220, 120, 0.45) !important;
  background: rgba(0, 40, 20, 0.60) !important;
}

/* -- Dividers ------------------------------------------------- */
hr, .v-divider {
  border-color: var(--cy-border) !important;
  opacity: 0.5 !important;
}

/* -- Progress bar --------------------------------------------- */
.v-progress-linear__background,
.v-progress-linear {
  background: rgba(0, 50, 100, 0.40) !important;
}

.v-progress-linear__determinate,
.v-progress-linear__indeterminate {
  background: linear-gradient(90deg, var(--cy-accent2), var(--cy-accent)) !important;
  box-shadow: 0 0 8px var(--cy-accent) !important;
}

/* -- OTP ------------------------------------------------------ */
.one-time-password,
input[class*="otp"],
input[class*="code"] {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  letter-spacing: 8px !important;
  text-align: center !important;
  background: rgba(0, 8, 20, 0.80) !important;
  border: 1px solid var(--cy-border) !important;
  border-radius: 6px !important;
  color: var(--cy-accent) !important;
  height: 56px !important;
}

/* -- Scrollbar ------------------------------------------------ */
::-webkit-scrollbar { width: 5px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 180, 255, 0.22) !important;
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 200, 255, 0.42) !important;
}

/* -- Sélection ------------------------------------------------ */
::selection {
  background: rgba(0, 180, 255, 0.30) !important;
  color: #ffffff !important;
}

/* -- Responsive ----------------------------------------------- */
@media (max-width: 500px) {
  :root {
    --input-height: 46px;
    --input-font-size: 15px;
  }
  .v-card {
    border-radius: 8px !important;
    margin: 12px !important;
  }
}

/* -- Footer "Propulsé par Authelia" --------------------------- */
.tss-2i1f7g-links {
  visibility: hidden !important;
  position: relative !important;
  font-size: 0 !important;
}

.tss-2i1f7g-links::after {
  content: 'HOMELAB _ SECURED by RMMDY' !important;
  visibility: visible !important;
  font-size: 11px !important;
  font-family: var(--font-display) !important;
  letter-spacing: 3px !important;
  color: rgba(0, 200, 255, 0.30) !important;
  text-transform: uppercase !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
}

/* -- Cases code secret OTP ------------------------------------ */
.tss-1prskxs-otpDigitInput {
  width: 52px !important;
  height: 64px !important;
  font-size: 24px !important;
  font-family: var(--font-display) !important;
  color: var(--cy-accent) !important;
  background: rgba(0, 8, 20, 0.65) !important;
  border: 1px solid var(--cy-border) !important;
  border-radius: 6px !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

.tss-1prskxs-otpDigitInput:focus {
  border-color: var(--cy-border-h) !important;
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.20) !important;
  outline: none !important;
}
/* --------------------------------------------------------------
   INJECTION JS — particules + couches de fond
   Le script crée les éléments DOM directement,
   contournant les pseudo-éléments utilisés par Vuetify
   -------------------------------------------------------------- */