/*
 * Mieterportal – Home-Tile Visualisation widgets (Click-Dummy)
 * Built on the tokens from mieterportal-prototype.css. Colours use CSS vars so
 * a dark skin (V9) can override --mp-highlight / --mp-grid-color / etc.
 */

:root {
  --mp-viz-track: #e8efec;
  --mp-viz-warm: var(--mp-yellow, #eea54e);
  --mp-viz-warm-soft: rgba(238, 165, 78, 0.16);
}

/* Ensure data-show/data-hide (which set the `hidden` attribute) win over the
 * flex display of viz tiles/option cards (UA [hidden] rule is otherwise
 * overridden by author `display:flex`). */
[hidden] { display: none !important; }

/* Generic viz slot */
.mp-viz { width: 100%; }

/* Home-tile wrapper (used by the assembled home variants) */
.mp-viz-tile { display: flex; flex-direction: column; gap: 12px; min-height: 168px; }
.mp-viz-tile__head { display: flex; align-items: center; gap: 8px; color: var(--mp-muted); font-size: 0.8125rem; font-weight: 600; }
.mp-viz-tile__head .material-icons { font-size: 18px; color: var(--mp-green, #244941); }
.mp-viz-tile__body { flex: 1; display: flex; align-items: center; }
.mp-viz-tile__body > .mp-viz { width: 100%; }

/* --- Ring / donut --- */
.mp-viz-ring { position: relative; width: 108px; height: 108px; margin: 2px auto 0; }
.mp-viz-ring svg { width: 100%; height: 100%; display: block; }
.mp-viz-ring__track { fill: none; stroke: var(--mp-viz-track); stroke-width: 9; }
.mp-viz-ring__arc {
  fill: none; stroke: var(--mp-highlight, #1eb97a); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-viz-ring__arc--warm { stroke: var(--mp-viz-warm); }
.mp-viz-ring__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.mp-viz-ring__top { font-size: 1.15rem; font-weight: 700; line-height: 1.1; color: var(--mp-text, #17241f); }
.mp-viz-ring__sub { font-size: 0.68rem; color: var(--mp-muted, #5b6b66); margin-top: 2px; }

/* --- Half gauge --- */
.mp-viz-gauge { position: relative; width: 132px; margin: 6px auto 0; }
.mp-viz-gauge svg { width: 100%; height: auto; display: block; overflow: visible; }
.mp-viz-gauge__track { fill: none; stroke: var(--mp-viz-track); stroke-width: 9; stroke-linecap: round; }
.mp-viz-gauge__arc {
  fill: none; stroke: var(--mp-highlight, #1eb97a); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dasharray 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-viz-gauge__center { text-align: center; margin-top: -8px; }
.mp-viz-gauge__top { display: block; font-size: 1.15rem; font-weight: 700; color: var(--mp-text, #17241f); }
.mp-viz-gauge__sub { display: block; font-size: 0.7rem; color: var(--mp-muted, #5b6b66); }

/* --- Split bar (PV | grid) --- */
.mp-viz-split__value { font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; }
.mp-viz-split__bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--mp-viz-track); }
.mp-viz-split__pv { background: var(--mp-highlight, #1eb97a); transition: width 0.6s ease; }
.mp-viz-split__grid { background: var(--mp-grid-color, #cbd5e1); transition: width 0.6s ease; }
.mp-viz-split__legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.72rem; color: var(--mp-muted, #5b6b66); }
.mp-viz-split__legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: middle; margin-right: 3px; }
.mp-viz-split__legend .is-pv { background: var(--mp-highlight, #1eb97a); }
.mp-viz-split__legend .is-grid { background: var(--mp-grid-color, #cbd5e1); }

/* --- Sparkline / area --- */
.mp-viz-spark__value { font-size: 1.35rem; font-weight: 700; }
.mp-viz-spark svg { width: 100%; height: 54px; display: block; margin: 6px 0 2px; }
.mp-viz-spark__area { fill: var(--mp-highlight-10, rgba(30, 185, 122, 0.1)); stroke: none; }
.mp-viz-spark__line { fill: none; stroke: var(--mp-highlight, #1eb97a); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mp-viz-spark--warm .mp-viz-spark__area { fill: var(--mp-viz-warm-soft); }
.mp-viz-spark--warm .mp-viz-spark__line { stroke: var(--mp-viz-warm); }
.mp-viz-spark__cap { font-size: 0.72rem; color: var(--mp-muted, #5b6b66); }

/* --- Battery segments --- */
.mp-viz-batt__value { font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; }
.mp-viz-batt__cells { display: flex; gap: 4px; }
.mp-viz-batt__cell { flex: 1; height: 22px; border-radius: 4px; background: var(--mp-viz-track); transition: background 0.3s ease; }
.mp-viz-batt__cell.is-on { background: var(--mp-highlight, #1eb97a); }
.mp-viz-batt__cap { font-size: 0.72rem; color: var(--mp-muted, #5b6b66); margin-top: 8px; }

/* --- Trend bars --- */
.mp-viz-trend__value { font-size: 1.35rem; font-weight: 700; }
.mp-viz-trend svg { width: 100%; height: 54px; display: block; margin: 6px 0 2px; }
.mp-viz-trend__bar { fill: var(--mp-highlight-20, rgba(30, 185, 122, 0.2)); }
.mp-viz-trend__bar.is-last { fill: var(--mp-highlight, #1eb97a); }
.mp-viz-trend--warm .mp-viz-trend__bar { fill: var(--mp-viz-warm-soft); }
.mp-viz-trend--warm .mp-viz-trend__bar.is-last { fill: var(--mp-viz-warm); }
.mp-viz-trend__cap { font-size: 0.72rem; color: var(--mp-muted, #5b6b66); }

/* --- Delta --- */
.mp-viz-delta__value { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.01em; }
.mp-viz-delta__chip {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  padding: 4px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
}
.mp-viz-delta__chip .material-icons { font-size: 17px; }
.mp-viz-delta__chip.is-up { background: var(--mp-highlight-10, rgba(30, 185, 122, 0.1)); color: #0d7a52; }
.mp-viz-delta__chip.is-down { background: rgba(239, 68, 68, 0.1); color: #b91c1c; }

/* --- Pictographs (coins, trees, leaves) --- */
.mp-viz-pict__value { font-size: 1.35rem; font-weight: 700; margin-bottom: 8px; }
.mp-viz-pict__row { display: flex; gap: 4px; }
.mp-viz-pict__row--wrap { flex-wrap: wrap; }
.mp-viz-pict__icon { font-size: 24px; color: var(--mp-viz-track); transition: color 0.3s ease; }
.mp-viz-pict__icon.is-on { color: var(--mp-highlight, #1eb97a); }
.mp-viz-pict--warm .mp-viz-pict__icon.is-on { color: var(--mp-viz-warm); }
.mp-viz-pict__cap { font-size: 0.72rem; color: var(--mp-muted, #5b6b66); margin-top: 8px; }

/* --- Period bar --- */
.mp-viz-period__value { font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; }
.mp-viz-period__bar { height: 10px; border-radius: 999px; background: var(--mp-viz-track); overflow: hidden; }
.mp-viz-period__bar span { display: block; height: 100%; border-radius: 999px; background: var(--mp-highlight, #1eb97a); transition: width 0.6s ease; }
.mp-viz-period__cap { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.72rem; color: var(--mp-muted, #5b6b66); }

/* --- Calendar chip --- */
.mp-viz-cal { display: flex; align-items: center; gap: 14px; }
.mp-viz-cal__chip {
  width: 56px; height: 60px; border-radius: 14px; background: var(--mp-highlight-10, rgba(30, 185, 122, 0.1));
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
}
.mp-viz-cal__day { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--mp-green, #244941); }
.mp-viz-cal__mon { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--mp-highlight, #1eb97a); }
.mp-viz-cal__value { font-size: 1.35rem; font-weight: 700; }
.mp-viz-cal__cap { font-size: 0.75rem; color: var(--mp-muted, #5b6b66); }

/* --- Mini timeline --- */
.mp-viz-tl__value { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
.mp-viz-tl__track { display: flex; align-items: center; gap: 6px; }
.mp-viz-tl__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.mp-viz-tl__dot.is-done { background: var(--mp-highlight, #1eb97a); }
.mp-viz-tl__dot.is-next { background: #fff; border: 2px solid var(--mp-highlight, #1eb97a); }
.mp-viz-tl__line { flex: 1; height: 4px; border-radius: 999px; background: var(--mp-viz-track); overflow: hidden; }
.mp-viz-tl__line span { display: block; height: 100%; background: var(--mp-highlight, #1eb97a); }
.mp-viz-tl__cap { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.72rem; color: var(--mp-muted, #5b6b66); }

/* --- Equivalent (comparison) --- */
.mp-viz-equiv { display: flex; align-items: center; gap: 14px; }
.mp-viz-equiv__icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-highlight-10, rgba(30, 185, 122, 0.1)); color: var(--mp-green, #244941);
}
.mp-viz-equiv__value { font-size: 1.35rem; font-weight: 700; }
.mp-viz-equiv__cap { font-size: 0.75rem; color: var(--mp-muted, #5b6b66); }

/* --- Empty state --- */
.mp-viz-empty {
  display: flex; align-items: center; gap: 8px; padding: 10px 0;
  font-size: 0.8rem; color: var(--mp-faint, #93a29d);
}
.mp-viz-empty .material-icons { font-size: 18px; }