/* np/styles/hub.insights.css
   NAVIPRAX – Insights Dashboard styling
   ✅ Theme-Anbindung:
   - nutzt CI-Farben aus der DB über --color-primary / --color-secondary (Fallback: --color-highlight)
*/
:root{
  --ins-card-radius: var(--radius-lg, 16px);
  --ins-gap: var(--space-md, 16px);
  --ins-border: var(--color-border, rgba(255,255,255,0.10));
  --ins-surface: var(--color-surface, rgba(255,255,255,0.04));
  --ins-text: var(--color-text, #e5e7eb);
  --ins-muted: var(--color-text-muted, #9ca3af);

  /* ✅ CI-Farben: DB → CSS Vars (primary/secondary), Fallback: highlight/secondary */
  --ins-hi: var(--color-primary, var(--color-highlight, #4cc9f0));
  --ins-se: var(--color-primary-secondary, var(--color-secondary, #b517ff));
    /* Iced glass Tokens (werden pro Theme überschrieben) */
  --ins-ice-bg: rgba(255,255,255,0.06);
  --ins-ice-border: rgba(255,255,255,0.10);
  --ins-ice-shadow: 0 8px 18px rgba(0,0,0,0.22);

  /* Linien/Tracks (SVG Grid + Progress Tracks) */
  --ins-grid-stroke: rgba(255,255,255,0.12);
  --ins-track-bg: rgba(255,255,255,0.10);
  --ins-track-stroke: rgba(15,23,42,0.18);

}
/* Lightmode: Linien & Donut/Grid sichtbar + iced-glass heller */
html[data-theme="light"]{
  --ins-border: rgba(15,23,42,0.10);
  --ins-surface: rgba(255,255,255,0.52);
  --ins-text: #0F172A;
  --ins-muted: rgba(15,23,42,0.62);

  --ins-ice-bg: rgba(255,255,255,0.66);
  --ins-ice-border: rgba(15,23,42,0.10);
  --ins-ice-shadow: 0 8px 18px rgba(15,23,42,0.10);

  --ins-grid-stroke: rgba(15,23,42,0.14);
  --ins-track-bg: rgba(15,23,42,0.10);
    --ins-track-stroke: rgba(15,23,42,0.16);

}

/* Darkmode: iced-glass bleibt dunkel & dreamy */
html[data-theme="dark"]{
  --ins-ice-bg: rgba(255,255,255,0.06);
  --ins-ice-border: rgba(255,255,255,0.10);
  --ins-ice-shadow: 0 8px 18px rgba(0,0,0,0.22);

  --ins-grid-stroke: rgba(255,255,255,0.12);
  --ins-track-bg: rgba(255,255,255,0.10);
}

.insights-page{display:flex;flex-direction:column;gap:calc(var(--ins-gap)*1.2);padding:var(--space-md,16px)}
.ins-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--ins-gap);flex-wrap:wrap}
.ins-h2{margin:0;font-size:1.4rem;line-height:1.1;color:var(--ins-text);letter-spacing:.2px}
.ins-subtitle{margin:.4rem 0 0 0;color:var(--ins-muted);font-size:.95rem}
.ins-controls{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ins-control{display:flex;flex-direction:column;gap:6px;min-width:180px}
.ins-control>span{color:var(--ins-muted);font-size:.78rem}
.ins-select{appearance:none;-webkit-appearance:none;border:1px solid var(--ins-border);background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03));color:var(--ins-text);padding:10px 12px;border-radius:12px;outline:none}
.ins-select:focus{border-color:rgba(255,255,255,0.22);box-shadow:0 0 0 3px rgba(0,0,0,0.0), 0 0 0 3px color-mix(in srgb, var(--ins-hi), transparent 86%)}
.ins-btn{border:1px solid var(--ins-border);border-radius:12px;padding:10px 14px;background:linear-gradient(135deg,rgba(76,201,240,0.14),rgba(181,23,255,0.10));color:var(--ins-text);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.ins-btn{background:linear-gradient(135deg,color-mix(in srgb, var(--ins-hi), transparent 86%),color-mix(in srgb, var(--ins-se), transparent 90%))}
.ins-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,0.22);box-shadow:0 12px 30px rgba(0,0,0,0.35)}
.ins-btn:disabled{opacity:.65;cursor:default;transform:none;box-shadow:none}

/* Kategorie-Container: kein Card-Look (damit nur die inneren Cards wirken) */
.ins-section.card{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Falls deine Base-.card einen Header-Border hat: weg damit */
.ins-section.card .card__header{
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 0 0 calc(var(--ins-gap) * 0.8) 0 !important;
}
.ins-section.card .card__body{
  padding: 0 !important;
  background: transparent !important;
}
.ins-cardgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--ins-gap)}
@media (max-width:1100px){.ins-cardgrid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:700px){.ins-cardgrid{grid-template-columns:repeat(1,1fr)}.ins-control{min-width:100%}}
.ins-cardgrid--two{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.ins-cardgrid--two{grid-template-columns:1fr}}

.ins-card{
  border: 1px solid var(--ins-ice-border);
  background: var(--ins-ice-bg);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: var(--ins-ice-shadow);
  position: relative;
  overflow: hidden;

  backdrop-filter: blur(12px) saturate(1.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.18);
}
.ins-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 180px at 20% 0%, color-mix(in srgb, var(--ins-hi), transparent 94%), transparent 58%),
    radial-gradient(700px 180px at 90% 10%, color-mix(in srgb, var(--ins-se), transparent 95%), transparent 60%);
  pointer-events:none;
  opacity:.35;
}
.ins-card>*{position:relative}

