/* Terminal-chrome primitives for the CAD-terminal redesign - corner
   brackets, LED status dots, the system bar, and the new motion
   vocabulary. Kept in its own file (not folded into components.css or
   dashboard.css) so this redesign's new surface area is one reviewable,
   revertible seam rather than scattered across the existing cascade. */

/* --- Corner brackets: a HUD-style accent for data-dense panels, opt-in
   via [data-corner-brackets] rather than baked into .card globally - not
   every card should read as an instrument panel. Two opposite corners
   (top-left/bottom-right) rather than all four: reads clearly as
   "technical framing" without visual clutter at scale, and needs no
   extra DOM nodes beyond the two pseudo-elements every element already
   has. */
[data-corner-brackets] {
  position: relative;
}

[data-corner-brackets]::before,
[data-corner-brackets]::after {
  content: "";
  position: absolute;
  width: var(--bracket-size);
  height: var(--bracket-size);
  pointer-events: none;
  opacity: 0.9;
}

[data-corner-brackets]::before {
  top: -1px;
  left: -1px;
  border-top: var(--bracket-thickness) solid var(--bracket-color);
  border-left: var(--bracket-thickness) solid var(--bracket-color);
}

[data-corner-brackets]::after {
  bottom: -1px;
  right: -1px;
  border-bottom: var(--bracket-thickness) solid var(--bracket-color);
  border-right: var(--bracket-thickness) solid var(--bracket-color);
}

/* --- Hairline divider utility --- */
.hairline {
  border: none;
  height: 1px;
  background: var(--color-border);
}

/* --- Mono-font utility for data-dense text (incident numbers,
   timestamps, call signs, addresses) - applied far more broadly than the
   3-4 spots that used --font-mono before this redesign. --- */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- Technical label utility: uppercase, tracked-out, faint - the
   "eyebrow"/table-header treatment already used ad hoc in a few spots,
   formalized into one reusable class. --- */
.label-technical {
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: 0.7rem;
  color: var(--color-text-faint);
}

/* --- LED status dot: the shared glow-ring recipe. Existing dot
   selectors (.live-dot, .realtime-dot, .audio-onair-dot, .timeline-dot,
   .legend-dot, .agency-dot, .badge::before) get folded into this
   recipe as each file is touched in later phases, rather than rewritten
   here all at once - see the led-glow-pulse keyframe below, which
   generalizes the "same box-shadow ring-pulse" recipe those 4 separate
   keyframes each currently duplicate. */
.led-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor var(--led-ring-opacity), transparent);
  flex-shrink: 0;
}

@keyframes led-glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px transparent;
  }
}

/* Tighter/faster rotating sweep than .hero's existing hero-sweep (12s) -
   for small LED/radar-style elements, not the hero's large glow blob. */
@keyframes radar-sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* A pulse line sweeping across a connection indicator - an "alive" cue
   distinct from the ring-pulse recipe above. */
@keyframes heartbeat-line {
  0%,
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    transform: translateX(100%);
    opacity: 1;
  }
}

/* Staggered entrance for table rows/list items on first paint - opt in
   via [data-stagger], with --i set per-item (e.g. inline
   style="--i: {{ loop.index0 }}") and timed off --stagger-step. Distinct
   from realtime.js's is-entering/is-visible lifecycle, which only fires
   for live SSE-driven inserts, never a page's initial render. */
@keyframes cascade-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-stagger] {
  animation: cascade-fade-up var(--duration-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger-step));
}

/* Blinking caret for the live-transcription-reveal effect. */
@keyframes typewriter-caret {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.typewriter-caret::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: typewriter-caret 800ms steps(1) infinite;
}

/* --- System bar: the persistent live-status strip (clock, connection
   LED, active-call count) mounted in the admin shell and every public
   operational page. --- */
.system-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  /* Default spacing for page-content usage (Dispatch Board, Call History,
     etc.) - overridden to 0 when embedded in the admin topbar's own flex
     row, see admin.css. */
  margin-bottom: var(--space-5);
}

.system-bar-clock {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.system-bar-status,
.system-bar-count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
}

.system-bar-status[data-state="connected"] .led-dot {
  color: var(--color-success);
  animation: led-glow-pulse 2s infinite;
}

.system-bar-status[data-state="connecting"] .led-dot,
.system-bar-status[data-state="disconnected"] .led-dot {
  color: var(--color-danger);
}

.system-bar-count {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.system-bar-count:hover {
  color: var(--color-accent);
}

.system-bar-count-value {
  font-weight: 600;
}

@media (max-width: 700px) {
  .system-bar {
    font-size: 0.75rem;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
  }

  /* The clock is the least information-dense-per-pixel cell here - drop
     it first when space is tight, keep the connection LED and active
     count (both meaningful at a glance without reading digits). */
  .system-bar-clock {
    display: none;
  }
}