/*
 * app.css — heusel.backup App-spezifische Styles
 * ================================================
 * Lädt NACH heusel.web.css und überschreibt / ergänzt nur backup-spezifische
 * Eigenschaften: Glassmorphismus-Effekte, Blazor-Reconnect, Monitoring.
 */

/* ── Glassmorphismus: Farb-Feld hinter dem UI (statisch, kein CPU-Overhead) ── */
body::before {
  content:""; position:fixed; inset:-30%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 720px at 18% 18%, rgba(40,95,150,.55) 0%, transparent 70%),
    radial-gradient(900px 760px at 82% 14%, rgba(125,50,140,.55) 0%, transparent 70%),
    radial-gradient(1000px 820px at 28% 90%, rgba(35,135,100,.5)  0%, transparent 72%),
    radial-gradient(900px 760px at 92% 88%, rgba(165,90,45,.42)   0%, transparent 70%);
}

/* ── Glassmorphismus: Cards + Login-Box (transluzent + Cursor-Glow) ── */
.admin-content :is(.card,.kpi-card,.db-card,.node-wrap,.tile,.cl-card,.cu-card,.cu-node,.bill-card,.pa-card,.pr-card,.pr-prod,.wl-card,.us-card),
.login-box {
  position: relative;
  background: rgba(22,24,30,.72);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 1rem 2rem -.8rem rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.admin-content :is(.card,.kpi-card,.db-card,.node-wrap,.tile,.cl-card,.cu-card,.cu-node,.bill-card,.pa-card,.pr-card,.pr-prod,.wl-card,.us-card):hover,
.login-box:hover {
  transform: translateY(-3px);
  background: rgba(32,35,44,.8);
  box-shadow: 0 1.7rem 2.8rem -.8rem rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12);
}
/* "Bereits angemeldet"-Markierung: grüner linker Rand. Höhere Spezifität als der Glas-Default-Border
   (.admin-content … .db-card setzt border:1px), sonst überschreibt dessen border-Shorthand das Grün. */
.admin-content .db-card.has-creds { border-left: 3px solid var(--ok); }

/* Maskierter Border-Glow (folgt Cursor über --mx/--my aus App.razor) */
.admin-content :is(.card,.kpi-card,.db-card,.node-wrap,.tile,.cl-card,.cu-card,.cu-node,.bill-card,.pa-card,.pr-card,.pr-prod,.wl-card,.us-card)::before,
.login-box::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px; pointer-events:none; z-index:1;
  background: radial-gradient(440px circle at var(--mx,-9999px) var(--my,-9999px), rgba(125,180,255,.30), rgba(125,180,255,0) 45%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
/* Internes Spotlight beim Hover */
.admin-content :is(.card,.kpi-card,.db-card,.node-wrap,.tile,.cl-card,.cu-card,.cu-node,.bill-card,.pa-card,.pr-card,.pr-prod,.wl-card,.us-card)::after,
.login-box::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(125,180,255,.05), transparent 55%);
  opacity:0; transition:opacity .3s ease;
}
.admin-content :is(.card,.kpi-card,.db-card,.node-wrap,.tile,.cl-card,.cu-card,.cu-node,.bill-card,.pa-card,.pr-card,.pr-prod,.wl-card,.us-card):hover::after,
.login-box:hover::after { opacity:1; }

/* ── Glas-Buttons ── */
.admin-content :is(.db-btn,.icon-btn) {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.admin-content :is(.db-btn,.icon-btn):hover {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3);
  transform: translateY(-1px); box-shadow: 0 .5rem 1rem -.5rem rgba(0,0,0,.6);
}
.admin-content .node { background: transparent; }

@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ── Blazor Reconnect-Overlay ── */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex; position: fixed; inset: 0; z-index: 2000;
  align-items: center; justify-content: center; background: rgba(0,0,0,.62);
}
.reconnect-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 22px 26px; min-width: 260px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--fg); box-shadow: 0 12px 48px rgba(0,0,0,.55); }
.reconnect-spinner { width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15); border-top-color: var(--accent); animation: rc-spin .8s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
.reconnect-msg { font-size: .9rem; text-align: center; }
.reconnect-msg-failed, .reconnect-reload { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .reconnect-spinner,
#components-reconnect-modal.components-reconnect-failed .reconnect-msg-retry,
#components-reconnect-modal.components-reconnect-rejected .reconnect-msg-retry { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-msg-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-msg-failed,
#components-reconnect-modal.components-reconnect-failed .reconnect-reload,
#components-reconnect-modal.components-reconnect-rejected .reconnect-reload { display: block; }

/* ── Monitoring-Seite (Gauges + Sparklines — backup-spezifisch) ── */
.gauge-row    { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 8px; }
.gauge        { display: flex; flex-direction: column; align-items: center; }
.gauge-cap    { font-size: 11px; color: var(--fg-dim); margin-top: 2px; }
.perf-graphs  { display: flex; flex-direction: column; gap: 0; margin: 6px 0; }
.perf-graph   { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.perf-graph svg { flex: 1; }
.agent-insts  { margin-top: 6px; }

/* ── heusel.one-Shell-Einbettung: im gerahmten Shell-Modus (hsl.elements.js setzt #app.shell-one)
      die App-eigene Navigation ausblenden und den Inhalt über die volle Breite ziehen — die Shell
      liefert Chrome/Navigation außenherum. ── */
#app.shell-one .nav     { display: none; }
#app.shell-one .shell   { grid-template-columns: 1fr; }
#app.shell-one .content { padding-bottom: 24px; }