/* ==========================================================================
   style.css — sve komponente dijele iste CSS varijable; teme samo mijenjaju
   vrijednosti varijabli na :root preko [data-theme], bez posebnih pravila
   po komponenti.
   ========================================================================== */

:root, [data-theme="night"] {
  --bg:#000000; --panel:#0c0c0c; --panel2:#161616; --line:#2a2a2a;
  --text:#e9e5dc; --text-dim:#7c7870;
  --amber:#ffb000; --amber-dim:#7a5600;
  --green:#4caf50; --red:#e5484d;
  --mono:'SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --disp:'Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
}
[data-theme="day"] {
  --bg:#f4f2ee; --panel:#ffffff; --panel2:#eceae4; --line:#d8d5cd;
  --text:#141310; --text-dim:#66625a;
  --amber:#b9720a; --amber-dim:#e0b060;
  --green:#2e7d32; --red:#c0392b;
}
[data-theme="oled"] {
  --bg:#000000; --panel:#000000; --panel2:#0a0a0a; --line:#1c1c1c;
  --text:#ffffff; --text-dim:#6a6a6a;
  --amber:#ffb000; --amber-dim:#5c3f00;
  --green:#4caf50; --red:#ff3b30;
}
[data-theme="contrast"] {
  --bg:#000000; --panel:#000000; --panel2:#000000; --line:#ffffff;
  --text:#ffffff; --text-dim:#cfcfcf;
  --amber:#ffe000; --amber-dim:#8a7a00;
  --green:#00ff66; --red:#ff2d2d;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--disp);overflow:hidden;-webkit-user-select:none;user-select:none;}
#app{position:fixed;inset:0;display:flex;flex-direction:column;}

/* ---------- SETUP ---------- */
#setup{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;padding:env(safe-area-inset-top,20px) 18px 18px;overflow-y:auto;}
.brand{display:flex;align-items:baseline;gap:8px;margin:8px 0 22px;}
.brand .mark{width:10px;height:10px;background:var(--amber);transform:rotate(45deg);flex:none;}
.brand h1{font-size:20px;margin:0;font-weight:700;letter-spacing:0.3px;}
.brand span{color:var(--text-dim);font-size:12px;font-family:var(--mono);}
.brand-row{display:flex;align-items:center;justify-content:space-between;}
#settings-btn{background:none;border:1px solid var(--line);color:var(--text-dim);width:32px;height:32px;border-radius:8px;font-size:14px;}

.field{margin-bottom:10px;position:relative;}
.field label{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;font-family:var(--mono);}
.field-row{display:flex;align-items:center;gap:8px;}
.dot{width:8px;height:8px;border-radius:50%;flex:none;}
.dot.start{background:var(--green);} .dot.wp{background:var(--amber);} .dot.end{background:var(--red);}
input.loc{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:13px 12px;border-radius:10px;font-size:15px;font-family:var(--disp);}
input.loc:focus{outline:none;border-color:var(--amber);}
.rm-btn{background:none;border:none;color:var(--text-dim);font-size:20px;width:30px;height:30px;flex:none;}
.drag-handle{color:var(--text-dim);font-size:16px;cursor:grab;flex:none;padding:0 2px;}
.suggestions{position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--panel2);border:1px solid var(--line);border-radius:10px;margin-top:4px;max-height:220px;overflow-y:auto;}
.suggestions div{padding:11px 12px;font-size:13.5px;border-bottom:1px solid var(--line);}
.suggestions div:last-child{border-bottom:none;}
.suggestions div b{color:var(--amber);font-weight:600;}
.suggestions div span{display:block;color:var(--text-dim);font-size:11.5px;margin-top:2px;}

#waypoints{display:flex;flex-direction:column;gap:10px;margin:2px 0 4px;}
.add-wp{background:none;border:1px dashed var(--line);color:var(--text-dim);padding:10px;border-radius:10px;font-size:13px;margin:6px 0 18px;font-family:var(--mono);width:100%;}
.gpx-row{display:flex;gap:8px;margin-bottom:14px;}
.gpx-row label{flex:1;text-align:center;background:none;border:1px dashed var(--line);color:var(--text-dim);padding:10px;border-radius:10px;font-size:12px;font-family:var(--mono);}
.gpx-row input[type=file]{display:none;}

.profile-row, .theme-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.profile-row button, .theme-row button{flex:1;min-width:70px;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text-dim);font-size:12.5px;font-family:var(--mono);}
.profile-row button.on, .theme-row button.on{border-color:var(--amber);color:var(--amber);}

.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 2px;font-size:13px;color:var(--text-dim);font-family:var(--mono);}

#go-btn{margin-top:auto;background:var(--amber);color:#000;border:none;padding:16px;border-radius:12px;font-size:16px;font-weight:700;letter-spacing:0.3px;}
#go-btn:disabled{background:var(--panel2);color:var(--text-dim);}
#setup-status{text-align:center;font-size:12px;color:var(--text-dim);margin-top:10px;font-family:var(--mono);min-height:16px;}

