/* meteo.css – společné styly meteo.hrubyr.cz / file-ver: 2026-10-01 16:25 RoH */
:root{
  --bg:#3b2d19;
  --surface:#fffdf3;
  --surface-2:#f6f1de;
  --line:#e6dfc6;
  --text:#1b1f3b;
  --muted:#6b6a5c;
  --grid:rgba(27,31,59,.09);
  --shadow:0 1px 2px rgba(0,0,0,.08),0 8px 28px rgba(0,0,0,.18);
  --radius:16px;
  --c-temp:#e5484d;
  --c-dew:#e8830c;
  --c-hum:#2f7ed8;
  --c-press:#2f9e44;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Verdana,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#15120d;
    --surface:#211d16;
    --surface-2:#2a251c;
    --line:#3a3326;
    --text:#ece6d6;
    --muted:#a39b86;
    --grid:rgba(236,230,214,.08);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.45);
    --c-temp:#ff6b6f;
    --c-dew:#ffa53d;
    --c-hum:#5aa2f0;
    --c-press:#4cc764;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:15px/1.45 var(--font);
  color:var(--text);
  /* obrázek oblohy doplňuje hlavička stránky (app/x-beg.php) podle polohy Slunce */
  background-color:var(--bg);
  background-image:linear-gradient(var(--veil-top),var(--veil-bottom));
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  min-height:100vh;
}
/* závoj přes fotku oblohy podle denní doby (nastavuje JS do <html data-daypart>) */
:root{--veil-top:rgba(255,255,255,0);--veil-bottom:rgba(0,0,0,.12)}
:root[data-daypart="vecer"]{--veil-top:rgba(20,10,30,.10);--veil-bottom:rgba(20,10,30,.35)}
:root[data-daypart="noc"]{--veil-top:rgba(0,0,10,.25);--veil-bottom:rgba(0,0,10,.50)}
@media (prefers-color-scheme:dark){
  :root{--veil-top:rgba(0,0,0,.35);--veil-bottom:rgba(0,0,0,.55)}
  :root[data-daypart="noc"]{--veil-top:rgba(0,0,0,.40);--veil-bottom:rgba(0,0,0,.65)}
}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 40px}

/* ---------- hlavička ---------- */
.top{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px 18px;margin-bottom:16px;
}
.top .logo img{display:block;width:56px;height:56px}
.top .photo{width:64px;height:64px;border-radius:12px;object-fit:cover}
.top .title{flex:1 1 260px;min-width:0}
.top h1{margin:0;font-size:1.35rem;letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-size:.78rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}
.chip.stale{color:#fff;background:#c2410c;border-color:#c2410c}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size:.85rem;padding:8px 12px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);
  transition:background .15s,border-color .15s;
}
.nav a:hover{border-color:var(--muted)}
.nav a[aria-current="page"]{background:var(--text);border-color:var(--text);color:var(--surface)}
.nav svg{width:16px;height:16px;flex:none}

