/* ════════════════════════════════════════════════════════════════════
   Inventar — module-local styles.

   Reuses the shared Mythos design language (mythos-dl/tokens.css +
   components.css + components-ext.css, loaded before this file in
   index.html) for everything generic: .btn, .badge-*, .card, .kpi-grid/
   .kpi-card, .m-nav/.nav-tab, .sub-tabs/.sub-tab, .detail-tabs/.detail-tab,
   .m-table, .modal-*, .wizard-steps/.wstep, .seg-switch, .switch-row,
   .m-toggle, .form-grid/.m-field, .section-card, .seg-v-up/-down/-na.

   Per docs/INVENTAR_MODULE_SPEC.md §7.2: "design-system.css are tokens,
   badge-uri și chrome, dar NU are componente KPI-tile sau tabs" — but the
   *canonical* layer (mythos-dl/components.css) already has both, so this
   file is deliberately thin: only the genuinely new surfaces —
     1. the dark "cockpit" Mission Control (pipeline, device cards,
        heartbeat pulse, metric tiles, event feed, live charts)
     2. wizard specifics not already covered (device-pick, summary/warn box)
     3. reconciliation diff-table specifics (confidence bar, sticky totals
        bar, unread flag)
     4. device registry card layout
     5. small dashboard chart bits (bars-chart is hand-rolled; the monthly
        chart itself is Chart.js — see js/tabs/dashboard.js)
   ════════════════════════════════════════════════════════════════════ */

/* ── Layout shell ─────────────────────────────────────────────────────── */
body { background: var(--bg-page); }
#shell { min-height: 100vh; display: flex; flex-direction: column; }
#app {
  flex: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 24px 64px;
}
.view-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 16px; flex-wrap: wrap;
}
.view-title { font-size: 20px; font-weight: var(--fw-bold); letter-spacing: -0.3px; }
.view-sub { color: var(--text-secondary); font-size: 12.5px; margin-top: 2px; }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 18px; }
.grid-2c { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1080px) { .grid-2, .grid-2c { grid-template-columns: 1fr; } }

/* live nav-tab pulsing dot (reuses the `livePulse` keyframe already defined
   globally in mythos-dl/components-ext.css for .detail-tab .live) */
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-left: 2px; animation: livePulse 1.6s var(--ease-out) infinite;
}
.nav-tab .live-dot { background: var(--brand-orange); }

/* ── Filter bars (T3/T4) ──────────────────────────────────────────────── */
.filter-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--bg-card); border: 0.5px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 12px 14px; margin-bottom: 14px;
}
.filter-bar .m-select, .filter-bar .m-input { width: auto; min-width: 140px; }
.filter-bar input[type=search] { min-width: 220px; }

/* ── Heat rows (dashboard "accuracy per gestiune" — reuses .seg-bar-w/-fill/
      -val from components-ext.css's segment tables). ────────────────────── */
.heat-grid { display: flex; flex-direction: column; gap: 9px; }
.heat-row { display: flex; align-items: center; gap: 12px; }
.heat-label { width: 160px; font-size: 12.5px; font-weight: var(--fw-medium); flex-shrink: 0; }
.heat-row .seg-bar-w { flex: 1; }

/* ════════════════════════════════════════════════════════════════════
   WIZARD (T2 — no active run)
   ════════════════════════════════════════════════════════════════════ */
