:root{
	--bg-overlay: rgba(8,10,12,0.6);
	--panel-bg: rgba(12,14,16,0.72);
	--accent: #12e0d6;
	--muted: #9aa3a6;
	--header-height: 72px;
	--panel-width: 360px;
}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
body{
	background-color:#071014;
	background-image: url('/images/bg2.png');
	background-size:cover;
	background-position:center center;
	background-attachment:fixed;
	color:#e6f7f6;
	-webkit-font-smoothing:antialiased;
	overflow:hidden;
}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;height:var(--header-height);position:fixed;top:0;left:0;right:0;width:100%;box-sizing:border-box;background:linear-gradient(180deg, rgba(3,6,10,0.90), rgba(3,6,10,0.78));backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,0.6);z-index:40}
.header-actions{display:flex;align-items:center;gap:12px}
.logo{margin:0;font-size:20px;letter-spacing:2px;color:#ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.6)}
.clock-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.clock-label{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.72)}
.clock{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:18px;font-weight:700;color:#f2fffe;letter-spacing:1px;text-shadow:0 1px 0 rgba(0,0,0,0.5);line-height:1.05}
.clock-time{font-size:18px;font-weight:700}
.clock-date{display:block;min-width:8ch;font-size:12px;font-weight:500;letter-spacing:1.8px;text-align:right;font-variant-numeric:tabular-nums;color:rgba(255,255,255,0.76)}
.faq-button{height:48px;padding:0 16px;border:1px solid rgba(255,255,255,0.12);border-radius:999px;background:rgba(18,224,214,0.08);color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;transition:all 180ms ease;font-family:inherit;letter-spacing:0.8px;text-transform:uppercase;box-sizing:border-box}
.faq-button:hover{background:rgba(18,224,214,0.16);border-color:rgba(18,224,214,0.35);transform:translateY(-1px)}
.faq-button:active{transform:translateY(0)}

/* main content layout */
.display-wrap{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-width);align-items:stretch;width:100%;height:calc(100vh - var(--header-height));padding:12px 16px 16px;gap:16px;box-sizing:border-box}
.display{min-width:0;height:100%;min-height:0;border-radius:14px;box-shadow:inset 0 0 120px rgba(0,0,0,0.35), 0 8px 40px rgba(2,6,10,0.6);background-size:cover;background-position:center center;background-repeat:no-repeat;border:1px solid rgba(255,255,255,0.04);display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--panel-bg);box-sizing:border-box}
.display h2{margin:0;flex:0 0 auto}

/* video feed display */
.video-feed{padding:0;overflow:hidden}
.video-feed h2{margin:0}
.video-container{flex:1;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);border-radius:10px;border:1px solid rgba(255,255,255,0.04);position:relative;overflow:hidden;min-height:0;padding:8px 0 12px 0}
.video-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
/* hide the image element when it has no src to avoid browser broken-icon + alt text */
.video-image:not([src]), .video-image[src=""]{display:none}
.video-placeholder{margin:0;color:var(--muted);font-size:14px;text-align:center;position:static;transform:none;pointer-events:none}
.video-image[src]:not([src=""]) ~ .video-placeholder{display:none}

/* grid layout: display + side panel */
.panel{width:100%;max-width:var(--panel-width);background:var(--panel-bg);padding:18px;border-radius:12px;min-height:0;height:100%;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto auto;gap:10px;overflow:hidden}
.panel h2{margin:0;flex:0 0 auto}
.map-container{display:flex;flex-direction:column;gap:10px;min-height:0;height:100%}
.map{flex:1;min-height:0;height:100%;border-radius:10px;border:1px solid rgba(255,255,255,0.04);margin:0}
.locations-list{min-height:0;overflow:auto;font-size:14px;max-height:none}
.loc-item{padding:8px;border-bottom:1px solid rgba(255,255,255,0.03);color:var(--muted)}

