/* Cosmic theme with animated gradients, glass surfaces, hover/post-click effects */

/* CSS Custom Props & Color System */
:root {
  --sidebar-width: 270px;
  
  /* Ripple */
  --ripple-x: 50%;
  --ripple-y: 50%;
  --ripple-color: rgba(255,255,255,.45);
}

/* Theme: Cosmic Purple (Default) */
:root,
[data-theme="cosmic-purple"] {
  --space-bg-1: #d3d3d3;
  --space-bg-2: #ecafff;
  --space-bg-3: #f1f505;
  --space-nebula-1: #6b5cff;
  --space-nebula-2: #ff7de9;
  --space-nebula-3: #00ffd5;
  --glass-bg: rgba(255,255,255,.06);
  --glass-brd: rgba(122, 122, 122, 0.2);
  --text: #e8ecff;
  --muted: #b7c0ff;
  --accent: #a7ffea;
  --warning: #ffd166;
}

/* Cosmic-JETTLIFE */
[data-theme="cosmic-jettlife"] {
  --space-bg-1: #ffffff;
  --space-bg-2: #c506ff;
  --space-bg-3: #fbff21;
  --space-nebula-1: #6b5cff;
  --space-nebula-2: #ff7de9;
  --space-nebula-3: #00ffd5;
  --glass-bg: rgba(255,255,255,.06);
  --glass-brd: rgba(255,255,255,.2);
  --text: #e8ecff;
  --muted: #b7c0ff;
  --accent: #a7ffea;
  --warning: #ffd166;
}

/* Theme: Ocean Blue */
[data-theme="ocean-blue"] {
  --space-bg-1: #001a2e;
  --space-bg-2: #009dff;
  --space-bg-3: #27e900;
  --space-nebula-1: #00a8e8;
  --space-nebula-2: #007ea7;
  --space-nebula-3: #00ffc8;
  --glass-bg: rgba(0,168,232,.08);
  --glass-brd: rgba(0,168,232,.25);
  --text: #e0f7ff;
  --muted: #89cff0;
  --accent: #00ffc8;
  --warning: #ffb347;
}

/* Theme: Sunset Orange */
[data-theme="sunset-orange"] {
  --space-bg-1: #1a0f0a;
  --space-bg-2: #2d1810;
  --space-bg-3: #4a2818;
  --space-nebula-1: #ff6b35;
  --space-nebula-2: #f7931e;
  --space-nebula-3: #ffd93d;
  --glass-bg: rgba(255,107,53,.08);
  --glass-brd: rgba(255,107,53,.25);
  --text: #fff5e6;
  --muted: #ffb380;
  --accent: #ffd93d;
  --warning: #ff6b6b;
}

/* Theme: Forest Green */
[data-theme="forest-green"] {
  --space-bg-1: #0a1410;
  --space-bg-2: #0f241a;
  --space-bg-3: #1a3828;
  --space-nebula-1: #2d6a4f;
  --space-nebula-2: #52b788;
  --space-nebula-3: #95d5b2;
  --glass-bg: rgba(45,106,79,.08);
  --glass-brd: rgba(82,183,136,.25);
  --text: #e8f5e9;
  --muted: #a8dabc;
  --accent: #95d5b2;
  --warning: #ffb700;
}

/* Theme: Midnight Dark */
[data-theme="midnight-dark"] {
  --space-bg-1: #000000;
  --space-bg-2: #0d0d0d;
  --space-bg-3: #1a1a1a;
  --space-nebula-1: #4a148c;
  --space-nebula-2: #7b1fa2;
  --space-nebula-3: #9c27b0;
  --glass-bg: rgba(255,255,255,.04);
  --glass-brd: rgba(156,39,176,.25);
  --text: #f0f0f0;
  --muted: #b0b0b0;
  --accent: #ce93d8;
  --warning: #ffa726;
}

/* Theme: Glassy White - Frosted glass with pure white text */
[data-theme="glassy-white"] {
  --space-bg-1: #1a1a2e;
  --space-bg-2: #16213e;
  --space-bg-3: #0f3460;
  --space-nebula-1: #4a90a4;
  --space-nebula-2: #7ec8e3;
  --space-nebula-3: #b8e4f0;
  --glass-bg: rgba(255,255,255,.12);
  --glass-brd: rgba(255,255,255,.35);
  --text: #ffffff;
  --muted: rgba(255,255,255,.85);
  --accent: #7ec8e3;
  --warning: #ffd166;
  --glass-blur: 20px;
  --glass-saturate: 180%;
}

