/* ============================================================
   Carnivora Manager – Dark Theme
   Leitidee: nächtliches Moorbeet trifft Herbarium-Karteikarte.
   Sattes Torf-Schwarzgrün, gedämpftes Fallen-Chartreuse,
   Sonnentau-Rubin für Warnungen, Bernstein-Tau für Akzente.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:            #0a120e;
  --panel:          #101b15;
  --panel-raised:   #17251d;
  --panel-raised-2: #1e2f24;
  --line:           #2a3c30;
  --text:           #e9f1e7;
  --text-muted:     #8fa697;
  --text-faint:     #5d7266;

  --trap:           #a9c94a;   /* Fallen-Chartreuse, gedämpft */
  --trap-dim:       #7d9636;
  --ruby:           #c1495a;   /* Sonnentau-Rubin */
  --amber:          #d9a54c;   /* Bernstein-Tau */
  --sky:            #6fb3b8;   /* kühles Regenwasser-Blau, selten genutzt */
  --lavender:       #9b8cc9;   /* Anstau-Lavendel, fuer Wasserwechsel */

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', monospace;

  --radius: 10px;
  --shadow-soft: 0 10px 30px -12px rgba(0,0,0,.55);
}

*{ box-sizing: border-box; }
html{ color-scheme: dark; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(169,201,74,.06), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(193,73,90,.05), transparent 55%),
    var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--trap); text-decoration:none; }
a:hover{ text-decoration: underline; }

img{ max-width:100%; display:block; }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0 0 .4em; letter-spacing: .2px; }
h1{ font-size: 2rem; }
h2{ font-size: 1.4rem; }
h3{ font-size: 1.1rem; }

.muted{ color: var(--text-muted); }
.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  color: var(--text-faint);
}

/* Fokus sichtbar halten (Barrierefreiheit) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--trap);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- Layout ---------------- */
.app-shell{ display:flex; min-height:100vh; }

