*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background: linear-gradient(135deg, #e8f5e9 0%, #e3f2fd 100%);
  color:#0B1220;
}

/* ================= Vars ================= */
:root{
  --bg:#F6F7FB; --card:#FFFFFF; --text:#0B1220; --muted:#6B7280; --border:#E6E8EF;
  --brand-500:#22C55E; --brand-600:#16A34A;

  --water:#0EA5E9; --temp:#F59E0B; --chem:#8B5CF6; --wind:#38BDF8;
  --water-10:#E0F2FE; --temp-10:#FEF3C7; --chem-10:#EDE9FE; --wind-10:#E0F2FE;

  --ok:#22C55E; --warn:#F59E0B; --bad:#EF4444;
  --ok-bg:#DCFCE7; --warn-bg:#FEF9C3; --bad-bg:#FEE2E2;

  --radius:20px; --radius-sm:14px; --gap:8px;
  --shadow1:0 2px 8px rgba(20,24,40,.06);
  --shadow2:0 10px 30px rgba(20,24,40,.12);
}

.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.mi{font-family:"Material Symbols Rounded"; font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 48; line-height:1}
.mi-20{font-size:20px}.mi-24{font-size:24px}.mi-28{font-size:28px}.mi-32{font-size:32px}.mi-40{font-size:40px}.mi-48{font-size:48px}

/* ================= Header ================= */
.header{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px 0}
.header h1{font-size:30px;line-height:1.2;margin:0}
.header .sub{color:var(--muted);font-size:14px}

/* ================= Layout ================= */
.fn-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
@media (max-width:1100px){.fn-grid{grid-template-columns:1fr}}

.tile{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow1);
  padding:18px;
  transition:transform .15s, box-shadow .15s;
}
.tile:hover{transform:translateY(-1px); box-shadow:var(--shadow2)}
.tile-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.title-wrap{display:flex;align-items:center;gap:10px}
.tile-title{font-size:17px; font-weight:700}

/* ================= Buttons ================= */
.button{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:14px;
  border:1px solid var(--brand-600);background:var(--brand-600);color:#fff;font-weight:700;cursor:pointer
}
.button.secondary{background:#fff;color:var(--brand-600)}
.button.ghost{background:#fff;border-color:var(--border);color:var(--text)}
.button:disabled{opacity:.6;cursor:not-allowed}

/* ================= KPI ================= */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kpis{grid-template-columns:1fr}}
.kpi{border:1px solid var(--border);border-radius:16px;padding:14px}
.kpi .meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.kpi .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.kpi.water .ico{background:var(--water-10);color:var(--water)}
.kpi.temp  .ico{background:var(--temp-10); color:var(--temp)}
.kpi.chem  .ico{background:var(--chem-10); color:var(--chem)}
.kpi .name{font-size:12px;color:var(--muted)}
.kpi .val{font-size:34px;font-weight:800;line-height:1}

/* ================= Badges / Lists ================= */
.badge{border-radius:9999px;padding:4px 10px;font-size:12px;border:1px solid var(--border)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}

.list{display:flex;flex-direction:column;gap:8px}
.list-item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:14px}
.list-item.bad{background:var(--bad-bg)} .list-item.warn{background:var(--warn-bg)} .list-item.ok{background:var(--ok-bg)}

/* ================= Map ================= */
.map-wrap{height:320px;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
#dashMap{height:100%;width:100%}

/* =========================================================
   Weather 2.0 — wygląd jak w Android/Google cards
   ========================================================= */

/* --- HERO (Teraz) --- */
.wx-hero{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.wx-hero .hero-left{ display:flex; flex-direction:column; gap:6px }
.wx-hero .hero-ico{ font-size:42px; line-height:1 }
.wx-hero .hero-temp{ font-weight:800; font-size:56px; line-height:1; letter-spacing:-.6px; }
.wx-hero .hero-sub{ color:var(--muted); font-size:14px }
.wx-hero .hero-right{ display:grid; grid-template-columns: repeat(2, minmax(130px,1fr)); gap:12px; }
.wx-stat{
  background:#FAFAFA; border:1px solid var(--border); border-radius:14px;
  padding:12px 14px; display:flex; flex-direction:column; gap:4px;
}
.wx-stat .lab{ color:var(--muted); font-size:12px }
.wx-stat .val{ font-weight:700; font-size:20px }
.wx-divider{ height:1px; background:#EEE; border-radius:1px; margin:10px 0 }

/* --- 5 dni --- */
.wx-daily{ display:grid; grid-template-columns: repeat(5, minmax(92px,1fr)); gap:12px }
.wx-daily .daytile{
  background:#FAFAFA; border:1px solid var(--border); border-radius:14px;
  padding:10px; text-align:center; display:flex; flex-direction:column; gap:6px;
}
.wx-daily .d{ font-weight:700 }
.wx-daily .tmax{ color:#ef4444; font-weight:700 }
.wx-daily .tmin{ color:var(--muted) }

/* --- Wykresy --- */
.wx-charts-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:12px }
.wx-chart{ height:200px; }

/* --- Ikony godzinowe + formularz --- */
.wx-icons > .grid{ display:grid; grid-template-columns:repeat(8, minmax(40px,1fr)); gap:8px }
.wx-icons .item{ text-align:center }
.wx-form{ display:grid; grid-template-columns: 1fr 120px 120px auto; gap:8px; align-items:center; margin-top:10px }
.inp{ height:36px; padding:6px 10px }

/* --- Responsywność --- */
@media (max-width:1200px){
  .wx-hero{ grid-template-columns:1fr }
  .wx-hero .hero-right{ grid-template-columns: repeat(2, minmax(130px,1fr)); }
}

#sidebar .nav-logo{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  font-weight:600;
  font-size:16px;
  color:var(--fg);
  text-decoration:none;
  margin-bottom:16px; /* odstęp pod logo */
  justify-content:center; /* logo wyśrodkowane w poziomie */
}

#sidebar .nav-logo img{
  width:48px;
  height:48px;
  object-fit:contain;
  border-radius:8px;
}

/* =========================================================
   Starsze klasy (zostawione dla zgodności)
   ========================================================= */
.wx-now{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:1000px){.wx-now{grid-template-columns:repeat(3,1fr)}}
.wx-tile{text-align:center;border:1px solid var(--border);border-radius:14px;padding:12px}
.wx-tile .big{font-size:28px;font-weight:800}

.charts-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:900px){.charts-4{grid-template-columns:repeat(2,1fr)}}
.chart{border:1px solid var(--border);border-radius:14px;padding:10px;min-height:92px}

