/* Authelia Dark Theme - Custom CSS */

/* Variables per consistenza - Palette estratta da bg.jpg */
:root {
  --bg-primary: #050B0B;     /* Colore più scuro dall'immagine */
  --bg-secondary: #131B19;   /* Colore medio dall'immagine */
  --bg-tertiary: #1a2421;    /* Variante più chiara del secondary */
  --text-primary: #f0f6fc;   /* Testo bianco per contrasto */
  --text-secondary: #a0a8a0; /* Testo grigio con hint di verde */
  --accent-primary: #d4a574; /* Oro più luminoso */
  --accent-hover: #e6b885;   /* Versione ancora più chiara e luminosa */
  --border-primary: #2a3530; /* Bordi con hint del tema */
  --success: #4a6b4a;        /* Verde scuro coerente con palette */
  --warning: #d4a574;        /* Oro luminoso per warning */
  --error: #8b4a4a;          /* Rosso scuro coerente con tema */
}

/* Background con specifiche personalizzate */
body {
  background: #020809 !important;
  background-image: url('/authelia-custom-theme/bg.jpg') !important;
  background-size: auto 100% !important;
  background-position: 0% center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
  height: 100% !important;
  color: var(--text-primary) !important;
}

/* Assicura che html e body occupino tutto l'altezza */
html {
  height: 100% !important;
}

/* Nessun overlay blur - rimosso per mantenere sfondo pulito */

/* Container principale */
.theme-dark,
.layout-theme {
  background: transparent !important;
}

/* Card/Form containers */
.v-card,
.v-sheet,
.v-form,
.login-form {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Input fields */
.v-input,
.v-text-field,
input[type="text"],
input[type="password"],
input[type="email"] {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 8px !important;
}

.v-input input,
.v-text-field input {
  color: var(--text-primary) !important;
}

.v-input__slot::before,
.v-input__slot::after {
  display: none !important;
}

/* Labels e testo - Tutti in oro */
.v-label,
.v-messages,
label,
.form-label,
p,
span,
div:not(.v-card):not(.v-sheet):not(.v-form) {
  color: var(--accent-primary) !important;
}

/* Buttons */
.v-btn,
button {
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 500 !important;
}

.v-btn--contained,
.v-btn.primary {
  background: var(--accent-primary) !important;
  color: white !important;
}

.v-btn--contained:hover,
.v-btn.primary:hover {
  background: var(--accent-hover) !important;
}

.v-btn--outlined {
  border: 1px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
}

/* Link e anchor */
a {
  color: var(--accent-primary) !important;
}

a:hover {
  color: var(--accent-hover) !important;
}

/* Header/Title */
h1, h2, h3, h4, h5, h6 {
  color: var(--accent-primary) !important;
}

/* Tutti i testi in oro */
p, span, div, label, .v-label, .v-messages, .form-label {
  color: var(--accent-primary) !important;
}

/* Nascondi l'icona UserSvg */
#UserSvg {
  display: none !important;
  visibility: hidden !important;
}

/* Alert/Message boxes */
.v-alert,
.message,
.notification {
  border-radius: 8px !important;
  border: 1px solid var(--border-primary) !important;
}

.v-alert--success {
  background: rgba(74, 107, 74, 0.1) !important;
  border-color: var(--success) !important;
  color: var(--success) !important;
}

.v-alert--warning {
  background: rgba(212, 165, 116, 0.1) !important;
  border-color: var(--warning) !important;
  color: var(--warning) !important;
}

.v-alert--error {
  background: rgba(139, 74, 74, 0.1) !important;
  border-color: var(--error) !important;
  color: var(--error) !important;
}

/* Loading states */
.v-progress-circular {
  color: var(--accent-primary) !important;
}

/* Responsive adjustments per sfondo */
@media (max-width: 768px) {
  body {
    /* SEMPRE auto 100% anche su mobile per mantenere height fisso */
    background-size: auto 100% !important;
    background-position: center center !important;
    min-height: 100vh !important;
    height: 100% !important;
  }
  
  .v-card {
    margin: 16px !important;
    border-radius: 8px !important;
  }
}

/* Ulteriore enforcement per schermi molto piccoli */
@media (max-width: 480px) {
  body {
    background-size: auto 100% !important;
    min-height: 100vh !important;
    height: 100% !important;
  }
}

/* Specifici per Authelia (se usa classi custom) */
.authelia-brand,
.brand {
  filter: brightness(0) invert(1) !important;
}

/* Selettori aggressivi per Authelia */
#app,
.v-application,
.v-application .primary,
.v-application .secondary {
  background: transparent !important;
}

/* Form di login specifici */
.login-container,
.auth-container,
.v-card.elevation-3,
div[data-cy="login-form"] {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-primary) !important;
}

/* Input specifici Authelia */
div[data-cy="username-textfield"] input,
div[data-cy="password-textfield"] input,
.v-text-field__slot input {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Button specifici */
div[data-cy="sign-in-button"] .v-btn,
button[type="submit"] {
  background: var(--accent-primary) !important;
  color: white !important;
}

/* Link "Reimposta la password?" e altri link */
a[href*="reset-password"],
a[href*="/reset"],
.reset-password-link,
div[data-cy="reset-password-button"] a,
.v-btn--text,
.v-btn--plain {
  color: var(--accent-primary) !important;
}

a[href*="reset-password"]:hover,
a[href*="/reset"]:hover,
.reset-password-link:hover,
div[data-cy="reset-password-button"] a:hover,
.v-btn--text:hover,
.v-btn--plain:hover {
  color: var(--accent-hover) !important;
}

/* Override per forza maggiore */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--border-primary) var(--bg-secondary) !important;
}

::-webkit-scrollbar {
  width: 8px !important;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--border-primary) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary) !important;
}

div#first-factor-stage {
  align-items: flex-end; /* Change from center to flex-end */
}