/* ============================================================
   EV Charging Station Optimizer — Stylesheet
   ============================================================ */
:root {
  --green:  #1D9E75; --green-l: #E1F5EE; --green-d: #085041;
  --blue:   #185FA5; --blue-l:  #E6F1FB; --blue-d:  #042C53;
  --amber:  #BA7517; --amber-l: #FAEEDA;
  --coral:  #993C1D; --coral-l: #FAECE7;
  --purple: #534AB7; --purple-l:#EEEDFE;
  --pink:   #D4537E; --pink-l:  #FBEAF0;

  --bg:       #f4f3ee;
  --bg-panel: #ffffff;
  --bg-surf:  #f0ede6;
  --txt:      #1c1c18;
  --txt-s:    #6b6a64;
  --txt-t:    #9c9a92;
  --bdr:      rgba(40,40,20,.12);
  --bdr-m:    rgba(40,40,20,.20);
  --r-sm: 6px; --r-md: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
  --sw: 308px;    /* sidebar width */
  --hh: 54px;     /* header height */
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Cascadia Code','Fira Code','Consolas', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a16; --bg-panel: #242420; --bg-surf: #2e2e28;
    --txt: #e8e6de; --txt-s: #9c9a92; --txt-t: #6b6a64;
    --bdr: rgba(255,255,220,.08); --bdr-m: rgba(255,255,220,.14);
    --green-l: #0a2e22; --blue-l: #071e36; --amber-l: #2e1e02;
  }
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; font-family:var(--font); font-size:14px; color:var(--txt); background:var(--bg); line-height:1.5; }
#app { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ── HEADER ──────────────────────────────────────────────── */
.hdr { height:var(--hh); background:var(--bg-panel); border-bottom:1px solid var(--bdr); display:flex; align-items:center; padding:0 20px; gap:14px; flex-shrink:0; box-shadow:var(--shadow); z-index:10; }
.hdr-logo { width:34px; height:34px; background:linear-gradient(135deg,var(--green),var(--blue)); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.hdr-info { flex:1; min-width:0; }
.hdr-info h1 { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdr-sub { font-size:11px; color:var(--txt-s); }
.hdr-badges { display:flex; gap:6px; flex-shrink:0; }
.badge { font-size:11px; font-weight:500; padding:3px 9px; border-radius:20px; }
.badge-green { background:var(--green-l); color:var(--green-d,var(--green)); }
.badge-blue  { background:var(--blue-l);  color:var(--blue-d,var(--blue));  }

/* ── LAYOUT ──────────────────────────────────────────────── */
.layout { display:flex; flex:1; overflow:hidden; }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar { width:var(--sw); flex-shrink:0; background:var(--bg-panel); border-right:1px solid var(--bdr); display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:thin; }
.panel { padding:14px 16px; border-bottom:1px solid var(--bdr); }
.panel-title { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.8px; color:var(--txt-t); margin-bottom:10px; }

/* ── ALGO TABS ───────────────────────────────────────────── */
.algo-tabs { display:flex; gap:4px; }
.algo-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; font-size:11px; font-weight:500; border:1px solid var(--bdr); border-radius:var(--r-sm); cursor:pointer; background:transparent; color:var(--txt-s); transition:all .15s; }
.algo-tab span { font-size:16px; }
.algo-tab:hover:not(.active) { background:var(--bg-surf); }
.algo-tab.active { background:var(--blue); color:#fff; border-color:var(--blue); }

/* ── PARAMS ──────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.field:last-child { margin-bottom:0; }
.field label { font-size:12px; color:var(--txt-s); display:flex; justify-content:space-between; align-items:center; }
.pv { font-weight:600; color:var(--txt); font-size:12px; }
.field input[type=range] { width:100%; -webkit-appearance:none; appearance:none; height:4px; background:var(--bdr-m); border-radius:4px; outline:none; }
.field input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; background:var(--blue); border-radius:50%; cursor:pointer; border:2px solid white; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform .1s; }
.field input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.15); }
.sel { width:100%; padding:6px 8px; font-size:12px; border:1px solid var(--bdr-m); border-radius:var(--r-sm); background:var(--bg-surf); color:var(--txt); cursor:pointer; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-row { display:flex; gap:6px; }
.btn { flex:1; padding:9px 10px; font-size:12px; font-weight:600; border:1px solid var(--bdr); border-radius:var(--r-sm); cursor:pointer; transition:all .15s; background:transparent; color:var(--txt); }
.btn:hover:not(:disabled) { background:var(--bg-surf); }
.btn:disabled { opacity:.38; cursor:not-allowed; }
.btn-primary  { background:var(--green);  color:#fff; border-color:var(--green);  }
.btn-primary:hover:not(:disabled)  { opacity:.85; }
.btn-secondary { background:var(--bg-surf); }
.btn-accent   { background:var(--purple); color:#fff; border-color:var(--purple); width:100%; }
.btn-accent:hover { opacity:.88; }

/* LOADING BAR */
.loading-bar { height:4px; background:var(--bdr); border-radius:2px; overflow:hidden; margin-top:10px; }
.loading-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--blue)); border-radius:2px; width:0%; transition:width .3s; animation:pulse-bar 1.5s ease-in-out infinite; }
@keyframes pulse-bar { 0%,100%{opacity:.6} 50%{opacity:1} }

