/* NetX State - Custom Theme with New Colors 
   Implemented colors:
   1. Inchworm (#B1FA63) - 35% - Primary color
   2. Gunmetal (#243837) - 20% - Dark background
   3. Bright Snow (#FFFFFF) - 15% - Text and light elements
   4. American Silver (#D1D1D1) - 12% - Borders and secondary elements
   5. Orange (#FE7733) - 8% - Destructive/alert actions
   6. Pale Violet (#B2A1FF) - 10% - Secondary accent
*/

:root {
  /* Main color variables */
  --netx-primary: #B1FA63;
  --netx-dark: #243837;
  --netx-light: #FFFFFF;
  --netx-secondary: #D1D1D1;
  --netx-warning: #FE7733;
  --netx-accent: #B2A1FF;
  
  /* Variations for hover states, backgrounds, etc. */
  --netx-primary-hover: #9fe052;
  --netx-dark-lighter: #2d4645;
  --netx-warning-hover: #e56b2d;
  --netx-accent-hover: #a090e6;
  
  /* Override Bootstrap variables */
  --bs-primary: var(--netx-primary);
  --bs-primary-rgb: 177, 250, 99;
  --bs-secondary: var(--netx-secondary);
  --bs-secondary-rgb: 209, 209, 209;
  --bs-success: var(--netx-primary);
  --bs-success-rgb: 177, 250, 99;
  --bs-warning: var(--netx-warning);
  --bs-warning-rgb: 254, 119, 51;
  --bs-danger: var(--netx-warning);
  --bs-danger-rgb: 254, 119, 51;
  --bs-info: var(--netx-accent);
  --bs-info-rgb: 178, 161, 255;
  --bs-dark: var(--netx-dark);
  --bs-dark-rgb: 36, 56, 55;
  --bs-light: var(--netx-light);
  --bs-light-rgb: 255, 255, 255;
}

/* Apply dark theme base */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--netx-dark);
  --bs-body-color: var(--netx-light);
  --bs-tertiary-bg: var(--netx-dark-lighter);
  --bs-secondary-bg: var(--netx-dark-lighter);
  --bs-border-color: rgba(209, 209, 209, 0.3);
  --bs-body-font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-heading-font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Buttons styling */
.btn-primary {
  --bs-btn-bg: var(--netx-primary);
  --bs-btn-border-color: var(--netx-primary);
  --bs-btn-hover-bg: var(--netx-primary-hover);
  --bs-btn-hover-border-color: var(--netx-primary-hover);
  --bs-btn-active-bg: var(--netx-primary-hover);
  --bs-btn-active-border-color: var(--netx-primary-hover);
  --bs-btn-color: var(--netx-dark);
  --bs-btn-hover-color: var(--netx-dark);
  --bs-btn-active-color: var(--netx-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--netx-primary);
  --bs-btn-border-color: var(--netx-primary);
  --bs-btn-hover-bg: var(--netx-primary);
  --bs-btn-hover-border-color: var(--netx-primary);
  --bs-btn-hover-color: var(--netx-dark);
  --bs-btn-active-bg: var(--netx-primary);
  --bs-btn-active-border-color: var(--netx-primary);
  --bs-btn-active-color: var(--netx-dark);
}

.btn-danger, .btn-warning {
  --bs-btn-bg: var(--netx-warning);
  --bs-btn-border-color: var(--netx-warning);
  --bs-btn-hover-bg: var(--netx-warning-hover);
  --bs-btn-hover-border-color: var(--netx-warning-hover);
  --bs-btn-active-bg: var(--netx-warning-hover);
  --bs-btn-active-border-color: var(--netx-warning-hover);
  --bs-btn-color: var(--netx-light);
  --bs-btn-hover-color: var(--netx-light);
  --bs-btn-active-color: var(--netx-light);
}

/* Navigation styling */
.navbar-dark {
  --bs-navbar-color: var(--netx-light);
  background-color: var(--netx-dark) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
  color: var(--netx-light);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
  color: var(--netx-primary);
}

/* Footer styling */
footer {
  background-color: var(--netx-dark) !important;
}

footer .text-muted {
  color: var(--netx-secondary) !important;
}

footer a.text-decoration-none:hover {
  color: var(--netx-primary) !important;
}

/* Cards styling */
.card {
  background-color: var(--netx-dark-lighter);
  border-color: rgba(209, 209, 209, 0.2);
}

/* Links styling */
a {
  color: var(--netx-primary);
}

a:hover {
  color: var(--netx-primary-hover);
}

/* Alerts and badges */
.alert-success {
  --bs-alert-color: var(--netx-dark);
  --bs-alert-bg: rgba(177, 250, 99, 0.2);
  --bs-alert-border-color: rgba(177, 250, 99, 0.3);
}

.alert-danger, .alert-warning {
  --bs-alert-color: var(--netx-light);
  --bs-alert-bg: rgba(254, 119, 51, 0.2);
  --bs-alert-border-color: rgba(254, 119, 51, 0.3);
}

.alert-info {
  --bs-alert-color: var(--netx-light);
  --bs-alert-bg: rgba(178, 161, 255, 0.2);
  --bs-alert-border-color: rgba(178, 161, 255, 0.3);
}

.badge-primary, .bg-primary {
  background-color: var(--netx-primary) !important;
  color: var(--netx-dark) !important;
}

.badge-info, .bg-info {
  background-color: var(--netx-accent) !important;
  color: var(--netx-dark) !important;
}

.badge-danger, .bg-danger, .badge-warning, .bg-warning {
  background-color: var(--netx-warning) !important;
  color: var(--netx-light) !important;
}

/* Text colors */
.text-primary {
  color: var(--netx-primary) !important;
}

.text-info {
  color: var(--netx-accent) !important;
}

.text-danger, .text-warning {
  color: var(--netx-warning) !important;
}

/* Forms styling */
.form-control, .form-select {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(209, 209, 209, 0.3);
  color: var(--netx-light);
}

.form-control:focus, .form-select:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--netx-primary);
  box-shadow: 0 0 0 0.25rem rgba(177, 250, 99, 0.25);
}