.topbar{
  position: sticky; top:0; z-index: 20;
  display:flex; align-items:center; gap:1rem;
  padding: .9rem 1.4rem;
  background: rgba(10,18,14,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand{
  font-family: var(--font-display); font-style: italic; font-size:1.3rem;
  display:flex; align-items:center; gap:.5rem;
}
.brand-icon{ flex-shrink:0; vertical-align:middle; }
.auth-card h1 .brand-icon{ vertical-align:-4px; margin-right:.15rem; }
.topbar nav{ display:flex; gap:1.1rem; margin-left:1rem; flex-wrap:wrap; }
.topbar nav a{ color: var(--text-muted); font-weight:500; font-size:.92rem; }
.topbar nav a.active, .topbar nav a:hover{ color: var(--trap); text-decoration:none; }
.topbar .spacer{ flex:1; }

.container{ max-width: 1280px; margin: 0 auto; padding: 1.6rem 1.4rem 4rem; }

/* ---------------- Buttons & Forms ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family: var(--font-body); font-weight:600; font-size:.88rem;
  padding:.55rem 1rem; border-radius: var(--radius);
  border:1px solid var(--line); background: var(--panel-raised); color: var(--text);
  cursor:pointer; transition: border-color .15s, transform .1s, background .15s;
}
.btn:hover{ border-color: var(--trap-dim); background: var(--panel-raised-2); text-decoration:none; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--trap); border-color: var(--trap); color:#0d1509; }
.btn-primary:hover{ background:#b8dc55; border-color:#b8dc55; }
.btn-danger{ border-color: var(--ruby); color: var(--ruby); background:transparent; }
.btn-danger:hover{ background: rgba(193,73,90,.12); }
.btn-sm{ padding:.35rem .7rem; font-size:.78rem; }
.btn-icon{ padding:.5rem; }

.stack-form{ display:flex; flex-direction:column; gap:.9rem; }
.form-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:.9rem; }
label{ display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; color: var(--text-muted); font-weight:500; }
input, select, textarea{
  font-family: var(--font-body); font-size:.92rem; color: var(--text);
  background: var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:.55rem .7rem;
}
input:focus, select:focus, textarea:focus{ border-color: var(--trap-dim); }
textarea{ resize: vertical; min-height: 90px; font-family: var(--font-body); }
fieldset{ border:1px solid var(--line); border-radius: var(--radius); padding:1rem; }
legend{ padding:0 .5rem; font-family: var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color: var(--text-muted); }

/* ---------------- Alerts ---------------- */
.alert{ padding:.8rem 1rem; border-radius:8px; font-size:.9rem; margin-bottom:1rem; border:1px solid transparent; }
.alert-success{ background: rgba(169,201,74,.1); border-color: rgba(169,201,74,.4); color:#cbe38a; }
.alert-error{ background: rgba(193,73,90,.12); border-color: rgba(193,73,90,.4); color:#e39aa4; }
.alert-info{ background: rgba(111,179,184,.1); border-color: rgba(111,179,184,.35); color:#a9d6d9; }

/* ---------------- Auth page ---------------- */
.auth-page{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.auth-card{
  width: 100%; max-width: 380px; background: var(--panel); border:1px solid var(--line);
  border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-soft);
}
.auth-card h1{ font-size:1.4rem; }

/* ---------------- Filter bar ---------------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1rem; margin-bottom:1.6rem;
}
.filter-bar select, .filter-bar input[type=search]{ min-width: 160px; }
.filter-bar .count{ margin-left:auto; font-family: var(--font-mono); font-size:.78rem; color: var(--text-faint); }

.view-switch{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.view-switch button{
  background: var(--panel-raised); border:none; color: var(--text-muted); cursor:pointer;
  font-size:1rem; line-height:1; padding:.5rem .65rem; border-right:1px solid var(--line);
}
.view-switch button:last-child{ border-right:none; }
.view-switch button.active{ background: var(--trap); color:#0d1509; }
.view-switch button:hover:not(.active){ background: var(--panel-raised-2); color: var(--text); }

/* ---------------- Genus section ---------------- */
.genus-section{ margin-bottom: 2.4rem; }
.genus-heading{
  display:flex; align-items:baseline; gap:.6rem; margin-bottom: .9rem;
  padding-bottom:.5rem; border-bottom: 1px dashed var(--line);
}
.genus-heading .lat{ font-family: var(--font-display); font-style: italic; font-size:1.35rem; color: var(--trap); }
.genus-heading .triv{ color: var(--text-muted); font-size:.92rem; }
.genus-heading .tally{ margin-left:auto; font-family: var(--font-mono); font-size:.78rem; color: var(--text-faint); }

.plant-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:1.1rem;
}

/* ---------------- Listenansicht ---------------- */
#plantSections.view-list .plant-grid{
  display:flex; flex-direction:column; gap:.6rem;
}
#plantSections.view-list .specimen-card{
  flex-direction:row; align-items:center; gap:.8rem;
}
#plantSections.view-list .specimen-card:hover{ transform:none; }
#plantSections.view-list .specimen-photo{
  width:64px; height:64px; aspect-ratio:auto; flex-shrink:0; border-radius:6px; margin:.5rem 0 .5rem .5rem;
}
#plantSections.view-list .specimen-badge{ display:none; }
#plantSections.view-list .specimen-body{ padding:.5rem .9rem .5rem 0; flex-direction:row; align-items:center; flex-wrap:wrap; gap:.3rem 1rem; }
#plantSections.view-list .specimen-body .name{ min-width:140px; }
#plantSections.view-list .specimen-meta{ margin-top:0; }
#plantSections.view-list .genus-heading{ margin-bottom:.5rem; }

/* ---------------- Tabellenansicht (JS-generiert) ---------------- */
#tableViewWrap table td .status-badge{ font-size:.68rem; }
#tableViewWrap table img.tbl-thumb{ width:40px; height:40px; object-fit:cover; border-radius:4px; vertical-align:middle; margin-right:.5rem; background: var(--panel-raised); }

@media (max-width: 720px){
  .plant-grid{ grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap:.6rem; }
  .specimen-body{ padding:.6rem .6rem .7rem; }
  .specimen-body .name{ font-size:.88rem; }
  .specimen-body .botanical{ font-size:.76rem; }
  .specimen-meta{ font-size:.62rem; }
  #plantSections.view-list .specimen-body{ flex-direction:column; align-items:flex-start; gap:.15rem; }
  #plantSections.view-list .specimen-body .name{ min-width:0; }
}

/* ---------------- Specimen card (signature element) ---------------- */
.specimen-card{
  position:relative;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: 4px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, border-color .15s ease;
  display:flex; flex-direction:column;
}
.specimen-card:hover{ transform: translateY(-3px); border-color: var(--trap-dim); }
.specimen-card::before{
  /* Lochung wie bei einer Karteikarte */
  content:""; position:absolute; top:10px; left:10px; width:8px; height:8px;
  border-radius:50%; background: var(--ink); border:1px solid var(--line); z-index:2;
}
.specimen-photo{ aspect-ratio: 4/3; background: var(--panel-raised) center/cover no-repeat; position:relative; }
.specimen-photo .no-photo{ display:flex; align-items:center; justify-content:center; height:100%; color: var(--text-faint); font-size:2rem; }
.specimen-badge{
  position:absolute; top:.5rem; right:.5rem; font-family: var(--font-mono); font-size:.68rem;
  padding:.2rem .5rem; border-radius:20px; backdrop-filter: blur(4px);
  background: rgba(10,18,14,.65); border:1px solid var(--line);
}
.due-ok{ color: var(--trap); }
.due-soon{ color: var(--amber); }
.due-overdue{ color: var(--ruby); }
.due-none{ color: var(--text-faint); }

.specimen-body{ padding: .85rem .9rem 1rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.specimen-body .name{ font-weight:600; font-size:1rem; }
.specimen-body .botanical{ font-family: var(--font-display); font-style:italic; color: var(--text-muted); font-size:.88rem; }
.specimen-meta{
  display:flex; flex-wrap:wrap; gap:.4rem .7rem; margin-top:.4rem;
  font-family: var(--font-mono); font-size:.7rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.04em;
}
.specimen-actions{ margin-top:auto; padding-top:.7rem; display:flex; gap:.4rem; }

/* ---------------- Plant detail page ---------------- */
.plant-header{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-bottom:2rem; }
.plant-header .photo{ width: 260px; height:200px; border-radius: var(--radius); overflow:hidden; background: var(--panel-raised); flex-shrink:0; }
.plant-header .photo img{ width:100%; height:100%; object-fit:cover; }
.passport{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding:1.2rem 1.4rem; flex:1; min-width:280px;
}
.passport dl{ display:grid; grid-template-columns: max-content 1fr; gap:.35rem 1rem; margin:.8rem 0 0; }
.passport dt{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; color: var(--text-faint); align-self:center; }
.passport dd{ margin:0; }

.tabs{ display:flex; gap:.3rem; border-bottom:1px solid var(--line); margin-bottom:1.4rem; flex-wrap:wrap; }
.tabs a{
  padding:.6rem 1rem; color: var(--text-muted); font-weight:500; font-size:.9rem;
  border-bottom: 2px solid transparent; margin-bottom:-1px;
}
.tabs a.active{ color: var(--trap); border-color: var(--trap); }

.timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.timeline li{
  display:flex; gap:.8rem; padding:.7rem .9rem; background: var(--panel); border:1px solid var(--line); border-radius:8px;
  align-items:flex-start;
}
.timeline .tag{
  font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; padding:.2rem .5rem;
  border-radius:20px; border:1px solid var(--line); white-space:nowrap;
}
.tag-giessen{ color: var(--sky); border-color: rgba(111,179,184,.4); }
.tag-duengen{ color: var(--amber); border-color: rgba(217,165,76,.4); }
.tag-schneiden{ color: var(--ruby); border-color: rgba(193,73,90,.4); }
.tag-umtopfen{ color: var(--trap); border-color: rgba(169,201,74,.4); }
.tag-wasserwechsel{ color: var(--lavender); border-color: rgba(155,140,201,.4); }

.photo-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:.7rem; }
.photo-grid figure{ margin:0; background: var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.photo-grid img{ aspect-ratio:1; object-fit:cover; }
.photo-grid figcaption{ padding:.4rem .5rem; font-size:.72rem; color: var(--text-muted); }
.photo-grid figure{ position:relative; }
.photo-grid .photo-delete{
  position:absolute; top:.35rem; right:.35rem; z-index:2;
  background: rgba(10,18,14,.75); color: var(--ruby); border:1px solid var(--ruby);
  border-radius:6px; width:26px; height:26px; line-height:1; font-size:.9rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.photo-grid .photo-delete:hover{ background: var(--ruby); color:#1a0a0c; }
.photo-grid img.lightbox-trigger{ transition: opacity .15s; }
.photo-grid img.lightbox-trigger:hover{ opacity:.85; }

.lightbox-overlay{
  position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  background: rgba(6,10,8,.92); backdrop-filter: blur(4px); padding:2rem;
}
.lightbox-overlay.open{ display:flex; flex-direction:column; }
.lightbox-overlay img{ max-width:min(92vw,1100px); max-height:80vh; border-radius:8px; box-shadow: var(--shadow-soft); margin:0 auto; }
.lightbox-caption{ text-align:center; color: var(--text-muted); font-size:.85rem; margin-top:.8rem; }
.lightbox-close{
  position:absolute; top:1.2rem; right:1.6rem; background:none; border:none; color: var(--text);
  font-size:2rem; line-height:1; cursor:pointer;
}
.lightbox-close:hover{ color: var(--ruby); }

/* ---------------- Lexikon ---------------- */
.lexikon-entry{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding:1.2rem 1.4rem; margin-bottom:1.2rem;
}
.lexikon-entry h3{ font-family: var(--font-display); font-style:italic; color: var(--trap); }
.lexikon-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:.9rem 1.4rem; margin-top:.8rem; }
.lexikon-grid .field-label{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; color: var(--text-faint); margin-bottom:.15rem; }

/* ---------------- Calendar ---------------- */
.cal-toolbar{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:.4rem; }
.cal-day{
  min-height:92px; background: var(--panel); border:1px solid var(--line); border-radius:8px; padding:.4rem;
  font-size:.75rem; display:flex; flex-direction:column; gap:.25rem;
}
.cal-day .num{ font-family: var(--font-mono); color: var(--text-faint); }
.cal-day.today{ border-color: var(--trap); }
.cal-day .chip{
  font-size:.66rem; padding:.1rem .4rem; border-radius:10px; background: var(--panel-raised-2);
  border:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal-weekday{ font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; color: var(--text-faint); text-align:center; }

/* ---------------- Weather widget ---------------- */
.weather-widget{ margin-top: .4rem; }
.weather-strip{ display:flex; gap:.8rem; overflow-x:auto; padding-bottom:.3rem; }
.weather-day{
  min-width:100px; background: var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:.7rem; text-align:center; flex-shrink:0;
}
.weather-day .d{ font-family: var(--font-mono); font-size:.68rem; color: var(--text-faint); text-transform:uppercase; }
.weather-day .t{ font-size:1.1rem; font-weight:600; margin:.3rem 0; }
.weather-day .r{ font-size:.75rem; color: var(--sky); }
.weather-note{ font-size:.8rem; color: var(--amber); margin-top:.6rem; }

@media (min-width: 721px){
  .weather-widget{ margin-top: 1.1rem; }
}

/* "Jetzt"-Kachel: doppelt so breit wie eine Tages-Kachel, Details rechts statt darunter */
.weather-current{
  min-width:246px; text-align:left; border-color: var(--trap-dim);
  background: linear-gradient(160deg, rgba(169,201,74,.10), var(--panel) 60%);
}
.weather-current .wc-body{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.3rem; }
.weather-current .wc-main{ display:flex; flex-direction:column; }
.weather-current .cond{ font-size:.85rem; }
.weather-current .t.big{
  font-family: var(--font-mono); font-size:1.9rem; font-weight:500;
  color: var(--trap); margin:.1rem 0 0; line-height:1;
}
.weather-current .wc-side{
  display:flex; flex-direction:column; gap:.3rem; font-size:.72rem; color: var(--text-muted);
  text-align:right; flex-shrink:0;
}

/* ---------------- Tables (Backend) ---------------- */
table{ width:100%; border-collapse: collapse; background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
th, td{ padding:.6rem .8rem; border-bottom:1px solid var(--line); text-align:left; font-size:.88rem; }
th{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; color: var(--text-faint); background: var(--panel-raised); }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background: rgba(255,255,255,.02); }

.dash-stats{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding:1rem 1.2rem; }
.stat-card .num{ font-family: var(--font-display); font-size:2rem; color: var(--trap); }
.stat-card .lbl{ font-size:.78rem; color: var(--text-muted); }

.empty-state{
  text-align:center; padding:3.5rem 1rem; color: var(--text-muted);
  border:1px dashed var(--line); border-radius: var(--radius);
}
.empty-state h3{ color: var(--text); }

.badge{ display:inline-block; font-family: var(--font-mono); font-size:.68rem; padding:.15rem .5rem; border-radius:20px; border:1px solid var(--line); }

footer.site-footer{ text-align:center; padding:2rem; color: var(--text-faint); font-size:.78rem; }

@media (max-width: 720px){
  .topbar{ flex-wrap:wrap; }
  .plant-header{ flex-direction:column; }
  .plant-header .photo{ width:100%; }
}