/* =====================================================================
   SED — intelligence-system polish layer.
   Loaded after app.css; adds depth, motion and the command surface
   without changing any existing markup.
   ===================================================================== */

:root {
  --glow: 0 0 0 1px rgba(22,163,74,.18), 0 10px 30px -8px rgba(10,82,48,.28);
  --ring: 0 0 0 3px rgba(22,163,74,.22);
  --ease: cubic-bezier(.32,.72,.28,1);
}

/* ---------- app bar: subtle scanning sheen + live pulse ---------- */
.app-bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.07) 48%, transparent 58%);
  background-size: 260% 100%;
  animation: sedSheen 9s var(--ease) infinite;
}
@keyframes sedSheen { 0%,72% { background-position: 180% 0; } 100% { background-position: -60% 0; } }

.app-title strong { letter-spacing: -.015em; }
.app-title .gov { letter-spacing: .1em; }

/* live-system badge injected by ux.js */
.sys-live {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28);
  color: #EAF6EE; border-radius: 99px; padding: 4px 11px 4px 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; backdrop-filter: blur(6px);
}
.sys-live i {
  width: 7px; height: 7px; border-radius: 99px; background: #4ADE80; display: block;
  box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: sedPulse 2.4s infinite;
}
@keyframes sedPulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,.65); }
  70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ---------- nav tabs: sliding indicator ---------- */
.nav-tabs a { position: relative; transition: color .18s var(--ease), background .18s var(--ease); }
.nav-tabs a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: center; transition: transform .24s var(--ease);
}
.nav-tabs a:hover::after { transform: scaleX(.6); }
.nav-tabs a.on::after { transform: scaleX(1); }

/* ---------- cards: lift + hairline glow ---------- */
.dcard, .sec, .kpi {
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.dcard:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.kpi { position: relative; overflow: hidden; }
.kpi::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
  background: var(--kc, var(--accent)); opacity: .9;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.kpi b { font-variant-numeric: tabular-nums; }

/* counters animate in */
.kpi b.counting { color: var(--kc, var(--pri)); }

/* ---------- section headers ---------- */
.sec > summary h2 { letter-spacing: -.01em; }
.sec > summary { transition: background .18s var(--ease); }
.sec > summary:hover { background: linear-gradient(90deg, rgba(22,163,74,.06), transparent); }

/* ---------- buttons ---------- */
button, .dm-btn, .clearbtn {
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
button:active, .dm-btn:active, .clearbtn:active { transform: translateY(1px) scale(.995); }
.dm-btn:hover, .clearbtn:hover { box-shadow: 0 6px 18px -6px rgba(10,82,48,.45); }

/* ---------- command palette ---------- */
#sedCmdWrap {
  position: fixed; inset: 0; z-index: 6000; display: none;
  background: rgba(8,26,17,.55); backdrop-filter: blur(6px);
  align-items: flex-start; justify-content: center; padding-top: 12vh;
}
#sedCmdWrap.on { display: flex; animation: sedFade .16s var(--ease); }
@keyframes sedFade { from { opacity: 0 } to { opacity: 1 } }
.cmd-box {
  width: min(94vw, 660px); background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.6);
  animation: sedRise .22s var(--ease);
}
@keyframes sedRise { from { transform: translateY(-10px) scale(.985); opacity: .6 } to { transform: none; opacity: 1 } }
.cmd-in {
  display: flex; align-items: center; gap: 11px; padding: 15px 18px;
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #F7FAF8, #fff);
}
.cmd-in svg { flex: none; opacity: .5 }
.cmd-in input {
  flex: 1; border: 0; outline: 0; font: inherit; font-size: 16.5px; background: transparent; color: var(--ink);
}
.cmd-in kbd {
  font: 700 10.5px var(--font-body); background: var(--mint); color: var(--pri);
  border: 1px solid #CBE3D4; border-radius: 6px; padding: 3px 7px;
}
.cmd-list { max-height: 52vh; overflow: auto; padding: 7px; }
.cmd-sec {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-45); padding: 10px 12px 6px;
}
.cmd-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  cursor: pointer; font-size: 14px;
}
.cmd-row .ic {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--mint); color: var(--pri); font-size: 15px; flex: none;
}
.cmd-row .tx { flex: 1; min-width: 0 }
.cmd-row .tx b { display: block; font-weight: 700; font-size: 14px; }
.cmd-row .tx span { display: block; font-size: 11.5px; color: var(--ink-45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-row .go { font-size: 11px; color: var(--ink-45); opacity: 0 }
.cmd-row.sel { background: var(--mint); }
.cmd-row.sel .go { opacity: 1 }
.cmd-row:hover { background: #F2F7F3 }
.cmd-empty { padding: 26px; text-align: center; color: var(--ink-45); font-size: 13.5px }
.cmd-foot {
  display: flex; gap: 16px; align-items: center; padding: 9px 16px;
  border-top: 1px solid var(--line); background: #FAFCFA; font-size: 11px; color: var(--ink-45);
}
.cmd-foot b { font-weight: 800; color: var(--ink-70) }

/* ---------- toasts ---------- */
#sedToasts {
  position: fixed; z-index: 5500; inset-inline-end: 16px; bottom: 84px;
  display: flex; flex-direction: column; gap: 9px; pointer-events: none;
}
.sed-toast {
  background: #10241A; color: #EAF6EE; border-radius: 12px; padding: 11px 15px;
  font-size: 13px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.6);
  display: flex; align-items: center; gap: 10px; max-width: 340px;
  animation: sedToastIn .26s var(--ease); border-inline-start: 3px solid var(--accent);
}
.sed-toast.warn { border-inline-start-color: #EAB308 }
.sed-toast.err { border-inline-start-color: #EF4444 }
.sed-toast b { font-weight: 700 }
@keyframes sedToastIn { from { transform: translateX(22px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- skeleton shimmer for loading panels ---------- */
.sed-skel {
  background: linear-gradient(90deg, #EEF2EF 25%, #F7FAF8 37%, #EEF2EF 63%);
  background-size: 400% 100%; animation: sedShim 1.3s infinite linear;
  border-radius: 8px; height: 14px;
}
@keyframes sedShim { from { background-position: 100% 0 } to { background-position: 0 0 } }

/* ---------- scroll progress on dashboards ---------- */
#sedProg {
  position: fixed; top: 0; inset-inline-start: 0; height: 3px; z-index: 1500;
  background: linear-gradient(90deg, var(--accent), #7B4FA8); width: 0; transition: width .1s linear;
}

/* ---------- data freshness chip ---------- */
.fresh-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: var(--pri); background: var(--mint); border: 1px solid #CBE3D4;
  border-radius: 99px; padding: 3px 10px;
}

/* ---------- signed-in chip refinement ---------- */
#sedWho { backdrop-filter: blur(8px); transition: transform .18s var(--ease); }
#sedWho:hover { transform: translateY(-1px); }

/* ---------- tables ---------- */
table.dz tbody tr { transition: background .14s var(--ease) }
table.dz tbody tr:hover { background: var(--mint) !important }

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .app-bar::after, .sys-live i, .sed-skel { animation: none !important; }
}