.device-pick { display: flex; gap: 12px; margin-bottom: 8px; }
.device-pick-card {
  flex: 1; border: 1.5px solid var(--border-light); border-radius: var(--radius-md);
  padding: 13px 14px; display: flex; gap: 12px; align-items: center;
  background: var(--brand-orange-tint);
}
.dp-icon {
  width: 36px; height: 36px; border-radius: 9px; background: var(--bg-card);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.dp-meta { flex: 1; min-width: 0; }
.dp-name { font-weight: var(--fw-semibold); font-size: 13px; }
.dp-sub { font-size: 11.5px; color: var(--text-secondary); font-family: var(--font-mono); }

.summary-box { background: var(--bg-tinted); border: 0.5px solid var(--border-light); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 14px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; border-bottom: 0.5px solid var(--border-light); }
.summary-row:last-child { border-bottom: none; }
.summary-row .k { color: var(--text-secondary); }
.summary-row .v { font-weight: var(--fw-semibold); font-family: var(--font-mono); text-align: right; }

.warn-box {
  background: var(--warning-bg); color: var(--warning-dark); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 12.5px; font-weight: var(--fw-medium);
  display: flex; gap: 9px; align-items: flex-start; margin-bottom: 14px; line-height: 1.5;
}

.sku-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sku-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 14px;
  font-size: 11.5px; font-weight: var(--fw-semibold); font-family: var(--font-mono);
}
.sku-chip.ok { background: var(--success-bg); color: var(--success-dark); }
.sku-chip.bad { background: var(--error-bg); color: var(--error-dark); }

/* ════════════════════════════════════════════════════════════════════
   DARK COCKPIT — Mission Control (live run, T2)
   ════════════════════════════════════════════════════════════════════ */