/* Glassy White theme enhanced glassmorphism */
[data-theme="glassy-white"] .glass {
  background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 
    0 8px 32px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(255,255,255,.05);
}

[data-theme="glassy-white"] .card-surface {
  color:#00ffc8;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 
    0 16px 40px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(255,255,255,.1);
}

[data-theme="glassy-white"] .variable-row {
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.25);
  color:#00ffc8;
  box-shadow: 
    0 4px 16px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.15);
}

[data-theme="glassy-white"] .variable-row:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border-color: rgba(126,200,227,.6);
  color:#00ffc8;
  box-shadow: 
    0 8px 24px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.2);
}

[data-theme="glassy-white"] .cosmic-input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.1);
}

[data-theme="glassy-white"] .cosmic-input:focus {
  background: rgba(255,255,255,.15);
  border-color: rgba(126,200,227,.7);
  box-shadow: 
    0 0 0 3px rgba(126,200,227,.25),
    inset 0 2px 4px rgba(0,0,0,.1);
}

[data-theme="glassy-white"] .cosmic-input::placeholder {
  color: rgba(255,255,255,.6);
}

[data-theme="glassy-white"] .cosmic-btn {
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  box-shadow: 
    0 4px 12px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.2);
}

[data-theme="glassy-white"] .cosmic-btn:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
  border-color: rgba(126,200,227,.5);
  box-shadow: 
    0 8px 20px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.25);
}

[data-theme="glassy-white"] .app-sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(126,200,227,.3), rgba(184,228,240,.2));
  box-shadow: 
    0 8px 20px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.2);
}

[data-theme="glassy-white"] .app-sidebar .nav-link:hover {
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

[data-theme="glassy-white"] pre.pretty {
  background: rgba(255,255,255,.08);
  border: 1px dashed rgba(255,255,255,.3);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.1);
  color:#00ffc8;

}

[data-theme="glassy-white"] .modal-content.glass {
  background: linear-gradient(135deg, rgba(30,40,60,.95), rgba(20,30,50,.9));
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 
    0 24px 48px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.15);
}

[data-theme="glassy-white"] .theme-selector {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
}

[data-theme="glassy-white"] .theme-selector:hover {
  background: rgba(255,255,255,.18);
}

[data-theme="glassy-white"] .btn-close {
  filter: invert(1);
}

[data-theme="glassy-white"] .toast {
  background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.08));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.3);
}

@property --h {
  syntax: "<number>";
  inherits: true;
  initial-value: 240;
}

/* Layout */
html, body { height: 100%; color: var(--text); background: white; }
body { overflow-x: hidden; }

.app-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
}

/* Cosmic animated background (subtle) */
.cosmic-bg {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60vmax 60vmax at 10% 10%, color-mix(in oklab, var(--space-nebula-1) 40%, transparent), transparent 70%),
    radial-gradient(70vmax 70vmax at 90% 20%, color-mix(in oklab, var(--space-nebula-2) 45%, transparent), transparent 70%),
    radial-gradient(50vmax 50vmax at 40% 80%, color-mix(in oklab, var(--space-nebula-3) 40%, transparent), transparent 70%),
    conic-gradient(from calc(var(--h,240) * 1deg), #06061a, #090922, #0a0a1f, #06061a);
  animation: hueShift 22s linear infinite alternate;
}

@keyframes hueShift {
  to { --h: 420; }
}

/* Glassmorphism surfaces */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Sidebar */
.app-sidebar {
  display: flex; flex-direction: column;
}
.app-sidebar .navbar-brand {
  color: var(--text);
  letter-spacing: .3px;
}
.logo-planet {
  width: 42px; 
  height: 42px; 
  display: inline-block; 
  border-radius: 20%;
  background-image: url('assets/images/astronaut-logo.png');
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 20px rgba(103,73,255,.4);
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.logo-planet:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 0 0 30px rgba(103,73,255,.6);
}

