/* =========================
   Base
========================= */
* { box-sizing: border-box; }

:root{
  --bg: #F0F0F0;
  --text: #000;

  --card: #f2fffb;
  --muted: rgba(0,0,0,.7);

  --border: #ddd;
  --shadow: 0 1px 3px rgba(0,0,0,.08);

  --ink-1: #2f4f5f;   /* strong text */
  --ink-2: #4a6a7a;   /* normal text in list */
  --ink-k: #3f5f6f;   /* label text */

  --primary: #111;
  --danger: #b00020;

  --radius: 12px;
  --radius-sm: 10px;
}

body{
  margin:0;
  font-family: system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{ color: inherit; }
a:hover{ text-decoration: underline; }

[data-acc].open .chev { transform: rotate(180deg); }
.chev { transition: transform .2s ease; }

/* =========================
   Layout
========================= */
.container{ max-width:1200px; margin:0 auto; padding:16px; }
.narrow{ max-width:520px; }

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.brand h1{
  margin:0;
  font-size:1.8rem;
  line-height:1.1;
  font-weight:700;
}

.subtitle{
  margin-top:4px;
  font-size:.95rem;
  opacity:.7;
  font-weight:600;
}

.top-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width:700px){
  .brand h1{ font-size:1.45rem; }
  .subtitle{ font-size:.85rem; }
  .top-actions{ width:100%; justify-content:flex-start; }
}


/* =========================
   Cards / Alerts
========================= */
.card{
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px;
  margin: 10px 0;
  box-shadow: var(--shadow);
}

.alert{
  background:#fff3cd;
  padding:10px;
  border-radius: var(--radius-sm);
}


/* =========================
   Buttons
========================= */
.btn{
  display:inline-block;
  padding:10px 12px;
  border-radius: var(--radius-sm);
  text-decoration:none;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font: inherit;
  line-height:1.2;
}

.btn.primary{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
  -webkit-text-fill-color:#fff;
}

.btn.danger{
  border-color: var(--danger);
  color: var(--danger);
}

.table .btn{ padding:6px 10px; }

/* iOS/Safari: Button-Text zuverlässig sichtbar */
button.btn,
input.btn,
input[type="submit"].btn{
  -webkit-appearance:none;
  appearance:none;
  -webkit-text-fill-color: inherit;
}


/* =========================
   Forms
========================= */
label{ display:grid; gap:6px; margin:10px 0; }

input, select, textarea{
  width:100%;
  padding:10px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  color:#111;
  font: inherit;
  line-height:1.2;
  box-shadow:none;
}

textarea{ min-height:90px; resize:vertical; }

/* iOS Date/Time Fix + verhindert Zoom (16px) */
input[type="date"],
input[type="time"],
input[type="datetime-local"]{
  -webkit-appearance:none;
  appearance:none;
  background-color:#fff;
  color:#111;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:10px;
  min-height:44px;
  font-size:16px;
  line-height:1.2;
  box-shadow:none;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.6;
  cursor:pointer;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.form-grid .full{ grid-column: 1 / -1; }

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

@media (min-width:800px){
  .form-grid{ grid-template-columns:1fr 1fr; }
}


/* =========================
   Filters
========================= */
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 18px;
}
.filters input{ flex:1 1 260px; }


/* =========================
   Accordion / List
========================= */
.accordion-item{ margin:12px 0; }

.accordion-head{
  width:100%;
  text-align:left;
  border:0;
  background:#fff;
  border-radius: var(--radius);
  padding:12px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
}

.accordion-head strong{ color: var(--ink-1); }
.chev{ opacity:.6; }
.accordion-body{ margin-top:10px; }

/* Übersicht */
.grid4{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  width:100%;
  color: var(--ink-2);
}
.grid4 strong{ color: var(--ink-1); }

.k{
  font-weight:600;
  margin-right:6px;
  display:inline;
  color: var(--ink-k);
  opacity:.85;
}

@media (min-width:800px){
  .grid4{ grid-template-columns: 1.2fr 1fr 1.4fr 1.2fr; gap:12px; }
}


/* =========================
   Tables (Healthchecks / Vet)
========================= */
.table{ display:grid; gap:8px; }

.trow{
  display:grid;
  grid-template-columns:170px 140px 1fr 110px;
  gap:10px;
  padding:8px;
  border-radius: var(--radius-sm);
  background:#EEE;
}

.thead{
  background:#f0f1f3;
  font-weight:600;
}