:root {
  --inv-slab: #141518; --inv-slab-inner: #1C1E22; --inv-slab-inner2: #232529;
  --inv-slab-text: #F2F2F3; --inv-slab-text2: #9A9CA3;
  --inv-slab-hair: rgba(255, 255, 255, .08);
  --inv-glow: #FF7A33;
}
.cockpit-slab {
  background: var(--inv-slab); border-radius: 18px; padding: 22px; margin-bottom: 18px;
  color: var(--inv-slab-text);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28), 0 4px 14px rgba(0, 0, 0, .18);
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: slabReveal .4s var(--ease-spring);
}
@keyframes slabReveal { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.cockpit-inner { background: var(--inv-slab-inner); border: 1px solid var(--inv-slab-hair); border-radius: 13px; }
.cockpit-inner2 { background: var(--inv-slab-inner2); border: 1px solid var(--inv-slab-hair); }

.pipeline-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.pipeline { display: flex; align-items: center; flex: 1; min-width: 380px; }
.pnode { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; flex: 1; }
.pnode-dot { width: 12px; height: 12px; border-radius: 50%; background: #3A3C42; border: 2px solid #3A3C42; transition: all .3s; position: relative; z-index: 2; }
.pnode.done .pnode-dot { background: var(--success); border-color: var(--success); }
.pnode.active .pnode-dot { background: var(--inv-glow); border-color: var(--inv-glow); box-shadow: 0 0 0 5px rgba(255, 122, 51, .25); animation: nodePulse 1.4s ease-in-out infinite; }
@keyframes nodePulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(255, 122, 51, .25); } 50% { box-shadow: 0 0 0 9px rgba(255, 122, 51, .08); } }
.pnode-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--inv-slab-text2); font-family: var(--font-mono); white-space: nowrap; }
.pnode.active .pnode-label { color: var(--inv-glow); }
.pnode.done .pnode-label { color: var(--inv-slab-text); }
.pline { position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: #33353A; z-index: 1; }
.pnode:first-child .pline { display: none; }
.pnode.done .pline, .pnode.active .pline { background: var(--success); }

.timer-abort { display: flex; align-items: center; gap: 14px; }
.run-timer { font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--inv-slab-text); letter-spacing: .02em; }
.run-timer-label { font-size: 9.5px; color: var(--inv-slab-text2); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.abort-btn { background: rgba(255, 59, 48, .14); border: 1px solid rgba(255, 59, 48, .4); color: #FF6B60; padding: 8px 15px; border-radius: 9px; font-weight: 700; font-size: 12.5px; }
.abort-btn:hover { background: rgba(255, 59, 48, .22); }
.abort-btn:disabled { opacity: .45; cursor: not-allowed; }

.device-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dcard { padding: 17px; position: relative; }
.dcard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.dcard-name { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13.5px; }
.hb-pulse { width: 10px; height: 10px; border-radius: 50%; position: relative; flex-shrink: 0; }
.hb-pulse.hb-green { background: var(--success); }
.hb-pulse.hb-amber { background: var(--warning); }
.hb-pulse.hb-red { background: var(--error); }
.hb-pulse::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: hbring 1.5s ease-out infinite; }
.hb-pulse.hb-green::after { color: var(--success); }
.hb-pulse.hb-amber::after { color: var(--warning); }
.hb-pulse.hb-red::after { color: var(--error); }
@keyframes hbring { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
.dcard-ip { font-family: var(--font-mono); font-size: 10px; color: var(--inv-slab-text2); }
.dcard-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric-tile { background: var(--inv-slab-inner2); border-radius: 9px; padding: 10px 12px; }
.metric-tile .mv { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--inv-slab-text); letter-spacing: -.01em; }
.metric-tile .mv .glow-num { color: var(--inv-glow); }
.metric-tile .ml { font-size: 9.5px; color: var(--inv-slab-text2); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-top: 3px; }

.telem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.telem-card { padding: 15px; }
.telem-title { font-size: 11px; font-weight: 700; color: var(--inv-slab-text2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; display: flex; justify-content: space-between; }
.telem-title .val { color: var(--inv-glow); font-family: var(--font-mono); }
.chart-box { position: relative; height: 110px; }
.chart-box canvas { max-width: 100%; }

.event-feed { padding: 13px 15px; max-height: 190px; overflow: auto; font-family: var(--font-mono); font-size: 11px; }
.event-row { display: flex; gap: 10px; padding: 4px 0; color: var(--inv-slab-text2); border-bottom: 1px solid var(--inv-slab-hair); }
.event-row:last-child { border-bottom: none; }
.event-row .et { color: #5A5D66; flex-shrink: 0; }
.event-row .em { color: var(--inv-slab-text); }
.event-row.ev-warn .em { color: var(--warning); }
.event-row.ev-ok .em { color: var(--success); }

/* Heartbeat history strip (T3 Telemetrie — non-live, light chrome) */
.hb-strip { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
.hb-bar { flex: 1; max-width: 6px; border-radius: 2px 2px 0 0; }
.hb-bar.ok { background: var(--success); opacity: .78; }
.hb-bar.miss { background: var(--error); opacity: .92; }

/* ════════════════════════════════════════════════════════════════════
   RECONCILIATION / MENTOR (T3 diff table)
   ════════════════════════════════════════════════════════════════════ */
.conf-bar { width: 52px; height: 6px; border-radius: 4px; background: #EDEDEF; overflow: hidden; display: inline-block; vertical-align: middle; }
.conf-fill { display: block; height: 100%; border-radius: 4px; }

.unread-flag { background: var(--warning-bg); color: var(--warning-dark); font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 7px; white-space: nowrap; }

.sticky-bar {
  position: sticky; bottom: 0; background: var(--bg-card); border-top: 0.5px solid var(--border-medium);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .06); padding: 13px 18px; display: flex; justify-content: space-between;
  align-items: center; border-radius: 0 0 var(--radius-lg) var(--radius-lg); gap: 16px; flex-wrap: wrap;
}
.sticky-summary { display: flex; gap: 20px; font-size: 12.5px; }
.sticky-summary b { font-family: var(--font-mono); }

/* ════════════════════════════════════════════════════════════════════
   DEVICE REGISTRY (T5)
   ════════════════════════════════════════════════════════════════════ */
.dev-registry-card { padding: 20px; display: flex; flex-direction: column; gap: 13px; }
.dev-reg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dev-icon-lg { width: 44px; height: 44px; border-radius: 11px; background: var(--brand-orange-tint); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.dev-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; font-size: 12.5px; }
.dev-field-grid .fl { color: var(--text-secondary); font-weight: var(--fw-semibold); }
.dev-field-grid .fv { font-family: var(--font-mono); font-weight: var(--fw-semibold); }
.tag-token { background: var(--bg-tinted); padding: 7px 10px; border-radius: 8px; font-family: var(--font-mono); font-size: 11.5px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ════════════════════════════════════════════════════════════════════
   MISC
   ════════════════════════════════════════════════════════════════════ */
.hidden { display: none !important; }
.text-right { text-align: right; }
.clickable { cursor: pointer; }
.mono { font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}