/* ---------- karty s aktuálními hodnotami ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.card{
  position:relative;overflow:hidden;
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px 16px 12px;
}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--c)}
.card .label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.card .value{font:600 2rem/1.15 var(--font);font-variant-numeric:tabular-nums;margin:4px 0 6px;white-space:nowrap}
.card .value small{font-size:.95rem;font-weight:500;color:var(--muted);margin-left:3px}
.card .range{font-size:.82rem;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.card .range b{color:var(--text);font-weight:600}
.card .trend{font-size:.82rem;margin-top:4px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- grafy ---------- */
.charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.chart-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 14px 8px}
.chart-card header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;padding:0 4px 6px}
.chart-card h2{margin:0;font-size:1rem;font-weight:600}
.chart-card h2{display:flex;align-items:center;gap:8px}
.ic{width:20px;height:20px;color:var(--c);flex:none}
.card-ic{position:absolute;top:12px;right:12px;width:30px;height:30px;color:var(--c)}
.chart-card .span{font-size:.78rem;color:var(--muted)}
.chart{position:relative;height:250px;touch-action:pan-y}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart .ax{font:11px var(--font);fill:var(--muted);font-variant-numeric:tabular-nums}
.chart .ax.day{fill:var(--text);font-weight:600}
.chart .gl{stroke:var(--grid);stroke-width:1}
.chart .gl.day{stroke:var(--muted);stroke-opacity:.35;stroke-dasharray:3 3}
.chart .ln{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .ln.thin{stroke-width:1.4}
.chart .band{fill:var(--c);fill-opacity:.2;stroke:none}
.chart .mk{fill:var(--surface);stroke:var(--c);stroke-width:2}
.chart .dot{fill:var(--c)}
.chart .mkt{font:600 11px var(--font);fill:var(--text);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.chart .cur{opacity:0;transition:opacity .1s}
.chart.hover .cur{opacity:1}
.chart .cur line{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.chart .cur circle{fill:var(--c);stroke:var(--surface);stroke-width:2.5}
.chart .tip{
  position:absolute;top:6px;pointer-events:none;opacity:0;
  background:var(--text);color:var(--surface);border-radius:8px;
  padding:5px 9px;font-size:.8rem;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.25);transition:opacity .1s;
}
.chart.hover .tip{opacity:1}
.chart .tip b{font-size:.95rem;font-variant-numeric:tabular-nums}
.chart .tip .rng{opacity:.75;font-variant-numeric:tabular-nums}
.chart .empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.9rem}

/* ---------- rekordy ---------- */
.records{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.records h2{margin:0 0 10px;font-size:1rem}
.records table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.records th,.records td{padding:8px 6px;text-align:right;border-top:1px solid var(--line)}
.records th{font-size:.78rem;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-top:0}
.records td:first-child,.records th:first-child{text-align:left}
.records td b{font-weight:600}
.records td span{display:block;font-size:.75rem;color:var(--muted)}
.records .meta{margin-top:10px;font-size:.82rem;color:var(--muted)}

/* ---------- patička a dialog ---------- */
.foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:4px 14px;font-size:.78rem;color:#fff;width:fit-content;margin-left:auto;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.foot button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.foot button:hover{text-decoration:underline}
dialog{
  width:min(520px,calc(100vw - 32px));border:0;border-radius:var(--radius);
  background:var(--surface);color:var(--text);box-shadow:var(--shadow);padding:24px 26px 18px;
}
dialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(2px)}
dialog h3{margin-top:0}
dialog .close{display:block;margin:14px 0 0 auto;font:inherit;padding:7px 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer}
dialog .log p{margin:.4em 0}

/* ---------- široké grafy (měsíc, rok) ---------- */
.charts.wide{grid-template-columns:1fr}
.charts.wide .chart{height:300px}
.chart-card .span{text-align:right}
.muted{color:var(--muted)}
.small{font-size:.8rem}

/* ---------- výběr roku ---------- */
.years{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;padding:10px 12px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
.years a{text-decoration:none;font-size:.85rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-variant-numeric:tabular-nums}
.years a:hover{border-color:var(--muted)}
.years a[aria-current="page"]{background:var(--text);border-color:var(--text);color:var(--surface)}

/* ---------- výběr dne: kalendář ---------- */
.daypick{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.cal{width:280px}
.cal-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.cal-head form,.cal-head .cal-empty{flex:1}
.cal-head .cal-empty{text-align:center;font-size:.85rem}
.cal-head select{width:100%;font:inherit;font-size:.9rem;padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--text)}
.cal-nav{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;text-decoration:none;font-size:1.2rem;border:1px solid var(--line);background:var(--surface-2)}
.cal-nav:hover{border-color:var(--muted)}
.cal-nav.off{opacity:.35}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-variant-numeric:tabular-nums}
.cal-grid .wd{font-size:.7rem;color:var(--muted);text-transform:uppercase;padding:2px 0 4px}
.cal-grid .day{display:grid;place-items:center;height:34px;border-radius:9px;font-size:.88rem;text-decoration:none}
.cal-grid a.day{font-weight:600;background:var(--surface-2);border:1px solid var(--line)}
.cal-grid a.day:hover{border-color:var(--c-temp)}
.cal-grid .day.off{color:var(--muted);opacity:.45}
.cal-grid .day.today{box-shadow:inset 0 0 0 2px var(--c-temp)}
.cal-grid .day.sel{background:var(--c-temp);border-color:var(--c-temp);color:#fff}
.day-info h2{margin:4px 0 2px;font-size:1.2rem}
.day-info p{margin:4px 0}
.day-steps{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}

/* ---------- úvodní stránka ---------- */
.site-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.site-head img{width:64px;height:64px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.site-head h1{margin:0;font-size:1.6rem;letter-spacing:-.01em}
.site-head p{margin:2px 0 0;font-size:.85rem;opacity:.9}
.sensors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;margin-bottom:16px}
.sensor{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.sensor-head{display:flex;align-items:center;gap:12px}
.sensor-head .photo{width:56px;height:56px;border-radius:12px;flex:none;display:block}
.sensor-head .title{flex:1;min-width:0}
.sensor-head h2{margin:0;font-size:1.1rem}
.sensor-head h2 a{text-decoration:none}
.sensor-head h2 a:hover{text-decoration:underline}
.btn{display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-size:.85rem;padding:8px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn svg{width:16px;height:16px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.stat .ic{width:26px;height:26px;margin-top:2px}
.stat .label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat .value{font:600 1.35rem/1.2 var(--font);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .value small{font-size:.8rem;font-weight:500;color:var(--muted);margin-left:2px}
.stat .range,.stat .trend{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.stat .range b{color:var(--text);font-weight:600}
.tabs{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.tabs button{font:inherit;font-size:.8rem;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--c);border-color:var(--c);color:#fff}
.tabs .span{margin-left:auto;font-size:.75rem;color:var(--muted)}
.sensor .chart{height:210px}
.sensor.offline .stats,.sensor.offline .tabs{opacity:.55}

/* ---------- odolnost ---------- */
.top h1,.sensor-head h2,.day-info h2{overflow-wrap:anywhere}    /* dlouhý název čidla nevyteče z panelu */
.nojs{background:#c2410c;color:#fff;border-radius:var(--radius);padding:10px 16px;margin-bottom:16px;font-size:.9rem}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .charts{grid-template-columns:1fr}
  .daypick{grid-template-columns:1fr}
  .chart-card header{flex-direction:column;align-items:flex-start}
  .chart-card .span{text-align:left}
  .cal{width:100%;max-width:340px}
}
@media (max-width:420px){
  .card .value{font-size:clamp(1.15rem,6vw,1.6rem)}
  .card{padding:12px 12px 10px}
  .card .range,.card .trend{font-size:.75rem;white-space:normal}
  .chart{height:220px}
  .records td span{display:none}
  .stat{padding:8px 9px;gap:7px}
  .stat .ic{width:20px;height:20px}
  .stat .value{font-size:1.1rem}
  .sensor{padding:12px}
}