#setup-map-wrap{margin-bottom:16px;border-radius:12px;overflow:hidden;border:1px solid var(--line);position:relative;flex-shrink:0;}
#setup-map{width:100%;height:220px;}
#setup-map-hint{position:absolute;left:8px;bottom:8px;z-index:400;background:rgba(0,0,0,0.75);color:#ccc;font-size:11px;font-family:var(--mono);padding:5px 9px;border-radius:7px;pointer-events:none;}
#setup-map-clear{position:absolute;top:8px;left:8px;z-index:400;background:rgba(0,0,0,0.75);border:1px solid var(--line);color:#fff;padding:6px 10px;border-radius:7px;font-size:11px;font-family:var(--mono);}
/* Floating full-screen gumb: NIJE dijete #setup-map-wrap i pozicioniran je
   fiksno na viewport (ne na kontejner mape), pa ostaje uvijek vidljiv i
   klikabilan — bez obzira koliko waypointa/polja ima iznad njega i bez
   obzira je li mapa trenutno u fullscreen modu ili ne. z-index je veći
   od #setup-map-wrap.fullscreen (1000) da gumb ostane iznad svega. */
#setup-map-expand{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:1200;background:rgba(0,0,0,0.85);border:1px solid var(--line);color:#fff;padding:8px 13px;border-radius:8px;font-size:12px;font-family:var(--mono);box-shadow:0 2px 12px rgba(0,0,0,0.5);}
.map-pt-icon{background:none;border:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:700;color:#000;}

/* Fullscreen way to pick points precisely — same map instance, just resized
   to fill the viewport, so tap targets are large and accurate. */
#setup-map-wrap.fullscreen{position:fixed;inset:0;z-index:1000;border-radius:0;border:none;margin:0;}
#setup-map-wrap.fullscreen #setup-map{height:100%;}
#setup-map-wrap.fullscreen #setup-map-hint{bottom:calc(18px + env(safe-area-inset-bottom,0px));left:14px;font-size:13px;padding:8px 12px;}
#setup-map-wrap.fullscreen #setup-map-clear{top:calc(14px + env(safe-area-inset-top,0px));padding:9px 14px;font-size:13px;}

/* Ceste bijele/svjetlije radi čitljivosti, ruta i markeri nedirnuti:
   filter se primjenjuje SAMO na Leaflet-ov tile-pane (raster podloga),
   a ne na cijeli map div, pa overlayPane (ruta, markeri, "you" točkica)
   ostaje potpuno u svojoj definiranoj boji. */
#setup-map .leaflet-tile-pane,
#leaflet-map .leaflet-tile-pane{filter:brightness(1.75) contrast(1.35) saturate(0.45);}

/* ---------- ROUTE PREVIEW SHEET ---------- */
#route-preview{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:flex-end;z-index:900;}
#route-preview.show{display:flex;}
#route-preview .sheet{width:100%;background:var(--panel);border-radius:18px 18px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);}
#route-preview h2{margin:0 0 14px;font-size:16px;}
.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.preview-stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.preview-stat span{display:block;font-size:10px;color:var(--text-dim);font-family:var(--mono);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;}
.preview-stat b{font-size:18px;font-family:var(--mono);}
.preview-actions{display:flex;gap:8px;}
.preview-actions button{flex:1;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:12.5px;font-family:var(--mono);}
#preview-start-btn{background:var(--amber);color:#000;border:none;font-weight:700;}

/* ---------- NAV SCREEN ---------- */
#nav{position:fixed;inset:0;display:none;flex-direction:column;background:var(--bg);}
#nav.active{display:flex;}
#arrow-panel{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:env(safe-area-inset-top,24px) 20px 10px;position:relative;overflow:hidden;}
#street-name{font-size:14px;color:var(--text-dim);font-family:var(--mono);text-align:center;margin-bottom:6px;letter-spacing:0.3px;min-height:18px;}
#arrow-svg{width:150px;height:150px;transition:transform .25s ease;}
#arrow-svg path{fill:var(--amber);transition:fill .3s ease;}
#turn-dist{font-family:var(--mono);font-size:44px;font-weight:700;color:var(--text);letter-spacing:-1px;margin-top:6px;}
#turn-dist span{font-size:18px;color:var(--text-dim);margin-left:4px;}
#turn-instruction{font-size:15px;color:var(--text-dim);margin-top:4px;text-align:center;max-width:280px;}

#offroute-banner{display:none;background:var(--red);color:#fff;text-align:center;padding:8px;font-size:12.5px;font-family:var(--mono);}
#offroute-banner.show{display:block;}

#map-strip{height:130px;position:relative;border-top:1px solid var(--line);flex:none;transition:height .25s ease;}
#map-strip.expanded{height:60vh;}
#leaflet-map{width:100%;height:100%;}
#map-toggle{position:absolute;top:8px;right:8px;z-index:400;background:rgba(0,0,0,0.7);border:1px solid var(--line);color:#fff;width:34px;height:34px;border-radius:8px;font-size:14px;}

#bottom-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line);flex:none;}
.stat{font-family:var(--mono);font-size:12.5px;color:var(--text-dim);}
.stat b{color:var(--text);font-size:15px;display:block;font-family:var(--disp);}
#stop-btn{background:var(--panel2);border:1px solid var(--line);color:var(--red);padding:9px 16px;border-radius:9px;font-size:13px;font-family:var(--mono);}
#wake-indicator{position:absolute;top:calc(env(safe-area-inset-top,10px) + 6px);left:12px;width:8px;height:8px;border-radius:50%;background:#333;z-index:400;}
#wake-indicator.on{background:var(--amber);}

.leaflet-marker-icon.you{background:none;border:none;}

/* ---------- SETTINGS PANEL ---------- */
#settings-panel{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:flex-end;z-index:900;}
#settings-panel.show{display:flex;}
#settings-panel .sheet{width:100%;background:var(--panel);border-radius:18px 18px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);}
#settings-panel h2{margin:0 0 14px;font-size:16px;}
#settings-close{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-family:var(--mono);margin-top:8px;}