/* ============================================================
   GPS Center Lite — style.css
   Tanpa Google Fonts CDN, pakai system font stack
   ============================================================ */

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

:root {
    --gps:     #ff9800;
    --sbas:    #90a4ae;
    --gal:     #fdd835;
    --bei:     #66bb6a;
    --glo:     #42a5f5;
    --app-bg:  #e2e2e2;
    --panel:   #ffffff;
    --border:  #d0d0d0;
    --hdr-bg:  #f7f7f7;
    --txt:     #222;
    --muted:   #777;
}

html, body {
    height: 100%;
    /* System font — tanpa request ke Google Fonts */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--app-bg);
    color: var(--txt);
    overflow: hidden;
}

/* ===== APP SHELL ===== */
.app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ===== SIDEBAR KIRI ===== */
.sidebar {
    width: 48px;
    min-width: 48px;
    background: #1e1e1e;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 8px;
    gap: 6px;
}

.sidebar-logo {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}

.sidebar-label {
    font-size: 0.6rem;
    color: #666;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-top: 6px;
    user-select: none;
}

.sidebar-badge {
    font-size: 1.1rem;
    color: #e53935;   /* merah = disconnected default */
    margin-top: auto;
    padding-bottom: 8px;
    transition: color 0.4s;
}
.sidebar-badge.connected { color: #4caf50; }

/* ===== PANEL DEVICES (kiri) ===== */
.devices-panel {
    width: 200px;
    min-width: 200px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 10px 10px;
    gap: 0;
    overflow-y: auto;
}

.panel-heading {
    font-size: 0.75rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px 2px 6px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
}

.device-card {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 8px 9px;
    background: #fafafa;
}

.device-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.device-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
}

/* Toggle pill */
.device-toggle {
    width: 30px; height: 16px;
    border-radius: 8px;
    background: #ccc;
    position: relative;
    flex-shrink: 0;
}
.device-toggle.on { background: #4caf50; }
.device-toggle::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: left 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.device-toggle.on::after { left: 16px; }

.device-status {
    font-size: 0.7rem;
    color: #aaa;
    transition: color 0.3s;
}
.device-status.ok  { color: #4caf50; }
.device-status.err { color: #e53935; }

/* Constellation list */
.const-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.const-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}

.dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cname { flex: 1; color: #444; }

.ccount {
    font-weight: 600;
    color: #333;
    font-size: 0.73rem;
    min-width: 28px;
    text-align: right;
}

.filter-label {
    font-size: 0.73rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    margin-top: 4px;
}
.filter-label input { accent-color: #e53935; }

/* ===== MAIN AREA ===== */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    overflow: hidden;
    min-width: 0;
}

.top-row {
    display: flex;
    gap: 5px;
    flex: 1.4;
    min-height: 0;
}

.bottom-row {
    display: flex;
    gap: 5px;
    flex: 0.6;
    min-height: 0;
}

/* ===== PANEL BASE ===== */
.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.panel-header {
    padding: 6px 12px;
    border-bottom: 1px solid #eee;
    font-size: 0.82rem;
    font-weight: 600;
    color: #333;
    background: var(--hdr-bg);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Satellite count badge */
.sat-badge {
    background: #e3f2fd;
    color: #1565c0;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 9px;
    border: 1px solid #bbdefb;
}

/* ===== ① SKYPLOT PANEL ===== */
.skyplot-panel {
    flex: 1;
    min-width: 0;
}

.skyplot-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    min-height: 0;
    background: #f8f9fa;
}

#skyCanvas { display: block; }

/* ===== ② DATA PANEL ===== */
.data-panel {
    width: 230px;
    min-width: 230px;
    flex-shrink: 0;
}

.data-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.data-hr {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 1px 0;
}

.data-item { display: flex; flex-direction: column; }

.data-lbl {
    font-size: 0.67rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 1px;
}

.data-val {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--txt);
    word-break: break-all;
}

.coord-val {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1a237e;
    font-variant-numeric: tabular-nums;
}

.sv-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2e7d32;
}

/* Fix Mode badge */
.fix-val {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.88rem;
    background: #f0f0f0;
    color: #888;
    width: fit-content;
    transition: background 0.3s, color 0.3s;
}
.fix-val.fix-ok    { background: #e8f5e9; color: #2e7d32; }
.fix-val.fix-float { background: #fff3e0; color: #e65100; }
.fix-val.fix-rtk   { background: #e3f2fd; color: #0d47a1; }

/* Flash update animation */
@keyframes flash {
    0%   { background: transparent; }
    30%  { background: #fffde7; }
    100% { background: transparent; }
}
.flash { animation: flash 0.5s ease-out; border-radius: 3px; }

/* ===== ③ SIGNAL PANEL ===== */
.signal-panel {
    flex: 1.6;
    min-width: 0;
}

.signal-wrap {
    flex: 1;
    position: relative;
    min-height: 0;
    padding: 4px 8px 2px;
}

#sigCanvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ===== ④ MAP PANEL (Leaflet lokal) ===== */
.map-panel {
    flex: 0.85;
    min-width: 180px;
}

#map {
    flex: 1;
    width: 100%;
    min-height: 0;
}

.map-footer {
    padding: 5px 10px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
    background: #fafafa;
    display: flex;
    align-items: center;
    gap: 8px;
}

.maps-btn {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 7px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    white-space: nowrap;
}
.maps-btn:hover { background: #1558b0; }
.maps-btn:disabled { background: #bdbdbd; cursor: default; }

/* ===== LEGEND BAR ===== */
.legend-bar {
    padding: 4px 12px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 14px;
    font-size: 0.7rem;
    color: #666;
    flex-shrink: 0;
    flex-wrap: wrap;
    background: #fafafa;
}

.leg-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 3px;
}
.leg-dot.filled    { background: #ff9800; }
.leg-dot.red-ring  { background: rgba(239,83,80,0.15); border: 2px solid #ef5350; }
.leg-dot.empty-ring{ background: transparent; border: 2px solid #888; }

.leg-sq {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 3px;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }