/* Custom styles for LCARS sliders */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px; /* Match track height */
    background: transparent; /* JS will handle background for webkit */
    cursor: pointer;
}

/* --- Webkit (Chrome/Safari) --- */
input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    width: 100%;
    height: 28px;
    background: transparent; /* Let the input's background show through */
    border-radius: 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 36px; /* Taller than track */
    width: 16px;  /* Thin rectangle */
    border-radius: 2px;
    background: var(--bluey); /* TNG handle color */
    cursor: pointer;
    margin-top: -6px; /* (28px track height - 36px thumb height) / 2 */
    border: 2px solid #000;
}

/* --- Mozilla (Firefox) --- */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 28px;
    background: #4A4A4A; /* The "empty" part of the track */
    border-radius: 0;
}

input[type="range"]::-moz-range-thumb {
    height: 36px;
    width: 16px;
    border-radius: 2px;
    background: var(--bluey);
    cursor: pointer;
    border: 2px solid #000;
}

/* This styles the "fill" part in Firefox */
input[type="range"]::-moz-range-progress {
    background-color: var(--tng-gold); 
    height: 28px;
    border-radius: 0;
}
/* --- END LCARS SLIDER STYLES --- */

/* Status indicators */
.status-light {
    float:right;
    margin-right: 100px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #000;
    background-color: #444; /* Default offline */
}
.status-light.online {
    background-color: #00FF00; /* Green */
    box-shadow: 0 0 10px #00FF00;
}
.status-light.loading {
    background-color: #FFFF00; /* Yellow */
    box-shadow: 0 0 10px #FFFF00;
    animation: pulse-yellow 1.5s infinite;
}
.status-light.ready {
    background-color: #00FF00; /* Green */
    box-shadow: 0 0 10px #00FF00;
}
.status-light.firing {
    background-color: #FF0000; /* Red */
    box-shadow: 0 0 10px #FF0000;
    animation: pulse-red 0.5s infinite;
}
.status-light.offline {
    background-color: #888; /* Gray */
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 10px #FF0000; }
    50% { box-shadow: 0 0 20px #FF0000; }
    100% { box-shadow: 0 0 10px #FF0000; }
}
@keyframes pulse-yellow {
    0% { box-shadow: 0 0 10px #FFFF00; }
    50% { box-shadow: 0 0 20px #FFFF00; }
    100% { box-shadow: 0 0 10px #FFFF00; }
}

/* LCARS-style panel headers */
.lcars-header-eng {
    background-color: var(--tng-gold);
    color: #000;
    font-size: 1.4em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 16px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* --- Warp Core Animation CSS --- */
.warp-core {
    position:relative;
    width: 125px;
    left:40%;
    height: 230px;
}
.warp-core.overlay{
    position:absolute;
    left: 0;
    top: 0;
    z-index: 9999;
}
.warp-core.critical {
    background: rgba(255,0,0,0.4);
    box-shadow: 0 0 30px #FF0000, inset 0 0 20px rgba(255,0,0,0.8);
    animation: warp-pulse-critical 0.8s infinite alternate ease-in-out;
    border-radius: 15%;
}

@keyframes warp-pulse-critical {
    0% { box-shadow: 0 0 30px #FF0000, inset 0 0 20px rgba(255,0,0,0.8); }
    100% { box-shadow: 0 0 60px #FF0000, inset 0 0 30px rgba(255,0,0,1); }
}