/* Nebula — default theme. Matches the loading/login aurora gradient. */
[data-theme="nebula"] {
  /* Gradient stops (shared by surface-bg and install/login screens).
     Three deep cosmic stops: indigo -> violet-blue -> ocean. */
  --gradient-from: #1a1442;
  --gradient-mid:  #1b2a5e;
  --gradient-to:   #0f3b6e;

  /* Surfaces */
  --surface-bg:       linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-mid) 50%, var(--gradient-to) 100%);
  --surface-bg-solid: #0f1729;
  --surface-elevated: rgba(255, 255, 255, 0.07);
  --surface-sunken:   rgba(0, 0, 0, 0.22);
  --surface-hover:    rgba(255, 255, 255, 0.10);
  --surface-selected: rgba(0, 212, 255, 0.18);

  /* Borders — bright enough to read as glass edges */
  --border:         rgba(255, 255, 255, 0.16);
  --border-strong:  rgba(255, 255, 255, 0.26);
  --border-subtle:  rgba(255, 255, 255, 0.08);

  /* Text */
  --text-primary:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.82);
  --text-muted:     rgba(255, 255, 255, 0.65);
  --text-on-accent: #0a1426;

  /* Accent (cyan from the loading screen) */
  --accent:       #00d4ff;
  --accent-hover: #0099cc;
  --accent-soft:  rgba(0, 212, 255, 0.15);
  --accent-rgb:   0, 212, 255;

  /* Status colors — stable across themes */
  --status-success:       #28a745;
  --status-success-hover: #218838;
  --status-success-rgb:   40, 167, 69;
  --status-danger:        #dc3545;
  --status-danger-hover:  #c82333;
  --status-danger-rgb:    220, 53, 69;
  --status-warning:       #ffc107;
  --status-warning-rgb:   255, 193, 7;
  --status-info:          #17a2b8;
  --status-info-rgb:      23, 162, 184;

  /* Theme-aware foreground RGB triplets for overlays */
  --text-rgb: 255, 255, 255;
  --bg-rgb:   0, 0, 0;

  /* Components — cards LIFT off the gradient with a light glassy tint
     instead of darkening it. The cyan undertone keeps them on-theme. */
  --card-bg:           linear-gradient(155deg, rgba(255, 255, 255, 0.09) 0%, rgba(0, 212, 255, 0.05) 100%);
  --card-border:       rgba(255, 255, 255, 0.16);
  --card-shadow:       0 4px 18px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --card-shadow-hover: 0 10px 32px rgba(0, 212, 255, 0.18), 0 4px 18px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --input-bg:          rgba(255, 255, 255, 0.06);
  --input-border:      rgba(255, 255, 255, 0.18);
  --input-text:        #ffffff;
  --console-bg:        rgba(0, 0, 0, 0.40);
  --console-text:      #00d4ff;
  --code-bg:           rgba(255, 255, 255, 0.06);
  --code-text:         #e6f3ff;
  --tooltip-bg:        rgba(10, 20, 38, 0.95);
  --tooltip-text:      #ffffff;

  /* Chrome — translucent so the cosmic gradient bleeds through.
     The backdrop-filter on .topbar/.sidebar frosts them into glass. */
  --topbar-bg:      rgba(15, 25, 50, 0.40);
  --topbar-text:    #ffffff;
  --topbar-border:  rgba(255, 255, 255, 0.12);
  --sidebar-bg:     rgba(15, 25, 50, 0.30);
  --sidebar-text:   #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.10);

  /* Legacy aliases — kept so older style.css var() refs resolve */
  --bg-primary:        var(--topbar-bg);
  --bg-secondary:      var(--surface-elevated);
  --bg-tertiary:       var(--surface-hover);
  --text-color:        var(--text-primary);
  --primary-color:     var(--accent);
  --primary-hover:     var(--accent-hover);
  --primary-color-rgb: var(--accent-rgb);
  --border-color:      var(--border);
  --content-bg:        var(--surface-bg);
  --hover-bg:          var(--surface-hover);
  --error-color:       var(--status-danger);
  --danger-color:      var(--status-danger);
}

/* Every rule below must be prefixed with [data-theme="nebula"] — the
   theme-registry loads every theme's CSS file at boot, so unscoped
   selectors here would apply on light / dark-blue / example as well. */

/* Notifications float over arbitrary content (apps grid, task logs, etc.),
   so the default --card-bg gradient — designed for cards inside a container
   — bleeds the page through them. Use the sidebar's navy with a much higher
   opacity so the toast reads as a solid panel without losing the glass feel. */
