/* ====================================================
   IMMICH WEDDING THEME - KUNDEN GALERIE (Umfassend)
   ==================================================== */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500&display=swap");

:root {
  --wedding-bg: #faf8f5; /* Sanftes Creme-Weiß */
  --wedding-card: #ffffff; /* Reines Weiß für Elemente & Boxen */
  --wedding-accent: #b5a382; /* Dezentes Champagner/Gold */
  --wedding-accent-hover: #9c8a6b;
  --wedding-text-dark: #3a3a3a; /* Weiches Dunkelgrau statt Schwarz */
  --wedding-border: #e8e3d8; /* Sehr zarte, warme Rahmen */
}

/* 1. Globale Schriften */
* {
  font-family: "Montserrat", sans-serif !important;
}

/* Auch die spezifischen Tailwind-Titelklassen und h1/h2 mitgeben */
h1,
h2,
h3,
h4,
h5,
h6,
.text-3xl,
.text-2xl,
.text-xl,
.text-lg,
h1.text-primary,
h2.text-primary {
  font-family: "Playfair Display", serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
}

/* 2. Allgemeine Hintergründe & Textfarben */
/* Erfasst Startseite, Sidebar, Menüs, Einstellungs-Hintergrund und Alben-Ansicht */
html.light,
body.bg-light,
#sidebar,
nav#dashboard-navbar,
main,
.bg-light-100,
.bg-gray-200,
.bg-gray-50 {
  background-color: var(--wedding-bg) !important;
  color: var(--wedding-text-dark) !important;
}

/* Globales Überschreiben der grauen und dunklen Textklassen */
.text-dark,
.text-immich-dark-gray,
p.text-sm {
  color: var(--wedding-text-dark) !important;
}

/* 3. Universal "Primary" Color Override (Gold/Champagner) */
/* Wandelt ALLE blauen Texte und Icons in die Akzentfarbe um */
.text-primary,
.text-immich-primary {
  color: var(--wedding-accent) !important;
}

/* Wandelt ALLE blauen Buttons und Badges um */
.bg-primary,
.bg-immich-primary {
  background-color: var(--wedding-accent) !important;
  color: #ffffff !important;
}
.bg-primary:hover,
.bg-immich-primary:hover {
  background-color: var(--wedding-accent-hover) !important;
}

/* Transparente Primary-Hintergründe (z.B. aktives Menü in der Sidebar) */
.bg-primary\/10,
.hover\:bg-immich-primary\/10:hover {
  background-color: rgba(181, 163, 130, 0.15) !important;
}

/* 4. Rahmen (Borders) & Boxen anpassen */
.border-primary,
.border-immich-primary {
  border-color: var(--wedding-accent) !important;
}

/* Einstellungs-Akkordeons (nutzen border-primary/20) */
.border-primary\/20,
.border-primary\/60 {
  border-color: var(--wedding-border) !important;
  background-color: var(--wedding-card) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

/* 5. Suchleisten & Eingabefelder (z.B. in den Einstellungen) */
#main-search-bar,
input[type="text"],
textarea.immich-form-input {
  background-color: var(--wedding-card) !important;
  border: 1px solid var(--wedding-border) !important;
  color: var(--wedding-text-dark) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}
#main-search-bar {
  border-radius: 30px !important;
}

/* 6. Buttons & Icons (Outline & Standard) */
/* Rahmen-Buttons (z.B. "Auf Standard zurücksetzen") */
button.outline-primary {
  border-color: var(--wedding-accent) !important;
  color: var(--wedding-accent) !important;
  background-color: transparent !important;
}
button.outline-primary:hover {
  background-color: rgba(181, 163, 130, 0.1) !important;
}

/* Dunkle Icon-Buttons (Navigationsleiste oben) */
button.outline-dark {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--wedding-text-dark) !important;
}
button.outline-dark:hover {
  background-color: rgba(181, 163, 130, 0.1) !important;
  color: var(--wedding-accent) !important;
}

/* Dunkle Buttons (z.B. "Zurücksetzen" in Einstellungen) */
button.bg-dark {
  background-color: var(--wedding-text-dark) !important;
  color: #ffffff !important;
}

