/* ============================================================================
   theme-neon-city.css — "Neon City" redesign  (Voucher Wars, additive)
   ----------------------------------------------------------------------------
   A gritty neon-crime skin for the WHOLE non-arena UI. Every rule is scoped
   under `html[data-theme="neon_city"]`, so with no attribute (or "classic")
   the game looks exactly as it does today. Loaded LAST.

   HARD RULE: this file must NEVER target an arena selector/id. The combat
   screen is excluded (see docs/UI_REDESIGN_AUDIT.md §9). Arena HUD is
   inline-styled and immune to token swaps; the few shared selectors
   (.mobile-btn, #moveStick, .ability-pill, body.in-arena font) are PINNED in
   tokens.css. Do not add arena rules here.

   This is theme v1: it restyles the class-driven shell (header, nav, tabs,
   panels, cards, buttons, forms, tables, footer, auth modal). The ~568 inline
   hex styles in JS templates are swept to tokens in Opus Phase 3 for full
   coverage — until then those spots keep their classic colours.
   ========================================================================== */

/* ---- 1. Token overrides: the palette shift (higher specificity than :root) ---- */
html[data-theme="neon_city"] {
  --primary-color:   #ff2d55;   /* hot magenta-red — the crime neon */
  --secondary-color: #16f2d6;   /* acid cyan */
  --success-color:   #2bff88;
  --danger-color:    #ff3b5c;
  --warning-color:   #ffb02e;
  --dark-bg:         #06070f;   /* near-black city night */
  --card-bg:         #10121f;
  --border-color:    #24263a;
  --text-color:      #e8eaf2;
  --text-muted:      #7c8098;

  /* legacy aliases follow the new palette so inline var(--accent) users shift too */
  --accent: #ff2d55;
  --muted:  #7c8098;
  --good:   #2bff88;
  --bad:    #ff3b5c;
  --card:   #10121f;
  --bg:     #06070f;

  --app-gradient: radial-gradient(1200px 600px at 50% -10%, #17091d 0%, #06070f 60%),
                  linear-gradient(180deg, #080a14 0%, #06070f 100%);
  --header-bg: rgba(8, 9, 20, 0.9);

  --shadow-glow: 0 0 0 1px rgba(255, 45, 85, 0.25), 0 0 22px rgba(255, 45, 85, 0.12);
  --font-display: 'Arial Black', 'Arial', sans-serif;
  --tracking-wide: 0.06em;
}

/* ---- 2. Global backdrop + subtle scanline/vignette (pure CSS, no assets) ---- */
html[data-theme="neon_city"] body {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px),
    var(--app-gradient) fixed;
  color: var(--text-color);
}
html[data-theme="neon_city"] .dashboard-container {
  background: transparent;
}

/* ---- 3. Header ---- */
html[data-theme="neon_city"] .dashboard-header {
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 0 rgba(255, 45, 85, 0.18);
}
html[data-theme="neon_city"] .dashboard-header h1 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 45, 85, 0.55), 0 0 2px rgba(22, 242, 214, 0.4);
}

/* ---- 4. Nav + tabs ---- */
html[data-theme="neon_city"] .dashboard-nav {
  border-bottom: 1px solid var(--border-color);
}
html[data-theme="neon_city"] .dashboard-tab {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color .15s, background .15s, box-shadow .15s;
}
html[data-theme="neon_city"] .dashboard-tab:hover {
  color: #fff;
  background: rgba(255, 45, 85, 0.08);
}
html[data-theme="neon_city"] .dashboard-tab.active {
  color: #fff;
  border-bottom: 2px solid var(--primary-color);
  box-shadow: 0 6px 18px -12px rgba(255, 45, 85, 0.9);
}

/* ---- 5. Panels + cards ---- */
html[data-theme="neon_city"] .panel,
html[data-theme="neon_city"] .matchmaking-panel,
html[data-theme="neon_city"] .stats-panel,
html[data-theme="neon_city"] .company-panel,
html[data-theme="neon_city"] .marketplace-listings,
html[data-theme="neon_city"] .marketplace-my-listings,
html[data-theme="neon_city"] .my-listings-panel,
html[data-theme="neon_city"] .equipment-slots,
html[data-theme="neon_city"] .inventory-panel,
html[data-theme="neon_city"] .loadouts-panel,
html[data-theme="neon_city"] .production-panel,
html[data-theme="neon_city"] .create-shipment-form,
html[data-theme="neon_city"] .shipment-board,
html[data-theme="neon_city"] .warehouse-container,
html[data-theme="neon_city"] .queue-option,
html[data-theme="neon_city"] .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%),
    var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
html[data-theme="neon_city"] .panel h2,
html[data-theme="neon_city"] .panel h3,
html[data-theme="neon_city"] .stats-panel h2,
html[data-theme="neon_city"] .stats-panel h3,
html[data-theme="neon_city"] .matchmaking-panel h3 {
  color: #fff;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-lg);
}

