/* AnDa-Knips — schlanke Overrides auf Bootstrap 5.3, mobile-first */

:root {
  /* Markenfarbe = Papyrus-Grundton (muss manuell zu BRAND_COLOR in config.php
     passen, CSS kann PHP-Konstanten nicht direkt lesen). Da der Ton sehr hell ist,
     brauchen Buttons/Navbar auf dieser Fläche dunkle statt weißer Schrift
     (--ink-on-brand), sonst wäre der Text unlesbar. */
  --brand: #ece6d8;
  --brand-dark: #cfc2a0;
  --ink-on-brand: #2b2622;
  /* Etwas dunkler/kräftiger als --brand-dark, damit Umrandungen (z. B. bei
     btn-outline-brand) auf weißen Karten und auf dem Papyrus-Hintergrund
     gleichermaßen sichtbar bleiben (reine --brand/--brand-dark-Töne sind dafür
     zu hell/kontrastarm). */
  --brand-border: #8a7a5c;
  /* Papyrus-Grundton der App (Hintergrund, Bottom-Bar) — identisch mit --brand,
     eigene Variable nur zur besseren Lesbarkeit im Code. */
  --papyrus: #ece6d8;
  --papyrus-light: #f9f6ee;
  --papyrus-dark: #cfc2a0;
}

html, body {
  background: var(--papyrus);
  /* Verhindert Layout-Sprünge bei Handys mit Notch/abgerundeten Ecken (iPhone etc.) */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

body {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  position: relative;
  /* Erzeugt einen eigenen Stacking-Context, damit der z-index:-1 Flaggen-Hintergrund
     unten zuverlässig über die volle Höhe gerendert wird (ohne dies wird er in manchen
     Browsern fälschlich auf einen winzigen Streifen oben geclippt). */
  isolation: isolate;
}

/* Sanfter Papyrus-Verlauf als Hintergrund über der ganzen App: heller Papyrus oben,
   der Grundton in der Mitte, dunkler/erdiger Papyrus unten — kein hartes Streifenmuster,
   sondern ein weicher, foggy Farbverlauf in verschiedenen Helligkeitsstufen. Liegt als
   eigene Ebene HINTER dem Inhalt (position: fixed + z-index: -1) — Karten, Buttons etc.
   bleiben normal deckend lesbar. Größer als der Viewport (inset: -80px) + Blur, damit
   der Rand des Hintergrunds selbst nicht als harte Kante sichtbar wird. */
body::before {
  content: "";
  position: fixed;
  inset: -80px;
  background: linear-gradient(
    to bottom,
    var(--papyrus-light) 0%,
    var(--papyrus) 45%,
    var(--papyrus-dark) 100%
  );
  filter: blur(35px);
  z-index: -1;
  pointer-events: none;
}

/* Große, gut mit dem Daumen tastbare Buttons (min. 48px Touch-Ziel) */
.btn-lg-touch {
  min-height: 56px;
  font-size: 1.05rem;
  font-weight: 600;
}

.btn-brand {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--ink-on-brand);
}
.btn-brand:hover,
.btn-brand:active,
.btn-brand:focus {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--ink-on-brand);
}

.btn-outline-brand {
  background-color: transparent;
  border: 2px solid var(--brand-border);
  color: var(--ink-on-brand);
}
.btn-outline-brand:hover,
.btn-outline-brand:active {
  background-color: var(--brand);
  color: var(--ink-on-brand);
}

.text-brand { color: var(--ink-on-brand); }

/* Datei-Inputs sind unsichtbar, die zugehörigen <label>-Buttons lösen den Klick aus */
input[type="file"] { display: none; }

/* Galerie-Kacheln: quadratisch, gut lesbar auf kleinen Screens */
.photo-tile {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #e7ddd2;
  display: block;
  position: relative;
}
.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview-tile {
  aspect-ratio: 1;
  border-radius: 0.6rem;
  overflow: hidden;
  position: relative;
  background: #e7ddd2;
}
.preview-tile img { width: 100%; height: 100%; object-fit: cover; }
.preview-tile .status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.75rem;
  text-align: center;
}
.preview-tile .status.ok { background: rgba(30, 140, 60, 0.55); }
.preview-tile .status.err { background: rgba(180, 50, 50, 0.75); padding: 4px; }

.delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}

/* Sticky Bottom-Leiste für die wichtigste Aktion (Daumen-Zone auf dem Handy) */
.bottom-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(236, 230, 216, 0.95);
  backdrop-filter: blur(6px);
  border-top: 1px solid #ddd2bd;
  z-index: 1030;
}

.qr-box canvas, .qr-box img {
  background: white;
  padding: 12px;
  border-radius: 12px;
}

#printCard canvas {
  background: white;
  padding: 12px;
  border-radius: 12px;
}

/* Druckansicht (print.php): nur die Karte selbst soll auf Papier landen —
   kein blaues/rotes Hintergrundbild (spart Tinte, sieht auf Papier auch komisch
   aus), keine Navbar/Buttons, keine Schatten/Farbflächen, die beim Drucken
   unnötig Tonner verbrauchen oder schlecht aussehen. */
@media print {
  body::before { display: none !important; }
  .no-print { display: none !important; }
  body { background: #fff !important; padding-bottom: 0 !important; }
  #printCard {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    margin-top: 0 !important;
  }
}

.photo-tile { cursor: pointer; }

/* Like-Button: Herz + Zähler, unten links auf der Foto-Kachel */
.like-btn {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.4;
}
.like-btn .heart {
  color: #fff;
  transition: transform 0.15s ease, color 0.15s ease;
}
.like-btn.liked .heart {
  color: #ff5c7c;
}
.like-btn:active .heart {
  transform: scale(1.3);
}
.like-btn:disabled { opacity: 0.85; }

/* Modal: dunkler Hintergrund, Bild soll möglichst viel Platz einnehmen */
#photoModal .modal-content { background: #000; }
#photoModal .modal-body img { width: auto; max-width: 100%; }