/* Sleek Skeuomorphic Instrument Telemetry Console Stylesheet */

:root {
    --panel-bg: #2a2c30;
    --panel-border: #383a40;
    --cavity-bg: #151619;
    --text-engraved: #d8dae2;
    --text-label: #8c8f9a;
    --led-red-glow: #ff3333;
    --led-yellow-glow: #ffaa00;
    --led-green-glow: #00ff66;
    --bezel-color: #3e4046;
    --chrome-highlight: rgba(255, 255, 255, 0.15);
    --shadow-depth: rgba(0, 0, 0, 0.6);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: radial-gradient(circle at center, #2e2f34 0%, #101113 100%);
    color: var(--text-engraved);
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 1px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Outer physical rack mount */
.instrument-rack {
    background: linear-gradient(180deg, #1b1c1e 0%, #0c0d0f 100%);
    padding: 15px;
    border-radius: 16px;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 0 1px #222;
    border: 3px solid #1c1d20;
    max-width: 960px;
    width: 95%;
}

/* Control Panel Main Board (Tactile Metal Plate) */
.control-panel {
    background: 
        radial-gradient(circle at 50% 30%, #35373e 0%, #202125 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0px, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 10px);
    border-radius: 10px;
    border: 1px solid #101113;
    box-shadow: 
        inset 1px 1px 1px var(--chrome-highlight),
        inset -1px -1px 2px rgba(0,0,0,0.6),
        0 4px 8px rgba(0,0,0,0.5);
    padding: 30px;
    position: relative;
}

/* Dynamic Skeuomorphic Metallic Screws */
.screw {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 4px 4px, #a2a4ad 0%, #44464f 100%);
    border-radius: 50%;
    border: 1px solid #111;
    box-shadow: 
        inset 1px 1px 1px rgba(255,255,255,0.3),
        1px 2px 3px rgba(0,0,0,0.6);
    position: absolute;
    z-index: 10;
}
.screw.top-left { top: 12px; left: 12px; }
.screw.top-right { top: 12px; right: 12px; }
.screw.bottom-left { bottom: 12px; left: 12px; }
.screw.bottom-right { bottom: 12px; right: 12px; }

/* Thread groove inside the screw */
.screw::before {
    content: '';
    display: block;
    width: 10px;
    height: 2px;
    background: #151619;
    position: absolute;
    top: 5px;
    left: 1px;
}
/* Rotate thread angles differently for organic realism */
.screw.top-left::before { transform: rotate(24deg); }
.screw.top-right::before { transform: rotate(115deg); }
.screw.bottom-left::before { transform: rotate(45deg); }
.screw.bottom-right::before { transform: rotate(162deg); }

/* Header Panel Design */
.header {
    display: flex;
    align-items: center;
    background: #111215;
    padding: 12px 20px;
    border-radius: 6px;
    border: 2px solid #1c1d21;
    box-shadow: 
        inset 0 2px 5px rgba(0,0,0,0.7),
        0 1px 1px rgba(255,255,255,0.05);
    margin-bottom: 20px;
}
.logo-container {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #2d2f35;
    background: #1a1b20;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.6);
    overflow: hidden;
}
.logo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.title-container {
    margin-left: 18px;
    flex-grow: 1;
}
.panel-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #00ffcc;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.4);
    letter-spacing: 2px;
}
.panel-subtitle {
    font-size: 10px;
    color: var(--text-label);
    margin-top: 2px;
    font-weight: bold;
}
.status-badge {
    background: #00ff66;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 3px;
    box-shadow: 
        0 0 10px rgba(0, 255, 102, 0.6),
        inset 0 1px 1px rgba(255,255,255,0.4);
    text-shadow: none;
    letter-spacing: 1px;
}

.panel-divider {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #151619 50%, transparent 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05);
    margin-bottom: 20px;
}

/* Two-column layout */
.console-body {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 25px;
}

.panel-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Inset instrument cards */
.inset-card {
    background: #25262a;
    border-radius: 8px;
    border: 1px solid #18191c;
    box-shadow: 
        inset 1px 1px 0 rgba(255,255,255,0.05),
        2px 2px 5px rgba(0,0,0,0.3);
    padding: 15px 20px;
    position: relative;
}

/* Screen printed labels */
.group-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-label);
    border-bottom: 1px solid #32343b;
    padding-bottom: 5px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #32343b;
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.group-header .group-label {
    border: none;
    margin: 0;
    padding: 0;
}

/* Date Range Picker Inset styling */
.date-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.date-input-group {
    display: flex;
    flex-direction: column;
}
.date-input-group label {
    font-size: 10px;
    color: var(--text-label);
    font-weight: 700;
    margin-bottom: 5px;
}

/* Beveled dark input cavities */
.inset-input {
    background: var(--cavity-bg);
    border: 2px solid #1a1b1f;
    border-radius: 4px;
    color: #00ffcc;
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    padding: 8px 12px;
    box-shadow: 
        inset 1px 2px 4px rgba(0,0,0,0.7),
        0 1px 0 rgba(255,255,255,0.05);
    outline: none;
    width: 100%;
}
.inset-input:focus {
    border-color: #00e5ff;
    box-shadow: 
        inset 1px 2px 4px rgba(0,0,0,0.7),
        0 0 5px rgba(0, 229, 255, 0.4);
}
.font-mono {
    font-family: 'Share Tech Mono', monospace;
}

/* Toggle Link Buttons */
.master-links {
    display: flex;
    gap: 8px;
}
.tiny-metal-btn {
    background: linear-gradient(180deg, #44454b 0%, #2a2b2f 100%);
    border: 1px solid #1b1c1e;
    color: var(--text-engraved);
    font-size: 9px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.4);
}
.tiny-metal-btn:active {
    background: #1c1d20;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.6);
}

/* Mechanical Station Toggle Switches */
.stations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.station-switch-card {
    background: #1d1e22;
    border: 1px solid #121316;
    border-radius: 6px;
    box-shadow: 
        inset 1px 1px 0 rgba(255,255,255,0.03),
        0 1px 3px rgba(0,0,0,0.4);
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 3D toggle switch bracket shape */
.toggle-switch-wrapper {
    margin-bottom: 8px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 52px;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

/* The switch bracket cavity */
.switch-bracket {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #0f1012;
    border-radius: 4px;
    border: 1.5px solid #2a2b2f;
    box-shadow: 
        inset 1px 2px 4px rgba(0,0,0,0.8),
        0 1px 0 rgba(255,255,255,0.05);
}

/* The mechanical metal handle lever */
.switch-toggle {
    position: absolute;
    content: "";
    height: 24px;
    width: 18px;
    left: 5px;
    bottom: 5px;
    background: linear-gradient(180deg, #cfd0d6 0%, #6e7075 50%, #444549 100%);
    border-radius: 3px;
    border: 1px solid #222;
    box-shadow: 
        0 3px 5px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Center rib notch on toggle lever */
.switch-toggle::after {
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    background: #111;
    position: absolute;
    top: 10px;
    left: 3px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

/* Trigger lever switch transition */
input:checked + .switch-bracket .switch-toggle {
    transform: translateY(-16px);
    background: linear-gradient(180deg, #705df2 0%, #4a3baf 50%, #2f257a 100%);
    border-color: #1a154d;
    box-shadow: 
        0 0 10px rgba(112, 93, 242, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.3);
}

.station-switch-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-engraved);
    line-height: 1.2;
}
.station-switch-label .landmark {
    color: #ffaa00;
    font-size: 8px;
    font-family: 'Share Tech Mono', monospace;
}

/* 03. Storage target input */
.dir-input-group {
    width: 100%;
}

/* 04. Launch Plate & arcade-style physical button */
.launch-plate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1b1c1f;
    border: 2px solid #141416;
    box-shadow: 
        inset 0 3px 6px rgba(0,0,0,0.8),
        0 1px 0 rgba(255,255,255,0.05);
}

/* Inset LED status light housing */
.led-board {
    background: #0f1012;
    border-radius: 6px;
    border: 1.5px solid #2a2b2f;
    box-shadow: inset 1px 2px 4px rgba(0,0,0,0.8);
    padding: 10px 15px;
    min-width: 120px;
    text-align: center;
}
.led-board-label {
    font-size: 8px;
    color: var(--text-label);
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
}
.led-alignment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 3D LED lamp styling */
.led-bulb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #151619;
    position: relative;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.led-bulb::before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
}

/* Led colors & glowing shadows */
.led-red {
    background: radial-gradient(circle at 4px 4px, #ff4444 0%, #b30000 100%);
    box-shadow: 0 0 8px #ff3333, inset 1px 1px 2px rgba(255,255,255,0.4);
}
.led-yellow {
    background: radial-gradient(circle at 4px 4px, #ffbb00 0%, #b37400 100%);
    box-shadow: 0 0 10px #ffbb00, inset 1px 1px 2px rgba(255,255,255,0.4);
}
.led-green {
    background: radial-gradient(circle at 4px 4px, #00ff66 0%, #00b33c 100%);
    box-shadow: 0 0 10px #00ff66, inset 1px 1px 2px rgba(255,255,255,0.4);
}

.led-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    font-weight: bold;
}
.text-red { color: #ff3333; text-shadow: 0 0 5px rgba(255, 51, 51, 0.4); }
.text-yellow { color: #ffbb00; text-shadow: 0 0 5px rgba(255, 187, 0, 0.4); }
.text-green { color: #00ff66; text-shadow: 0 0 5px rgba(0, 255, 102, 0.4); }

/* Chrome bezel button container */
.button-bezel {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #555 0%, #151619 100%);
    border-radius: 50%;
    border: 3px solid #33343a;
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.6),
        inset 1px 2px 3px rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arcade Big Red Button */
.launch-button {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: radial-gradient(circle at 50% 25%, #ff4c4c 0%, #cc0000 70%, #990000 100%);
    box-shadow: 
        0 5px 0 #730000,
        0 8px 12px rgba(0,0,0,0.7),
        inset 0 1px 2px rgba(255,255,255,0.5);
    position: relative;
    outline: none;
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}
.launch-button:active {
    transform: translateY(4px);
    box-shadow: 
        0 1px 0 #730000,
        0 3px 6px rgba(0,0,0,0.5),
        inset 0 2px 5px rgba(0,0,0,0.6);
}
.launch-button.disabled {
    pointer-events: none;
    background: radial-gradient(circle at 50% 25%, #5a5d64 0%, #3e4046 70%, #2a2b2f 100%);
    box-shadow: 
        0 3px 0 #1b1c1e,
        inset 0 1px 1px rgba(255,255,255,0.1);
}

.btn-text {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
    text-transform: uppercase;
}
.launch-button.disabled .btn-text {
    color: #72757d;
    text-shadow: none;
}

/* 05. retro-futuristic CRT monitor screen */
.crt-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 0 4px;
}
.crt-header-label {
    font-size: 10px;
    font-weight: bold;
    color: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.crt-frame {
    background: linear-gradient(135deg, #2f3137, #1b1c1e);
    border-radius: 8px;
    border: 3px solid #3c3e44;
    box-shadow: 
        inset 1px 1px 1px rgba(255,255,255,0.1),
        0 4px 8px rgba(0,0,0,0.5);
    padding: 10px;
}
.crt-bezel {
    background: #0f1012;
    border-radius: 6px;
    border: 2px solid #161619;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.9);
    padding: 8px;
}
.crt-screen {
    background: #06080b;
    height: 180px;
    border-radius: 4px;
    position: relative;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column-reverse; /* Keep logs scrolled to bottom */
}

/* Scanlines shader overlay */
.crt-scanlines {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%);
    background-size: 100% 4px;
    z-index: 5;
    pointer-events: none;
}
/* Cathode ray phosphor glow mask */
.crt-glow-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(57, 255, 20, 0.05) 0%, transparent 80%);
    z-index: 4;
    pointer-events: none;
}

.crt-terminal-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    line-height: 1.4;
    color: #39ff14;
    text-shadow: 0 0 4px rgba(57, 255, 20, 0.6);
    white-space: pre-wrap;
    word-break: break-all;
    z-index: 3;
}

/* Custom styling for status classes in log */
.log-info { color: #39ff14; }
.log-accent { color: #ffea00; text-shadow: 0 0 4px rgba(255, 234, 0, 0.6); }
.log-success { color: #00ffcc; text-shadow: 0 0 4px rgba(0, 255, 204, 0.6); }
.log-error { color: #ff3333; text-shadow: 0 0 4px rgba(255, 51, 51, 0.6); }

/* Custom scrollbars for CRT container */
.crt-screen::-webkit-scrollbar {
    width: 6px;
}
.crt-screen::-webkit-scrollbar-track {
    background: #06080b;
}
.crt-screen::-webkit-scrollbar-thumb {
    background: #202124;
    border-radius: 3px;
    border: 1px solid #0f1012;
}