/* Bullseye Figma Design System */
:root {
  --bs-font-size: 16px;
  --bs-background: #000000;
  --bs-foreground: #f5f5f5;
  --bs-card: rgba(0, 0, 0, 0.4);
  --bs-card-foreground: #f5f5f5;
  --bs-primary: #030213;
  --bs-primary-foreground: #ffffff;
  --bs-muted: #ececf0;
  --bs-muted-foreground: #717182;
  --bs-border: #1f2937;
  --bs-border-hover: #374151;
  --bs-destructive: #d4183d;
  --bs-green-400: #4ade80;
  --bs-green-900-30: rgba(20, 83, 45, 0.3);
  --bs-red-400: #f87171;
  --bs-red-900-30: rgba(127, 29, 29, 0.3);
  --bs-purple-400: #c084fc;
  --bs-purple-900-30: rgba(88, 28, 135, 0.3);
  --bs-orange-400: #fb923c;
  --bs-orange-900-30: rgba(124, 45, 18, 0.3);
  --bs-blue-400: #60a5fa;
  --bs-blue-900-30: rgba(30, 58, 138, 0.3);
  --bs-gray-400: #9ca3af;
  --bs-gray-500: #6b7280;
  --bs-gray-600: #4b5563;
  --bs-gray-900-30: rgba(17, 24, 39, 0.3);
  --bs-radius: 0px;
}

/* ========== BASE STYLES ========== */
html {
  font-size: 16px;
}