/* ── STATS ───────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.stat-card { background:var(--bg-surf); border-radius:var(--r-sm); padding:8px 10px; border:1px solid var(--bdr); }
.stat-lbl { font-size:10px; color:var(--txt-t); margin-bottom:2px; }
.stat-val { font-size:18px; font-weight:700; }
.stat-val.green  { color:var(--green); }
.stat-val.blue   { color:var(--blue);  }
.stat-val.amber  { color:var(--amber); }

/* ── LOG ─────────────────────────────────────────────────── */
.log-panel { flex:1; }
.log-box { background:var(--bg-surf); border:1px solid var(--bdr); border-radius:var(--r-sm); padding:8px 10px; font-family:var(--mono); font-size:11px; max-height:160px; overflow-y:auto; line-height:1.7; color:var(--txt-s); scrollbar-width:thin; }
.log-good { color:var(--green); }
.log-warn { color:var(--amber); }
.log-info { color:var(--blue); }
.log-err  { color:var(--coral); }

/* ── CONTENT ─────────────────────────────────────────────── */
.content { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* ── VIEW TABS ───────────────────────────────────────────── */
.view-tabs { display:flex; background:var(--bg-panel); border-bottom:1px solid var(--bdr); flex-shrink:0; padding:0 4px; }
.vt { padding:12px 14px; font-size:12px; font-weight:500; border:none; background:transparent; cursor:pointer; color:var(--txt-s); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s; white-space:nowrap; }
.vt:hover { color:var(--txt); }
.vt.active { color:var(--blue); border-bottom-color:var(--blue); }

/* ── VIEWS ───────────────────────────────────────────────── */
.view { display:none; flex:1; flex-direction:column; overflow:hidden; }
.view.active { display:flex; }

/* MAP */
.map-bar { display:flex; align-items:center; padding:8px 16px; background:var(--bg-panel); border-bottom:1px solid var(--bdr); gap:12px; flex-wrap:wrap; flex-shrink:0; }
.legend { display:flex; gap:14px; flex-wrap:wrap; }
.li { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--txt-s); }
.ld { width:10px; height:10px; border-radius:2px; flex-shrink:0; display:inline-block; }
.ld.green { background:var(--green); }
.ld.blue  { background:var(--blue);  }
.ld.amber { background:var(--amber); }
.ld.pink  { background:var(--pink);  }
.ld-ring  { width:14px; height:14px; border-radius:50%; border:1.5px solid var(--green); background:rgba(29,158,117,.08); flex-shrink:0; display:inline-block; }
.algo-pill { margin-left:auto; font-size:12px; font-weight:600; color:var(--blue); background:var(--blue-l); padding:3px 10px; border-radius:20px; white-space:nowrap; }

/* CANVAS WRAPPER */
.cw { flex:1; position:relative; overflow:hidden; }
.cw canvas { display:block; width:100%; height:100%; }

/* CMP */
.cmp-wrap { flex:1; overflow-y:auto; padding:24px 28px; }
.cmp-wrap h2 { font-size:18px; font-weight:700; margin-bottom:6px; }
.cmp-hint { color:var(--txt-s); font-size:13px; margin-bottom:20px; }
.cmp-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.cmp-tbl th { text-align:left; padding:10px 14px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--txt-t); border-bottom:2px solid var(--bdr); }
.cmp-tbl td { padding:12px 14px; border-bottom:1px solid var(--bdr); }
.cmp-tbl tr:hover td { background:var(--bg-surf); }
.cmp-best { color:var(--green); font-weight:700; }
.cmp-empty { text-align:center; color:var(--txt-t); padding:32px !important; }

/* INFO */
.info-wrap { flex:1; overflow-y:auto; padding:28px 32px; max-width:720px; }
.info-wrap h2 { font-size:20px; font-weight:700; margin-bottom:10px; }
.info-wrap h3 { font-size:15px; font-weight:600; margin:20px 0 8px; color:var(--blue); }
.info-wrap p  { font-size:13px; color:var(--txt-s); margin-bottom:8px; line-height:1.7; }
.info-wrap ul { font-size:13px; color:var(--txt-s); padding-left:20px; margin-bottom:10px; line-height:1.9; }
.info-wrap strong { color:var(--txt); }
.info-wrap code { font-family:var(--mono); font-size:12px; background:var(--bg-surf); border:1px solid var(--bdr); border-radius:4px; padding:2px 6px; color:var(--coral); }
.api-tbl { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
.api-tbl th,td { padding:7px 12px; border:1px solid var(--bdr); text-align:left; }
.api-tbl th { background:var(--bg-surf); font-weight:600; }

/* SCROLLBAR */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bdr-m); border-radius:3px; }

/* RESPONSIVE */
@media (max-width:768px) {
  :root { --sw:100%; }
  .layout { flex-direction:column; }
  .sidebar { width:100%; max-height:50vh; border-right:none; border-bottom:1px solid var(--bdr); }
  .hdr-sub,.hdr-badges { display:none; }
}