/* „5 dni” (stare) */
.days-5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.daytile{border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center}
.daytile .d{font-size:12px;color:var(--muted);margin-bottom:6px}
.daytile .t{font-size:13px;color:var(--muted)}

/* --- SUNNY FIELD PREVIEW (nieużywane, zostawione opcjonalnie) --- */
.sun-modal .modal { 
  background: radial-gradient(1200px 600px at -10% -20%, rgba(255,221,120,0.25), transparent 60%),
              radial-gradient(900px 500px at 110% 110%, rgba(120,210,255,0.18), transparent 60%),
              var(--tile,#fff);
}
.sun-modal .modal-head {
  background: linear-gradient(135deg, rgba(255,193,7,0.22), rgba(255,255,255,0));
  border-bottom: 1px solid var(--border,#E6E8EF);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.sun-kpis { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px 0; }
.sun-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px; font-weight:600; font-size:13px;
  background: #fff; border:1px solid var(--border,#E6E8EF);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.sun-pill .mi { font-size:18px; }
.sun-pill.blue   { background: rgba(33,150,243,0.12); border-color: rgba(33,150,243,0.25); }
.sun-pill.red    { background: rgba(244,67,54,0.12);  border-color: rgba(244,67,54,0.25); }
.sun-pill.green  { background: rgba(76,175,80,0.12);  border-color: rgba(76,175,80,0.25); }
.sun-pill.amber  { background: rgba(255,193,7,0.14);  border-color: rgba(255,193,7,0.28); }
.sun-pill.purple { background: rgba(156,39,176,0.12); border-color: rgba(156,39,176,0.25); }
.sun-pill.gray   { background: rgba(120,120,120,0.10); border-color: rgba(120,120,120,0.20); }

/* status banner */
.sun-status {
  margin:8px 0 0 0; padding:10px 12px; border-radius:12px; font-weight:600;
  border:1px solid transparent;
}
.sun-status.ok    { background: rgba(76,175,80,0.12);  border-color: rgba(76,175,80,0.25); }
.sun-status.warn  { background: rgba(255,193,7,0.14);  border-color: rgba(255,193,7,0.28); }
.sun-status.bad   { background: rgba(244,67,54,0.12);  border-color: rgba(244,67,54,0.25); }

/* sekcja „Dzisiaj” w nagłówku modału */
.sun-today { display:flex; align-items:center; gap:12px; margin-top:8px; }
.sun-today .mini {
  display:flex; align-items:center; gap:6px; font-size:13px; color: var(--muted,#6B7280);
  background: rgba(255,255,255,0.6); padding:6px 8px; border-radius:10px; border:1px solid var(--border,#E6E8EF);
}

/* ============== Modal (bazowe) ============== */
.modal-mask{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(13,18,32,.45); backdrop-filter:blur(2px);
  z-index:10000; padding:24px;
}
.modal{
  background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:16px; max-width:1100px; width:min(100%,1100px); max-height:min(92vh,900px); overflow:auto;
}
body.modal-open{ overflow:hidden; }

/* ===== Modal hardening (ID + !important — przebija kolizje) ===== */
#fieldModalMask,
#fieldViewMask{
  position: fixed !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(13,18,32,.45) !important;
  backdrop-filter: blur(2px) !important;
  z-index: 100000 !important;
  padding: 24px !important;
}
#fieldModalMask .modal,
#fieldViewMask .modal{
  background:#fff !important;
  border-radius:16px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.25) !important;
  padding:16px !important;
  max-width:1100px !important;
  width:min(100%,1100px) !important;
  max-height:min(92vh,900px) !important;
  overflow:auto !important;
}
body.modal-open{ overflow:hidden !important; }

/* ============== Form controls + spójny header + mały X ============== */
.input, input.input, select.input, textarea.input {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
}
.input:focus {
  outline: 2px solid rgba(34,197,94,.22);
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(34,197,94,.10);
}
select.input { padding-right: 28px; }
textarea.input { min-height: 80px; resize: vertical; }

.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 4px 2px 10px 2px; border-bottom: 1px solid var(--border);
}

.button.icon{
  padding: 8px; border-radius: 999px; aspect-ratio: 1/1;
}
.button.icon .mi{ font-size: 20px; line-height: 1; }