body.bullseye-theme {
  background-color: var(--bs-background);
  color: var(--bs-foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

body.bullseye-theme * {
  box-sizing: border-box;
}

body.bullseye-theme h1 {
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

body.bullseye-theme h2 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

body.bullseye-theme h3 {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

body.bullseye-theme h4 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

body.bullseye-theme label {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

body.bullseye-theme button {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}

body.bullseye-theme input {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

body.bullseye-theme a {
  color: var(--bs-foreground);
  text-decoration: none;
}

body.bullseye-theme a:hover {
  color: var(--bs-gray-400);
}

/* ========== LAYOUT ========== */
.bs-min-h-screen {
  min-height: 100vh;
}

.bs-max-w-7xl {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.bs-max-w-4xl {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.bs-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.bs-py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.bs-py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.bs-p-4 { padding: 1rem; }
.bs-p-5 { padding: 1.25rem; }
.bs-p-6 { padding: 1.5rem; }
.bs-mb-1 { margin-bottom: 0.25rem; }
.bs-mb-2 { margin-bottom: 0.5rem; }
.bs-mb-4 { margin-bottom: 1rem; }
.bs-mb-6 { margin-bottom: 1.5rem; }
.bs-mb-8 { margin-bottom: 2rem; }
.bs-mt-1 { margin-top: 0.25rem; }
.bs-mt-4 { margin-top: 1rem; }
.bs-pb-6 { padding-bottom: 1.5rem; }

/* ========== FLEXBOX ========== */
.bs-flex { display: flex; }
.bs-flex-col { flex-direction: column; }
.bs-items-center { align-items: center; }
.bs-items-start { align-items: flex-start; }
.bs-justify-between { justify-content: space-between; }
.bs-justify-center { justify-content: center; }
.bs-gap-2 { gap: 0.5rem; }
.bs-gap-3 { gap: 0.75rem; }
.bs-gap-4 { gap: 1rem; }
.bs-gap-6 { gap: 1.5rem; }
.bs-flex-1 { flex: 1; }
.bs-shrink-0 { flex-shrink: 0; }
.bs-flex-wrap { flex-wrap: wrap; }

/* ========== GRID ========== */
.bs-grid { display: grid; }
.bs-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bs-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bs-space-y-3 > * + * { margin-top: 0.75rem; }
.bs-space-y-4 > * + * { margin-top: 1rem; }
.bs-space-y-6 > * + * { margin-top: 1.5rem; }

@media (min-width: 1024px) {
  .bs-lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== HEADER ========== */
.bs-header {
  border-bottom: 1px solid var(--bs-border);
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ========== CARDS ========== */
.bs-card {
  border: 1px solid var(--bs-border);
  background-color: var(--bs-card);
}

.bs-card:hover {
  border-color: var(--bs-border-hover);
}

.bs-card-header {
  padding: 1rem;
  border-bottom: 1px solid var(--bs-border);
  background-color: rgba(0, 0, 0, 0.2);
}

.bs-card-body {
  padding: 1rem;
}

/* ========== CATEGORY SECTIONS ========== */
.bs-category-section {
  border: 1px solid var(--bs-border);
  background-color: rgba(0, 0, 0, 0.2);
}

.bs-category-header {
  width: 100%;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--bs-foreground);
  transition: background-color 0.15s ease;
}

.bs-category-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.bs-category-icon {
  width: 3rem;
  height: 3rem;
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-category-icon svg {
  width: 2rem;
  height: 2rem;
  color: white;
}

.bs-category-content {
  padding: 0 1.5rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .bs-category-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========== TRADE BADGES ========== */
.bs-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  display: inline-block;
}

.bs-badge-call {
  background-color: var(--bs-green-900-30);
  color: var(--bs-green-400);
}

.bs-badge-put {
  background-color: var(--bs-red-900-30);
  color: var(--bs-red-400);
}

.bs-badge-nuc {
  background-color: var(--bs-purple-900-30);
  color: var(--bs-purple-400);
}

.bs-badge-rocket {
  background-color: var(--bs-red-900-30);
  color: var(--bs-red-400);
}

.bs-badge-torpedo {
  background-color: var(--bs-orange-900-30);
  color: var(--bs-orange-400);
}

.bs-badge-missile {
  background-color: var(--bs-blue-900-30);
  color: var(--bs-blue-400);
}

.bs-badge-cannon {
  background-color: var(--bs-gray-900-30);
  color: var(--bs-gray-400);
}

.bs-badge-active {
  background-color: var(--bs-green-900-30);
  color: var(--bs-green-400);
}

/* ========== TEXT COLORS ========== */
.bs-text-white { color: #ffffff; }
.bs-text-gray-400 { color: var(--bs-gray-400); }
.bs-text-gray-500 { color: var(--bs-gray-500); }
.bs-text-gray-600 { color: var(--bs-gray-600); }
.bs-text-green-400 { color: var(--bs-green-400); }
.bs-text-red-400 { color: var(--bs-red-400); }

/* ========== TEXT SIZE ========== */
.bs-text-xs { font-size: 0.75rem; line-height: 1rem; }
.bs-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.bs-text-base { font-size: 1rem; line-height: 1.5rem; }
.bs-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.bs-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.bs-text-2xl { font-size: 1.5rem; line-height: 2rem; }
.bs-text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.bs-text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

/* ========== FONT WEIGHT ========== */
.bs-font-medium { font-weight: 500; }
.bs-font-normal { font-weight: 400; }

/* ========== TEXT ALIGNMENT ========== */
.bs-text-center { text-align: center; }
.bs-text-right { text-align: right; }
.bs-text-left { text-align: left; }

/* ========== BUTTONS ========== */
.bs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bs-btn-primary {
  background-color: #ffffff;
  color: #000000;
}

.bs-btn-primary:hover {
  background-color: #e5e7eb;
}

.bs-btn-ghost {
  background: none;
  border: none;
  color: var(--bs-gray-400);
  padding: 0.5rem;
}

.bs-btn-ghost:hover {
  color: #ffffff;
}

/* ========== FORMS ========== */
.bs-input {
  width: 100%;
  background-color: #000000;
  border: 1px solid var(--bs-border);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  outline: none;
}

.bs-input:focus {
  border-color: var(--bs-gray-500);
}

.bs-input::placeholder {
  color: var(--bs-gray-600);
}

/* ========== DATE INPUTS ========== */
.bs-date-input {
  background-color: #000000;
  border: 1px solid var(--bs-border);
  color: #ffffff;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.bs-date-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* ========== LIVE INDICATOR ========== */
.bs-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #22c55e;
  border-radius: 9999px;
  animation: bs-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes bs-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ========== TABS ========== */
.bs-tabs {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid var(--bs-border);
  margin-bottom: 2rem;
}

.bs-tab {
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--bs-gray-500);
  cursor: pointer;
  transition: color 0.15s ease;
}

.bs-tab:hover {
  color: #d1d5db;
}

.bs-tab.active {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* ========== DIVIDE ========== */
.bs-divide-y > * + * {
  border-top: 1px solid var(--bs-border);
}

/* ========== BORDER BOTTOM ========== */
.bs-border-b {
  border-bottom: 1px solid var(--bs-border);
}

/* ========== UTILITY ========== */
.bs-cursor-pointer { cursor: pointer; }
.bs-transition { transition: all 0.15s ease; }
.bs-w-full { width: 100%; }
.bs-hidden { display: none; }
.bs-block { display: block; }
.bs-inline-block { display: inline-block; }

/* ========== ROUNDED ========== */
.bs-rounded-full { border-radius: 9999px; }

/* ========== ICON CONTAINER ========== */
.bs-icon-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  background-color: var(--bs-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== TOGGLE / SWITCH ========== */
.bs-toggle-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.bs-toggle-input {
  appearance: none;
  -webkit-appearance: none;
  width: 2.25rem;
  height: 1.25rem;
  background-color: var(--bs-border);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.bs-toggle-input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.875rem;
  height: 0.875rem;
  background-color: var(--bs-gray-400);
  border-radius: 9999px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.bs-toggle-input:checked {
  background-color: #22c55e;
}

.bs-toggle-input:checked::after {
  transform: translateX(1rem);
  background-color: #ffffff;
}

/* ========== HOVER ON ROW ========== */
.bs-hover-row:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ========== CHEVRON ICONS ========== */
.bs-chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--bs-gray-400);
  transition: transform 0.2s ease;
}

.bs-chevron.collapsed {
  transform: rotate(180deg);
}

/* ========== NAVIGATION HEADER LINKS ========== */
.bs-nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.bs-nav-link {
  color: var(--bs-gray-400);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
  padding: 0.25rem 0;
}

.bs-nav-link:hover {
  color: #ffffff;
}

.bs-nav-link.active {
  color: #ffffff;
}

/* ========== LOGIN PAGE ========== */
.bs-login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-background);
}

.bs-login-card {
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--bs-border);
  background-color: rgba(0, 0, 0, 0.4);
  padding: 2.5rem;
}

.bs-login-card h1 {
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.bs-login-card p {
  color: var(--bs-gray-500);
  margin-bottom: 2rem;
}

/* ========== OVERRIDE SB ADMIN / BOOTSTRAP FOR THEMED PAGES ========== */
body.bullseye-theme .dataTables_wrapper .dataTables_filter label,
body.bullseye-theme .dataTables_wrapper .dataTables_length label,
body.bullseye-theme .dataTables_wrapper .dataTables_info,
body.bullseye-theme .dataTables_wrapper .dataTables_paginate {
  color: var(--bs-gray-400);
}

body.bullseye-theme table.dataTable {
  border-color: var(--bs-border);
}

body.bullseye-theme table.dataTable td,
body.bullseye-theme table.dataTable th {
  border-color: var(--bs-border);
  color: var(--bs-foreground);
  background-color: transparent;
}

body.bullseye-theme table.dataTable thead th {
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--bs-gray-400);
  border-bottom: 1px solid var(--bs-border);
}

body.bullseye-theme table.dataTable tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.05);
}

body.bullseye-theme .form-control {
  background-color: #000000;
  border: 1px solid var(--bs-border);
  color: #ffffff;
}

body.bullseye-theme .form-control:focus {
  border-color: var(--bs-gray-500);
  box-shadow: none;
}

body.bullseye-theme .form-check-label {
  color: var(--bs-gray-400);
}

body.bullseye-theme .btn-outline-secondary {
  border-color: var(--bs-border);
  color: var(--bs-gray-400);
}

body.bullseye-theme .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

body.bullseye-theme .btn-primary {
  background-color: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

body.bullseye-theme .btn-primary:hover {
  background-color: #e5e7eb;
  color: #000000;
  border-color: #e5e7eb;
}

body.bullseye-theme .new-row {
  background-color: rgba(34, 197, 94, 0.15) !important;
}

body.bullseye-theme .input-group-text {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: var(--bs-border);
  color: var(--bs-gray-400);
}

/* ========== FOOTER ========== */
.bs-footer {
  border-top: 1px solid var(--bs-border);
  color: var(--bs-gray-600);
  text-align: center;
  padding: 1.5rem;
  font-size: 0.875rem;
}