/* ==========================================================================
   Controls Tools - Neo-Industrial Cyber Design System
   Visual Theme: Controls Tools Glow Indigo
   ========================================================================== */

/* Strict Universal Geometry & Border Radius */
*, *::before, *::after {
  border-radius: 0 !important;
  box-sizing: border-box;
}

/* Color Variables */
:root {
  --theme-bg: #0A0B1E;
  --surface: #10123A;
  --surface-container: #14163F;
  --surface-high: #1B1E4A;
  --surface-highest: #242759;
  --outline-variant: #33355C;
  --outline: #6A6D99;
  --glow-primary: #6C63FF;
  --glow-secondary: #3B2FA6;
  --glow-deep: #1B1450;
  --accent-green: #25D366;
  --accent-blue: #1877F2;
  --accent-cyan: #29B6F6;
  --accent-purple: #7A3BFF;
  --accent-orange: #FF8A00;
  --danger-1: #FF5722;
  --danger-2: #E63946;
  --on-surface: #E6E7F5;
  --on-surface-variant: #B7B9D6;
}

body {
  background-color: #0A0B1E;
  color: #E6E7F5;
  font-family: 'Cairo', sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Headings and Typography */
h1, h2, h3, .font-headline, .font-anton {
  font-family: 'Anton', 'Cairo', sans-serif;
  letter-spacing: 0.04em;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Chevron 45-degree Repeating Hatching Pattern */
.chevron-pattern {
  background-color: #10123A;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #2A2C52 10px,
    #2A2C52 11px
  );
}

.chevron-pattern-subtle {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(42, 44, 82, 0.45) 0,
    rgba(42, 44, 82, 0.45) 2px,
    transparent 0,
    transparent 8px
  );
}

/* Custom Precision Cyber Scrollbars */
::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
  background: #0A0B1E;
}

::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #33355C;
  border: 1px solid #1B1E4A;
}

::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #6C63FF;
}

/* SweetAlert2 Strict Controls Tools Theme */
.swal2-container {
  z-index: 99999 !important;
}

.swal2-popup.swal2-modal {
  background-color: #10123A !important;
  border: 2px solid #33355C !important;
  border-radius: 0 !important;
  color: #E6E7F5 !important;
  box-shadow: 0 0 30px rgba(108, 99, 255, 0.25) !important;
  font-family: 'Cairo', sans-serif !important;
  padding: 24px !important;
}

.swal2-title {
  color: #FFFFFF !important;
  font-family: 'Anton', 'Cairo', sans-serif !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.swal2-html-container {
  color: #B7B9D6 !important;
  font-size: 0.95rem !important;
  font-family: 'Cairo', sans-serif !important;
}

.swal2-actions {
  gap: 12px !important;
}

.swal2-confirm {
  background-color: #25D366 !important;
  color: #0A0B1E !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  border: 2px solid #25D366 !important;
  box-shadow: none !important;
  padding: 10px 24px !important;
  transition: all 0.2s ease !important;
}

.swal2-confirm:hover {
  background-color: transparent !important;
  color: #25D366 !important;
}

.swal2-cancel {
  background-color: #1B1E4A !important;
  color: #E6E7F5 !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  border: 2px solid #33355C !important;
  box-shadow: none !important;
  padding: 10px 24px !important;
  transition: all 0.2s ease !important;
}

.swal2-cancel:hover {
  background-color: #33355C !important;
  color: #FFFFFF !important;
}

.swal2-icon.swal2-warning {
  border-color: #FF8A00 !important;
  color: #FF8A00 !important;
}

.swal2-icon.swal2-success {
  border-color: #25D366 !important;
  color: #25D366 !important;
}

.swal2-icon.swal2-error {
  border-color: #E63946 !important;
  color: #E63946 !important;
}

/* Mobile Friendly Utilities */
@media (max-width: 767px) {
  .mobile-table-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6C63FF;
    padding: 6px 10px;
    background: rgba(108, 99, 255, 0.1);
    border: 1px solid rgba(108, 99, 255, 0.3);
    margin-bottom: 8px;
  }
}