:root{
	--bg:#0f1222;--panel:#151936;--text:#e8ecff;--muted:#9aa3c7;--accent:#5b8cff;--accent-2:#2ad1b9;--error:#ff6b6b;--border:#232855;--panel-2:#0f1230;--success:#3ad29f;--warning:#f4b740
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100%;min-height:100dvh}
body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.5;overflow-x:hidden;min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent}

.container{max-width:1400px;margin:0 auto;padding:20px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));width:100%}

.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,var(--panel),#10142c);padding:14px 20px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-top:max(14px,env(safe-area-inset-top));border-bottom:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.05) inset;display:flex;align-items:center;gap:16px;backdrop-filter:blur(10px)}
.topbar h1{margin:0;font-size:20px;letter-spacing:.3px;flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-logout{margin-left:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);color:var(--text);text-decoration:none;font-size:13px;font-weight:500;background:var(--panel-2);transition:all 0.15s ease}
.topbar-logout:hover{border-color:var(--accent);color:var(--accent-2);background:#11153a;transform:translateY(-1px)}
.topbar-logout:active{transform:translateY(0)}
.topbar-user{margin-left:auto;padding:8px 12px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border);font-size:12px;color:var(--muted);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Hamburger Menu */
.hamburger{background:none;border:none;cursor:pointer;padding:10px;display:flex;flex-direction:column;gap:5px;width:44px;height:44px;justify-content:center;align-items:center;border-radius:8px;transition:background 0.2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hamburger:hover{background:rgba(91,140,255,.1)}
.hamburger:active{transform:scale(0.95)}
.hamburger span{display:block;width:22px;height:2.5px;background:var(--text);border-radius:2px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);will-change:transform,opacity}
.hamburger:hover span{background:var(--accent)}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(7px,7px)}
.hamburger.active span:nth-child(2){opacity:0;transform:translateX(-10px)}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}

/* Drawer */
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:100;opacity:0;visibility:hidden;transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),visibility 0.3s ease;backdrop-filter:blur(4px)}
.drawer-overlay.active{opacity:1;visibility:visible}

.drawer{position:fixed;top:0;left:0;width:min(320px,85vw);height:100vh;height:100dvh;padding-left:env(safe-area-inset-left);padding-bottom:env(safe-area-inset-bottom);background:var(--panel);border-right:1px solid var(--border);z-index:101;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:4px 0 32px rgba(0,0,0,.4),-2px 0 0 rgba(91,140,255,.1) inset;overflow-y:auto;overflow-x:hidden;will-change:transform;-webkit-overflow-scrolling:touch}
.drawer.active{transform:translateX(0)}
.drawer::-webkit-scrollbar{width:6px}
.drawer::-webkit-scrollbar-track{background:var(--panel-2)}
.drawer::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.drawer::-webkit-scrollbar-thumb:hover{background:var(--accent)}

.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--panel),var(--panel-2))}
.drawer-header h2{margin:0;font-size:18px;font-weight:600}
.drawer-close{background:none;border:none;color:var(--text);font-size:28px;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all 0.2s ease;touch-action:manipulation}
.drawer-close:hover{background:var(--panel-2);color:var(--accent);transform:rotate(90deg)}
.drawer-close:active{transform:rotate(90deg) scale(0.9)}

.drawer-menu{list-style:none;margin:0;padding:8px 0}
.drawer-menu li{margin:0}
.drawer-menu a{display:flex;align-items:center;padding:16px 20px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);transition:all 0.2s ease;position:relative;touch-action:manipulation;min-height:56px;-webkit-tap-highlight-color:transparent}
.drawer-menu a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent-2);transition:width 0.2s ease;opacity:0.2}
.drawer-menu a:hover{background:var(--panel-2);color:var(--accent);padding-left:24px}
.drawer-menu a:hover::before{width:4px}
.drawer-menu a.active{background:linear-gradient(90deg,var(--panel-2),var(--panel));color:var(--accent-2);font-weight:500;padding-left:24px}
.drawer-menu a.active::before{width:4px;opacity:1}

