/* Flohmarkt App – Custom Styles */

/* ─── Farbpalette: abgeleitet vom Flyer ────────────────────────────────────
   Flyer-Farben:  tiefes Teal (#155a4a) als Haupt-Hintergrund,
                  warmes Goldgelb (#e8920f) als Akzentfarbe.

   Light-Modus:   Primär = Teal, Seite = warmes Creme (#faf6ef),
                  sodass der Flyer (grüner Hintergrund) klar sichtbar bleibt.

   Dark-Modus:    Seite = sehr dunkles Teal (#0c1a16) – deutlich dunkler
                  als der Flyer-Teal, damit der Flyer nicht darin verschwimmt.
                  Primär = helleres Teal (#2cb89d) für ausreichend Kontrast.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --fm-teal:       #155a4a;
  --fm-teal-dark:  #0e3f33;
  --fm-teal-light: #1d7a65;
  --fm-gold:       #e8920f;
  --fm-cream:      #faf6ef;
}

/* ── Light-Modus ────────────────────────────────────────────────────────── */
[data-bs-theme="light"],
:root {
  --bs-primary:              #155a4a;
  --bs-primary-rgb:          21, 90, 74;
  --bs-link-color:           #155a4a;
  --bs-link-color-rgb:       21, 90, 74;
  --bs-link-hover-color:     #0e3f33;
  --bs-link-hover-color-rgb: 14, 63, 51;
  --bs-body-bg:              #faf6ef;
  --bs-body-bg-rgb:          250, 246, 239;
  --bs-tertiary-bg:          #f0ebe0;
  --bs-tertiary-bg-rgb:      240, 235, 224;
}

/* ── Dark-Modus ─────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  /* Sehr dunkles Teal – klar vom Flyer-Teal (#155a4a) zu unterscheiden */
  --bs-body-bg:              #0c1a16;
  --bs-body-bg-rgb:          12, 26, 22;
  --bs-body-color:           #d8ece7;
  --bs-body-color-rgb:       216, 236, 231;
  --bs-secondary-color:      rgba(216, 236, 231, .55);
  --bs-secondary-bg:         #142820;
  --bs-secondary-bg-rgb:     20, 40, 32;
  --bs-tertiary-bg:          #1c352b;
  --bs-tertiary-bg-rgb:      28, 53, 43;
  --bs-border-color:         #2a4038;
  --bs-border-color-translucent: rgba(255, 255, 255, .12);

  /* Helleres Teal für Primary – guter Kontrast auf sehr dunklem Hintergrund */
  --bs-primary:              #2cb89d;
  --bs-primary-rgb:          44, 184, 157;
  --bs-link-color:           #2cb89d;
  --bs-link-color-rgb:       44, 184, 157;
  --bs-link-hover-color:     #4ccbb0;
  --bs-link-hover-color-rgb: 76, 203, 176;
}

/* ── btn-primary ─────────────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-color:                 #fff;
  --bs-btn-bg:                    #155a4a;
  --bs-btn-border-color:          #155a4a;
  --bs-btn-hover-color:           #fff;
  --bs-btn-hover-bg:              #0e3f33;
  --bs-btn-hover-border-color:    #0e3f33;
  --bs-btn-focus-shadow-rgb:      21, 90, 74;
  --bs-btn-active-color:          #fff;
  --bs-btn-active-bg:             #0e3f33;
  --bs-btn-active-border-color:   #0c3830;
  --bs-btn-disabled-bg:           #155a4a;
  --bs-btn-disabled-border-color: #155a4a;
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color:               #fff;
  --bs-btn-bg:                  #2cb89d;
  --bs-btn-border-color:        #2cb89d;
  --bs-btn-hover-bg:            #25a48c;
  --bs-btn-hover-border-color:  #25a48c;
  --bs-btn-active-bg:           #25a48c;
  --bs-btn-focus-shadow-rgb:    44, 184, 157;
}

/* ── btn-outline-primary ────────────────────────────────────────────────── */
.btn-outline-primary {
  --bs-btn-color:              #155a4a;
  --bs-btn-border-color:       #155a4a;
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           #155a4a;
  --bs-btn-hover-border-color: #155a4a;
  --bs-btn-focus-shadow-rgb:   21, 90, 74;
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          #155a4a;
  --bs-btn-active-border-color:#155a4a;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color:              #2cb89d;
  --bs-btn-border-color:       #2cb89d;
  --bs-btn-hover-color:        #0c1a16;
  --bs-btn-hover-bg:           #2cb89d;
  --bs-btn-hover-border-color: #2cb89d;
  --bs-btn-active-color:       #0c1a16;
  --bs-btn-active-bg:          #2cb89d;
}

/* ── bg-primary / text-primary / border-primary ─────────────────────────── */
.bg-primary     { background-color: #155a4a !important; }
.text-primary   { color: #155a4a !important; }
.border-primary { border-color: #155a4a !important; }

[data-bs-theme="dark"] .bg-primary     { background-color: #1a4a3d !important; }
[data-bs-theme="dark"] .text-primary   { color: #2cb89d !important; }
[data-bs-theme="dark"] .border-primary { border-color: #2cb89d !important; }

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar.bg-primary {
  background-color: #155a4a !important;
}

[data-bs-theme="dark"] .navbar.bg-primary {
  background-color: #0e2e25 !important;
}

/* ── Flyer-Bild: im Dark-Modus deutlich vom Hintergrund abheben ─────────── */
[data-bs-theme="dark"] .flyer-img {
  box-shadow: 0 6px 28px rgba(0, 0, 0, .65),
              0 0 0 3px rgba(255, 255, 255, .12) !important;
}

/* ─── Sonstige App-Stile ────────────────────────────────────────────────── */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

.footer { font-size: 0.8rem; }

.card { border-radius: 0.5rem; }

.table th {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color);
}

.form-label {
  font-weight: 500;
  font-size: 0.9rem;
}

@media print {
  .navbar, .footer, .btn, .alert { display: none !important; }
  main { padding: 0 !important; }
}