/* --- Global Reset & Variables --- */
* { box-sizing: border-box; }

:root {
    --bg-dark: #1a1a1a; 
    --card-bg: #2d2d2d; 
    --accent: #00ffcc;
    --warning: #ffcc00; 
    --danger: #ff3300; 
    --text-main: #eeeeee; 
    --text-dim: #aaaaaa;
}

body { 
    font-family: 'Segoe UI', sans-serif; 
    background: var(--bg-dark); 
    color: var(--text-main); 
    margin: 0; 
    padding: 10px; 
    text-align: center; 
    overflow-x: hidden; 
}

.container { 
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto; 
}

/* --- Card & Layout Elements --- */
.card { 
    background: var(--card-bg); 
    padding: 20px; 
    border-radius: 12px; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.4); 
    display: flex; 
    flex-direction: column; 
    overflow: visible; 
    position: relative; 
}

.card:has(#meteoTrigger) { z-index: 100; }

.grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; 
    width: 100%; 
}

.wind-data-internal-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
    flex-grow: 1; 
    align-items: center; 
    align-content: center; 
}

select { 
    width: 100%; 
    padding: 12px; 
    margin: 15px 0; 
    border-radius: 6px; 
    background: #444; 
    color: white; 
    border: 1px solid #555; 
    font-size: 1rem; 
}

.status { 
    font-size: 0.9em; 
    color: var(--accent); 
    font-weight: bold; 
}

.val-group { 
    text-align: center; 
    background: rgba(0,0,0,0.1); 
    padding: 10px; 
    border-radius: 8px; 
}

.val { 
    font-size: 1.8em; 
    font-weight: bold; 
    color: var(--accent); 
    display: block; 
}

.label { 
    color: var(--text-dim); 
    text-transform: uppercase; 
    font-size: 0.65em; 
    letter-spacing: 1.5px; 
}

/* --- Needle & Visuals --- */
#windNeedle, #gustWindNeedle {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 2px; 
    height: 20px; 
    border-radius: 2px;
    transform-origin: top center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#windNeedle { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
#gustWindNeedle { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

