/* ===== OMNIPARALLAX DESIGN SYSTEM ===== */
/* WarGames/NORAD CRT Terminal Aesthetic */

:root {
  /* PRIMARY PALETTE */
  --op-green-bright: #00ff41;
  --op-green-mid: #00cc33;
  --op-green-dim: #009922;
  --op-green-faint: #1a3a1a;
  --op-green-ghost: #0d1f0d;

  /* SEMANTIC COLORS */
  --op-normal: #00ff41;
  --op-watch: #00ddff;
  --op-notable: #ffaa00;
  --op-alert: #ff6622;
  --op-critical: #ff3333;
  --op-special: #ff44cc;
  --op-intel: #ffffff;

  /* CATEGORY COLORS */
  --op-cat-conflict: #ff3333;
  --op-cat-markets: #ffaa00;
  --op-cat-disaster: #ff6622;
  --op-cat-political: #00ddff;
  --op-cat-health: #00ff41;
  --op-cat-cyber: #ff44cc;
  --op-cat-energy: #ffdd00;
  --op-cat-intel: #ffffff;
  --op-cat-tracking: #00ddff;
  --op-cat-signals: #aa88ff;

  /* BACKGROUNDS */
  --op-bg-deep: #050805;
  --op-bg-primary: #0a0f0a;
  --op-bg-secondary: #0d140d;
  --op-bg-tertiary: #111a11;
  --op-bg-hover: #152015;
  --op-bg-active: #1a2a1a;

  /* TYPOGRAPHY */
  --op-font-mono: 'Share Tech Mono', 'Courier New', 'Consolas', monospace;
  --op-font-display: 'VT323', 'Share Tech Mono', monospace;
  --op-font-size-xs: 9px;
  --op-font-size-sm: 10px;
  --op-font-size-md: 11px;
  --op-font-size-lg: 13px;
  --op-font-size-xl: 16px;
  --op-font-size-xxl: 20px;

  /* SPACING */
  --op-space-xs: 4px;
  --op-space-sm: 8px;
  --op-space-md: 12px;
  --op-space-lg: 16px;
  --op-space-xl: 24px;

  /* BORDERS */
  --op-border-subtle: 1px solid #1a3a1a;
  --op-border-normal: 1px solid #009922;
  --op-border-bright: 1px solid #00cc33;

  /* EFFECTS */
  --op-glow-sm: 0 0 4px rgba(0, 255, 65, 0.3);
  --op-glow-md: 0 0 8px rgba(0, 255, 65, 0.4);
  --op-glow-lg: 0 0 16px rgba(0, 255, 65, 0.5);
  --op-transition-fast: 150ms ease;
  --op-transition-normal: 250ms ease;

  /* Z-INDEX LAYERS */
  --op-z-map: 1;
  --op-z-overlay: 100;
  --op-z-sidebar: 200;
  --op-z-ticker: 300;
  --op-z-vitals: 400;
  --op-z-panel: 500;
  --op-z-modal: 600;
  --op-z-notification: 700;
  --op-z-tooltip: 800;
}

/* ===== BASE COMPONENTS ===== */

.op-panel {
  background: var(--op-bg-primary);
  border: var(--op-border-normal);
  box-shadow: var(--op-glow-md);
  padding: var(--op-space-md);
  font-family: var(--op-font-mono);
  font-size: var(--op-font-size-md);
  color: var(--op-green-bright);
  line-height: 1.6;
}

.op-btn {
  background: transparent;
  border: var(--op-border-normal);
  color: var(--op-green-bright);
  font-family: var(--op-font-mono);
  font-size: var(--op-font-size-md);
  padding: var(--op-space-sm) var(--op-space-md);
  cursor: pointer;
  transition: all var(--op-transition-fast);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.op-btn:hover {
  background: var(--op-bg-hover);
  box-shadow: var(--op-glow-sm);
}

.op-btn:active {
  background: var(--op-bg-active);
  color: var(--op-green-mid);
}

.op-btn:disabled {
  color: var(--op-green-dim);
  border-color: var(--op-green-dim);
  cursor: not-allowed;
}

.op-input {
  background: var(--op-bg-secondary);
  border: var(--op-border-normal);
  color: var(--op-green-bright);
  font-family: var(--op-font-mono);
  font-size: var(--op-font-size-md);
  padding: var(--op-space-sm) var(--op-space-md);
  transition: all var(--op-transition-fast);
}

.op-input:focus {
  outline: none;
  border-color: var(--op-green-bright);
  box-shadow: var(--op-glow-sm);
  background: var(--op-bg-tertiary);
}

.op-input::placeholder {
  color: var(--op-green-dim);
}

.op-badge {
  display: inline-block;
  background: var(--op-bg-secondary);
  border: var(--op-border-subtle);
  color: var(--op-normal);
  padding: 2px 6px;
  font-size: var(--op-font-size-xs);
  border-radius: 0;
  letter-spacing: 0.5px;
}

.op-badge.critical { color: var(--op-critical); border-color: var(--op-critical); }
.op-badge.alert { color: var(--op-alert); border-color: var(--op-alert); }
.op-badge.notable { color: var(--op-notable); border-color: var(--op-notable); }
.op-badge.watch { color: var(--op-watch); border-color: var(--op-watch); }

.op-tag {
  display: inline-block;
  padding: 4px 8px;
  font-size: var(--op-font-size-xs);
  border: var(--op-border-subtle);
  background: var(--op-bg-secondary);
  color: var(--op-normal);
  margin: 2px 4px;
  letter-spacing: 0.5px;
  cursor: default;
}

.op-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--op-font-size-sm);
}

.op-table th {
  background: var(--op-bg-tertiary);
  border: var(--op-border-subtle);
  padding: var(--op-space-sm);
  text-align: left;
  color: var(--op-green-bright);
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.op-table td {
  border: var(--op-border-subtle);
  padding: var(--op-space-sm);
  color: var(--op-green-bright);
}

.op-table tr:hover {
  background: var(--op-bg-hover);
}

.op-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.op-scrollbar::-webkit-scrollbar-track {
  background: var(--op-bg-secondary);
}

.op-scrollbar::-webkit-scrollbar-thumb {
  background: var(--op-green-dim);
  border-radius: 0;
}

.op-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--op-green-mid);
}

@keyframes op-loading {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

.op-loading {
  display: inline-block;
  animation: op-loading 1s infinite;
  color: var(--op-notable);
}

.op-loading::after {
  content: '█';
  animation: op-loading 1s infinite;
}

.op-empty {
  padding: var(--op-space-xl);
  text-align: center;
  color: var(--op-green-dim);
  font-size: var(--op-font-size-md);
}

.op-empty-icon {
  font-size: 32px;
  margin-bottom: var(--op-space-md);
  opacity: 0.5;
}

.op-error {
  background: rgba(255, 51, 51, 0.1);
  border: 1px solid var(--op-critical);
  color: var(--op-critical);
  padding: var(--op-space-md);
  font-size: var(--op-font-size-sm);
}

/* ===== CRT EFFECTS ===== */

@keyframes op-flicker {
  0% { opacity: 1; }
  2% { opacity: 0.98; }
  5% { opacity: 1; }
  87% { opacity: 1; }
  88% { opacity: 0.96; }
  100% { opacity: 1; }
}

.op-crt-flicker {
  animation: op-flicker 0.15s infinite;
}

.op-scanline {
  position: relative;
}

.op-scanline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 10;
}

.op-vignette {
  position: relative;
}

.op-vignette::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 5;
}