@media (max-width:700px){
  .trow{ grid-template-columns:1fr; }
  .thead{ display:none; }
  .trow > div{ padding:2px 0; }
}


/* =========================
   Photos
========================= */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.photo-tile{
  background:#fafafa;
  border-radius: var(--radius);
  padding:10px;
  display:grid;
  gap:8px;
}

.photo-tile img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius: var(--radius-sm);
  display:block;
}

@media (max-width:700px){
  .photo-grid{ grid-template-columns:1fr; }
  .photo-tile img{ height:240px; }
}


/* =========================
   Stats
========================= */
.stats-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:800px){
  .stats-grid{ grid-template-columns:1fr 1fr; }
}

.stat-row{
  display:grid;
  grid-template-columns:160px 1fr 48px;
  gap:10px;
  align-items:center;
  padding:6px 0;
}

.stat-label{ opacity:.9; }
.stat-num{ text-align:right; font-weight:700; }

.stat-bar{
  height:10px;
  background:#eef1f4;
  border-radius:999px;
  overflow:hidden;
}
.stat-bar span{
  display:block;
  height:100%;
  background:#2f6f9f;
  border-radius:999px;
}

@media (max-width:700px){
  .stat-row{ grid-template-columns:1fr; }
  .stat-num{ text-align:left; }
}


/* =========================
   Badges
========================= */
.badge{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  background:#eef1f4;
  color: var(--ink-1);
  border:1px solid #dde3ea;
  vertical-align:middle;
}

.badge-pflegestelle{ background:#e9f2ff; border-color:#d4e6ff; color:#1b4b91; }
.badge-voliere{ background:#eaf7ef; border-color:#d3f0df; color:#1f7a3a; }
.badge-freigelassen{ background:#f3f4f6; border-color:#e5e7eb; color:#374151; }
.badge-vermittelt{ background:#fff7e6; border-color:#ffe5b4; color:#7a4a00; }
.badge-verstorben{ background:#fde8ef; border-color:#f8c6d4; color:#7b1b33; }
.badge-unbekannt{ background:#f1f5f9; border-color:#e2e8f0; color:#475569; }
.badge-partner{ background:#fff1f2; border-color:#fecdd3; color:#9f1239; }


/* =========================
   Partner Autocomplete
========================= */
.partner-results{
  margin-top:6px;
  background:#fff;
  border:1px solid #dde3ea;
  border-radius: var(--radius);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
  overflow:hidden;
}

.partner-item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  background:#fff;
  border:0;
  border-bottom:1px solid #eef1f4;
  cursor:pointer;
  font: inherit;
}

.partner-item:last-child{ border-bottom:0; }
.partner-item:hover{ background:#f6f7f9; }


/* =========================
   Toast
========================= */
.toast{
  position:fixed;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  z-index:99999;
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius: var(--radius);
  box-shadow:0 8px 20px rgba(0,0,0,.20);
  max-width:calc(100% - 24px);
  font-size:14px;
  opacity:1;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.hide{
  opacity:0;
  transform:translateX(-50%) translateY(-6px);
}
.toast-success{ background:#1f7a3a; }
.toast-error{ background:#b00020; }
.toast-info{ background:#1b4b91; }


/* =========================
   Lightbox
========================= */
.lightbox{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:100000;
}
.lightbox.open{ display:flex; }

.lightbox-inner{
  max-width:min(960px, 100%);
  max-height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.lightbox-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
  opacity:.9;
  gap:10px;
}

.lightbox-close{
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color:#fff;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

.lightbox-img{
  width:100%;
  max-height:80vh;
  object-fit:contain;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
}

/* Utility */
.muted{ opacity:.7; }

.med-jump{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  padding:2px 6px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
}
.med-jump:hover{ background:#f1f5f9; }
.med-jump:focus{ outline:2px solid #d4e6ff; outline-offset:2px; }

.med-count{
  font-size:11px;
  font-weight:700;
  background:#eef1f4;
  border-radius:999px;
  padding:1px 6px;
  line-height:1.2;
}

.brand-home {
  cursor: pointer;
}

.brand-home:hover h1 {
  text-decoration: underline;
}

.brand-home:focus {
  outline: 2px solid #cbd5e1;
  outline-offset: 4px;
}

.app-footer {
  text-align: center;
  font-size: 12px;
  color: #888;
  padding: 16px 8px;
  margin-top: 32px;
  user-select: none;
}

.sex-icon {
  margin-left: 6px;
  font-size: 0.95em;
  opacity: 0.85;
  cursor: default;
}