.app-sidebar .nav-link {
  border-radius: .75rem;
  color: var(--muted);
  margin: .1rem .25rem;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  position: relative;
}
.app-sidebar .nav-link:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  transform: translateX(2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.app-sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(100,59,255,.25), rgba(0,255,213,.18));
  color: var(--text);
  box-shadow: 0 10px 24px rgba(67,24,255,.18);
}

/* Main */
.app-main { background: transparent; }

.app-topbar {
  color: var(--text);
  min-height: 64px;
}

.app-topbar .search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .8;
}

.cosmic-input {
  color: #fff;
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.cosmic-input::placeholder { color: color-mix(in oklab, var(--muted) 70%, white 0%); }
.cosmic-input:focus {
  color: #fff; 
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 .25rem rgba(99,102,241,.25);
  border-color: rgba(140, 100, 255, .75);
}

/* Cards */
.card-surface {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  border-radius: 1rem;
  color: #fff;
}

/* Pre block */
pre.pretty {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: .75rem;
  padding: 1rem;
  color: var(--text);
}

/* Variable editor rows */
.variable-row {
  position: relative;
  padding: 1rem;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.variable-row:hover {
  transform: translateY(-2px);
  border-color: rgba(167,255,234,.45);
  box-shadow: 0 8px 22px rgba(0,0,0,.40);
}
.variable-row:has(input:focus, select:focus) {
  border-color: rgba(167,255,234,.8);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

/* Buttons (cosmic) */
.cosmic-btn {
  --btn-grad: linear-gradient(135deg, rgba(167,255,234,.15), rgba(103,73,255,.25));
  background: var(--btn-grad);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--text);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.cosmic-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(67,24,255,.22);
  filter: brightness(1.08);
}
.cosmic-btn:active {
  transform: translateY(1px) scale(.98);
}

/* Ripple effect (requires [data-ripple]) */
[data-ripple] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-ripple]::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  left: var(--ripple-x); top: var(--ripple-y);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: var(--ripple-color);
  pointer-events: none;
  animation: none;
}
[data-ripple].rippling::after {
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}

/* Falling stars in topbar */
.falling-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.star {
  position: absolute;
  top: -8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd466 40%, rgba(255,255,255,.3));
  box-shadow: 0 0 12px #fff7, 0 0 24px #ffd46666;
  animation: fall var(--dur, 2.8s) linear forwards, spin var(--s, 1.2s) linear infinite;
  will-change: transform, opacity;
  opacity: .95;
}
.star::after {
  content: "";
  position: absolute;
  left: -14px; top: 2px;
  width: 14px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.8), rgba(255,255,255,0));
  border-radius: 2px;
  filter: blur(1px);
}
@keyframes fall {
  to { transform: translateY(120%); opacity: 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.07) 25%, rgba(255,255,255,0.16) 37%, rgba(255,255,255,0.07) 63%);
  animation: shimmer 1.4s infinite;
  background-size: 400% 100%;
  border-radius: .5rem;
  min-height: 1.25rem;
}
@keyframes shimmer { 0% {background-position: 100% 0;} 100% {background-position: 0 0;} }

.badge-chip { font-weight: 600; }

/* Responsive Sidebar */
@media (max-width: 992px) {
  :root { --sidebar-width: 78px; }
  .app-sidebar .navbar-brand strong { display: none; }
  .app-sidebar .nav-link { text-align: center; }
  .app-sidebar .nav-link .bi { margin-right: 0 !important; }
  .app-sidebar .nav-link span { display: none; }
}

/* Utilities */
.text-gradient {
  background: linear-gradient(90deg, #fff, #a7ffea, #e5d1ff);
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
/*.space-form .form-text { color: var(--muted); }*/
/* Form text styles */
.space-form .form-text { color: #fff; }
.space-form label,
.space-form .form-label,
.space-form input,
.space-form select,
.space-form textarea,
.space-form .form-control,
.space-form .form-select { color: #fff; }

/* Theme Selector */
.theme-selector-container {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--glass-brd);
}

.theme-selector-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.theme-selector {
  width: 100%;
  padding: 0.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 0.5rem;
  color: var(--text);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.theme-selector:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--accent);
}

.theme-selector:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(167,255,234,.2);
  border-color: var(--accent);
}

.theme-selector option {
  background: var(--space-bg-2);
  color: var(--text);
  padding: 0.5rem;
}