/* Footer */
.footer{background:var(--panel);border-top:1px solid var(--border);padding:24px 0;margin-top:60px;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.footer .container{text-align:center}
.footer p{margin:0;color:var(--muted);font-size:14px;opacity:0.8}

/* Page Title */
.page-title{margin:20px 0 28px 0;font-size:28px;font-weight:700;background:linear-gradient(135deg,var(--text),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px}

/* Chart Section */
.chart-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;margin:20px 0;box-shadow:0 8px 32px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.05) inset}
.chart-section h2{margin:0 0 24px 0;font-size:20px;font-weight:600}
.chart-container{
	position:relative;height:400px;width:100%;min-height:280px;
	overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
	overscroll-behavior-x:contain;
	scrollbar-width:thin;
	scrollbar-color:var(--border) var(--panel-2);
	touch-action:pan-x pan-y;
}
.chart-container::-webkit-scrollbar{height:8px}
.chart-container::-webkit-scrollbar-track{background:var(--panel-2);border-radius:4px}
.chart-container::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.chart-container::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.chart-container canvas{display:block;flex-shrink:0;max-width:none;touch-action:manipulation}

/* Summary Section */
.summary-section{margin:16px 0}
.summary-section h2{margin:0 0 16px 0;font-size:18px}
.summary-section .table-wrap table tbody tr.total-row{background:var(--panel-2);font-weight:600}
.summary-section .table-wrap table tbody tr.total-row td{border-top:2px solid var(--border);padding-top:16px}

/* Card sub-label */
.card .sub-label{color:var(--muted);font-size:11px;margin-top:4px}

