/* NAK Liedvorschläge – Diagramme (Frontend + Admin)
 * Datenfarbe anpassbar:  .lv-chart { --lv-series-1: #… }
 */
.lv-chart {
	--lv-series-1: #2a78d6;
	--lv-grid: color-mix(in srgb, currentColor 12%, transparent);
	--lv-ink-2: color-mix(in srgb, currentColor 68%, transparent);
	--lv-ink-3: color-mix(in srgb, currentColor 52%, transparent);
	margin: 0 0 2rem;
	padding: 0;
	font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
	:root:where(:not([data-theme="light"])) .lv-chart { --lv-series-1: #3987e5; }
}
:root[data-theme="dark"] .lv-chart { --lv-series-1: #3987e5; }

.lv-chart__cap { display: flex; flex-direction: column; gap: .1rem; margin: 0 0 .9rem; }
.lv-chart__title { font-weight: 600; font-size: 1.05em; }
.lv-chart__sub { font-size: .85em; color: var(--lv-ink-2); }

/* ---- Säulen ---- */
.lv-chart__frame { display: grid; grid-template-columns: auto 1fr; gap: .5rem; height: var(--lv-h, 200px); margin-bottom: 1.8rem; }
.lv-chart__yaxis { position: relative; width: 2.6rem; font-size: .72rem; color: var(--lv-ink-3); }
.lv-chart__yaxis span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.lv-chart__plot { position: relative; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.lv-chart__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--lv-grid); }
.lv-chart__cols { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(var(--lv-n), minmax(0, 1fr)); }
.lv-chart__cols li { position: relative; margin: 0; padding: 0; height: 100%; }
.lv-chart__hit { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; outline: none; text-decoration: none; border-radius: 4px; }
.lv-chart__hit:hover, .lv-chart__hit:focus-visible { background: color-mix(in srgb, currentColor 6%, transparent); }
.lv-chart__hit:focus-visible { box-shadow: 0 0 0 2px var(--lv-series-1); }
.lv-chart__bar { position: relative; display: block; width: min(24px, 72%); min-height: 0; background: var(--lv-series-1); border-radius: 4px 4px 0 0; }
.lv-chart__bar.is-zero { height: 0 !important; }
.lv-chart__peak { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 3px; font-size: .75rem; font-weight: 600; color: inherit; white-space: nowrap; }
.lv-chart__xl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: .35rem; font-size: .72rem; color: var(--lv-ink-3); white-space: nowrap; pointer-events: none; }

/* ---- Waagerechte Balken ---- */
.lv-hb { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lv-hb li { display: grid; grid-template-columns: var(--lv-lw, 11rem) 1fr; gap: .75rem; align-items: center; margin: 0; }
.lv-hb__label { font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-hb__label small { color: var(--lv-ink-3); }
.lv-hb__track { position: relative; display: flex; align-items: center; gap: .4rem; min-height: 1.5rem; padding-right: 2.5rem; outline: none; border-radius: 4px; }
.lv-hb__track:hover, .lv-hb__track:focus-visible { background: color-mix(in srgb, currentColor 5%, transparent); }
.lv-hb__track:focus-visible { box-shadow: 0 0 0 2px var(--lv-series-1); }
.lv-hb__bar { display: block; height: 14px; min-width: 2px; background: var(--lv-series-1); border-radius: 0 4px 4px 0; }
.lv-hb__val { font-size: .85em; font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .lv-hb li { grid-template-columns: minmax(0, 7.5rem) 1fr; } }

/* ---- Tabelle & Tooltip ---- */
.lv-chart__table { margin-top: .4rem; font-size: .85em; }
.lv-chart__table summary { cursor: pointer; color: var(--lv-ink-2); }
.lv-chart__table table { border-collapse: collapse; margin-top: .4rem; min-width: 16rem; }
.lv-chart__table th, .lv-chart__table td { text-align: left; padding: .2rem .8rem .2rem 0; border-bottom: 1px solid var(--lv-grid); }
.lv-chart__table td:last-child, .lv-chart__table th:last-child { text-align: right; }
.lv-tip { position: fixed; z-index: 100000; pointer-events: none; max-width: 18rem; padding: .4rem .6rem; border-radius: 6px; background: #1a1a19; color: #f0efec; font-size: 13px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; transition: opacity .08s; }
.lv-tip.is-on { opacity: 1; }

/* ---- Kacheln (auch im Admin genutzt) ---- */
.lv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 0 0 1.75rem; }
.lv-tile { padding: .9rem 1rem; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 10px; display: flex; flex-direction: column; gap: .1rem; }
.lv-tile__lbl { font-size: .85em; color: color-mix(in srgb, currentColor 62%, transparent); }
.lv-tile__num { font-size: 1.6em; font-weight: 600; line-height: 1.2; }
.lv-tile__hint { font-size: .78em; color: color-mix(in srgb, currentColor 55%, transparent); }

/* Heatmap Wochentag × Stunde – eine Farbe, 5 Helligkeitsstufen */
.lv-heat__grid { display: grid; grid-template-columns: 2rem repeat(24, minmax(0, 1fr)); gap: 2px; margin-top: .6rem; }
.lv-heat__hl { font-size: .65rem; color: var(--lv-chart-muted, #6b7280); text-align: left; line-height: 1.4; }
.lv-heat__dl { font-size: .72rem; color: var(--lv-chart-muted, #6b7280); align-self: center; }
.lv-heat__c { aspect-ratio: 1; min-height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--lv-series-1) 5%, transparent); outline: 1px solid color-mix(in srgb, currentColor 6%, transparent); outline-offset: -1px; position: relative; }
.lv-heat__c.l1, .lv-heat__legend .l1 { background: color-mix(in srgb, var(--lv-series-1) 22%, transparent); }
.lv-heat__c.l2, .lv-heat__legend .l2 { background: color-mix(in srgb, var(--lv-series-1) 40%, transparent); }
.lv-heat__c.l3, .lv-heat__legend .l3 { background: color-mix(in srgb, var(--lv-series-1) 60%, transparent); }
.lv-heat__c.l4, .lv-heat__legend .l4 { background: color-mix(in srgb, var(--lv-series-1) 80%, transparent); }
.lv-heat__c.l5, .lv-heat__legend .l5 { background: var(--lv-series-1); }
.lv-heat__c:hover, .lv-heat__c:focus-visible { outline: 2px solid currentColor; outline-offset: 0; z-index: 1; }
.lv-heat__legend { display: flex; align-items: center; gap: 3px; justify-content: flex-end; margin-top: .5rem; font-size: .7rem; color: var(--lv-chart-muted, #6b7280); }
.lv-heat__legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: color-mix(in srgb, var(--lv-series-1) 5%, transparent); outline: 1px solid color-mix(in srgb, currentColor 8%, transparent); outline-offset: -1px; }
.lv-heat .lv-chart__table table { font-size: .7rem; }