/* Nutzungsstatistik (29.09.2026, static/js/metrics.js). Nur Theme-Variablen; die
   Ampelfarben werden aus --ok/--warn/--danger abgemischt und tragen immer ein Textlabel. */
.metrics-facts{margin:0 0 .8rem; padding-left:1.1rem; font-size:.875rem; line-height:1.5;}
.metrics-facts li{margin:.15rem 0;}
.metrics-toggle{margin:.2rem 0 .4rem;}
.metrics-muted{color:var(--ink-muted); font-weight:400;}

.metrics-page .settings-card h2{margin:0 0 .4rem;}
.metrics-controls{display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:flex-end;}
.metrics-controls .field{display:flex; flex-direction:column; gap:.25rem;}
.metrics-controls label{font-size:.82rem; color:var(--ink-muted); font-weight:600;}
.metrics-inline{display:flex; gap:.5rem; align-items:center;}
.metrics-controls select, .metrics-controls input[type="date"]{height:2.4rem;}

.metrics-tiles{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.75rem;}
.metrics-tile{border:1px solid var(--border); border-radius:var(--radius-card); padding:.75rem .85rem; background:var(--surface);
  display:flex; flex-direction:column; gap:.2rem; min-width:0;}
.metrics-tile-label{font-size:.8rem; color:var(--ink-muted); font-weight:600;}
.metrics-tile-value{font-size:1.6rem; line-height:1.15; color:var(--ink);}
.metrics-tile-target{font-size:.8rem; color:var(--ink-muted);}
.metrics-targets{margin:.8rem 0 0; padding-left:1.1rem; font-size:.875rem; line-height:1.6;}

.metrics-table td, .metrics-table th{white-space:nowrap;}
.metrics-table td:first-child{white-space:normal; min-width:9rem;}
.metrics-table small{font-size:.75rem;}
.metrics-badge{display:inline-flex; align-items:center; gap:.35rem; padding:.1rem .55rem; border-radius:var(--radius-pill);
  font-size:.8rem; font-weight:600; color:var(--ink); background:color-mix(in srgb, var(--ink-muted) 16%, transparent);}
.metrics-dot{width:.6rem; height:.6rem; border-radius:50%; background:var(--ink-muted); flex:none;}
.metrics-green{background:color-mix(in srgb, var(--ok) 24%, transparent);}
.metrics-green .metrics-dot{background:var(--ok);}
.metrics-yellow{background:color-mix(in srgb, var(--warn) 26%, transparent);}
.metrics-yellow .metrics-dot{background:var(--warn);}
.metrics-red{background:color-mix(in srgb, var(--danger) 24%, transparent);}
.metrics-red .metrics-dot{background:var(--danger);}

.metrics-summary{cursor:pointer; display:flex; align-items:center; gap:.5rem; list-style:none;
  font-family:'Arvo', Georgia, serif; font-size:1.05rem; font-weight:700; color:var(--ink);}
.metrics-summary::-webkit-details-marker{display:none;}
.metrics-summary::before{content:"▸"; color:var(--ink-muted); font-size:.9em; transition:transform .15s;}
.metrics-details[open] > .metrics-summary::before{transform:rotate(90deg);}
.metrics-details[open] > .metrics-summary{margin-bottom:.6rem;}
@media (prefers-reduced-motion: reduce){ .metrics-summary::before{transition:none;} }
.metrics-cohort-select{height:2.2rem;}

@media (max-width: 760px){
  .metrics-tiles{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .metrics-tile-value{font-size:1.3rem;}
  .metrics-page.settings-grid{grid-template-columns:minmax(0, 1fr);}
}