/**
 * RheinMain Events — Vuetify CSS Overrides
 *
 * Load this AFTER Vuetify's own CSS (vuetify.min.css).
 * Based directly on the uploaded override file — deviations from
 * strict Material 3 are intentional and preserved. No font-family
 * is set here at all — Vuetify's own default typeface applies
 * unchanged (project policy: no font loading/overriding in CSS).
 *
 * Colors are set via theme.js / createVuetify(), not here.
 */

/* ================================================================
   1. TYPOGRAFIE
   M3 nutzt keine Vollmajuskel-Buttons, kein erzwungenes Tracking
   ================================================================ */

.v-btn,
.v-chip,
.v-list-item,
.v-tab {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

.v-btn { font-weight: 600 !important; }
.v-chip { font-weight: 500 !important; }

/* ================================================================
   2. EVENT-KARTEN
   M3: 12dp Radius, Tonal Surface, kein Schatten
   ================================================================ */

.event {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
}

/* Alle v-card ebenfalls abrunden */
.v-card {
  border-radius: 12px !important;
  box-shadow: none !important;
}

.v-card--elevated {
  box-shadow: none !important;
  background-color: color-mix(
    in srgb,
    rgb(var(--v-theme-primary)) 8%,
    rgb(var(--v-theme-surface))
  ) !important;
}

.v-card--outlined {
  border: 1px solid rgba(var(--v-theme-outline), 0.5) !important;
}


/* ================================================================
   3. BUTTONS
   M3: Pill-Form (border-radius: 9999px), kein Schatten
   ================================================================ */

.v-btn:not(.v-btn--icon):not(.v-btn--fab) {
  border-radius: 9999px !important;
  box-shadow: none !important;
  min-height: 40px !important;
  padding: 0 24px !important;
}

/* Filled Button: Primary-Farbe */
.v-btn--variant-elevated,
.v-btn--variant-flat {
  box-shadow: none !important;
}

/* Outlined Button: dünner Rand in Outline-Farbe */
.v-btn--variant-outlined {
  border-color: rgba(var(--v-theme-outline), 0.5) !important;
}

/* Hover-State: 8% Primary-Overlay */
.v-btn:hover::before {
  opacity: 0.08 !important;
}

/* Fokus-Ring: sichtbarer als Vuetify-Default, Primary-Farbe */
.v-btn:focus-visible {
  outline: 2px solid rgb(var(--v-theme-primary)) !important;
  outline-offset: 2px !important;
}

/* FAB: 16dp Radius */
.v-btn--fab {
  border-radius: 16px !important;
  box-shadow: none !important;
}

.v-btn--fab:hover {
  box-shadow: none !important;
}

/* ================================================================
   4. TAGS / CHIPS — Lesbarkeit
   Vuetifys Default-Chip (tonal/flat ohne Farbe) ist sehr blass.
   Bewusste Abweichung von "reinem" M3: etwas kräftigerer Kontrast.
   ================================================================ */

.v-chip.v-chip--variant-tonal:not([class*="bg-"]),
.v-chip.v-chip--variant-flat:not([class*="bg-"]) {
  background-color: rgb(var(--v-theme-surface-variant)) !important;
  color: rgb(var(--v-theme-on-surface-variant)) !important;
}

.v-chip.v-chip--variant-outlined:not([class*="text-"]) {
  border: 1px solid rgba(var(--v-theme-outline), 0.7) !important;
  color: rgb(var(--v-theme-on-surface)) !important;
}

/* Hover/Press-Feedback für klickbare Chips (Filter etc.) */
.v-chip--link:hover,
.v-chip--filter:hover {
  background-color: color-mix(
    in srgb,
    rgb(var(--v-theme-on-surface)) 8%,
    transparent
  ) !important;
}

.v-chip--link:active,
.v-chip--filter:active {
  background-color: color-mix(
    in srgb,
    rgb(var(--v-theme-on-surface)) 12%,
    transparent
  ) !important;
}

.v-chip:focus-visible {
  outline: 2px solid rgb(var(--v-theme-primary)) !important;
  outline-offset: 2px !important;
}