{% extends 'base.html' %}
{% block title %}Filament Metrik Dashboard | Filament Manager{% endblock %}
{% block body_class %}page-filament-stats{% endblock %}
{% block page_title %}Filament Metrik Dashboard{% endblock %}
{% block page_subtitle %}Bestand, Verbrauch und Bewegungen als visuelles Reporting Cockpit mit frei anpassbaren Metro-Kacheln.{% endblock %}
{% block page_toolbar %}
<a class="sci-btn subtle small" href="{{ url_for('web.dashboard') }}"><iconify-icon icon="mdi:view-dashboard-outline" aria-hidden="true"></iconify-icon> Dashboard</a>
<a class="sci-btn subtle small" href="{{ url_for('web.spools') }}"><iconify-icon icon="mdi:format-list-bulleted" aria-hidden="true"></iconify-icon> Spulen</a>
<a class="sci-btn subtle small" href="{{ url_for('web.settings') }}#settings-reports"><iconify-icon icon="mdi:chart-box-outline" aria-hidden="true"></iconify-icon> Report Einstellungen</a>
{% endblock %}
{% block head_extra %}
<style>
  .filament-metrics-shell {
    display: grid;
    gap: 1rem;
    color: var(--text);
    --hero-edge: #5f89c4;
    --hero-copy: #163150;
    --hero-muted: #5f7390;
    --hero-bg: radial-gradient(140% 170% at 0% 0%, #e3efff 0%, #f5f9ff 50%, #f5f0ff 100%);
    --hero-main-bg: linear-gradient(165deg, #f9fcff 0%, #edf4ff 100%);
    --hero-score-bg: linear-gradient(180deg, #fdfdff 0%, #f2f7ff 58%, #f6f6ff 100%);
    --hero-core-bg: radial-gradient(circle at 40% 20%, #ffffff 0%, #eff6ff 68%, #eaf1ff 100%);
    --controls-bg: linear-gradient(135deg, #f7fbff 0%, #edf4ff 60%, #f4efff 100%);
    --controls-inner-bg: linear-gradient(165deg, #f7fbff 0%, #edf4ff 100%);
    --panel-bg: linear-gradient(180deg, #ffffff 0%, #f6f9ff 62%, #f8f7ff 100%);
    --panel-alt-bg: linear-gradient(165deg, #f8fbff 0%, #eef4ff 100%);
    --popover-bg: linear-gradient(165deg, #f8fbff 0%, #eef4ff 100%);
    --input-bg: #ffffff;
    --overlay-bg: rgba(13, 24, 40, .24);
    --stroke-soft: color-mix(in oklab, var(--hero-edge) 28%, #c8d8ef 72%);
    --stroke-strong: color-mix(in oklab, var(--hero-edge) 42%, #c3d3ea 58%);
    --tile-shadow: 0 8px 22px rgba(28, 57, 92, .11);
    --hero-shadow: 0 14px 28px rgba(36, 60, 98, .14);
    --tile-text-strong: #1e3553;
    --tile-text-soft: #5f7390;
    --widget-line-bg: linear-gradient(180deg, rgba(95,178,255,.15), rgba(95,178,255,.03));
    --widget-pulse-bg: linear-gradient(180deg, rgba(86,241,213,.14), rgba(86,241,213,.04));
    --widget-donut-hole-bg: linear-gradient(165deg, #f8fbff 0%, #eef4ff 100%);
  }

  html[data-theme="dark"] .filament-metrics-shell {
    --hero-edge: #1f4f94;
    --hero-copy: #dce8ff;
    --hero-muted: #8ea3c8;
    --hero-bg: radial-gradient(120% 160% at 0% 0%, #163d78 0%, #0a1226 46%, #23113b 100%);
    --hero-main-bg: linear-gradient(165deg, #09152c 0%, #070f22 100%);
    --hero-score-bg: linear-gradient(180deg, #07112a 0%, #090f24 58%, #0d0b20 100%);
    --hero-core-bg: radial-gradient(circle at 40% 20%, #111d37 0%, #0a1226 68%, #080d1c 100%);
    --controls-bg: linear-gradient(135deg, #0c152d 0%, #10142a 60%, #17112d 100%);
    --controls-inner-bg: linear-gradient(165deg, #0b1428 0%, #0f1326 100%);
    --panel-bg: linear-gradient(180deg, #0a132a 0%, #0a1123 62%, #0f1020 100%);
    --panel-alt-bg: linear-gradient(165deg, #0c1730 0%, #0d1225 100%);
    --popover-bg: linear-gradient(165deg, #0b152c 0%, #10162b 100%);
    --input-bg: color-mix(in oklab, var(--panel, #111b2f) 94%, #000 6%);
    --overlay-bg: rgba(4, 8, 16, .74);
    --stroke-soft: color-mix(in oklab, var(--hero-edge) 33%, #1e2f49 67%);
    --stroke-strong: color-mix(in oklab, var(--hero-edge) 45%, #22324d 55%);
    --tile-shadow: 0 12px 24px rgba(2, 8, 22, .35);
    --hero-shadow: 0 16px 34px rgba(0, 8, 24, .28);
    --tile-text-strong: #dce8ff;
    --tile-text-soft: #9db4d7;
    --widget-line-bg: linear-gradient(180deg, rgba(95,178,255,.08), rgba(95,178,255,.01));
    --widget-pulse-bg: linear-gradient(180deg, rgba(86,241,213,.08), rgba(86,241,213,.015));
    --widget-donut-hole-bg: linear-gradient(165deg, #0e1a32 0%, #13172c 100%);
  }

  .filament-hero {
    position: relative;
    top: auto;
    z-index: 1;
    border-radius: 18px;
    padding: 1rem;
    border: 1px solid var(--stroke-strong);
    background: var(--hero-bg);
    box-shadow: var(--hero-shadow);
    overflow: hidden;
  }

  .filament-hero-grid {
    display: grid;
    grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
    gap: .9rem;
    align-items: stretch;
  }

  .filament-hero-main {
    border-radius: 14px;
    border: 1px solid var(--stroke-strong);
    background: var(--hero-main-bg);
    padding: .85rem;
    display: grid;
    gap: .7rem;
    width: 100%;
    max-width: 460px;
  }

  .filament-hero-top { display: flex; justify-content: space-between; gap: .65rem; align-items: start; }
  .filament-hero-chip { display: inline-flex; padding: .24rem .55rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--hero-edge) 55%, transparent); background: rgba(123, 171, 255, .12); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
  .filament-hero-title { margin: .25rem 0 0; font-size: 1.5rem; color: var(--hero-copy); }
  .filament-hero-points { font-size: clamp(2rem, 3.8vw, 2.75rem); line-height: 1.05; margin: .15rem 0 .05rem; color: var(--hero-copy); letter-spacing: .01em; }
  .filament-hero-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .filament-hero-kpi { border-radius: 11px; border: 1px solid var(--stroke-soft); background: var(--panel-alt-bg); padding: .65rem; }
  .filament-hero-kpi span { display: block; font-size: .7rem; color: var(--hero-muted); text-transform: uppercase; letter-spacing: .06em; }
  .filament-hero-kpi strong { display: block; margin-top: .2rem; font-size: 1.22rem; color: var(--tile-text-strong); }

  .filament-hero-score-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .55rem;
    min-width: 0;
  }

  .filament-hero-score-card {
    border-radius: 13px;
    border: 1px solid var(--stroke-soft);
    background: var(--hero-score-bg);
    padding: .65rem;
    display: grid;
    gap: .4rem;
    min-height: 300px;
    align-content: start;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hero-edge) 18%, transparent), var(--tile-shadow);
    min-width: 0;
    overflow: hidden;
  }

  .filament-hero-score-gauge {
    width: 102px;
    height: 102px;
    margin: .2rem auto .35rem;
    border-radius: 50%;
    padding: 10px;
    background:
      radial-gradient(circle at 50% 50%, rgba(20, 30, 53, .2) 0%, rgba(9, 16, 32, .05) 60%, transparent 100%),
      conic-gradient(var(--score-color, #5fb2ff) calc(var(--score-percent, 0) * 1%), rgba(90, 118, 170, .16) 0);
    box-shadow: 0 0 26px color-mix(in oklab, var(--score-color, #5fb2ff) 34%, transparent);
  }

  .filament-hero-score-core {
    height: 100%;
    border-radius: 50%;
    background: var(--hero-core-bg);
    border: 1px solid color-mix(in oklab, var(--score-color, #5fb2ff) 35%, #1b2c4a 65%);
    display: grid;
    place-content: center;
    text-align: center;
    gap: .05rem;
  }

  .filament-hero-score-core strong { margin: 0; font-size: 1.72rem; line-height: 1; color: var(--tile-text-strong); }
  .filament-hero-score-core span { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #94a8c9; }
  .filament-hero-score-card h4 { margin: .25rem 0 0; font-size: 1.1rem; color: var(--tile-text-strong); }
  .filament-hero-score-card p { margin: 0; font-size: .82rem; color: var(--hero-muted); line-height: 1.45; min-height: 70px; }
  .filament-hero-score-card .score-value { margin-top: auto; font-size: 1.85rem; color: var(--tile-text-strong); }

  .filament-hero-grid > * { min-width: 0; }

  .filament-metrics-controls {
    display: grid;
    gap: .85rem;
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid var(--stroke-soft);
    background: var(--controls-bg);
    position: relative;
    z-index: 1;
  }

  .filament-metrics-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
  .filament-metrics-range button.is-active { border-color: color-mix(in oklab, var(--accent, #56f1d5) 65%, #fff 35%); background: color-mix(in oklab, var(--accent, #56f1d5) 28%, transparent); }
  .filament-metrics-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
  .filament-metrics-form label { display: grid; gap: .3rem; font-size: .78rem; color: var(--muted, #93a4bd); letter-spacing: .02em; text-transform: uppercase; }
  .filament-metrics-form select, .filament-metrics-form input {
    min-width: 150px; height: 36px; padding: .35rem .55rem; border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 72%, transparent);
    background: var(--input-bg); color: inherit;
  }

  .filament-hero-controls {
    margin-top: .75rem;
    padding: .8rem;
    border-radius: 12px;
    border: 1px solid var(--stroke-soft);
    background: var(--controls-inner-bg);
    display: grid;
    gap: .6rem;
  }
  .filament-filter-panel-toggle {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
  }
  .filament-filter-panel-toggle iconify-icon { transition: transform .2s ease; }
  .filament-filter-panel-toggle[aria-expanded="true"] iconify-icon { transform: rotate(180deg); }
  .filament-filter-panel.hidden { display: none; }
  .filament-filter-panel {
    display: grid;
    gap: .6rem;
    border-top: 1px solid color-mix(in oklab, var(--hero-edge) 35%, #22314d 65%);
    padding-top: .65rem;
  }

  .filament-view-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
  }

  .filament-view-row select {
    min-width: 220px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--stroke-soft);
    background: var(--input-bg);
    color: inherit;
    padding: .2rem .5rem;
  }

  .filament-metrics-zones {
    display: grid;
    gap: .9rem;
  }

  .filament-metrics-zone {
    display: grid;
    gap: .45rem;
  }

  .filament-metrics-zone-head {
    margin: 0;
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hero-muted);
  }

  .layout-modal.hidden { display: none; }
  .layout-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
  }
  .layout-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(3px);
  }
  .layout-modal-card {
    position: relative;
    width: min(1100px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: 1rem auto;
    border-radius: 16px;
    border: 1px solid var(--stroke-strong);
    background: var(--panel-alt-bg);
    padding: 1rem;
    overflow: auto;
    display: grid;
    gap: .8rem;
  }
  .layout-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
  }
  .layout-modal-head h3 { margin: 0; }
  .layout-modal-grid {
    display: grid;
    grid-template-columns: 260px repeat(3, minmax(0, 1fr));
    gap: .7rem;
  }
  .layout-modal-col {
    border: 1px solid var(--stroke-soft);
    border-radius: 12px;
    padding: .65rem;
    background: var(--panel-alt-bg);
    display: grid;
    gap: .5rem;
    align-content: start;
  }
  .layout-modal-col h4 {
    margin: 0;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hero-muted);
  }
  .layout-widget-list {
    list-style: none;
    margin: 0;
    padding: .25rem;
    min-height: 220px;
    border-radius: 10px;
    border: 1px dashed color-mix(in oklab, var(--hero-edge) 40%, #2b3d5d 60%);
    display: grid;
    gap: .4rem;
    align-content: start;
  }
  .layout-widget-item {
    border-radius: 9px;
    border: 1px solid var(--stroke-soft);
    background: var(--panel-alt-bg);
    padding: .45rem .55rem;
    font-size: .83rem;
    cursor: grab;
  }
  .layout-widget-item.is-dragging { opacity: .45; }
  .layout-widget-list.is-drag-over { outline: 2px dashed color-mix(in oklab, #56f1d5 70%, #fff 30%); }

  body.widget-help-open { overflow: hidden; }
  .widget-help-modal.hidden { display: none; }
  .widget-help-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
  }
  .widget-help-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(4px);
  }
  .widget-help-modal-card {
    position: relative;
    width: min(680px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: 1rem auto;
    border-radius: 16px;
    border: 1px solid var(--stroke-strong);
    background: var(--panel-alt-bg);
    box-shadow: var(--tile-shadow);
    overflow: auto;
    display: grid;
    gap: .7rem;
    padding: .95rem;
  }
  .widget-help-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }
  .widget-help-modal-head h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--tile-text-strong);
  }
  .widget-help-modal-body {
    display: grid;
    gap: .65rem;
    font-size: .84rem;
    color: var(--tile-text-soft);
  }
  .widget-help-section {
    border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 74%, transparent);
    border-radius: 12px;
    background: color-mix(in oklab, var(--panel-alt-bg) 82%, var(--input-bg) 18%);
    padding: .7rem;
    display: grid;
    gap: .35rem;
  }
  .widget-help-section h4 {
    margin: 0;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tile-text-soft);
  }
  .widget-help-list {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: .3rem;
  }

  @media (max-width: 1060px) {
    .layout-modal-grid { grid-template-columns: 1fr; }
  }

  .filament-metrics-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(92px, auto);
    gap: .85rem;
    position: relative;
    z-index: 1;
    isolation: isolate;
  }

  .metrics-tile {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-column: span var(--grid-col-span, 6);
    grid-row: span var(--grid-row-span, 2);
    min-height: calc((var(--grid-h, 2) * 98px) + 96px);
    border-radius: 16px;
    border: 1px solid var(--stroke-soft);
    background: var(--panel-bg);
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    z-index: 1;
  }
  .metrics-tile[hidden] { display: none !important; }

  .metrics-tile:hover { border-color: color-mix(in oklab, var(--accent, #56f1d5) 35%, var(--panel-border, #273043)); transform: translateY(-1px); }
  .metrics-tile-head { display: flex; justify-content: space-between; gap: .75rem; align-items: start; padding: .8rem .9rem .55rem; border-bottom: 1px solid color-mix(in oklab, var(--panel-border, #273043) 70%, transparent); }
  .metrics-tile-head > div:first-child { min-width: 0; flex: 1; }
  .metrics-tile-head h3 { margin: 0; font-size: .93rem; }
  .metrics-tile-head p { margin: .22rem 0 0; font-size: .73rem; color: var(--muted, #96a7bf); }

  .metrics-tile-tools { display: inline-flex; gap: .35rem; align-items: center; flex-wrap: wrap; position: relative; margin-left: auto; justify-content: flex-end; }
  .metrics-tile-tools button {
    min-width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 78%, transparent);
    background: color-mix(in oklab, var(--panel, #111b2f) 94%, #091321 6%);
    color: inherit; font-size: .74rem; cursor: pointer;
  }
  .metrics-size-btn {
    min-width: 30px !important;
    width: 30px;
    padding: 0;
    position: relative;
  }
  .metrics-size-btn::after { content: none; }
  .metrics-size-popover {
    position: absolute;
    top: calc(100% + .25rem);
    right: 0;
    z-index: 20;
    border-radius: 10px;
    border: 1px solid var(--stroke-soft);
    background: var(--popover-bg);
    padding: .5rem;
    box-shadow: 0 12px 28px rgba(3, 8, 20, .42);
  }
  .metrics-size-popover.hidden { display: none; }
  .metrics-size-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(34px, 1fr));
    gap: .35rem;
  }
  .metrics-size-grid button {
    min-width: 34px;
    width: 34px;
    height: 28px;
    border-radius: 7px;
    font-size: .68rem;
    padding: 0;
  }
  .metrics-size-grid button.is-active {
    border-color: color-mix(in oklab, var(--accent, #56f1d5) 70%, #fff 30%);
    background: color-mix(in oklab, var(--accent, #56f1d5) 24%, #0e1c31 76%);
  }
  .metrics-help-btn {
    min-width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--hero-edge) 48%, #324667 52%);
    background: color-mix(in oklab, var(--hero-edge) 18%, var(--input-bg) 82%);
    color: var(--tile-text-strong);
    font-weight: 700;
    cursor: pointer;
  }
  .metrics-help-btn iconify-icon,
  .metrics-size-btn iconify-icon {
    font-size: 1rem;
    line-height: 1;
  }
  .metrics-widget-scope {
    min-width: 66px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 78%, transparent);
    background: color-mix(in oklab, var(--panel, #111b2f) 94%, #091321 6%);
    color: inherit;
    font-size: .7rem;
    padding: 0 .3rem;
    cursor: pointer;
  }

  .metrics-tile-body { padding: .72rem .82rem .82rem; overflow: auto; height: 100%; }
  .metrics-widget-loader {
    min-height: 92px;
    display: grid;
    place-items: center;
    gap: .45rem;
    color: var(--muted, #96a7bf);
    font-size: .78rem;
    letter-spacing: .02em;
  }
  .metrics-loader-dot {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 2px solid color-mix(in oklab, var(--panel-border, #273043) 55%, #0f1628 45%);
    border-top-color: color-mix(in oklab, var(--accent, #56f1d5) 78%, #ffffff 22%);
    animation: metricsSpin .8s linear infinite;
  }
  @keyframes metricsSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .metrics-tile-body[data-widget-manufacturer-map] {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }
  .metrics-flip-wrap {
    position: relative;
    display: grid;
    min-height: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .45s ease;
  }
  .metrics-tile.is-flipped .metrics-flip-wrap { transform: rotateY(180deg); }
  .metrics-tile.is-flipped .metrics-face--front { opacity: 0; }
  .metrics-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width: 100%;
    min-height: 100%;
    height: 100%;
    border-radius: 10px;
    background: var(--panel-alt-bg);
  }
  .metrics-face--front {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
  }
  .metrics-face--back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    z-index: 2;
    opacity: 1;
  }
  .metrics-back-card {
    border-radius: 10px;
    border: 1px solid var(--stroke-soft);
    background: var(--panel-alt-bg);
    padding: .75rem;
    font-size: .76rem;
    color: var(--tile-text-soft);
    display: grid;
    gap: .35rem;
  }
  .metrics-back-card h4 { margin: 0; font-size: .92rem; color: var(--tile-text-strong); }

  .metrics-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .55rem; }
  .metrics-kpi-card { padding: .65rem; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 75%, transparent); background: color-mix(in oklab, var(--panel, #111b2f) 96%, #203957 4%); }
  .metrics-kpi-card span { display: block; font-size: .68rem; color: var(--muted, #96a7bf); text-transform: uppercase; letter-spacing: .03em; }
  .metrics-kpi-card strong { display: block; margin-top: .16rem; font-size: 1.02rem; }

  .metrics-bars { display: grid; gap: .52rem; }
  .metrics-bar-row { display: grid; grid-template-columns: minmax(120px, 1.7fr) minmax(0, 5fr) auto; gap: .6rem; align-items: center; font-size: .76rem; }
  .metrics-bar-track { height: 10px; border-radius: 999px; background: color-mix(in oklab, var(--panel-border, #273043) 70%, transparent); overflow: hidden; }
  .metrics-bar-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #56f1d5, #5fb2ff); transition: width .45s ease; }
  .metrics-rendered .metrics-bar-fill { width: var(--w, 0%); }

  .metrics-timeline-grid { display: grid; gap: .45rem; }
  .metrics-timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .55rem;
    margin-bottom: .5rem;
    font-size: .72rem;
    color: var(--tile-text-soft);
  }
  .metrics-timeline-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
  .metrics-timeline-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
  .metrics-timeline-item { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: .55rem; align-items: center; font-size: .74rem; }
  .metrics-timeline-item.is-week-cut { border-top: 1px dashed color-mix(in oklab, #5fb2ff 40%, transparent); padding-top: .32rem; margin-top: .12rem; }
  .metrics-timeline-week { font-style: normal; font-size: .62rem; color: var(--tile-text-soft); text-transform: uppercase; letter-spacing: .05em; margin-right: .35rem; }
  .metrics-timeline-stack { display: flex; height: 11px; overflow: hidden; border-radius: 999px; background: color-mix(in oklab, var(--panel-border, #273043) 65%, transparent); }
  .metrics-timeline-stack > span { display: block; min-width: 0; }
  .metrics-timeline-consume { background: #5fb2ff; }
  .metrics-timeline-transfer { background: #56f1d5; }
  .metrics-timeline-weigh { background: #ffc964; }

  .metrics-insight-list { display: grid; gap: .55rem; }
  .metrics-insight-item { padding: .58rem .64rem; border-radius: 11px; border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 75%, transparent); background: color-mix(in oklab, var(--panel, #111b2f) 96%, #1b304b 4%); font-size: .76rem; }
  .metrics-insight-visual {
    margin-top: .55rem;
    display: grid;
    gap: .4rem;
  }
  .metrics-insight-visual-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
    font-size: .76rem;
    color: var(--tile-text-soft);
  }
  .metrics-insight-visual-track {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--hero-edge) 25%, #0f1b31 75%);
    overflow: hidden;
  }
  .metrics-insight-visual-fill {
    height: 100%;
    width: var(--w, 0%);
    background: linear-gradient(90deg, #56f1d5, #5fb2ff);
  }

  .metrics-brand-grid {
    display: grid;
    gap: .45rem;
  }
  .metrics-brand-card {
    border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--hero-edge) 40%, #263a57 60%);
    background: linear-gradient(165deg, #0f1a32 0%, #13172c 100%);
    padding: .55rem .65rem;
    display: grid;
    gap: .25rem;
  }
  .metrics-brand-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--tile-text-strong);
  }
  .metrics-brand-card-meta {
    font-size: .75rem;
    color: var(--tile-text-soft);
  }

  .metrics-export-grid { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .metrics-export-card { padding: .7rem; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 75%, transparent); background: color-mix(in oklab, var(--panel, #111b2f) 96%, #263a57 4%); display: grid; gap: .45rem; }
  .metrics-export-card p { margin: 0; font-size: .78rem; color: var(--muted, #96a7bf); }
  .metrics-export-card .sci-btn iconify-icon { font-size: .95rem; }
  .metrics-empty { padding: 1rem; border: 1px dashed color-mix(in oklab, var(--panel-border, #273043) 75%, transparent); border-radius: 12px; color: var(--muted, #93a4bd); font-size: .85rem; }

  .metrics-map-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, .8fr); gap: .65rem; }
  .metrics-map-canvas {
    min-height: clamp(240px, calc(var(--grid-h, 2) * 140px), 760px);
    height: 100%;
    border-radius: 12px;
    border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 75%, transparent);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .metrics-map-canvas .leaflet-container { z-index: 1; width: 100%; height: 100%; }
  .metrics-map-canvas .leaflet-control-container { position: relative; z-index: 2; }
  .metrics-map-list { display: grid; gap: .42rem; max-height: 270px; overflow: auto; }
  .metrics-map-item { border-radius: 10px; border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 75%, transparent); background: color-mix(in oklab, var(--panel, #111b2f) 97%, #1b2e46 3%); padding: .46rem; font-size: .74rem; }
  .metrics-map-item strong { display: block; }

  .metrics-mini-kpi { margin-top: .5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .55rem; font-size: .7rem; color: var(--tile-text-soft); }
  .metrics-mini-kpi strong { display: block; font-size: .9rem; color: var(--tile-text-strong); }
  .metrics-gauge { position: relative; width: min(180px, 100%); aspect-ratio: 1 / 1; margin: 0 auto .4rem; }
  .metrics-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .metrics-gauge-track, .metrics-gauge-progress { fill: none; stroke-width: 8; }
  .metrics-gauge-track { stroke: color-mix(in oklab, var(--panel-border, #273043) 75%, transparent); }
  .metrics-gauge-progress {
    stroke: var(--tone, #56f1d5);
    stroke-linecap: round;
    stroke-dasharray: 213.63;
    stroke-dashoffset: 213.63;
    transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1);
  }
  .metrics-rendered .metrics-gauge-progress { stroke-dashoffset: var(--offset, 213.63); }
  .metrics-gauge-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .08rem; }
  .metrics-gauge-center strong { font-size: 1.1rem; line-height: 1; color: var(--tile-text-strong); }
  .metrics-gauge-center span { font-size: .66rem; color: var(--tile-text-soft); text-transform: uppercase; letter-spacing: .04em; }

  .metrics-line-card { display: grid; gap: .4rem; }
  .metrics-line-card header { display: flex; justify-content: space-between; gap: .5rem; font-size: .72rem; color: var(--tile-text-soft); }
  .metrics-line-card header strong { font-size: .8rem; color: var(--tile-text-strong); }
  .metrics-line-svg { width: 100%; height: 128px; display: block; border-radius: 10px; background: var(--widget-line-bg); }
  .metrics-line-svg polyline {
    fill: none;
    stroke: var(--line, #5fb2ff);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    transition: stroke-dashoffset .9s ease;
  }
  .metrics-line-svg circle {
    fill: #e6f4ff;
    stroke: color-mix(in oklab, var(--line, #5fb2ff) 70%, #0d1831 30%);
    stroke-width: .55;
    opacity: .85;
  }
  .metrics-rendered .metrics-line-svg polyline { stroke-dashoffset: 0; }

  .metrics-donut-wrap { display: grid; gap: .55rem; }
  .metrics-donut-ring {
    width: min(180px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(from -90deg, var(--segments));
    position: relative;
    box-shadow: 0 10px 24px rgba(8, 20, 40, .34);
    transform: scale(.94);
    opacity: .2;
    transition: transform .55s ease, opacity .55s ease;
  }
  .metrics-rendered .metrics-donut-ring { transform: scale(1); opacity: 1; }
  .metrics-donut-ring::after {
    content: '';
    position: absolute;
    inset: 17%;
    border-radius: 50%;
    background: linear-gradient(165deg, #0e1a32 0%, #13172c 100%);
    border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 72%, transparent);
  }
  .metrics-donut-list { display: grid; gap: .28rem; }
  .metrics-donut-item { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: .35rem; font-size: .71rem; color: var(--tile-text-soft); }
  .metrics-donut-item i { width: 10px; height: 10px; border-radius: 2px; }
  .metrics-donut-item strong { color: var(--tile-text-strong); font-size: .73rem; }

  .metrics-heat-wrap {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .35rem;
    align-content: start;
  }
  .metrics-heat-cell {
    border-radius: 8px;
    min-height: 32px;
    background: color-mix(in oklab, #56f1d5 calc(var(--i, .2) * 100%), #0f172d 100%);
    border: 1px solid color-mix(in oklab, #5fb2ff calc(var(--i, .2) * 45%), transparent);
    transform: scale(.86);
    opacity: .2;
    transition: transform .35s ease, opacity .35s ease;
  }
  .metrics-rendered .metrics-heat-cell { transform: scale(1); opacity: 1; }

  .metrics-pulse-wrap {
    display: grid;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    align-items: end;
    gap: .26rem;
    height: 140px;
    border-radius: 10px;
    padding: .45rem;
    background: var(--widget-pulse-bg);
  }
  .metrics-pulse-wrap span {
    display: block;
    width: 100%;
    border-radius: 4px 4px 2px 2px;
    height: 0;
    background: linear-gradient(180deg, #56f1d5, #5fb2ff);
    transition: height .55s ease;
  }
  .metrics-rendered .metrics-pulse-wrap span { height: var(--h, 0%); }

  .metrics-burn-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    color: var(--tile-text-soft);
    margin-bottom: .4rem;
  }
  .metrics-burn-head strong { font-size: .86rem; color: var(--tile-text-strong); }
  .metrics-burn-overlay {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .38rem;
    margin-bottom: .42rem;
  }
  .metrics-burn-overlay article {
    border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 74%, transparent);
    background: color-mix(in oklab, #13243d 88%, #0f1a30 12%);
    padding: .42rem .48rem;
    display: grid;
    gap: .08rem;
  }
  .metrics-burn-overlay span { font-size: .64rem; color: var(--tile-text-soft); text-transform: uppercase; letter-spacing: .04em; }
  .metrics-burn-overlay strong { font-size: .78rem; color: var(--tile-text-strong); display: inline-flex; align-items: center; gap: .2rem; }
  .metrics-burn-overlay small { font-size: .64rem; color: var(--tile-text-soft); }
  .metrics-burn-legend {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .63rem;
    color: var(--tile-text-soft);
    margin-bottom: .33rem;
  }
  .metrics-burn-legend i {
    width: 54px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, #173258, #56f1d5);
    border: 1px solid color-mix(in oklab, var(--panel-border, #273043) 70%, transparent);
  }
  .metrics-burn-legend .spacer { flex: 1; }
  .metrics-burn-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr));
    gap: .34rem;
  }
  .metrics-burn-cell {
    border-radius: 8px;
    border: 1px solid color-mix(in oklab, #5fb2ff calc(var(--i, .2) * 45%), #1b2d48 55%);
    background: color-mix(in oklab, #56f1d5 calc(var(--i, .2) * 88%), #0f1b31 100%);
    min-height: 40px;
    padding: .28rem .32rem;
    display: grid;
    align-content: space-between;
    gap: .14rem;
    transform: scale(.9);
    opacity: .2;
    transition: transform .35s ease, opacity .35s ease;
  }
  .metrics-rendered .metrics-burn-cell { transform: scale(1); opacity: 1; }
  .metrics-burn-cell span {
    font-size: .57rem;
    color: color-mix(in oklab, #dcecff 82%, #5f7da3 18%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .metrics-burn-cell strong { font-size: .67rem; color: var(--tile-text-strong); line-height: 1.1; }

  html:not([data-theme="dark"]) .filament-metrics-shell .metrics-line-svg circle {
    fill: #ffffff;
    stroke: color-mix(in oklab, var(--hero-edge) 58%, #d9e8ff 42%);
  }
  html:not([data-theme="dark"]) .filament-metrics-shell .metrics-donut-ring::after {
    background: var(--widget-donut-hole-bg);
  }

  .metrics-tile.is-dragging { opacity: .45; }
  .metrics-tile.is-drag-over { outline: 2px dashed color-mix(in oklab, var(--accent, #56f1d5) 75%, #fff 25%); outline-offset: -4px; }

  @media (max-width: 1360px) { .filament-hero-score-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); } }
  @media (max-width: 1200px) {
    .filament-hero-grid { grid-template-columns: 1fr; }
    .filament-hero-main { max-width: none; }
    .filament-hero-score-card { min-height: 250px; }
    .filament-metrics-grid { grid-auto-rows: minmax(84px, auto); }
    .metrics-tile { grid-column: span min(12, calc(var(--grid-w, 2) * 4)); }
    .metrics-map-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 780px) {
    .filament-hero-score-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .filament-hero-score-card { min-height: 220px; }
    .filament-hero-score-gauge { width: 88px; height: 88px; }
    .filament-hero-score-core strong { font-size: 1.5rem; }
    .metrics-tile { grid-column: span 12; min-height: calc((var(--grid-h, 2) * 82px) + 88px); }
    .metrics-timeline-item { grid-template-columns: 72px minmax(0, 1fr) auto; }
    .filament-metrics-form select, .filament-metrics-form input { min-width: 132px; }
  }
</style>
{% endblock %}
{% block content %}
<div class="filament-metrics-shell" data-filament-metrics-app>
  <section class="filament-hero" data-fixed-hero>
    <div class="filament-hero-grid">
      <article class="filament-hero-main">
        <div class="filament-hero-top">
          <div>
            <span class="filament-hero-chip">Filament Score</span>
            <h2 class="filament-hero-title">{{ score_rank }}</h2>
          </div>
          <a class="sci-btn subtle small" href="{{ url_for('web.dashboard') }}">Dashboard</a>
        </div>
        <div class="filament-hero-points">{{ total_score }} Punkte</div>
        <div class="filament-hero-kpis">
          <div class="filament-hero-kpi"><span>Bestand</span><strong>{{ '%.2f'|format(remaining_kg) }} kg</strong></div>
          <div class="filament-hero-kpi"><span>Verdruckt</span><strong>{{ '%.2f'|format(consumed_g / 1000) }} kg</strong></div>
          <div class="filament-hero-kpi"><span>Filamente</span><strong>{{ db_stats.total_filaments }}</strong></div>
          <div class="filament-hero-kpi"><span>Farben</span><strong>{{ db_stats.color_count }}</strong></div>
        </div>
      </article>
      <div class="filament-hero-score-grid">
        {% for card in score_cards %}
        {% set score_percent = ((card.points / (total_score if total_score else 1)) * 100)|round(0, 'common') %}
        {% set score_color = '#5fb2ff' %}
        {% if loop.index0 == 1 %}{% set score_color = '#56f1d5' %}{% endif %}
        {% if loop.index0 == 2 %}{% set score_color = '#f9d44c' %}{% endif %}
        {% if loop.index0 == 3 %}{% set score_color = '#ff7dde' %}{% endif %}
        {% if loop.index0 == 4 %}{% set score_color = '#b884ff' %}{% endif %}
        <article class="filament-hero-score-card" style="--score-color: {{ score_color }}; --score-percent: {{ score_percent }};">
          <div class="filament-hero-score-gauge" aria-hidden="true">
            <div class="filament-hero-score-core">
              <strong>{{ card.points }}</strong>
              <span>Punkte</span>
            </div>
          </div>
          <h4><iconify-icon icon="{{ card.icon }}" aria-hidden="true"></iconify-icon> {{ card.label }}</h4>
          <p>{{ card.description }}</p>
          <strong class="score-value">{{ card.value }}</strong>
        </article>
        {% endfor %}
      </div>
    </div>
    <div class="filament-hero-controls">
      <div class="filament-view-row">
        <label class="muted tiny">Ansicht</label>
        <select data-view-select></select>
        <button type="button" class="sci-btn subtle small" data-view-new>Neue Ansicht</button>
        <button type="button" class="sci-btn subtle small" data-view-set-default>Als Standard</button>
        <button type="button" class="sci-btn subtle small" data-open-layout-modal>Layout Builder</button>
        <button type="button" class="sci-btn subtle small" data-metrics-layout-reset>Reset</button>
        <button type="button" class="sci-btn subtle small filament-filter-panel-toggle" data-filter-panel-toggle aria-expanded="false">
          <iconify-icon icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
          Filter und Export
        </button>
      </div>
      <div class="filament-filter-panel hidden" data-filter-panel>
        <div class="filament-metrics-row filament-metrics-range" data-metrics-range>
          <button type="button" class="sci-btn subtle small is-active" data-range="day">Tag</button>
          <button type="button" class="sci-btn subtle small" data-range="week">Woche</button>
          <button type="button" class="sci-btn subtle small" data-range="month">Monat</button>
          <button type="button" class="sci-btn subtle small" data-range="year">Jahr</button>
          <button type="button" class="sci-btn subtle small" data-range="custom">Von bis</button>
        </div>
        <form class="filament-metrics-form" data-metrics-filter-form>
          <label>Gruppierung
            <select name="bucket" data-metrics-bucket>
              <option value="day">Tag</option>
              <option value="week">Woche</option>
              <option value="month">Monat</option>
              <option value="year">Jahr</option>
            </select>
          </label>
          <label>Dimension
            <select name="dimension" data-metrics-dimension>
              <option value="material">Material</option>
              <option value="color">Farbe</option>
              <option value="brand">Hersteller</option>
            </select>
          </label>
          <label data-metrics-custom-wrap hidden>Von
            <input type="date" name="from" data-metrics-from>
          </label>
          <label data-metrics-custom-wrap hidden>Bis
            <input type="date" name="to" data-metrics-to>
          </label>
          <button type="submit" class="sci-btn small">Metriken laden</button>
          <button type="button" class="sci-btn subtle small" data-export-csv>CSV Export</button>
          <button type="button" class="sci-btn subtle small" data-export-json>JSON Export</button>
        </form>
      </div>
    </div>
  </section>

  <section class="filament-metrics-zones" data-metrics-zones>
    <section class="filament-metrics-zone" data-zone-id="area_1">
      <h3 class="filament-metrics-zone-head">Bereich 1</h3>
      <div class="filament-metrics-grid" data-metrics-grid-area="area_1">
    <article class="metrics-tile" data-tile-id="kpi" data-widget-label="Materialbestand & Verbrauch kompakt" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:view-grid-plus-outline"></iconify-icon> Materialbestand & Verbrauch kompakt</h3><p>Kernwerte zu Rollen, Verbrauch, Transfers und Aktivitaet.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-kpis></div>
    </article>

    <article class="metrics-tile" data-tile-id="timeline" data-widget-label="Verbrauchsfluss-Zeitachse" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:vector-polyline"></iconify-icon> Verbrauchsfluss-Zeitachse</h3><p>Zeitverlauf von Consume, Transfer und Weigh mit Wochenstruktur.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-timeline></div>
    </article>
      </div>
    </section>

    <section class="filament-metrics-zone" data-zone-id="area_2">
      <h3 class="filament-metrics-zone-head">Bereich 2</h3>
      <div class="filament-metrics-grid" data-metrics-grid-area="area_2">
    <article class="metrics-tile" data-tile-id="dimension" data-widget-label="Material-/Farb-/Herstelleranalyse" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:chart-bar-stacked"></iconify-icon> Material-/Farb-/Herstelleranalyse</h3><p>Gruppierte Filamentbewegungen nach deiner gewaehlten Perspektive.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-dimension></div>
    </article>

    <article class="metrics-tile" data-tile-id="movements" data-widget-label="Filament-Aktionen im Vergleich" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:chart-donut"></iconify-icon> Filament-Aktionen im Vergleich</h3><p>Welche Aktionen dominieren nach Events und bewegten Gramm.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-movements></div>
    </article>

    <article class="metrics-tile" data-tile-id="manufacturer-map" data-widget-label="Herstellerstandorte & Lagerrollen" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:warehouse"></iconify-icon> Herstellerstandorte & Lagerrollen</h3><p>Bestands-Hersteller auf Karte plus Topliste nach Rollenanzahl.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-manufacturer-map></div>
    </article>
      </div>
    </section>

    <section class="filament-metrics-zone" data-zone-id="area_3">
      <h3 class="filament-metrics-zone-head">Bereich 3</h3>
      <div class="filament-metrics-grid" data-metrics-grid-area="area_3">
    <article class="metrics-tile" data-tile-id="insights" data-widget-label="Druck- und Lagerhinweise" data-grid-size="1x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:lightbulb-on-outline"></iconify-icon> Druck- und Lagerhinweise</h3><p>Automatische Kurzinfos zu Verbrauch, Bestand und Aktivitaet.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-insights></div>
    </article>

    <article class="metrics-tile" data-tile-id="exports" data-widget-label="Report-Center" data-grid-size="1x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:file-download-outline"></iconify-icon> Report-Center</h3><p>PDF-Berichte fuer Lagerstatus, Vorrat und Bestellunterstuetzung.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-exports>
        <div class="metrics-export-grid">
          <article class="metrics-export-card"><strong>Lagerstatus PDF</strong><p>Gesamtbestand fuer Lager und Spulen.</p><a class="sci-btn subtle small" href="{{ url_for('web.report_lagerstatus_pdf') }}" target="_blank" rel="noopener" title="Lagerstatus PDF oeffnen" aria-label="Lagerstatus PDF oeffnen"><iconify-icon icon="mdi:file-pdf-box"></iconify-icon></a></article>
          <article class="metrics-export-card"><strong>Rollenvorrat PDF</strong><p>Gruppierter Bestand nach Materialgruppen.</p><a class="sci-btn subtle small" href="{{ url_for('web.report_rollenvorrat_pdf') }}" target="_blank" rel="noopener" title="Rollenvorrat PDF oeffnen" aria-label="Rollenvorrat PDF oeffnen"><iconify-icon icon="mdi:file-pdf-box"></iconify-icon></a></article>
          <article class="metrics-export-card"><strong>Bestellzettel PDF</strong><p>Low Stock und Zielbestand nach aktueller Logik.</p><a class="sci-btn subtle small" href="{{ url_for('web.report_bestellzettel_pdf') }}" target="_blank" rel="noopener" title="Bestellzettel PDF oeffnen" aria-label="Bestellzettel PDF oeffnen"><iconify-icon icon="mdi:file-pdf-box"></iconify-icon></a></article>
        </div>
      </div>
    </article>

    <article class="metrics-tile" data-tile-id="stock-gauge" data-widget-label="Lagerdeckungs-Gauge" data-grid-size="1x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:speedometer"></iconify-icon> Lagerdeckungs-Gauge</h3><p>Restbestand im Verhältnis zur bisherigen Verbrauchsmenge.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-stock-gauge></div>
    </article>

    <article class="metrics-tile" data-tile-id="burn-rate-line" data-widget-label="Verbrauchskalender (Heat)" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:vector-polyline"></iconify-icon> Verbrauchskalender (Heat)</h3><p>Heat-Ansicht mit Peak, Durchschnitt und Trendkommentar.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-burn-rate-line></div>
    </article>

    <article class="metrics-tile" data-tile-id="material-donut" data-widget-label="Materialmix im Lager (Donut)" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:chart-donut"></iconify-icon> Materialmix im Lager (Donut)</h3><p>Materialanteile mit klarer Legende fuer schnelle Planung.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-material-donut></div>
    </article>

    <article class="metrics-tile" data-tile-id="color-donut" data-widget-label="Farbmix im Verbrauch (Donut)" data-grid-size="1x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:palette-swatch-variant"></iconify-icon> Farbmix im Verbrauch (Donut)</h3><p>Zeigt, welche Farben deinen Workflow am meisten bewegen.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-color-donut></div>
    </article>

    <article class="metrics-tile" data-tile-id="brand-bars" data-widget-label="Hersteller-Ranking (Balken)" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:chart-bar-stacked"></iconify-icon> Hersteller-Ranking (Balken)</h3><p>Vergleich der Hersteller nach sofort verfuegbaren Rollen.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-brand-bars></div>
    </article>

    <article class="metrics-tile" data-tile-id="activity-heat" data-widget-label="Werkstatt-Aktivitaet (Heatmap)" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:view-grid-outline"></iconify-icon> Werkstatt-Aktivitaet (Heatmap)</h3><p>Wann in deinem Zeitraum besonders viel passiert ist.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-activity-heat></div>
    </article>

    <article class="metrics-tile" data-tile-id="forecast-runout" data-widget-label="Reichweitenprognose" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:chart-bell-curve-cumulative"></iconify-icon> Reichweitenprognose</h3><p>Wie lange der aktuelle Bestand bei deiner Burn-Rate reicht.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-forecast-runout></div>
    </article>

    <article class="metrics-tile" data-tile-id="stock-buckets" data-widget-label="Bestandsklassen" data-grid-size="1x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:filter-variant"></iconify-icon> Bestandsklassen</h3><p>Schnelle Einteilung in kritisch, niedrig und stabil.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-stock-buckets></div>
    </article>

    <article class="metrics-tile" data-tile-id="event-pulse" data-widget-label="Bewegungs-Puls" data-grid-size="1x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:flash-outline"></iconify-icon> Bewegungs-Puls</h3><p>Kompakter Heartbeat aller Filamentbewegungen.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-event-pulse></div>
    </article>

    <article class="metrics-tile" data-tile-id="material-flow-line" data-widget-label="Materialfluss-Trend" data-grid-size="2x2" draggable="false">
      <header class="metrics-tile-head"><div><h3><iconify-icon icon="mdi:vector-polyline"></iconify-icon> Materialfluss-Trend</h3><p>Top-Materialien und deren Mengenentwicklung im Vergleich.</p></div><div class="metrics-tile-tools"></div></header>
      <div class="metrics-tile-body" data-widget-material-flow-line></div>
    </article>
      </div>
    </section>
  </section>

  <div class="layout-modal hidden" data-layout-modal>
    <div class="layout-modal-backdrop" data-close-layout-modal></div>
    <section class="layout-modal-card">
      <header class="layout-modal-head">
        <h3>Widget Layout Builder</h3>
        <div class="filament-view-row">
          <button type="button" class="sci-btn subtle small" data-layout-save>Speichern</button>
          <button type="button" class="sci-btn subtle small" data-view-delete>Ansicht loeschen</button>
          <button type="button" class="sci-btn subtle small" data-close-layout-modal>Schliessen</button>
        </div>
      </header>
      <div class="layout-modal-grid">
        <section class="layout-modal-col">
          <h4>Widget Liste</h4>
          <ul class="layout-widget-list" data-layout-pool></ul>
        </section>
        <section class="layout-modal-col">
          <h4>Bereich 1</h4>
          <ul class="layout-widget-list" data-layout-zone-list="area_1"></ul>
        </section>
        <section class="layout-modal-col">
          <h4>Bereich 2</h4>
          <ul class="layout-widget-list" data-layout-zone-list="area_2"></ul>
        </section>
        <section class="layout-modal-col">
          <h4>Bereich 3</h4>
          <ul class="layout-widget-list" data-layout-zone-list="area_3"></ul>
        </section>
      </div>
    </section>
  </div>

  <div class="widget-help-modal hidden" data-widget-help-modal>
    <div class="widget-help-modal-backdrop" data-widget-help-close></div>
    <section class="widget-help-modal-card" role="dialog" aria-modal="true" aria-labelledby="widgetHelpTitle">
      <header class="widget-help-modal-head">
        <h3 id="widgetHelpTitle" data-widget-help-title>Widget Hilfe</h3>
        <button type="button" class="sci-btn subtle small" data-widget-help-close>Schliessen</button>
      </header>
      <div class="widget-help-modal-body" data-widget-help-body></div>
    </section>
  </div>
</div>
{% endblock %}
{% block data_blocks %}
<script id="filament-metrics-initial" type="application/json">{{ metrics_initial|tojson }}</script>
<script id="filament-stats-bootstrap" type="application/json">{{ {
  'top_materials': top_materials,
  'top_manufacturers': top_manufacturers,
  'mode_counter': mode_counter,
  'score_rank': score_rank,
  'total_score': total_score,
}|tojson }}</script>
<script id="filament-stats-manufacturer-map" type="application/json">{{ manufacturer_map_rows|tojson }}</script>
{% endblock %}