/* powerfox/css/style.css
   Aktualisiert: 2025-11-21
   Ziel dieser Version:
   - Ein einziger, einheitlicher Kacheltyp (.card) — weiß mit sichtbarer, aber nicht schwarzen Umrandung
   - Header optisch wie Kachel (aber semantisch erhalten)
   - Alle sichtbaren Bereiche (Picker, Geräteauswahl, Chart-Wrapper, Tabelle, Dropzone) erhalten card-Optik
   - Kacheln haben kleinen Abstand (gap) und berühren sich nicht
   - Spenden-/Feedback-Button ist einzeilig (passt sich der Textlänge an)
   - Keine Änderung an JS-IDs; nur visuelle/strukturierende Regeln in CSS
*/

/* ---------------------
   Design-Token
   --------------------- */
:root{
  --primary: #0b76d1;
  --accent: #47be47;
  --bg: #EAF6EA;
  --surface: #ffffff;
  --text: #0f1720;
  --muted: #6b7280;
  --danger: #ff4d4f;
  --radius: 12px;
  --gap-xs: 6px;
  --gap-s: 12px;
  --gap-m: 16px; /* kleiner Abstand zwischen Kacheln, wie gewünscht */
  --gap-l: 28px;
  --max-width: 1200px;

  /* bewusst etwas sichtbarerer, dunklerer Kanten-Ton (nicht volles Schwarz) */
  --card-border: rgba(15,23,32,0.12);
  --card-border-strong: rgba(15,23,32,0.16);

  --focus-ring: 0 0 0 4px rgba(11,118,209,0.12);
  --shadow: 0 10px 30px rgba(15,23,32,0.06);
}

/* ---------------------
   Reset / Basis
   --------------------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.app{max-width:var(--max-width);margin:40px auto;padding:var(--gap-m);background:transparent}

/* ---------------------
   Single Card (einheitlicher Kacheltyp)
   --------------------- */
.card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:var(--gap-m);
  background:var(--surface);                /* immer weiß */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--card-border);      /* deutlich sichtbare, nicht-schwarze Umrandung */
  color:var(--text);
  text-decoration:none;
  min-height:100px;
  align-items:flex-start;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}

/* klickbare karten (navigation / action) */
.card.card--clickable, .card[href], .card[role="button"], .card button {
  cursor: pointer;
}
.card.card--clickable:hover, .card[href]:hover, .card[role="button"]:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(15,23,32,0.08); border-color: var(--card-border-strong); }
.card.card--clickable:active, .card[href]:active { transform: translateY(-2px); }
.card:focus{ outline:none; box-shadow: var(--focus-ring); border-color: var(--card-border-strong); }

/* accent modifier preserved but subtle (keeps markup compatibility, no full-color fill) */
.card--accent{
  background: var(--surface);
  border:1px solid var(--card-border);
}
.card--accent::before{
  /* optional subtle left accent stripe */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, transparent 72%), transparent 100%);
  pointer-events: none;
  opacity: 0.9;
}

/* ---------------------
   Header: optisch wie Kachel, semantisch erhalten
   --------------------- */
.site-header{
  display:flex;
  align-items:center;
  gap:var(--gap-m);
  padding:var(--gap-s);
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--card-border);
  margin-bottom: var(--gap-m);
}

/* header logo / title */
.site-header .logo{ height:44px; width:auto; display:block; }
.site-header h1{ flex:1; text-align:center; margin:0; font-size:1.2rem; font-weight:700; }

/* ---------------------
   Cards Grid & Abstand
   --------------------- */
.cards{
  display:grid;
  gap:var(--gap-m); /* sorgt dafür dass Kacheln Abstand haben und sich nie berühren */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ---------------------
   Buttons (ein Typ)
   --------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--primary);
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition: filter .08s ease, transform .06s ease;
  white-space:normal;
}
.btn:hover{ filter:brightness(.96); }
.btn:active{ transform:translateY(1px); }
.btn:focus{ outline:none; box-shadow:var(--focus-ring); }

/* Spenden-Button: einzeilig (passt sich Textlänge an) */
.donate-btn{
  white-space:nowrap;
  display:inline-flex;
  padding:10px 14px;
  align-items:center;
  justify-content:center;
}

/* Make small inline secondary buttons look consistent but not primary */
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(0,0,0,0.06);
}

/* ---------------------
   Panel rules for some specific areas (ensures visible areas look like cards even if markup not changed)
   --------------------- */
/* Device selection (keeps inline layout but card-like look) */
.device-selection{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:var(--gap-s);
  background:var(--surface);
  border:1px solid var(--card-border);
  border-radius:10px;
  box-shadow:var(--shadow);
}

/* Chart containers */
.chart-wrapper,
#chart-container,
#csvChartContainer,
#liveChartContainer{
  background:var(--surface);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
}

/* Table container */
#table-container{
  background:var(--surface);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
}

/* Dropzone: keep dashed style inside a card-like area */
#dropZone{
  border:2px dashed #d1d5db;
  padding:14px;
  border-radius:8px;
  background: linear-gradient(180deg,#ffffff,#fbfbfb);
  transition: background .12s, border-color .12s;
  cursor:pointer;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* make the dropzone visually sit inside a card if used alone */
#dropZone.card-like {
  border:1px solid var(--card-border);
  background: var(--surface);
}

/* paypal donate area */
.paypal-donate{ position:fixed; top:14px; right:12px; z-index:1200; }
.paypal-donate form{ display:inline-flex; align-items:center; gap:8px; }

/* ---------------------
   Forms & Controls
   --------------------- */
label{ font-weight:600; display:block; margin-bottom:6px; }
input, select, textarea{ width:100%; padding:10px; border-radius:8px; border:1px solid #e6e9ef; background:#fff; }
input:focus, select:focus, textarea:focus{ outline:none; box-shadow:var(--focus-ring); border-color:var(--primary); }

/* ---------------------
   Charts & Tooltip
   --------------------- */
svg{ width:100%; height:auto; display:block; }
.tooltip{ position:absolute; pointer-events:none; background:rgba(0,0,0,0.82); color:#fff; padding:8px; border-radius:6px; font-size:13px; display:none; z-index:2000; }

/* Chart element colors (kept consistent) */
.bar-main{ fill: var(--primary); }
.bar-compare{ fill: var(--danger); }
/* feed bars: keep yellow fill but add a thin, tiefschwarzer Rand für bessere Lesbarkeit */
.feed-main, .feed-compare{
  fill: #f6e05e;
  stroke: #000;          /* tiefschwarzer Rand */
  stroke-width: 1px;     /* dünn, aber sichtbar */
  stroke-opacity: 1;
  shape-rendering: crispEdges;
  stroke-linejoin: round;
  stroke-linecap: butt;
}

/* ---------------------
   Helpers, responsive tweaks & accessibility
   --------------------- */
.controls{ display:flex; gap:var(--gap-s); flex-wrap:wrap; align-items:center; }
.kv{ font-size:0.95rem; color:var(--muted); }

@media (max-width:720px){
  .site-header{ flex-direction:column; align-items:center; }
  .site-header h1{ text-align:center; font-size:1rem; }
  .app{ margin:16px; padding:16px; }
  .card{ min-height:100px; padding:12px; }
  .cards{ gap:12px; }
}

/* Focus outlines for keyboard users */
button:focus, .card:focus, .picker-add:focus, .picker-remove:focus { outline:none; box-shadow:var(--focus-ring); }

/* ensure consistent gap for all card-like stacks */
.stack { display:flex; gap:var(--gap-s); flex-wrap:wrap; }