:root { 
    --bg: #f4f7f6; 
    --panel: #ffffff; 
    --text: #1e293b; 
    --primary: #3b82f6; 
    --success: #10b981; 
    --border: #e2e8f0; 
    --warning: #f59e0b; 
    --danger: #ef4444; 
    --inactive: #cbd5e1;
}

body { font-family: -apple-system, sans-serif; background: var(--bg); color: var(--text); margin: 0; display: flex; height: 100vh; }

/* Auth Screen */
#auth-view { width: 100%; display: flex; justify-content: center; align-items: center; }
.auth-card { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%; max-width: 350px; text-align: center; }
.auth-card input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; }
.auth-card button { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 10px; }

/* Dashboard Screen */
#dashboard-view { display: none; width: 100%; flex-direction: column; height: 100vh; overflow: hidden; }
.main-content { flex: 1; padding: 0px 20px 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; }

/* Top Navigation & User Menu */
.top-nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: white; border-bottom: 1px solid var(--border); z-index: 90; }
.nav-brand { font-size: 20px; font-weight: bold; color: var(--primary); margin: 0; }
.user-menu-wrapper { position: relative; }
.user-avatar-btn { background: #f1f5f9; border: 1px solid var(--border); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--primary); font-weight: bold; font-size: 16px; transition: 0.2s; }
.user-avatar-btn:hover { background: #e2e8f0; }
.user-dropdown { display: none; position: absolute; right: 0; top: 50px; background: white; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 280px; z-index: 100; overflow: hidden; flex-direction: column; }
.user-dropdown.open { display: flex; }
.dropdown-header { padding: 15px; border-bottom: 1px solid var(--border); background: #f8fafc; }
.dropdown-btn { width: 100%; text-align: left; padding: 12px 15px; background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; font-weight: 600; color: #475569; transition: 0.2s; }
.dropdown-btn:hover { background: #f1f5f9; color: var(--primary); }
.dropdown-btn.danger { border-bottom: none; }
.dropdown-btn.danger:hover { color: var(--danger); }

.device-btn { display: none; } /* Deprecated */

/* General Card UI */
.ui-card { background: var(--panel); padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid var(--border); width: 100%; max-width: 500px; }

/* --- MASONRY DASHBOARD LAYOUT --- */
#fleet-dashboard { 
    display: block !important; 
    margin: 0 auto !important; 
    width: 100%;
    max-width: 1380px !important; /* The physical wall: Exactly fits 4 columns (1320px) + 3 gaps (60px) */
}
.summary-card { 
    background: var(--panel); 
    border-radius: 12px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    border: 1px solid var(--border); 
    transition: 0.3s; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    scroll-margin-top: 80px;
    
    width: 330px; /* Locked fixed width for perfect columns */
    margin-bottom: 20px; /* The vertical gap between cards */
    box-sizing: border-box;
}

/* Keep cards in natural columns on desktop. Only stretch on mobile */
.summary-card.expanded { border-color: var(--primary); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
@media (max-width: 800px) { .summary-card.expanded { grid-column: 1 / -1; } }

.summary-header { padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; background: white; }
.summary-header:hover { background: #f8fafc; }
.expanded-area { padding: 0 20px 20px 20px; display: none; border-top: 1px solid var(--border); background: #f8fafc; transition: all 0.3s ease; }
.expanded-area.offline-blur { opacity: 0.4; filter: grayscale(100%); pointer-events: none; }
.header { margin-bottom: 20px; }

/* Universal UI Components */
.gang-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; cursor: pointer; }
.toggle-track { width: 44px; height: 24px; background: #cbd5e1; border-radius: 12px; position: relative; transition: 0.3s; }
.toggle-thumb { width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.toggle-track.on { background: var(--success); }
.toggle-track.on .toggle-thumb { transform: translateX(20px); }
.left-col { display: flex; align-items: center; gap: 10px; }
.input-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--inactive); transition: 0.2s; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); }
.input-indicator.active { background: var(--success); box-shadow: 0 0 5px var(--success); }

/* Modals & Overlays */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; padding: 20px 0; }

/* Profile Inputs */
.profile-input { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; margin-bottom: 10px; }

/* Fleet Tabs */
.fleet-tabs-container {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--border);
    padding-top: 30px;
    padding-bottom: 0px;
    width: 100%;
    max-width: 1400px; 
    scrollbar-width: none; 
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--bg);
}
.fleet-tabs-container::-webkit-scrollbar { display: none; } 

.fleet-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
    margin-bottom: -2px; 
}
.fleet-tab:hover { color: var(--text); }
.fleet-tab.active { color: var(--primary); border-bottom: 3px solid var(--primary); }

@media (max-width: 800px) {
    .top-nav { padding: 15px 20px; }
}