/* PMT Design System: Light Institutional Theme */

body {
  background-color: #F8FAFC;
  color: #1E293B;
  font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5 {
  font-family: 'IBM Plex Serif', serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

/* Selection */
::selection {
  background: #002B5B;
  color: white;
}

/* Label utility */
.label-caps {
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748B;
  font-weight: 700;
}

/* Focus state */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #002B5B !important;
  box-shadow: 0 0 0 1px rgba(0,43,91,0.2);
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── HUD Scanning Loader ────────────────────────────────── */

.hud-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.hud-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.hud-container {
  position: relative;
  width: 220px;
  height: 220px;
}

/* Outer spinning ring */
.hud-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  border-top-color: #002B5B;
  border-right-color: #002B5B;
  animation: hudSpin 1.8s linear infinite;
}

/* Inner pulsing ring */
.hud-ring-inner {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  border-top-color: #64748B;
  animation: hudSpin 2.6s linear infinite reverse;
}

/* Center label */
.hud-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.hud-center-label {
  font-family: 'IBM Plex Serif', serif;
  font-size: 13px;
  font-weight: 700;
  color: #002B5B;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hud-center-sub {
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  color: #64748B;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Floating scan text fragments */
.hud-scan-text {
  position: absolute;
  font-family: 'Roboto Mono', 'SF Mono', 'Consolas', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #94A3B8;
  white-space: nowrap;
  animation: hudTextPulse 2.4s ease-in-out infinite;
}
.hud-scan-text:nth-of-type(1) { top: -8px;   left: 50%;  transform: translateX(-50%); animation-delay: 0s; }
.hud-scan-text:nth-of-type(2) { top: 25%;    right: -60px; animation-delay: 0.4s; }
.hud-scan-text:nth-of-type(3) { bottom: 25%; right: -70px; animation-delay: 0.8s; }
.hud-scan-text:nth-of-type(4) { bottom: -8px; left: 50%; transform: translateX(-50%); animation-delay: 1.2s; }
.hud-scan-text:nth-of-type(5) { top: 25%;    left: -65px;  animation-delay: 1.6s; }
.hud-scan-text:nth-of-type(6) { bottom: 25%; left: -55px;  animation-delay: 2.0s; }

/* Corner brackets — HUD frame feel */
.hud-bracket {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #002B5B;
  border-style: solid;
  opacity: 0.3;
}
.hud-bracket.tl { top: -4px;  left: -4px;  border-width: 2px 0 0 2px; }
.hud-bracket.tr { top: -4px;  right: -4px; border-width: 2px 2px 0 0; }
.hud-bracket.bl { bottom: -4px; left: -4px; border-width: 0 0 2px 2px; }
.hud-bracket.br { bottom: -4px; right: -4px; border-width: 0 2px 2px 0; }

@keyframes hudSpin {
  to { transform: rotate(360deg); }
}

@keyframes hudTextPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.9; }
}

/* ── Ticker Search Autocomplete ─────────────────────────── */

.ticker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 4px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  max-height: 280px;
  overflow-y: auto;
}

.ticker-option {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #F1F5F9;
  transition: background 0.1s;
}
.ticker-option:last-child { border-bottom: none; }
.ticker-option:hover,
.ticker-option:focus {
  background: #F1F5F9;
  outline: none;
}

.ticker-option-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ticker-option-code {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #002B5B;
  letter-spacing: 0.02em;
}
.ticker-option-name {
  font-size: 12px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-option-meta {
  font-size: 10px;
  color: #94A3B8;
  margin-top: 2px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}