[data-theme="nebula"] .notification {
  background: rgba(15, 25, 50, 0.88);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* App-page tab strips: anchor every tab bar to the same surface as
   the sidebar so the chrome reads as one coherent navy surface.
   Using var(--sidebar-bg) directly so any future sidebar tweak
   carries through. Covers all three tab places on the apps page:
     1. .tab-navigation — main app tabs (Config / Services / …) and
        the Backup-location sub-tabs (Local / Remote 1 / Remote 2).
     2. .tabs-list inside .tabs-wrapper — config sub-tabs that the
        app-config form renders inside the Config tab. */
[data-theme="nebula"] .tab-navigation,
[data-theme="nebula"] .tabs-wrapper .tabs-list,
[data-theme="nebula"] .tabs-content {
  background: var(--sidebar-bg);
}

[data-theme="nebula"] .login-btn {
  color: #ffffff;
}

/* "Back to Apps" — same translucent design as Update Configuration (btn-manage),
   but tinted with the warning amber so it reads as a distinct secondary action. */
[data-theme="nebula"] .config-actions .btn-secondary,
[data-theme="nebula"] .console-actions .btn-secondary {
  background: rgba(var(--status-warning-rgb), 0.20) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(var(--status-warning-rgb), 0.55) !important;
  text-shadow: none;
  font-weight: 600 !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease !important;
}

[data-theme="nebula"] .config-actions .btn-secondary:hover:not(:disabled),
[data-theme="nebula"] .console-actions .btn-secondary:hover:not(:disabled) {
  background: rgba(var(--status-warning-rgb), 0.35) !important;
  border-color: rgba(var(--status-warning-rgb), 0.80) !important;
  transform: translateY(-1px);
}

/* Advanced badge — bump the red to a brighter coral pink so it pops
   on the cosmic gradient. The theme --status-danger (#dc3545) reads
   as muddy maroon against nebula's blue/indigo, similar to how
   --status-success needed a lift to #86efac for task pills. */
[data-theme="nebula"] .is-advanced .domains-header h3::after,
[data-theme="nebula"] .is-advanced .config-category h3::after {
  background: rgba(252, 165, 165, 0.18);
  border-color: rgba(252, 165, 165, 0.65);
  color: #fca5a5;
}

/* ------------------------------------------------------------------
   Outline + tint buttons — copied from the .service-button "Welcome"
   recipe (rgba(<colour>, 0.10) bg + rgba(<colour>, 0.30) border +
   neutral text). Topbar pills use that exact alpha for the light feel;
   in-content CTAs (Install/Manage/Uninstall) bump the alphas a bit and
   add a subtle coloured outer glow so they feel weightier without
   becoming solid.
   ------------------------------------------------------------------ */

/* --- Topbar pills (light, transparent) --------------------------- */
[data-theme="nebula"] .topbar .donate-btn {
  background: rgba(var(--accent-rgb), 0.10) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.30) !important;
  box-shadow: none !important;
  text-shadow: none;
  font-weight: 600;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

[data-theme="nebula"] .topbar .donate-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.20) !important;
  border-color: rgba(var(--accent-rgb), 0.55) !important;
  transform: translateY(-1px);
}

