/* ===================================================================
   NUBECLOUD — SpaceX Theme
   Dark · Red accent · Sharp corners · Industrial
   Overrides CSS variables from style.css
   =================================================================== */

/* ========================= VARIABLES ========================= */
html[data-theme="spacex"] {
  --bg-deep: #000000;
  --bg-primary: #000000;
  --bg-secondary: #050505;
  --bg-surface: #080808;
  --bg-card: rgba(10, 10, 10, 0.9);
  --bg-card-solid: #0a0a0a;
  --bg-card-hover: rgba(20, 20, 20, 0.95);
  --bg-elevated: #111111;
  --bg-input: #0a0a0a;
  --bg-glass: rgba(10, 10, 10, 0.7);

  /* Accent — SpaceX Red */
  --accent: #e82127;
  --accent-dim: #a3151a;
  --accent-bright: #ff2d33;
  --accent-glow: rgba(232, 33, 39, 0.12);
  --accent-glow-strong: rgba(232, 33, 39, 0.25);
  --accent-gradient: linear-gradient(135deg, #e82127, #c41a1f);
  --accent-gradient-bright: linear-gradient(135deg, #ff2d33, #e82127);

  /* Secondary — cool blue-gray, industrial */
  --secondary: #4a5568;
  --secondary-dim: #2d3748;
  --secondary-glow: rgba(74, 85, 104, 0.12);
  --secondary-gradient: linear-gradient(135deg, #4a5568, #718096);

  /* Text */
  --text-primary: #f0f0f0;
  --text-secondary: #888888;
  --text-muted: #555555;
  --text-inverse: #ffffff;
  --text-dim: #3a3a3a;

  /* Status — adjusted for dark bg */
  --success: #00ff85;
  --success-dim: #00cc6a;
  --success-glow: rgba(0, 255, 133, 0.1);
  --warning: #ffb800;
  --warning-dim: #cc9300;
  --warning-glow: rgba(255, 184, 0, 0.1);
  --danger: #e82127;
  --danger-dim: #c41a1f;
  --danger-glow: rgba(232, 33, 39, 0.15);
  --info: #5a7dff;
  --info-glow: rgba(90, 125, 255, 0.1);

  /* Borders — sharper, more industrial */
  --border: rgba(255, 255, 255, 0.04);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(232, 33, 39, 0.25);
  --border-glass: rgba(255, 255, 255, 0.04);

  /* Shadows — darker, more contrast */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 30px rgba(232, 33, 39, 0.06);
  --shadow-glass: 0 8px 24px rgba(0, 0, 0, 0.7);

  /* Radius — SHARP, almost no rounding */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 4px;
  --radius-2xl: 4px;
  --radius-full: 2px;

  /* Typography — tighter, more technical */
  --font-sans: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Inter', monospace;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
}

/* ========================= GLASS MASK ========================= */
html[data-theme="spacex"] .glass {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
}

/* ========================= HERO ========================= */
html[data-theme="spacex"] .hero {
  background:
    radial-gradient(ellipse 600px 400px at 50% -10%, rgba(232, 33, 39, 0.04), transparent),
    radial-gradient(ellipse 400px 300px at 20% 40%, rgba(232, 33, 39, 0.02), transparent),
    radial-gradient(ellipse 300px 200px at 80% 60%, rgba(232, 33, 39, 0.02), transparent),
    var(--bg-primary);
}
html[data-theme="spacex"] .hero-orb {
  background: radial-gradient(circle, rgba(232, 33, 39, 0.03), transparent 70%);
}
html[data-theme="spacex"] .hero-particle {
  background: var(--accent);
}

/* ========================= LOGO ========================= */
html[data-theme="spacex"] .logo-icon {
  background: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1.3rem;
}
html[data-theme="spacex"] .logo-icon::after {
  display: none;
}

/* ========================= BUTTONS ========================= */
html[data-theme="spacex"] .btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.78rem;
}
html[data-theme="spacex"] .btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: none;
}
html[data-theme="spacex"] .btn-primary:hover {
  box-shadow: 0 0 30px var(--accent-glow-strong);
  transform: translateY(-1px);
}
html[data-theme="spacex"] .btn-ghost {
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="spacex"] .btn-outline-accent {
  border-color: var(--accent);
}
html[data-theme="spacex"] .btn-icon {
  border-radius: var(--radius-sm);
}

/* ========================= CARDS ========================= */
html[data-theme="spacex"] .glass-card,
html[data-theme="spacex"] .pricing-card,
html[data-theme="spacex"] .feature-card,
html[data-theme="spacex"] .review-card,
html[data-theme="spacex"] .stat-card,
html[data-theme="spacex"] .service-card,
html[data-theme="spacex"] .chart-container,
html[data-theme="spacex"] .infra-card,
html[data-theme="spacex"] .infra-summary-card,
html[data-theme="spacex"] .monitor-chart-card,
html[data-theme="spacex"] .monitor-global-item,
html[data-theme="spacex"] .equip-mini-card {
  border-radius: var(--radius-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-light);
}
html[data-theme="spacex"] .glass-card::before,
html[data-theme="spacex"] .pricing-card::before,
html[data-theme="spacex"] .feature-card::before,
html[data-theme="spacex"] .stat-card::before,
html[data-theme="spacex"] .service-card::before,
html[data-theme="spacex"] .infra-card::before,
html[data-theme="spacex"] .infra-summary-card::before,
html[data-theme="spacex"] .equip-mini-card::before {
  display: none;
}

/* ========================= FORM ========================= */
html[data-theme="spacex"] .form-input {
  border-radius: var(--radius-sm);
  border-color: var(--border-light);
}
html[data-theme="spacex"] .form-input:focus {
  border-color: var(--accent);
  box-shadow: none;
}

/* ========================= MODAL ========================= */
html[data-theme="spacex"] .modal-content {
  border-radius: var(--radius-sm);
  backdrop-filter: none;
  border: 1px solid var(--border-light);
}
html[data-theme="spacex"] .modal-content::before {
  display: none;
}

/* ========================= TABLE ========================= */
html[data-theme="spacex"] .table-container {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

/* ========================= AUTH ========================= */
html[data-theme="spacex"] .auth-card {
  border-radius: var(--radius-sm);
  backdrop-filter: none;
}

/* ========================= SIDEBAR ========================= */
html[data-theme="spacex"] .dashboard-sidebar {
  border-right: 1px solid var(--border-light);
}
html[data-theme="spacex"] .sidebar-link {
  border-radius: var(--radius-sm);
}

/* ========================= HEADER ========================= */
html[data-theme="spacex"] .site-header {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
}

/* ========================= FORM / WIZARD ========================= */
html[data-theme="spacex"] .radio-card {
  border-radius: var(--radius-sm);
}
html[data-theme="spacex"] .os-option {
  border-radius: var(--radius-sm);
}

/* ========================= TICKET ========================= */
html[data-theme="spacex"] .ticket-item {
  border-radius: var(--radius-sm);
}
html[data-theme="spacex"] .ticket-message {
  border-radius: var(--radius-sm);
}
html[data-theme="spacex"] .ticket-message.admin {
  border-bottom-right-radius: var(--radius-sm);
}

/* ========================= BADGE ========================= */
html[data-theme="spacex"] .badge {
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.65rem;
}

/* ========================= PRICING ========================= */
html[data-theme="spacex"] .pricing-toggle {
  border-radius: var(--radius-sm);
}
html[data-theme="spacex"] .pricing-toggle-btn {
  border-radius: var(--radius-sm);
}

/* ========================= FILTERS ========================= */
html[data-theme="spacex"] .filter-btn {
  border-radius: var(--radius-sm);
}
html[data-theme="spacex"] .filter-btn-group {
  border-radius: var(--radius-sm);
}

/* ========================= TOAST ========================= */
html[data-theme="spacex"] .toast {
  border-radius: var(--radius-sm);
}

/* ========================= FOOTER ========================= */
html[data-theme="spacex"] .site-footer {
  border-top: 1px solid var(--border-light);
}

/* ========================= SECTION BADGE ========================= */
html[data-theme="spacex"] .section-badge {
  border-radius: var(--radius-sm);
}

/* ========================= WIZARD ========================= */
html[data-theme="spacex"] .wizard-steps {
  border-radius: var(--radius-sm);
}
html[data-theme="spacex"] .wizard-step {
  border-radius: var(--radius-sm);
}
html[data-theme="spacex"] .wizard-step-num {
  border-radius: var(--radius-sm);
}

/* ========================= FOOTER ========================= */
html[data-theme="spacex"] .announcement {
  border-radius: var(--radius-sm);
}