/* robot control */
.robot-control{padding:12px 0 0 0;border-top:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;gap:8px;align-self:end}
.pi-url-section{display:flex;align-items:center;gap:8px;font-size:12px;flex:0 0 auto}
.pi-url-label{color:var(--muted);flex:0 0 auto;letter-spacing:0.5px;text-transform:uppercase}
.pi-url-input{flex:1;min-width:0;padding:6px 8px;border:1px solid rgba(255,255,255,0.12);border-radius:6px;background:rgba(255,255,255,0.05);color:var(--accent);font-size:11px;font-family:monospace;transition:all 150ms ease}
.pi-url-input::placeholder{color:rgba(255,255,255,0.3)}
.pi-url-input:focus{outline:none;background:rgba(255,255,255,0.08);border-color:var(--accent);box-shadow:inset 0 0 8px rgba(18,224,214,0.1)}
.pi-error{min-height:14px;font-size:10px;line-height:1.2;color:#ff8a8a;letter-spacing:0.2px;margin-top:-2px;opacity:0.95}
.pi-status{flex:0 0 16px;width:16px;height:16px;border-radius:50%;font-size:12px;line-height:16px;text-align:center;transition:all 300ms ease;cursor:help}
.pi-status[data-status="connected"]{color:#22f014;text-shadow:0 0 8px rgba(34,240,20,0.6)}
.pi-status[data-status="disconnected"]{color:#999}
.pi-status[data-status="connecting"]{color:#ffd700;animation:pulse 1.5s infinite}
.robot-telemetry{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid rgba(255,255,255,0.08);border-radius:8px;background:rgba(0,0,0,0.2)}
.telemetry-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.25}
.telemetry-row span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:0.4px}
.telemetry-row span:last-child{color:#dffefd;font-weight:600}
.telemetry-message{margin-top:2px;color:rgba(230,247,246,0.8);font-size:11px;line-height:1.3;word-break:break-word}
.telemetry-message[data-message-type="pending"]{color:#ffd86b}
.telemetry-message[data-message-type="success"]{color:#67f08d}
.telemetry-message[data-message-type="error"]{color:#ff8a8a}
.telemetry-message.is-fading{opacity:0;transition:opacity 420ms ease}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.robot-button{padding:10px 14px;border:1px solid rgba(255,255,255,0.12);border-radius:8px;background:rgba(18,224,214,0.08);color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;justify-content:center;transition:all 200ms ease;font-family:inherit}
.robot-button:hover{background:rgba(18,224,214,0.15);border-color:rgba(18,224,214,0.3)}
.robot-button[data-state="on"]{background:rgba(34,240,20,0.12);color:#22f014;border-color:rgba(34,240,20,0.3)}
.robot-button[data-state="on"]:hover{background:rgba(34,240,20,0.2);border-color:rgba(34,240,20,0.5)}
.robot-button:active{transform:scale(0.98)}
.robot-icon{font-size:16px}
.robot-text{font-weight:600}
.shutdown-button{padding:10px 14px;border:1px solid rgba(255,120,120,0.45);border-radius:8px;background:rgba(255,72,72,0.12);color:#ffb4b4;font-size:13px;font-weight:700;cursor:pointer;width:100%;transition:all 200ms ease;font-family:inherit;letter-spacing:0.4px}
.shutdown-button:hover{background:rgba(255,72,72,0.2);border-color:rgba(255,120,120,0.7)}
.shutdown-button:active{transform:scale(0.98)}
.robot-button:disabled,.shutdown-button:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}

/* logo image rounded */
.brand{display:flex;align-items:center;gap:12px}
.logo-img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.06);box-shadow:0 2px 10px rgba(0,0,0,0.4)}

/* translucent main container */
main{padding-top:var(--header-height);margin:0;width:100%;height:100vh;box-sizing:border-box}

/* Responsive */
@media (min-width: 900px){
	main{max-width:none;margin:0}
	.display-wrap{grid-template-columns:minmax(0,1fr) var(--panel-width);padding:12px 16px 16px}
	.display{height:100%}
	.panel{width:var(--panel-width)}
}

/* make text readable over busy background */
main, .topbar, .display{background-color:transparent}

/* stack cleanly on smaller screens */
@media (max-width: 899px){
	body{overflow:auto}
	main{height:auto;min-height:100vh}
	.display-wrap{grid-template-columns:1fr;height:auto;padding:14px 14px 18px}
	.display{height:58vh;min-height:360px}
	.video-container{min-height:240px}
	.panel{max-width:none;height:auto;min-height:auto}
	.map{min-height:240px}
	.locations-list{min-height:160px;overflow:auto}
	.robot-control{padding-top:12px}
}

/* trash collected counter */
.trash-counter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:48px;padding:0 16px;border:1px solid rgba(255,80,80,0.25);border-radius:999px;background:rgba(255,72,72,0.1);box-sizing:border-box}
.trash-counter-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);line-height:1}
.trash-counter-value{font-size:18px;font-weight:700;color:#ff6b6b;line-height:1;font-variant-numeric:tabular-nums}

/* leaflet popup overrides */
.trash-popup-wrap .leaflet-popup-content-wrapper{background:rgba(10,14,18,0.96);border:1px solid rgba(255,255,255,0.1);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.6);color:#e6f7f6;padding:0}
.trash-popup-wrap .leaflet-popup-content{margin:0;width:260px !important}
.trash-popup-wrap .leaflet-popup-tip{background:rgba(10,14,18,0.96)}
.trash-popup{display:flex;flex-direction:column;overflow:hidden;border-radius:12px}
.popup-img{width:100%;max-height:160px;object-fit:cover;display:block;border-radius:12px 12px 0 0}
.popup-no-img{padding:14px;text-align:center;font-size:12px;color:var(--muted);background:rgba(255,255,255,0.03);border-radius:12px 12px 0 0}
.popup-details{padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.popup-row{display:flex;justify-content:space-between;gap:8px;font-size:11px;line-height:1.3}
.popup-row span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:0.4px;flex-shrink:0}
.popup-row span:last-child{color:#dffefd;font-weight:500;text-align:right;word-break:break-all}

/* small utility */
.glass{background:var(--panel-bg);border-radius:12px;padding:18px}

.faq-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:80;padding:24px;box-sizing:border-box}
.faq-modal.is-open{display:flex}
.faq-backdrop{position:absolute;inset:0;background:rgba(2,6,10,0.38);backdrop-filter:blur(14px) saturate(120%)}
.faq-dialog{position:relative;z-index:1;width:min(760px,100%);max-height:min(82vh,920px);overflow:auto;background:rgba(10,14,18,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,0.65);padding:22px 24px;box-sizing:border-box}
.faq-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.faq-header h2{margin:0;font-size:28px;letter-spacing:1.2px;color:var(--accent)}
.faq-close-button{width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,0.08);color:#f2fffe;font-size:26px;line-height:40px;cursor:pointer;transition:all 180ms ease}
.faq-close-button:hover{background:rgba(255,255,255,0.16);transform:scale(1.04)}
.faq-body{display:flex;flex-direction:column;gap:18px}
.faq-section h3{margin:0 0 8px 0;font-size:18px;letter-spacing:0.8px;color:#f2fffe}
.faq-section p{margin:0;color:rgba(230,247,246,0.88);line-height:1.55}
.faq-code-block{margin-top:10px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.06);overflow:auto}
.faq-code-block pre{margin:0;font-family:Consolas,Monaco,monospace;font-size:12px;line-height:1.5;color:#d7fffb;white-space:pre-wrap}
.faq-inline-code{padding:2px 6px;border-radius:6px;background:rgba(255,255,255,0.08);font-family:Consolas,Monaco,monospace;font-size:0.95em}
.faq-note{margin-top:10px}

body.faq-open main{filter:blur(4px);pointer-events:none;user-select:none}
body.faq-open .topbar{filter:blur(4px)}
body.faq-open .faq-modal{pointer-events:auto}