/* stat / inventory / listing cards — the game's repeated item card */
html[data-theme="neon_city"] .stat-card,
html[data-theme="neon_city"] .inventory-item,
html[data-theme="neon_city"] .listing-card,
html[data-theme="neon_city"] .voucher-card,
html[data-theme="neon_city"] .equipment-slot,
html[data-theme="neon_city"] .shipment-card,
html[data-theme="neon_city"] .my-listing,
html[data-theme="neon_city"] .production-run,
html[data-theme="neon_city"] .opponent-preview,
html[data-theme="neon_city"] .loadout-card,
html[data-theme="neon_city"] .warehouse-item {
  background: linear-gradient(160deg, rgba(255,45,85,0.05), rgba(16,18,31,0.9));
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
html[data-theme="neon_city"] .stat-card:hover,
html[data-theme="neon_city"] .inventory-item:hover,
html[data-theme="neon_city"] .listing-card:hover,
html[data-theme="neon_city"] .voucher-card:hover,
html[data-theme="neon_city"] .equipment-slot:hover,
html[data-theme="neon_city"] .shipment-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-glow);
}
html[data-theme="neon_city"] .stat-value {
  color: var(--secondary-color);
  text-shadow: 0 0 10px rgba(22, 242, 214, 0.35);
}

/* ---- 6. Buttons ---- */
html[data-theme="neon_city"] .btn-primary {
  background: linear-gradient(180deg, #ff3b62, #e3123f);
  border: 1px solid #ff6b86;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  box-shadow: 0 6px 18px -8px rgba(255, 45, 85, 0.8);
}
html[data-theme="neon_city"] .btn-primary:hover {
  box-shadow: 0 0 0 1px #ff6b86, 0 0 22px rgba(255, 45, 85, 0.4);
  filter: brightness(1.06);
}
html[data-theme="neon_city"] .btn-secondary,
html[data-theme="neon_city"] .btn-outline {
  background: transparent;
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
}
html[data-theme="neon_city"] .btn-secondary:hover,
html[data-theme="neon_city"] .btn-outline:hover {
  background: rgba(22, 242, 214, 0.1);
  box-shadow: 0 0 16px -4px rgba(22, 242, 214, 0.5);
}
html[data-theme="neon_city"] .btn-success {
  background: linear-gradient(180deg, #34ff97, #10c56a);
  border: 1px solid #6effb6; color: #06231a;
}
html[data-theme="neon_city"] .btn-danger {
  background: linear-gradient(180deg, #ff5570, #e01e42);
  border: 1px solid #ff8ba0; color: #fff;
}
html[data-theme="neon_city"] .btn-warning {
  background: linear-gradient(180deg, #ffc04d, #e7920a);
  border: 1px solid #ffd98a; color: #2a1a00;
}
html[data-theme="neon_city"] .btn-primary,
html[data-theme="neon_city"] .btn-success,
html[data-theme="neon_city"] .btn-danger,
html[data-theme="neon_city"] .btn-warning,
html[data-theme="neon_city"] .btn-secondary,
html[data-theme="neon_city"] .btn-small,
html[data-theme="neon_city"] .btn-outline {
  border-radius: var(--r-sm);
  transition: box-shadow .15s, filter .15s, background .15s;
}
html[data-theme="neon_city"] button:focus-visible,
html[data-theme="neon_city"] a:focus-visible,
html[data-theme="neon_city"] input:focus-visible,
html[data-theme="neon_city"] select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ---- 7. Forms ---- */
html[data-theme="neon_city"] .form-group input,
html[data-theme="neon_city"] .form-group select,
html[data-theme="neon_city"] .form-group textarea,
html[data-theme="neon_city"] .quantity-controls input {
  background: #0b0d18;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: var(--r-sm);
}
html[data-theme="neon_city"] .form-group input:focus,
html[data-theme="neon_city"] .form-group select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.2);
}
html[data-theme="neon_city"] .form-group label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-xs);
}

/* ---- 8. Progress bars ---- */
html[data-theme="neon_city"] .progress-bar {
  background: #0b0d18;
  border: 1px solid var(--border-color);
}
html[data-theme="neon_city"] .progress-bar > * {
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* ---- 9. Tables / list rows ---- */
html[data-theme="neon_city"] table { border-collapse: collapse; }
html[data-theme="neon_city"] th {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-xs);
  border-bottom: 1px solid var(--border-color);
}
html[data-theme="neon_city"] td {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
html[data-theme="neon_city"] tr:hover td {
  background: rgba(255, 45, 85, 0.05);
}

/* ---- 10. Footer ---- */
html[data-theme="neon_city"] .dashboard-footer {
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
}

/* ---- 11. Empty / loading states ---- */
html[data-theme="neon_city"] .empty,
html[data-theme="neon_city"] .empty-state {
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.015);
}
html[data-theme="neon_city"] .loading,
html[data-theme="neon_city"] .pulse {
  color: var(--secondary-color);
}

/* ---- 12. Auth modal (id-based; inline styles in HTML still win where present,
        so this only reaches the container/backdrop safely) ---- */
html[data-theme="neon_city"] #authModal {
  background: radial-gradient(900px 500px at 50% 0%, rgba(255,45,85,0.08), transparent 60%),
              rgba(4, 5, 12, 0.94) !important;
}
html[data-theme="neon_city"] #authModal input {
  background: #0b0d18;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

/* ---- 13. Disabled ---- */
html[data-theme="neon_city"] button:disabled,
html[data-theme="neon_city"] .btn-primary:disabled {
  filter: grayscale(0.5) brightness(0.7);
  box-shadow: none;
  cursor: not-allowed;
}