/* Generell rundere Buttons für den eleganten Look */
button {
  border-radius: 30px !important;
}
/* Ausnahme: Die Akkordeons in den Einstellungen sind als Button deklariert, sollen aber flach bleiben */
button.svelte-1wne3ar {
  border-radius: 0 !important;
  background: transparent !important;
}

/* 7. Profilbild Rahmen (oben rechts) */
figure.border-2 {
  border-color: var(--wedding-accent) !important;
}

/* 8. Progress Bar (Speicherplatz-Anzeige in der Sidebar) */
div[role="meter"] > div.bg-primary {
  background-color: var(--wedding-accent) !important;
}

/* Überschreibt den Hintergrund beim Hovern (hover:bg-subtle) */
.hover\:bg-subtle:hover {
  background-color: rgba(
    181,
    163,
    130,
    0.08
  ) !important; /* Sehr zartes, transparentes Gold */
}

/* Überschreibt die Text- und Icon-Farbe beim Hovern (hover:text-primary) */
.hover\:text-primary:hover,
.hover\:text-primary:hover svg,
.hover\:text-primary:hover span {
  color: var(--wedding-accent-hover) !important;
}

/* Der Hintergrund (Schiene) des Schalters im aktiven Zustand */
button[role="switch"][data-state="checked"] .bg-primary-100 {
  background-color: rgba(
    181,
    163,
    130,
    0.3
  ) !important; /* Zartes, transparentes Gold */
}

/* Der eigentliche runde Schalter (Knopf) im aktiven Zustand */
button[role="switch"][data-state="checked"] .bg-primary {
  background-color: var(--wedding-accent) !important;
  box-shadow: 0 2px 5px rgba(181, 163, 130, 0.4) !important; /* Eleganter, leichter Schatten */
}

/* (Optional) Den inaktiven Zustand etwas weicher machen, falls das Immich-Standardgrau zu hart ist */
button[role="switch"][data-state="unchecked"] .bg-gray-200 {
  background-color: var(--wedding-border) !important;
}

/* Hintergrund der Benachrichtigungs-Box */
.bg-primary-50 {
  background-color: var(--wedding-card) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; /* Etwas weicherer, eleganterer Schatten */
}

/* Rahmen der Benachrichtigungs-Box */
.border-primary-100 {
  border-color: var(--wedding-border) !important;
}

button[aria-label="Fotos hinzufügen"] {
  background-color: var(--wedding-accent) !important;
  color: #ffffff !important; /* Weißes Icon für starken Kontrast */
  border: none !important;

  /* Etwas größer machen und einen sanften goldenen Schatten geben */
  transform: scale(1.15) !important;
  box-shadow: 0 4px 12px rgba(181, 163, 130, 0.35) !important;

  transition: all 0.2s ease-in-out !important;
}

/* Hover-Effekt für den Upload-Button */
button[aria-label="Fotos hinzufügen"]:hover {
  background-color: var(--wedding-accent-hover) !important;
  transform: scale(1.2) translateY(-1px) !important; /* Hebt sich beim Hovern leicht an */
  box-shadow: 0 6px 16px rgba(181, 163, 130, 0.45) !important;
}

/* ====================================================
   Eigenes Logo über externe URL laden
   ==================================================== */

img[alt="Immich logo"] {
  /* Lädt das Bild direkt von der angegebenen URL */
  content: url("https://cms.stkatharina.de/assets/f12db6f0-2f89-4b28-974d-705801414d9a?key=system-large-contain&v=2026-07-23T09%3A32%3A59.000Z");

  /* Dimensionen an die Navigationsleiste anpassen */
  height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-top: 4px; /* Rückt das Logo minimal nach unten, falls nötig */
}
@media (max-width: 768px) {
  img[alt="Immich logo"] {
    height: 130px !important; /* Deutlich größer auf dem Handy */
    max-width: none !important; /* Überschreibt die Stauchung durch Immich */
    width: auto !important;
    margin-left: -8px !important; /* Rückt das Logo minimal nach links, um Platz zu sparen */
  }
}