/**
 * Astral Theme
 * Light, cosmic theme with cyan and indigo accents
 */

@import url('base.css');

body {
    background: #f0f9ff;
    color: #0c4a6e;
    position: relative;
    overflow-x: hidden;
}

body.theme-astral::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%),
        radial-gradient(circle at 30% 40%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
    z-index: -2;
    animation: astralGradient 25s ease-in-out infinite;
}

body.theme-astral::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 10% 20%, rgba(14, 165, 233, 0.4), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(6, 182, 212, 0.5), transparent),
        radial-gradient(2px 2px at 50% 80%, rgba(14, 165, 233, 0.3), transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(6, 182, 212, 0.4), transparent),
        radial-gradient(2px 2px at 90% 70%, rgba(14, 165, 233, 0.3), transparent);
    background-size: 300% 300%;
    background-position: 0% 0%, 20% 40%, 40% 80%, 60% 20%, 80% 60%;
    z-index: -1;
    animation: starfield 20s linear infinite;
    opacity: 0.7;
}

@keyframes astralGradient {
    0%, 100% { 
        background-position: 0% 0%, 30% 40%, 70% 60%;
        filter: brightness(1);
    }
    50% { 
        background-position: 100% 100%, 70% 60%, 30% 40%;
        filter: brightness(1.1);
    }
}

@keyframes starfield {
    0% { background-position: 0% 0%, 20% 40%, 40% 80%, 60% 20%, 80% 60%; }
    100% { background-position: 100% 100%, 120% 140%, 140% 180%, 160% 120%, 180% 160%; }
}

.container {
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(14, 165, 233, 0.1);
}

h2 {
    color: #0284c7;
}

/* Buttons */
button {
    background: #0ea5e9;
    color: white;
}

button:hover:not(:disabled) {
    background: #0284c7;
}

.refresh-btn {
    background: #06b6d4;
}

.refresh-btn:hover {
    background: #0891b2;
}

/* Cards */
.card {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.card-title {
    color: #0284c7;
    border-color: #0ea5e9;
}

/* Loading and Error */
.loading {
    color: #64748b;
}

.error {
    background: #fef2f2;
    color: #991b1b;
    border-color: #dc2626;
}

.empty-state {
    color: #94a3b8;
}

/* Tables */
.stats-table th {
    background: #e0f2fe;
    color: #0c4a6e;
}

.stats-table td {
    color: #1e293b;
    border-color: #cbd5e1;
}

.stats-table tr:hover {
    background: #f0f9ff;
}

/* Progress Bars */
.xp-bar-container {
    background: #e0f2fe;
}

.xp-bar-fill {
    background: linear-gradient(90deg, #0ea5e9, #06b6d4);
}

/* Theme Selector */
.theme-btn {
    border-color: #0ea5e9;
    color: #0284c7;
}

.theme-btn:hover {
    background: #0ea5e9;
    color: white;
}

.theme-btn.active {
    background: #0ea5e9;
    color: white;
    border-color: #06b6d4;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
}

/* Avatar Section */
.avatar-section {
    color: #1e293b;
}

.avatar-name {
    color: #0284c7;
}

.avatar-class {
    color: #64748b;
}

.avatar-evolution {
    background: #e0f2fe;
    color: #0284c7;
}

/* Pet Section */
.pet-section {
    background: #f0f9ff;
    border-color: #0ea5e9;
}

/* Garmin Status */
.garmin-status.connected {
    background: #10b981;
}

.garmin-status.disconnected {
    background: #dc2626;
}

.hologram-glow {
    background: radial-gradient(circle, rgba(14,165,233,0.3) 0%, transparent 70%);
}

.hologram-ring {
    border-color: rgba(14, 165, 233, 0.6);
}

.hologram-particles .particle {
    background: rgba(14, 165, 233, 0.8);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

.xp-ring {
    color: #0ea5e9;
}

/* Advanced Hologram Theme Colors - Astral */
#hologram .holo-base {
    background: radial-gradient(ellipse, rgba(14,165,233,0.4) 0%, rgba(6,182,212,0.3) 50%, transparent 100%);
    box-shadow: 0 0 30px rgba(14,165,233,0.6), 0 0 60px rgba(14,165,233,0.4);
}

#hologram .holo-cylinder {
    background: linear-gradient(180deg, 
        rgba(14,165,233,0.15) 0%,
        rgba(6,182,212,0.2) 50%,
        rgba(14,165,233,0.15) 100%);
    border-color: rgba(14,165,233,0.4);
}

#hologram .holo-lines {
    background: repeating-linear-gradient(
        0deg,
        transparent 0%,
        transparent 8%,
        rgba(14,165,233,0.3) 8%,
        rgba(14,165,233,0.3) 9%,
        transparent 9%,
        transparent 100%
    );
}

#hologram .holo-particles .spark {
    background: rgba(14,165,233,0.9);
    box-shadow: 0 0 8px rgba(14,165,233,0.9);
}

#hologram .avatar-main {
    filter: drop-shadow(0 0 20px rgba(14,165,233,0.7));
}

#hologram.xp-pulse .holo-base {
    box-shadow: 0 0 60px rgba(14,165,233,1), 0 0 120px rgba(14,165,233,0.8), 0 0 180px rgba(14,165,233,0.6);
}