.filters{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;margin:20px 0;box-shadow:0 8px 32px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.05) inset}
.filters-form .row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.filters-form label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted);font-weight:500;flex:1;min-width:140px}
.filters-form label input,.filters-form label select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:10px;min-width:140px;outline:none;transition:all 0.2s ease;font-size:14px;appearance:none;-webkit-appearance:none}
.filters-form label input:focus,.filters-form label select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,140,255,.2),0 2px 8px rgba(91,140,255,.15);transform:translateY(-1px)}
.filters-form label select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa3c7' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
.filters-form label.grow{flex:1;min-width:200px}
.airports{margin:16px 0;display:flex;gap:12px;flex-wrap:wrap;border:0;padding:0}
.airports legend{width:100%;margin-bottom:6px;color:var(--muted);font-size:12px}
.chk{display:flex;gap:8px;align-items:center;background:var(--panel-2);border:1px solid var(--border);padding:8px 12px;border-radius:999px;transition:transform .08s ease, border-color .15s ease}
.chk:hover{transform:translateY(-1px);border-color:var(--accent)}
.actions{display:flex;gap:12px;align-items:flex-end;margin-left:auto;flex-wrap:wrap}
.actions button,.actions a.secondary{padding:12px 20px;border-radius:10px;border:1px solid var(--border);text-decoration:none;color:var(--text);cursor:pointer;transition:all 0.2s ease;font-size:14px;font-weight:500;touch-action:manipulation;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.actions button{background:linear-gradient(135deg,var(--accent),#416fff);border:0;color:white;box-shadow:0 4px 16px rgba(65,111,255,.4),0 2px 4px rgba(0,0,0,.2)}
.actions button:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(65,111,255,.5),0 4px 8px rgba(0,0,0,.25)}
.actions button:active{transform:translateY(0);box-shadow:0 2px 8px rgba(65,111,255,.4)}
.actions a.secondary{background:var(--panel-2);border:1px solid var(--border)}
.actions a.secondary:hover{transform:translateY(-2px);background:var(--panel);border-color:var(--accent);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.actions a.secondary:active{transform:translateY(0)}

.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:24px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.05) inset;transition:transform 0.2s ease,box-shadow 0.2s ease;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0;transition:opacity 0.2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.05) inset}
.card:hover::before{opacity:1}
.card .label{color:var(--muted);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.card .label .metric-select{width:100%;min-height:34px;padding:6px 10px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;cursor:pointer}
.card .label .metric-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(65,111,255,.18)}
.card .value{font-size:32px;font-weight:700;letter-spacing:-0.5px;background:linear-gradient(135deg,var(--text),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.table-wrap{overflow-x:auto;overflow-y:visible;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));box-shadow:0 8px 32px rgba(0,0,0,.25);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border) var(--panel-2)}
.table-wrap::-webkit-scrollbar{height:8px}
.table-wrap::-webkit-scrollbar-track{background:var(--panel-2);border-radius:0 0 16px 16px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.table-wrap table{width:100%;border-collapse:separate;border-spacing:0;min-width:800px}
.table-wrap th,.table-wrap td{padding:14px 16px;border-bottom:1px solid var(--border);white-space:nowrap;font-size:14px}
.table-wrap thead th{position:sticky;top:0;background:linear-gradient(180deg,#12163a,#0f1230);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:0.5px;color:var(--muted);z-index:10;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.table-wrap tbody tr:nth-child(odd){background:rgba(255,255,255,.015)}
.table-wrap tbody tr:hover{background:rgba(91,140,255,.1);transform:scale(1.001);transition:background 0.15s ease}
.table-wrap tbody td:last-child{font-weight:600}

.breakdown{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.breakdown table{width:100%;min-width:280px;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.breakdown th,.breakdown td{padding:12px 14px;border-bottom:1px solid var(--border)}
.breakdown thead th{background:#12163a}
.breakdown thead th:nth-child(2),.breakdown tbody td:nth-child(2){text-align:right}

.muted{color:var(--muted)}
.error{background:#2a0f18;color:#ffd3d3;border:1px solid #a33;padding:12px;border-radius:10px;margin:12px 0}

/* Badge-like style for Status column (last column) */
.table-wrap tbody td:last-child{display:inline-block;background:var(--panel-2);padding:6px 10px;border-radius:999px;border:1px solid var(--border)}

/* Real-time monitor */
.rt-controls{display:flex;gap:12px;align-items:center;margin-left:auto;flex-wrap:wrap}
.rt-status{font-size:12px}
.rt-status--ok{color:var(--success)}
.rt-status--warn{color:var(--warning)}
.rt-status--err{color:var(--error)}
.rt-pause{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;transition:transform .08s ease, background .15s ease, border-color .15s ease;font-weight:600;min-height:44px}
.rt-pause:hover{transform:translateY(-1px);border-color:var(--accent)}
.rt-pause--active{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.6);color:#ffd3d3}

.rt-banner{position:sticky;top:74px;z-index:40;margin:12px 0 18px 0;padding:14px 16px;border-radius:14px;border:1px solid rgba(58,210,159,.45);background:linear-gradient(135deg,rgba(58,210,159,.14),rgba(91,140,255,.12));box-shadow:0 10px 28px rgba(0,0,0,.25);font-weight:800;letter-spacing:.2px}
.rt-banner--flash{animation:rtFlash 0.6s ease-in-out 0s 5}
@keyframes rtFlash{
	0%{filter:brightness(1);transform:translateY(0)}
	50%{filter:brightness(1.35);transform:translateY(-1px)}
	100%{filter:brightness(1);transform:translateY(0)}
}

.rt-row--new{background:rgba(58,210,159,.08)!important}
.rt-row--new td{border-bottom-color:rgba(58,210,159,.35)}

.pagination{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.pagination a{color:var(--text);text-decoration:none;border:1px solid var(--border);padding:8px 12px;border-radius:10px;background:var(--panel-2);transition:transform .08s ease, background .15s ease}
.pagination a:hover{transform:translateY(-1px);background:#11153a}
.pagination a.active{background:var(--accent-2);color:#0b0d1d;border:0}

/* Utilities */
.separator{height:1px;background:var(--border);margin:16px 0}

/* Loading States */
.loading{opacity:0.6;pointer-events:none;position:relative}
.loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Performance Optimizations */
.card,.filters,.chart-section{will-change:transform}
.table-wrap{will-change:scroll-position}

/* Disable transitions for reduced motion */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
	.hamburger span,.drawer{transition:none!important}
}

/* Responsive Design */
@media (max-width:1200px){
	.container{max-width:100%;padding:16px}
}

@media (max-width:768px){
	.topbar{padding:12px 16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-top:max(12px,env(safe-area-inset-top))}
	.topbar h1{font-size:18px}
	.page-title{font-size:24px;margin:16px 0 20px 0}
	.container{padding:12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
	.filters{padding:16px;border-radius:12px}
	.filters-form .row{gap:12px}
	.filters-form label{min-width:100%;flex:1 1 100%}
	.filters-form label input,.filters-form label select{min-width:100%;width:100%;min-height:44px}
	.filters-form label.grow{min-width:100%}
	.actions{margin-left:0;width:100%;justify-content:stretch}
	.actions button,.actions a.secondary{flex:1;min-width:0}
	.metrics{grid-template-columns:1fr;gap:12px}
	.card{padding:16px;border-radius:12px}
	.card .value{font-size:28px}
	.chart-section{padding:16px;border-radius:12px}
	.chart-container{height:min(360px,55vh);min-height:260px}
	.summary-section h2{font-size:16px}
	.table-wrap{border-radius:12px}
	.table-wrap table{min-width:600px}
	.table-wrap th,.table-wrap td{padding:10px 12px;font-size:13px}
	.drawer{width:min(280px,80vw)}
	.pagination{flex-wrap:wrap;justify-content:center;gap:6px}
	.pagination a{padding:10px 14px;font-size:14px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
	.rt-controls{width:100%;justify-content:space-between;margin-left:0}
	.rt-banner{top:66px}
}

@media (max-width:480px){
	.topbar{padding:10px 12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(10px,env(safe-area-inset-top))}
	.topbar h1{font-size:16px}
	.hamburger{width:44px;height:44px;min-width:44px;min-height:44px;padding:10px}
	.page-title{font-size:20px}
	.container{padding:10px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
	.filters{padding:12px}
	.filters-form label{font-size:11px}
	.filters-form label input,.filters-form label select{padding:10px 12px;font-size:16px;min-height:44px}
	.card{padding:14px}
	.card .label{font-size:12px}
	.card .value{font-size:24px}
	.chart-container{height:min(320px,52vh);min-height:240px}
	.table-wrap table{min-width:500px}
	.table-wrap th,.table-wrap td{padding:8px 10px;font-size:12px}
	.drawer-header{padding:16px;padding-left:max(16px,env(safe-area-inset-left))}
	.drawer-header h2{font-size:16px}
	.drawer-menu a{padding:14px 16px;min-height:48px}
	.footer{padding:20px 0;margin-top:40px;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:max(24px,env(safe-area-inset-bottom))}
	.footer p{font-size:12px}
}

/* Extra small devices (e.g. 320px–360px) */
@media (max-width:360px){
	.container{padding:8px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
	.topbar h1{font-size:14px}
	.page-title{font-size:18px}
	.filters{padding:10px}
	.filters-form label input,.filters-form label select{font-size:16px}
	.card .value{font-size:22px}
	.table-wrap table{min-width:400px}
	.drawer{width:min(260px,92vw)}
}

/* Parking Space Styles */
.parking-space-section{margin:24px 0}
.parking-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:20px 0}
.parking-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.05) inset;transition:transform 0.2s ease,box-shadow 0.2s ease;position:relative;overflow:hidden}
.parking-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0;transition:opacity 0.2s ease}
.parking-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.05) inset}
.parking-card:hover::before{opacity:1}
.parking-card.over-capacity{border-color:var(--error);box-shadow:0 8px 32px rgba(255,107,107,.3),0 1px 0 rgba(255,255,255,.05) inset}
.parking-card.over-capacity::before{background:linear-gradient(90deg,var(--error),#ff5252);opacity:1}

.parking-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.parking-header h3{margin:0;font-size:20px;font-weight:600;color:var(--text)}
.service-badge{background:var(--panel-2);border:1px solid var(--border);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500;color:var(--accent-2);text-transform:uppercase;letter-spacing:0.5px}

.parking-metrics{display:flex;flex-direction:column;gap:16px}
.metric-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.metric-label{color:var(--muted);font-size:14px;font-weight:500}
.metric-value{font-size:24px;font-weight:700;color:var(--text)}
.metric-value.capacity{color:var(--accent-2)}
.metric-value.current{color:var(--accent)}
.metric-value.available{color:var(--success)}
.metric-value.available.negative{color:var(--error)}
.metric-value.available.negative strong{font-size:28px;font-weight:800}
.metric-value.occupancy{font-size:18px;color:var(--muted)}

.capacity-bar{position:relative;margin-top:8px;height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid var(--border)}
.capacity-bar-fill{position:absolute;top:0;left:0;bottom:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 0.3s ease}
.capacity-bar-fill.over{background:linear-gradient(90deg,var(--error),#ff5252)}

.over-capacity-warning{background:rgba(255,107,107,.15);border:1px solid var(--error);border-radius:8px;padding:12px;margin-top:16px;text-align:center;color:var(--error);font-weight:600;font-size:14px}

.parking-summary{margin:32px 0}
.parking-summary h2{margin:0 0 20px 0;font-size:20px;font-weight:600}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.summary-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.05) inset;text-align:center}
.summary-label{color:var(--muted);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px}
.summary-value{font-size:32px;font-weight:700;color:var(--text);letter-spacing:-0.5px}
.summary-value.negative{color:var(--error)}
.summary-value.negative strong{font-size:36px;font-weight:800}

/* Responsive adjustments for parking space */
@media (max-width:768px){
	.parking-grid{grid-template-columns:1fr;gap:16px}
	.parking-card{padding:20px}
	.parking-header h3{font-size:18px}
	.metric-value{font-size:22px}
	.metric-value.available.negative strong{font-size:24px}
	.summary-grid{grid-template-columns:1fr}
	.summary-value{font-size:28px}
	.summary-value.negative strong{font-size:32px}
}

@media (max-width:480px){
	.parking-card{padding:16px}
	.parking-header{flex-direction:column;align-items:flex-start;gap:12px}
	.service-badge{align-self:flex-end}
	.metric-item{flex-direction:column;align-items:flex-start;gap:8px}
	.metric-value{font-size:20px}
}

/* Print Styles */
@media print{
	.drawer,.drawer-overlay,.hamburger,.actions{display:none}
	.topbar{position:static;box-shadow:none}
	.container{max-width:100%}
	.table-wrap{overflow:visible}
}

/* User Management */
.um-intro{margin:-12px 0 24px;color:var(--muted);font-size:14px;max-width:900px}
.um-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}
.um-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.um-panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.um-panel-header h2{margin:0;font-size:18px}
.um-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.um-fields label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted)}
.um-fields input[type=text],.um-fields input[type=password]{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:10px}
.um-checkbox{flex-direction:row!important;align-items:center;gap:10px!important;padding-top:28px}
.um-permissions-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 14px}
.um-permissions-header h3{margin:0;font-size:16px}
.um-permission-block{border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px;background:var(--panel-2)}
.um-permission-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.um-permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.um-permission-grid label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted)}
.um-permission-grid select,.um-permission-grid input[type=date]{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px}
.um-actions{display:flex;gap:10px;align-items:center}
.um-actions form{margin:0}
.danger-link,.um-actions .danger-link{background:none;border:0;color:var(--error);cursor:pointer;padding:0;font-size:13px;text-decoration:underline}
.notice{border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:14px}
.notice.success{background:#10261d;border:1px solid #1f6b4d;color:#b8f5d8}
.notice.error{background:#2a0f18;border:1px solid #a33;color:#ffd3d3}
@media (max-width:980px){.um-layout{grid-template-columns:1fr}}
@media (max-width:640px){.um-fields,.um-permission-grid{grid-template-columns:1fr}}

/* Space Analysis */
.sa-page .page-title{margin-bottom:6px}
.sa-page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 20px}
.sa-page-subtitle{margin:0;color:var(--muted);font-size:14px;max-width:42ch}
.sa-context-pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sa-pill{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(91,140,255,.1);border:1px solid rgba(91,140,255,.22);color:var(--text);font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.sa-filters{margin-top:0;margin-bottom:16px}
.sa-charts-grid{display:grid;grid-template-columns:1fr;gap:18px;margin:0 0 24px}
.sa-page .chart-section.sa-chart-section h2{margin:0 0 6px}
.sa-chart-section{
	margin:0;
	padding:0;
	overflow:hidden;
	background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--panel);
	border:1px solid var(--border);
	border-radius:18px;
	box-shadow:0 10px 40px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.04) inset;
}
.sa-chart-section::before{
	content:'';
	display:block;
	height:3px;
	background:var(--sa-accent,linear-gradient(90deg,var(--accent),var(--accent-2)));
	opacity:.95;
}
@media (hover:hover) and (pointer:fine){
	.sa-chart-section{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
	.sa-chart-section:hover{
		transform:translateY(-2px);
		box-shadow:0 14px 44px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.05) inset;
	}
}
.sa-chart-departures{--sa-accent:linear-gradient(90deg,#5b8cff,#416fff)}
.sa-chart-returns{--sa-accent:linear-gradient(90deg,#7b6cff,#5b8cff)}
.sa-chart-yard{--sa-accent:linear-gradient(90deg,#2ad1b9,#1fb89f)}
.sa-chart-bookings{--sa-accent:linear-gradient(90deg,#416fff,#5b8cff)}
.sa-chart-header{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	gap:16px;
	padding:20px 20px 0;
}
.sa-chart-head{flex:1;min-width:min(100%,220px)}
.sa-chart-head h2{
	margin:0 0 6px;
	font-size:19px;
	font-weight:700;
	letter-spacing:-.02em;
}
.sa-chart-head .muted{font-size:13px;color:var(--muted);margin:0;line-height:1.45;max-width:52ch}
.sa-chart-stats{
	display:grid;
	grid-template-columns:repeat(3,minmax(72px,1fr));
	gap:10px;
	min-width:min(100%,280px);
}
.sa-stat{
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:10px 12px;
	border-radius:12px;
	background:rgba(15,18,48,.65);
	border:1px solid rgba(35,40,85,.85);
}
.sa-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.sa-stat-value{font-size:18px;font-weight:700;line-height:1.1;color:var(--text)}
.sa-legend{
	display:flex;
	flex-wrap:wrap;
	gap:8px 10px;
	margin:14px 20px 0;
	font-size:12px;
	color:var(--muted);
}
.sa-legend-item{
	display:inline-flex;
	align-items:center;
	padding:6px 10px;
	border-radius:999px;
	background:rgba(15,18,48,.55);
	border:1px solid rgba(35,40,85,.7);
}
.sa-dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:7px;vertical-align:middle;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.sa-dot-ok{background:#2ad1b9}
.sa-dot-warn{background:#f4b740}
.sa-dot-danger{background:#ff6b6b}
.sa-legend-note{
	display:inline-flex;
	align-items:center;
	padding:6px 10px;
	border-radius:999px;
	color:var(--accent);
	font-size:11px;
	background:rgba(91,140,255,.08);
	border:1px dashed rgba(91,140,255,.28);
}
.sa-chart-container{
	position:relative;
	height:min(380px,54vh);
	min-height:280px;
	margin:16px 20px 20px;
	border-radius:14px;
	background:linear-gradient(180deg,rgba(15,18,48,.55),rgba(15,18,48,.25));
	border:1px solid rgba(35,40,85,.75);
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior-x:contain;
	scrollbar-width:thin;
	scrollbar-color:rgba(91,140,255,.45) rgba(15,18,48,.8);
	touch-action:pan-x pan-y;
}
.sa-chart-container::-webkit-scrollbar{height:6px}
.sa-chart-container::-webkit-scrollbar-track{background:rgba(15,18,48,.8);border-radius:999px;margin:0 8px}
.sa-chart-container::-webkit-scrollbar-thumb{background:linear-gradient(90deg,rgba(91,140,255,.55),rgba(42,209,185,.55));border-radius:999px}
.sa-chart-container canvas{display:block;flex-shrink:0;max-width:none;touch-action:pan-x pan-y}
.sa-scroll-hint{
	position:absolute;
	top:10px;
	right:12px;
	z-index:3;
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 10px;
	border-radius:999px;
	font-size:11px;
	font-weight:600;
	color:var(--muted);
	background:rgba(21,25,54,.92);
	border:1px solid rgba(35,40,85,.9);
	backdrop-filter:blur(8px);
	pointer-events:none;
	opacity:0;
	transform:translateY(-4px);
	transition:opacity .3s ease,transform .3s ease;
}
.sa-chart-container.is-scrollable .sa-scroll-hint{
	opacity:1;
	transform:translateY(0);
}
.sa-chart-container.is-scrolled .sa-scroll-hint,
.sa-chart-container.is-scroll-end .sa-scroll-hint{
	opacity:0;
	transform:translateY(-4px);
}
@media (min-width:1100px){
	.sa-charts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
	.sa-chart-yard,.sa-chart-bookings{grid-column:1/-1}
}
@media (max-width:768px){
	.sa-page .page-title{margin:16px 0 4px;font-size:24px}
	.sa-page-header{align-items:flex-start;margin-bottom:16px}
	.sa-context-pills{width:100%}
	.sa-filters{margin-bottom:12px}
	.sa-chart-header{padding:16px 16px 0}
	.sa-chart-stats{min-width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
	.sa-stat{padding:8px 10px}
	.sa-stat-value{font-size:16px}
	.sa-legend{margin:12px 16px 0}
	.sa-chart-container{
		height:min(340px,50vh);
		min-height:250px;
		margin:14px 16px 16px;
	}
	.sa-chart-head h2{font-size:17px}
}
@media (max-width:480px){
	.sa-page .page-title{font-size:20px}
	.sa-page-subtitle{font-size:13px}
	.sa-pill{padding:7px 12px;font-size:11px}
	.sa-chart-section{border-radius:14px}
	.sa-chart-header{padding:14px 14px 0;gap:12px}
	.sa-chart-head h2{font-size:16px}
	.sa-chart-head .muted{font-size:12px}
	.sa-chart-stats{gap:8px}
	.sa-stat{padding:8px}
	.sa-stat-label{font-size:9px}
	.sa-stat-value{font-size:15px}
	.sa-legend{margin:10px 14px 0;gap:6px}
	.sa-legend-item,.sa-legend-note{font-size:10px;padding:5px 8px}
	.sa-chart-container{
		height:min(300px,46vh);
		min-height:230px;
		margin:12px 14px 14px;
		border-radius:12px;
	}
	.sa-scroll-hint{font-size:10px;padding:5px 8px;right:8px}
}
@media (max-width:360px){
	.sa-chart-stats{grid-template-columns:1fr 1fr}
	.sa-chart-stats .sa-stat:last-child{grid-column:1/-1}
	.sa-chart-container{min-height:220px}
}