html,body{color:#111827;background:#f5f7fa;min-width:320px;min-height:100vh;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}:root{--sidebar-width:250px;--header-height:76px;--primary:#174ea6;--primary-dark:#123b7d;--background:#f5f7fb;--surface:#fff;--border:#e5e9f0;--text:#172033;--muted:#6b7280;--success:#15803d;--shadow:0 4px 18px #0f172a0f}*{box-sizing:border-box}body{background:var(--background);color:var(--text);margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{font:inherit}.app-shell{min-height:100vh}.app-main{min-height:100vh;margin-left:var(--sidebar-width)}.main-content{padding:28px}.sidebar{width:var(--sidebar-width);background:var(--surface);border-right:1px solid var(--border);z-index:100;flex-direction:column;display:flex;position:fixed;inset:0 auto 0 0}.sidebar-brand{height:var(--header-height);border-bottom:1px solid var(--border);align-items:center;padding:0 22px;display:flex}.brand-mark{background:var(--primary);color:#fff;border-radius:10px;place-items:center;width:38px;height:38px;font-size:19px;font-weight:700;display:grid}.brand-text{flex-direction:column;margin-left:11px;display:flex}.brand-text strong{font-size:16px;line-height:1.2}.brand-text span{color:var(--muted);margin-top:3px;font-size:11px}.sidebar-nav{flex:1;padding:24px 12px}.nav-section-title{color:#9aa1ad;letter-spacing:.08em;padding:0 12px 10px;font-size:10px;font-weight:700}.nav-item{color:#4b5563;border-radius:9px;align-items:center;height:46px;margin-bottom:4px;padding:0 13px;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s,color .15s;display:flex}.nav-item:hover{color:var(--primary);background:#f1f5f9}.nav-item.active{color:var(--primary);background:#eaf1ff;font-weight:600}.nav-icon{text-align:center;width:27px;font-size:17px}.sidebar-footer{border-top:1px solid var(--border);padding:18px}.sidebar-footer-text{flex-direction:column;display:flex}.sidebar-footer-text strong{font-size:12px}.sidebar-footer-text span{color:var(--muted);margin-top:3px;font-size:10px}.app-header{height:var(--header-height);background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:0 28px;display:flex}.header-left,.header-right{align-items:center;display:flex}.menu-button{cursor:pointer;background:0 0;border:0;font-size:23px;display:none}.header-title{flex-direction:column;display:flex}.header-eyebrow,.section-eyebrow{color:#8a93a3;letter-spacing:.08em;font-size:10px;font-weight:700}.header-title h1{margin:4px 0 0;font-size:20px;line-height:1.2}.header-icon-button{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:9px;width:40px;height:40px;margin-right:16px}.user-profile{align-items:center;display:flex}.user-avatar{width:38px;height:38px;color:var(--primary);background:#eaf1ff;border-radius:50%;place-items:center;font-size:14px;font-weight:700;display:grid}.user-info{flex-direction:column;margin-left:10px;display:flex}.user-info strong{font-size:13px}.user-info span{color:var(--muted);margin-top:2px;font-size:11px}.welcome-section{margin-bottom:26px}.welcome-section h2{margin:6px 0 7px;font-size:27px}.welcome-section p{max-width:650px;color:var(--muted);margin:0;font-size:14px;line-height:1.6}.dashboard-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px;display:grid}.stat-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:20px}.stat-card-header{color:var(--muted);justify-content:space-between;align-items:center;font-size:12px;font-weight:600;display:flex}.stat-icon{width:32px;height:32px;color:var(--primary);background:#f1f5f9;border-radius:8px;place-items:center;font-size:14px;font-weight:700;display:grid}.stat-card>strong{margin-top:17px;font-size:28px;display:block}.stat-description{color:var(--muted);margin-top:4px;font-size:11px;display:block}.dashboard-panel{background:var(--surface);border:1px solid var(--border);min-height:330px;box-shadow:var(--shadow);border-radius:12px;padding:22px}.panel-header h3{margin:5px 0 0;font-size:18px}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:220px;display:flex}.empty-state-icon{width:46px;height:46px;color:var(--primary);background:#edf3ff;border-radius:12px;place-items:center;font-weight:700;display:grid}.empty-state h4{margin:14px 0 5px;font-size:15px}.empty-state p{max-width:480px;color:var(--muted);margin:0;font-size:12px;line-height:1.6}.placeholder-page{padding:10px 0}.placeholder-page h2{margin:6px 0;font-size:26px}.placeholder-page p{color:var(--muted)}.sidebar-overlay{display:none}@media (width<=1100px){.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=768px){:root{--header-height:68px}.app-main{margin-left:0}.sidebar{transition:transform .2s;transform:translate(-100%)}.sidebar.sidebar-open{transform:translate(0)}.sidebar-overlay{z-index:90;background:#0f172a59;display:block;position:fixed;inset:0}.menu-button{margin-right:12px;display:block}.app-header{padding:0 16px}.header-title h1{font-size:17px}.header-eyebrow{font-size:8px}.user-info{display:none}.header-icon-button{margin-right:10px}.main-content{padding:20px 16px}.welcome-section h2{font-size:23px}.dashboard-grid{grid-template-columns:1fr;gap:12px}.dashboard-panel{padding:18px}}.parking-overview-panel{padding:22px}.parking-overview-header{justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px;display:flex}.parking-overview-title{align-items:flex-start;gap:14px;display:flex}.parking-section-icon{color:#1557b0;background:#edf4ff;border-radius:10px;justify-content:center;align-items:center;width:42px;height:42px;font-size:16px;font-weight:700;display:flex}.parking-overview-title h3{margin:3px 0;font-size:18px}.parking-site{color:#607089;align-items:center;gap:5px;font-size:13px;display:flex}.site-location-icon{font-size:14px}.parking-overview-actions{align-items:center;gap:12px;display:flex}.last-updated{color:#718096;font-size:12px}.refresh-button{color:#1557b0;cursor:pointer;background:#f8fafc;border:1px solid #e0e7f0;border-radius:9px;justify-content:center;align-items:center;width:36px;height:36px;font-size:20px;line-height:1;transition:background .15s,border-color .15s,transform .15s;display:flex}.refresh-button:hover{background:#edf4ff;border-color:#c8d9f4}.refresh-button:active{transform:rotate(30deg)}.refresh-button:disabled{opacity:.5;cursor:not-allowed}.parking-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px;display:grid}.parking-summary-card{border:1px solid #e7edf5;border-radius:10px;align-items:center;gap:12px;min-height:70px;padding:12px 16px;display:flex}.parking-summary-card .summary-icon{border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-size:15px;font-weight:700;display:flex}.parking-summary-card span{color:#61718a;margin-bottom:2px;font-size:12px;display:block}.parking-summary-card strong{color:#0f1f38;font-size:20px;line-height:1.1;display:block}.summary-total{background:#f7faff}.summary-total .summary-icon{color:#1557b0;background:#e9f1ff}.summary-occupied{background:#fff9f9}.summary-occupied .summary-icon{color:#dc2626;background:#ffe8e8}.summary-available{background:#f7fcf8}.summary-available .summary-icon{color:#16a34a;background:#e4f7e9}.parking-table-wrapper{background:#fff;border:1px solid #e4eaf2;border-radius:10px;overflow-x:auto}.parking-table{border-collapse:collapse;width:100%;font-size:13px}.parking-table thead{background:#f8fafc}.parking-table th{text-align:left;color:#52627a;white-space:nowrap;border-bottom:1px solid #e3e9f1;padding:11px 12px;font-size:12px;font-weight:600}.parking-table td{color:#3f4f66;white-space:nowrap;border-bottom:1px solid #edf1f5;padding:10px 12px}.parking-table tbody tr:last-child td{border-bottom:none}.parking-table tbody tr:hover{background:#fafcff}.parking-slot-name{color:#152641;font-weight:700}.parking-level{color:#61718a}.status-badge{border-radius:999px;align-items:center;padding:3px 9px;font-size:11px;font-weight:600;line-height:1.2;display:inline-flex}.status-occupied{color:#dc2626;background:#fff0f0;border:1px solid #ffcaca}.status-available{color:#159447;background:#effbf2;border:1px solid #bfe9c8}.device-status{align-items:center;gap:7px;font-size:12px;display:inline-flex}.device-dot{border-radius:50%;width:7px;height:7px;display:inline-block}.device-connected{color:#34445b}.device-connected .device-dot{background:#16a34a}.device-disconnected{color:#34445b}.device-disconnected .device-dot{background:#dc2626}.device-unknown{color:#58677d}.device-unknown .device-dot{background:#8793a6}.customer-badge{color:#159447;background:#effbf2;border:1px solid #bfe9c8;border-radius:999px;align-items:center;padding:3px 8px;font-size:11px;font-weight:600;display:inline-flex}.customer-empty{color:#8995a6}.last-updated-cell{color:#65758d;font-size:12px}@media (width<=900px){.parking-overview-header{flex-direction:column;align-items:flex-start}.parking-overview-actions{justify-content:flex-end;width:100%}.parking-summary{grid-template-columns:1fr}}@media (width<=600px){.parking-overview-panel{padding:16px}.parking-overview-title{gap:10px}.parking-section-icon{width:36px;height:36px}.parking-overview-actions{justify-content:space-between}.parking-table{min-width:760px}}