/* ===== Design Tokens ===== */
:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0b1221;
  --muted:#334155;
  --border:#cbd5e1;
  --shadow:0 1px 10px rgba(2,6,23,.06);
  --accent:#111827;
  --th:#f1f5f9;
}

/* ===== Base ===== */
html,body{background:var(--bg)}
body{
  font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  margin:20px; color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1{margin:0 0 .6rem; font-weight:700; letter-spacing:.1px}
h2{margin:0 0 .5rem; font-weight:700}
h3,h4{margin:0 0 .4rem; font-weight:600}
small{color:var(--muted)}

/* ===== Cards ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow);
  padding:16px; margin:16px 0;
}

/* ===== Tabs ===== */
.tabs{display:flex; gap:10px; margin:10px 0 14px}
.tabs button{
  border:1px solid var(--border);
  background:#fff; color:var(--text);
  border-radius:10px; padding:8px 14px; cursor:pointer;
  font-weight:600;
}
.tabs button.active{background:var(--accent); color:#fff; border-color:var(--accent)}
[hidden]{display:none !important}

/* ===== Overview – Value Cards ===== */
.val-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(260px,1fr));
  gap:14px;
}
.val-card{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:14px; box-shadow:var(--shadow);
}
.val-card h4{margin:.1rem 0 .7rem; font-weight:700}
.vals{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px}
.kv{display:contents}
.kv .k{color:var(--muted); font-weight:600}
.kv .v{color:var(--text); text-align:right; font-weight:700; font-size:1.05rem}

/* Responsive Value Cards */
@media (max-width:1100px){
  .val-grid{grid-template-columns:repeat(2,minmax(240px,1fr))}
}
@media (max-width:700px){
  .val-grid{grid-template-columns:1fr}
}

/* ===== Charts / Tiles ===== */
.type-grid{display:grid; grid-template-columns:1fr; gap:16px}
.device-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(320px,1fr));
  gap:14px; margin-top:12px;
}
.device-tile{
  border:1px solid var(--border); border-radius:12px;
  padding:12px; background:#fff; box-shadow:var(--shadow)
}
.device-tile h4{margin:.2rem 0 .6rem; font-size:15px; color:var(--text)}
.plot-wrap{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:10px;
  padding:6px; margin-bottom:10px; background:#fff;
}

/* Plotly sizing help */
.plot-wrap .js-plotly-plot,
.plot-wrap .plotly,
.plot-wrap svg{
  display:block; max-width:100%;
}

@media (max-width:900px){
  .device-grid{grid-template-columns:1fr}
}

/* ===== Tables ===== */
table{border-collapse:collapse; width:100%}
th,td{border:1px solid var(--border); padding:8px 10px; text-align:left; font-size:.95rem}
th{background:var(--th); color:#0f172a; font-weight:700}

/* ===== Badges ===== */
.badge{
  display:inline-block; padding:.15rem .5rem; border-radius:999px;
  font-size:.8rem; font-weight:700; border:1px solid transparent
}
.badge.ok{background:#e1f7e6; color:#065f46; border-color:#a7f3d0}
.badge.stale{background:#fff4e6; color:#92400e; border-color:#fed7aa}
.badge.empty{background:#f1f5f9; color:#334155; border-color:#cbd5e1}
.badge.err{background:#fee2e2; color:#991b1b; border-color:#fecaca}

/* ===== Info Tab (einspaltig) ===== */
.info-grid{
  display:grid;
  grid-template-columns:1fr;   /* <- immer EINSPALTIG */
  gap:16px;
}

/* Monospace helpers */
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  font-size:.92rem
}
code{background:#eef2f6; padding:.1rem .35rem; border:1px solid #dbe3ea; border-radius:6px}
pre{background:#0b1221; color:#e5e7eb; padding:12px; border-radius:10px; overflow:auto}

/* ===== Optional: iframe host helper (falls data.html direkt eingebettet) ===== */
/* .iframe-wrap { position: relative; width: 100%; } */