.ins-card--mini{grid-column:span 3}
.ins-card--normal{grid-column:span 4}
.ins-card--wide{grid-column:span 8}
@media (max-width:1100px){.ins-card--mini{grid-column:span 3}.ins-card--normal{grid-column:span 6}.ins-card--wide{grid-column:span 6}}
@media (max-width:700px){.ins-card--mini,.ins-card--normal,.ins-card--wide{grid-column:span 1}}

.ins-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ins-card__title{font-size:.92rem;color:var(--ins-text);font-weight:600;letter-spacing:.2px}
.ins-card__hint{margin-top:4px;font-size:.78rem;color:var(--ins-muted)}
.ins-card__value{font-size:1.15rem;font-weight:700;background:linear-gradient(90deg,var(--ins-hi),var(--ins-se));-webkit-background-clip:text;background-clip:text;color:transparent}
.ins-card__chart{margin-top:10px}
.ins-svg{width:100%;height:auto;display:block}
.ins-grid{
  stroke: var(--ins-grid-stroke);
  stroke-width: 1;
  fill: none;
}
.ins-donut-value{font-size:22px;font-weight:800;fill:var(--ins-text)}
.ins-donut-label{font-size:12px;fill:var(--ins-muted)}

.ins-hbars{display:flex;flex-direction:column;gap:12px}
.ins-hbar__top{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.ins-hbar__label{color:var(--ins-text);font-size:.86rem}
.ins-hbar__value{color:var(--ins-muted);font-size:.82rem}
.ins-hbar__track{height:10px;border-radius:999px;background: var(--ins-track-bg);overflow:hidden}
.ins-hbar__fill{height:100%;border-radius:999px;background:linear-gradient(90deg,rgba(76,201,240,0.95),rgba(181,23,255,0.85));box-shadow:0 0 18px rgba(76,201,240,0.20)}
.ins-hbar__fill{background:linear-gradient(90deg,var(--ins-hi),var(--ins-se))}

.ins-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:700px){.ins-feature-grid{grid-template-columns:1fr}}
.ins-feature{
  border: 1px solid color-mix(in srgb, var(--ins-text) 12%, transparent);
  border-radius: 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ins-ice-bg) 78%, transparent);
}
.ins-feature__k{color:var(--ins-muted);font-size:.78rem}
.ins-feature__v{margin-top:4px;color:var(--ins-text);font-weight:700}

.ins-loading.card{border:1px solid var(--ins-border);background:var(--ins-surface);border-radius:var(--ins-card-radius)}
.ins-loading .card__body{display:flex;align-items:center;gap:14px}
.ins-loading__spinner{width:34px;height:34px;border-radius:999px;border:3px solid rgba(255,255,255,0.12);border-top-color:var(--ins-hi);animation:insSpin .9s linear infinite}
@keyframes insSpin{to{transform:rotate(360deg)}}
.ins-loading__title{color:var(--ins-text);font-weight:700}
.ins-loading__sub{color:var(--ins-muted);font-size:.9rem;margin-top:2px}
/* Kategorie-Überschriften (Section Header) größer */
.ins-section.card .card__title,
.ins-section.card h3{
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  color: var(--ins-text) !important;
}

/* Optional: Dashboard-Titel minimal größer */
.ins-h2{
  font-size: 1.6rem;
}
/* Donut: niemals den Verlauf-Kreis überschreiben – nur Track schimmern lassen */
.ins-svg circle{
  fill: none;
}

/* Track-Kreis ist in deinem SVG der mit stroke="rgba(...)" */
.ins-svg circle[stroke^="rgba"]{
  stroke: var(--ins-track-stroke);
  stroke-width: 14;
}

.ins-svg [id^="donut-"]{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.10));
}
html[data-theme="dark"] .ins-svg [id^="donut-"]{
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}