[data-theme="nebula"] .topbar .logout-btn {
  background: rgba(var(--status-danger-rgb), 0.10) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(var(--status-danger-rgb), 0.30) !important;
  box-shadow: none !important;
  text-shadow: none;
  font-weight: 600;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

[data-theme="nebula"] .topbar .logout-btn:hover:not(:disabled) {
  background: rgba(var(--status-danger-rgb), 0.20) !important;
  border-color: rgba(var(--status-danger-rgb), 0.55) !important;
  transform: translateY(-1px);
}

/* --- Topbar active nav (App Center / etc.) — translucent pill ----
   Replaces the solid var(--primary-color) fill so the active page
   indicator matches the Donate / Logout pill style. */
[data-theme="nebula"] .topbar-nav .nav-item.nav-active,
[data-theme="nebula"] .topbar-nav .nav-item.active {
  background: rgba(var(--accent-rgb), 0.18) !important;
  color: var(--text-primary) !important;
  border-color: rgba(var(--accent-rgb), 0.50) !important;
}

[data-theme="nebula"] .topbar-nav .nav-item.nav-active:hover,
[data-theme="nebula"] .topbar-nav .nav-item.active:hover {
  background: rgba(var(--accent-rgb), 0.28) !important;
  color: var(--text-primary) !important;
  border-color: rgba(var(--accent-rgb), 0.70) !important;
}

/* --- In-content CTAs (more solid than the topbar but still
       transparent — alpha set above the body's accent-glow so the
       brand colour reads clearly against Nebula's gradient.) ------- */
[data-theme="nebula"] .install-btn,
[data-theme="nebula"] .btn-install,
[data-theme="nebula"] .app-card .install-btn {
  background: rgba(var(--status-success-rgb), 0.55) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(var(--status-success-rgb), 0.90) !important;
  text-shadow: none;
  font-weight: 600 !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease !important;
}

[data-theme="nebula"] .install-btn:hover:not(:disabled),
[data-theme="nebula"] .btn-install:hover:not(:disabled),
[data-theme="nebula"] .app-card .install-btn:hover:not(:disabled) {
  background: rgba(var(--status-success-rgb), 0.70) !important;
  border-color: rgba(var(--status-success-rgb), 1.00) !important;
  transform: translateY(-1px);
}

/* "Open" button on installed app cards — same success recipe. */
[data-theme="nebula"] .service-trigger-icon {
  background: rgba(var(--status-success-rgb), 0.35) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(var(--status-success-rgb), 0.65) !important;
}

[data-theme="nebula"] .service-trigger:hover .service-trigger-icon,
[data-theme="nebula"] .service-trigger.open .service-trigger-icon {
  background: rgba(var(--status-success-rgb), 0.50) !important;
  border-color: rgba(var(--status-success-rgb), 0.85) !important;
}

[data-theme="nebula"] .uninstall-btn,
[data-theme="nebula"] .btn-uninstall,
[data-theme="nebula"] .btn-danger,
[data-theme="nebula"] .backup-danger-btn,
[data-theme="nebula"] .tool-run-btn.destructive {
  background: rgba(var(--status-danger-rgb), 0.35) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(var(--status-danger-rgb), 0.65) !important;
  text-shadow: none;
  font-weight: 600 !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease !important;
}

[data-theme="nebula"] .uninstall-btn:hover:not(:disabled),
[data-theme="nebula"] .btn-uninstall:hover:not(:disabled),
[data-theme="nebula"] .btn-danger:hover:not(:disabled),
[data-theme="nebula"] .backup-danger-btn:hover:not(:disabled),
[data-theme="nebula"] .tool-run-btn.destructive:hover:not(:disabled) {
  background: rgba(var(--status-danger-rgb), 0.50) !important;
  border-color: rgba(var(--status-danger-rgb), 0.85) !important;
  transform: translateY(-1px);
}

/* Tools-page Run buttons — same translucent recipe as service-trigger
   (the small "Open" pill on installed app cards). The 0.12/0.30 alphas
   from tools.css read as muddy green/red against Nebula's cosmic
   gradient, especially with --status-success/danger text — bump to
   0.35/0.65 with neutral text so they pop. .destructive picks up the
   danger recipe above via the chained selector. */
[data-theme="nebula"] .tool-run-btn {
  background: rgba(var(--status-success-rgb), 0.35) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(var(--status-success-rgb), 0.65) !important;
  text-shadow: none;
  font-weight: 600 !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease !important;
}

[data-theme="nebula"] .tool-run-btn:hover:not(:disabled):not(.destructive) {
  background: rgba(var(--status-success-rgb), 0.50) !important;
  border-color: rgba(var(--status-success-rgb), 0.85) !important;
  transform: translateY(-1px);
}

[data-theme="nebula"] .manage-btn,
[data-theme="nebula"] .btn-manage,
[data-theme="nebula"] .btn-primary,
[data-theme="nebula"] .backup-primary-btn,
[data-theme="nebula"] .app-card .manage-btn,
[data-theme="nebula"] .app-card-actions .manage-btn {
  background: rgba(var(--accent-rgb), 0.35) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.65) !important;
  text-shadow: none;
  font-weight: 600 !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease !important;
}

[data-theme="nebula"] .manage-btn:hover:not(:disabled),
[data-theme="nebula"] .btn-manage:hover:not(:disabled),
[data-theme="nebula"] .btn-primary:hover:not(:disabled),
[data-theme="nebula"] .backup-primary-btn:hover:not(:disabled),
[data-theme="nebula"] .app-card .manage-btn:hover:not(:disabled),
[data-theme="nebula"] .app-card-actions .manage-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.50) !important;
  border-color: rgba(var(--accent-rgb), 0.85) !important;
  transform: translateY(-1px);
}

[data-theme="nebula"] .install-btn:disabled,
[data-theme="nebula"] .btn-install:disabled,
[data-theme="nebula"] .uninstall-btn:disabled,
[data-theme="nebula"] .btn-uninstall:disabled,
[data-theme="nebula"] .manage-btn:disabled,
[data-theme="nebula"] .btn-manage:disabled,
[data-theme="nebula"] .btn-primary:disabled,
[data-theme="nebula"] .btn-danger:disabled,
[data-theme="nebula"] .topbar .donate-btn:disabled,
[data-theme="nebula"] .topbar .logout-btn:disabled {
  opacity: 0.50;
  cursor: not-allowed;
}

/* The cyan accent is bright enough that a dark glyph (text-on-accent
   = #0a1426) still reads, but white matches nebula's white-on-glass
   system better. */
[data-theme="nebula"] .tooltip::after {
  color: #ffffff;
}