/* Global styles */
body {
  margin: 0;
  padding: 0;
}

:root {
  --auth-card-max-width: 450px;
  --auth-selection-max-width: 700px;
}

.auth-container {
  background-color: rgb(var(--v-theme-background));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Mobile Layout */
.mobile-auth-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 24px;
}

.mobile-header {
  text-align: center;
  padding: 32px 0;
}

/* Desktop Layout */
.desktop-auth-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.desktop-side-banner {
  flex: 1;
  background: linear-gradient(135deg, rgb(var(--v-theme-primary)) 0%, rgb(var(--v-theme-secondary)) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 48px;
}

.desktop-side-form {
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--v-theme-surface));
  padding: 48px;
}

.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Mobile First: Default styles for mobile */
.auth-card {
  width: 100%;
}

/* Hover effects */
.hover-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(0,0,0,0.1) !important;
  border-color: rgb(var(--v-theme-primary));
}

/* Custom Layout and External Templates */
.custom-layout-wrapper {
  width: 100%;
  height: 100%;
}

.user-template-container {
  width: 100%;
  height: 100%;
}

#felme-auth-form,
#felme-auth-error,
#felme-auth-mfa,
#felme-auth-header,
#felme-auth-footer,
#felme-auth-banner {
  display: block;
}

/* Utilities */
.font-mono {
  font-family: monospace !important;
}

/* ═══════════════════════════════════════════════════════
   DARK MODE – Basis-Anpassungen (Standard-Theme, ohne customer.css)
   Vuetify setzt .v-theme--dark auf das App-Root-Element.
   Alle --v-theme-* Variablen werden von Vuetify automatisch
   umgeschaltet. Hier werden nur Elemente angepasst, die
   hardcodierte Farben verwenden.
═══════════════════════════════════════════════════════ */

.v-theme--dark .glass-effect {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.v-theme--dark .hover-card:hover {
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════
   CUSTOM-DESIGN DARK MODE HOOK
   customer.css kann diesen Block erweitern oder überschreiben.
   Pflicht-Interface: .v-theme--dark muss alle --th-* Variablen
   und die --v-theme-* RGB-Triplets neu definieren.
═══════════════════════════════════════════════════════ */