:root{--green:#2e7d32;--green2:#1b5e20;--bg:#f6faf7;--card:#fff;--txt:#1f2a21;--muted:#6b7d70;--accent:#ff9800;--r:14px;--sh:0 8px 20px rgba(0,0,0,.06)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.45 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif}
.app-header{background:linear-gradient(90deg,var(--green),var(--green2));color:#fff;padding:10px 16px;position:sticky;top:0;z-index:10}
.header-actions{display:flex;gap:8px;align-items:center}
.btn{border:0;border-radius:10px;background:#fff;color:var(--green2);padding:8px 12px;cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center}
.btn.primary{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.35)}.btn.accent{background:linear-gradient(90deg,var(--accent),#ffb74d);color:#fff}
.page{padding:18px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px 0}
.input,select,textarea{background:#fff;border:1px solid #e3e8e5;border-radius:10px;padding:8px 10px;min-width:180px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);display:flex;flex-direction:column}
.card-body{padding:14px;display:flex;flex-direction:column;gap:8px}
.card-title{font-weight:800}.muted{color:var(--muted)}.spacer{flex:1}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#f1f4f2}
.list{display:flex;flex-direction:column;gap:8px}.list-item{display:flex;justify-content:space-between;border-bottom:1px dashed #e6eee9;padding:6px 0}
.pill{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;background:#eef6f0;color:#1b5e20;font-weight:700}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.row>.card{grid-column:span 6}
@media(max-width:900px){.row>.card{grid-column:span 12}}
.drop{position:relative;border:2px dashed #cfe6d3;border-radius:12px;padding:10px;text-align:center;background:#fbfdfa}
.drop.dragover{background:#eefaf0;border-color:#8bc34a}
.badge{display:inline-block;background:#e8f5e9;color:#2e7d32;border-radius:999px;padding:4px 8px;font-weight:700}
.small{font-size:.9em}
.chart-wrap{height:260px}
.footer-note{color:var(--muted);font-size:.9em;margin-top:8px}
.modal-actions{display:flex;gap:8px;align-items:center}


/* Einheitliche Bilddarstellung */
.thumb-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  background: #f5f5f5;
}

.thumb-wrap img.thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.app-footer {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: #666;
  border-top: 1px solid #ddd;
  background: #fafafa;
}
.app-footer nav a {
  margin: 0 6px;
  color: #007744;
  text-decoration: none;
}
.app-footer nav a:hover {
  text-decoration: underline;
}


/* Einheitliche Pflanzendarstellung für Thumbnail & Detail */
.plant-thumbnail,
.plant-detail {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}


/* Einheitliche Bildgröße auch im Bearbeiten-Dialog */
#image-preview {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

/* === Dashboard Design Enhancements === */

/* Karten moderner gestalten */
.card {
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  background: #fff;
  padding: 1rem;
  flex: 1;
  transition: transform 0.15s ease;
}
.card:hover {
  transform: translateY(-3px);
}

/* KPI Pills farblich differenzieren */
.pill {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: bold;
}
#kpi-total { background: #e3f9e5; color: #2a7a2a; }
#kpi-due   { background: #e5f0ff; color: #2a4d9a; }
#kpi-cats  { background: #fff3e5; color: #b55b00; }
#badges .badge { margin: 0.25rem 0; padding: 0.5rem; border-left: 4px solid gold; background:#fffef5; }

/* Wetterbereich */
#weather .list-item {
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}
#weather .list-item:hover {
  background: #f9f9f9;
}
#kpi-rain { background:#e6f7ff; color:#005073; }
#kpi-cold { background:#f0f5ff; color:#003366; }
#kpi-snow { background:#f9f9ff; color:#333366; }

/* Charts Container */
.chart-container {
  padding: 1rem;
  border-radius: 0.75rem;
  background: #fafafa;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
  margin-bottom: 1rem;
}
.chart-container h2 {
  margin-top: 0;
  font-size: 1rem;
  color: #666;
}


/* Pflanzenkarten Status und Aktionen */
.plant-card p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.plant-card .actions button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}
.plant-card .actions button:hover {
  transform: scale(1.2);
}


/* ==== Patch: graceful layout after removing Wetter & Preis-Ranking ==== */
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 320px; }
.card .card-body { display: flex; flex-direction: column; }