canvas { max-height: 320px; width: 100% !important; }
h2, h3 { margin-top: 0; color: #fff; border-bottom: 1px solid #444; padding-bottom: 10px; }

a.aws-link { 
    font-size: 0.6em; 
    color: var(--accent); 
    text-decoration: none; 
    border: 1px solid var(--accent); 
    padding: 2px 6px; 
    border-radius: 4px; 
    margin-left: 10px; 
}
a.aws-link:hover { background: var(--accent); color: #1a1a1a; }

/* --- Dashboard Specifics --- */
.ops-dashboard { display: grid; grid-template-columns: 1.5fr 3fr 1fr 1fr; gap: 15px; align-items: center; }
.info-section { text-align: left; position: relative; z-index: 110; }
.runway-section { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.rwy-mini-card { 
    background: rgba(255, 255, 255, 0.05); 
    border-left: 4px solid var(--accent); 
    border-radius: 6px; 
    padding: 10px; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}

.rwy-id-badge { 
    background: #000; 
    color: var(--accent); 
    font-family: monospace; 
    font-weight: bold; 
    padding: 2px 8px; 
    border-radius: 3px; 
    font-size: 0.9em; 
    align-self: flex-start; 
    border: 1px solid #444; 
}

.rwy-metrics { display: flex; justify-content: space-between; }
.metric-box { text-align: center; flex: 1; }

.aviation-reference-container { 
    grid-column: 1 / -1; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    padding-bottom: 15px; 
    border-bottom: 2px solid #444; 
    margin-bottom: 20px; 
}

.icao-block { 
    background: rgba(0, 0, 0, 0.3); 
    border-radius: 8px; 
    padding: 12px; 
    border-left: 4px solid var(--accent); 
    text-align: left; 
}

.icao-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.report-item { margin-bottom: 10px; }
.report-item .label { display: block; margin-bottom: 3px; font-size: 0.6em; }

/* --- Aviation Badges --- */
.cat-badge { padding: 2px 8px; border-radius: 4px; font-weight: bold; font-size: 0.65em; text-transform: uppercase; }
.cat-vfr { background: var(--accent); color: #1a1a1a; }
.cat-mvfr { background: #3498db; color: white; }
.cat-ifr { background: var(--danger); color: white; }
.cat-lifr { background: #df00ff; color: white; }

.raw-aviation { 
    font-family: 'Courier New', monospace; 
    font-size: 0.85em; 
    color: #fff; 
    line-height: 1.2; 
    white-space: pre-wrap; 
    word-break: break-all; 
    font-weight: 500; 
}

.report-age { 
    font-size: 0.85em; 
    color: var(--accent); 
    font-family: 'Courier New', monospace; 
    font-weight: bold; 
    margin-left: 10px; 
}

/* --- Dropdown Menu --- */
#meteoTrigger { cursor: pointer; }
.menu-item { padding: 12px 15px; cursor: pointer; text-align: left; font-size: 0.9em; color: var(--text-main); }
.menu-item:hover { background: #3d3d3d; color: var(--accent); }
#meteoDropdown { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    background: #2d2d2d; 
    border: 1px solid #555; 
    border-radius: 6px; 
    z-index: 9999 !important; 
    min-width: 240px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); 
    margin-top: 5px; 
}

/* --- Responsive Layouts --- */
@media (max-width: 1200px) { .ops-dashboard { grid-template-columns: 1fr 1.5fr; gap: 20px; } }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 950px) { .ops-dashboard { grid-template-columns: 1fr; } .runway-section { grid-template-columns: 1fr 1fr; } }
@media (max-width: 750px) { .grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .runway-section { grid-template-columns: 1fr; } .info-section { text-align: center; } }

/* --- Footer --- */
footer {
    margin-top: 40px;
    padding: 30px 10px;
    border-top: 1px solid #444;
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-dim);
    font-size: 0.85em;
    width: 100%;
}

/* --- FIX: Return email color to --accent --- */
#contact-link a {
    color: var(--accent) !important;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

#contact-link a:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- CENTERED STATS BAR (Multi-Line Flow Fix) --- */
.stats-container {
    display: flex;
    flex-wrap: wrap;       /* Allows wrapping when space runs out */
    justify-content: center; /* Keeps the whole group centered */
    align-items: center;
    gap: 10px 20px;        /* 10px vertical gap, 20px horizontal gap */
    margin-top: 15px;
    width: 100%;
    text-align: center;
}

.minimal-stat, #radio-minimal {
    display: flex;
    flex-wrap: wrap;       /* Vital: allows radio stations to sit side-by-side */
    justify-content: center; /* Centers the stations on the current line */
    align-items: center;
    font-size: 0.68rem !important; 
    font-family: 'Courier New', monospace;
    line-height: 1.4;
}

#web-now, .radio-entry b {
    color: var(--accent) !important;
    font-weight: bold;
    margin: 0 2px;
}

.divider, .offline-text { color: #444; margin: 0 4px; }

.radio-entry {
    display: flex;
    align-items: center;
    border-left: 1px solid #333;
    padding: 0 8px;        /* Slightly reduced padding to fit more on one line */
    white-space: nowrap;   /* Keeps "EYVP: 1 / 5" from breaking apart */
}

/* --- PHONE RESPONSIVE LOCK --- */
@media (max-width: 600px) {
    /* REMOVED flex-direction: column to allow multiple items per line */
    
    .stats-container {
        gap: 8px 15px;     /* Tighter spacing for mobile */
    }
    
    .radio-entry {
        border-left: none; /* Borders look messy when items wrap */
        padding: 4px 6px;  /* Vertical breathing room for wrapped lines */
    }

    #radio-minimal {
        width: 100%;       /* Ensures the radio section uses the full width for wrapping */
    }
}