/* ============================================================
   energia.świadectwa.net — app.css
   v20260629nocomments
   ============================================================ */

/* ---------- Lekkie ikony CSS — bez zewnętrznych bibliotek ---------- */
.ti{width:20px;height:20px;display:inline-grid;place-items:center;font-style:normal;line-height:1}
.ti::before{font-size:18px;line-height:1}
.ti-layout-dashboard::before{content:'▦'}
.ti-calendar-week::before{content:'◷'}
.ti-database::before{content:'▤'}
.ti-settings::before{content:'⚙'}
.ti-bolt::before{content:'ϟ'}
.ti-battery-3::before{content:'▰'}
.ti-grid-dots::before{content:'▦'}
.ti-dots-circle-horizontal::before{content:'•••'}
.ti-moon::before{content:'◐'}
.ti-chart-line::before{content:'⌁'}
.ti-activity::before{content:'∿'}
.ti-clock-hour-4::before{content:'◴'}
.ti-building-factory-2::before{content:'▥'}
.ti-cloud::before{content:'☁'}
.ti-chart-area-line::before{content:'▧'}
.ti-trending-up::before{content:'↗'}
.ti-scale::before{content:'⇄'}
.ti-shield-check::before{content:'◈'}
.ti-tool::before{content:'⚒'}
.ti-file-text::before{content:'▣'}
.ti-arrows-diff::before{content:'⇅'}
.ti::before{color:currentColor}

/* ---------- CSS Custom Properties ---------- */
:root{
  --bg:#f3f7fc;
  --bg2:#eef4fb;
  --surface:#ffffff;
  --surface-soft:rgba(255,255,255,.78);
  --surface-alt:#f8fbff;
  --text:#0f172a;
  --text-soft:#334155;
  --muted:#64748b;
  --soft:#94a3b8;
  --line:#e2e8f0;
  --line-strong:#d7e1ee;
  --brand:#1d4ed8;
  --brand-2:#0ea5e9;
  --brand-3:#22c55e;
  --violet:#8b5cf6;
  --amber:#f59e0b;
  --red:#ef4444;
  --shadow-sm:0 8px 24px rgba(15,23,42,.05);
  --shadow:0 14px 42px rgba(15,23,42,.08);
  --radius:22px;
  --radius-2:16px;
  --radius-3:12px;
  --bottom-nav-h:62px;
}

*{box-sizing:border-box}
html{font-size:14px}
body{
  margin:0;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 26%),
    radial-gradient(circle at top right, rgba(14,165,233,.1), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 45%, #f9fbfd 100%);
}
a{color:var(--brand)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#111827;padding:8px 10px;border-radius:8px;z-index:200}
.skip:focus{left:8px}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}

/* ---------- Sidebar ---------- */
.side{
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:16px 12px;
  background:rgba(248,251,255,.9);backdrop-filter:blur(18px);
  border-right:1px solid rgba(215,225,238,.85);
  display:flex;flex-direction:column;gap:4px
}
.side-spacer{flex:1}

.brand{
  display:grid;grid-template-columns:50px minmax(0,1fr);gap:0 12px;align-items:center;
  margin-bottom:14px;padding:9px;border-radius:16px;color:inherit;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.72));
  border:1px solid rgba(226,232,240,.92);box-shadow:var(--shadow-sm)
}
.brand img{
  grid-row:span 2;width:50px;height:50px;display:block;filter:drop-shadow(0 10px 18px rgba(23,73,198,.18))
}
.brand-copy{display:grid;gap:2px;min-width:0}
.brand b{font-size:18px;letter-spacing:-.04em;color:#1749c6;line-height:1.02}
.brand b span,.brand small span{color:#14b8a6}
.brand small{color:#1749c6;font-size:13.5px;font-weight:700;letter-spacing:-.025em;line-height:1.02}
.mobile-brand{display:none}

.side-label{margin:10px 8px 4px;color:var(--soft);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.nav-block{display:grid;gap:3px}
.nav-block a{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:10px 11px;border-radius:13px;color:var(--text-soft);text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease
}
.nav-block a i{font-size:18px;flex-shrink:0;opacity:.72;color:var(--brand)}
.nav-block a:hover{background:rgba(255,255,255,.85);border-color:var(--line);box-shadow:var(--shadow-sm)}
.nav-block a.is-active{
  color:#0f172a;background:linear-gradient(135deg,rgba(219,234,254,.92),rgba(236,253,245,.84));
  border-color:#bfdbfe;box-shadow:0 10px 24px rgba(37,99,235,.10)
}
.nav-block a.is-active::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 6px 6px 0;
  background:linear-gradient(180deg,var(--brand),var(--brand-2))
}
.nav-block a.is-active i{opacity:1}
.nav-block a span{font-weight:700;letter-spacing:-.015em;font-size:13.5px}
.nav-block.compact a{padding:8px 11px}
.nav-block.compact a span{font-size:12px;font-weight:500;color:var(--muted)}
.nav-block.compact a.is-active span{color:var(--brand)}

.side-card{
  margin-top:12px;padding:12px;border:1px solid rgba(226,232,240,.95);border-radius:16px;
  background:linear-gradient(180deg,#fff,#f8fbff);color:var(--muted);font-size:11.5px;box-shadow:var(--shadow-sm)
}
.side-card b{display:block;color:var(--text-soft);margin-bottom:3px}

/* ---------- Bottom nav (MOBILE) — domyślnie ukryty ---------- */
.bottom-nav{display:none}

/* ---------- Main ---------- */
.main{min-width:0;padding:16px clamp(14px,2.4vw,30px) 28px}
.content-wrap{}

/* ---------- Top header ---------- */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.title-wrap>span,.hero span{display:block;color:var(--brand);font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.title-wrap h1{margin:4px 0 4px;font-size:clamp(24px,3vw,38px);line-height:1.04;letter-spacing:-.05em}
.title-wrap p{margin:0;color:var(--muted);font-size:12px}
.mobile-brand strong{font-size:18px;letter-spacing:-.04em;color:#1749c6}
.mobile-brand strong span{color:#14b8a6}

/* ---------- Datebox ---------- */
.datebox{
  display:flex;align-items:center;gap:6px;padding:7px;
  border:1px solid rgba(226,232,240,.95);border-radius:16px;
  background:rgba(255,255,255,.84);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);
  flex-shrink:0
}
.datebox form{display:flex;align-items:center;gap:6px}
.date-label{display:grid;gap:3px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}
.datebox input{
  height:36px;border:1px solid var(--line);border-radius:11px;padding:6px 9px;
  background:#fff;color:var(--text);outline:none;font-size:13px;
  box-shadow:inset 0 1px 1px rgba(15,23,42,.02)
}
.datebox input:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.date-btn{
  height:36px;border:0;border-radius:11px;padding:0 12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 18px rgba(37,99,235,.18)
}
.date-btn:hover{filter:brightness(1.05)}
.date-arrow{
  width:36px;height:36px;padding:0;display:inline-grid;place-items:center;
  font-size:22px;line-height:1;font-weight:800;color:#1d4ed8;
  background:linear-gradient(180deg,#fff,#f8fbff);
  border:1px solid var(--line);border-radius:11px;text-decoration:none;
  transition:transform .15s ease,background .15s ease,border-color .15s ease
}
.date-arrow:hover{border-color:#bfdbfe;background:#eff6ff}
.latest-link{
  height:36px;border:1px solid var(--line);border-radius:11px;padding:0 11px;
  display:inline-flex;align-items:center;background:#fff;color:var(--text-soft);
  font-size:12px;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease
}
.latest-link:hover{background:#eff6ff;border-color:#bfdbfe}

/* Przycisk ogólny (hero actions) */
button,.btn{
  height:38px;border:0;border-radius:12px;padding:0 16px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  text-decoration:none;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
  box-shadow:0 10px 20px rgba(37,99,235,.18);display:inline-flex;align-items:center
}
button:hover,.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:#fff;color:var(--text-soft);border:1px solid var(--line);box-shadow:none}

/* ---------- Status pills ---------- */
.statusbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.status-pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 9px;
  border-radius:999px;border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.84);color:#475569;font-size:11px;font-weight:700;box-shadow:var(--shadow-sm)
}
.status-pill i{width:7px;height:7px;border-radius:999px;background:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.12)}
.status-pill.ok i{background:var(--brand-3);box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.status-pill.warn{color:#64748b}

/* ---------- Komponenty treści ---------- */
.hero,.kpis article,.panel,.insight,.empty>div{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88));
  border:1px solid rgba(226,232,240,.96);box-shadow:var(--shadow)
}
.hero{
  position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:space-between;gap:16px;margin-bottom:14px;padding:22px;border-radius:26px
}
.hero::after{
  content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(59,130,246,.16) 0%,rgba(14,165,233,.08) 46%,transparent 72%)
}
.hero h2{position:relative;margin:4px 0 6px;font-size:clamp(20px,2vw,26px);line-height:1.12;letter-spacing:-.04em}
.hero p{position:relative;margin:0;color:var(--muted);max-width:860px}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;position:relative}

code{padding:2px 6px;border-radius:8px;background:#eff6ff;color:#1e3a8a;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}
.kpis.kpis-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpis article,.panel,.insight{border-radius:var(--radius);min-width:0}
.kpis article{
  position:relative;min-height:100px;padding:14px;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease
}
.kpis article:hover,.panel:hover,.insight:hover{box-shadow:var(--shadow)}
.kpis article::before{
  content:"";position:absolute;left:14px;right:14px;top:0;height:4px;border-radius:0 0 10px 10px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2))
}
.kpis article:nth-child(2)::before{background:linear-gradient(90deg,#16a34a,#22c55e)}
.kpis article:nth-child(3)::before{background:linear-gradient(90deg,#f59e0b,#fb7185)}
.kpis article:nth-child(4)::before{background:linear-gradient(90deg,#8b5cf6,#6366f1)}
.kpis article:nth-child(5)::before{background:linear-gradient(90deg,#06b6d4,#0ea5e9)}
.kpis article:nth-child(6)::before{background:linear-gradient(90deg,#0f766e,#14b8a6)}
.kpis span{display:block;color:var(--muted);font-size:12px}
.kpis b{display:block;margin-top:9px;font-size:clamp(20px,2vw,26px);line-height:1.02;letter-spacing:-.05em}
.kpis small{display:block;margin-top:4px;color:var(--muted)}

.insights{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:14px}
.insight{padding:16px}
.insight h3{margin:0 0 8px;font-size:15px;letter-spacing:-.025em}
.insight p{margin:0;color:var(--muted)}
.insight strong{display:inline-block;font-size:24px;letter-spacing:-.045em;color:var(--text);margin-right:8px}

.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:820;background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe}
.badge.green{background:#ecfdf5;color:#15803d;border-color:#bbf7d0}
.badge.amber{background:#fffbeb;color:#b45309;border-color:#fde68a}
.badge.red{background:#fef2f2;color:#b91c1c;border-color:#fecaca}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-bottom:14px}
.grid.two>.panel{grid-column:span 6}
.panel{grid-column:span 4;padding:16px;position:relative}
.panel.wide{grid-column:span 8}.panel.full{grid-column:1/-1}
.panel h2{margin:0 0 10px;font-size:17px;letter-spacing:-.032em}
.panel h3{margin:12px 0 8px;font-size:14px;letter-spacing:-.02em}
.panel p{color:var(--muted);margin:0 0 8px}
.panel-desc{margin:4px 0 12px;color:var(--muted);font-size:12px;line-height:1.55;max-width:980px}

.chart{height:278px;min-width:0}
.chart.chart-tall{height:320px}
.chart.chart-compact{height:148px}
.chart-wrap{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%;gap:10px}
.chart svg{display:block;width:100%;height:100%;overflow:visible;border-radius:18px;background:linear-gradient(180deg,#fbfdff,#f8fbff)}
.chart-legend{display:flex;gap:8px;flex-wrap:wrap}
.chart-legend span{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:#f8fafc;border:1px solid var(--line);font-size:11px;color:var(--text-soft)}
.chart-legend i{width:10px;height:10px;border-radius:999px;display:inline-block}
.chart-empty{height:100%;display:grid;place-items:center;border:1px dashed var(--line-strong);border-radius:18px;background:linear-gradient(180deg,#fbfdff,#f8fafc);color:var(--muted)}
.panel-compact{padding-bottom:14px}
.chart-wrap-compact{gap:8px}
.peak-strip-wrap{padding:8px 10px 10px;border:1px solid rgba(226,232,240,.92);border-radius:16px;background:linear-gradient(180deg,#fbfdff,#f8fbff)}
.peak-strip-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;font-size:11px;color:var(--muted)}
.peak-strip-head span{font-weight:700;color:var(--text-soft)}
.peak-strip-head small{font-size:10.5px;color:var(--soft)}
.peak-strip{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:4px}
.peak-mini{display:grid;gap:5px;justify-items:center;padding:0;background:transparent;border:0;box-shadow:none;min-width:0;height:auto;cursor:default}
.peak-mini-bar{display:block;width:100%;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.peak-mini-tick{display:block;min-height:12px;font-size:9.5px;line-height:1;color:var(--muted)}
.chart-legend-compact{gap:6px}
.chart-legend-compact span{padding:4px 8px;font-size:10.5px}
.chart-note-compact{margin-top:0;font-size:11.5px}

.tip{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,calc(-100% - 14px));padding:9px 11px;border-radius:12px;background:#0f172a;color:#fff;font-size:11px;line-height:1.45;box-shadow:0 20px 40px rgba(15,23,42,.22);opacity:0;max-width:240px}
.tip.on{opacity:1}

.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e8eef6;border-radius:14px;background:linear-gradient(180deg,#fbfdff,#f8fafc)}
.list span{color:var(--muted)}.list b{text-align:right}

.table{overflow:auto;border:1px solid rgba(226,232,240,.96);border-radius:18px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.table table{width:100%;min-width:760px;border-collapse:collapse}
.table th,.table td{padding:10px 11px;border-bottom:1px solid #ecf1f7;text-align:left;font-size:12px;vertical-align:top}
.table th{position:sticky;top:0;background:#f8fbff;color:#475569;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.table tr:hover td{background:#f8fbff}

.empty{display:grid;place-items:center;min-height:55vh}
.empty>div{max-width:660px;padding:26px;border-radius:26px}

.footer{display:flex;justify-content:space-between;gap:12px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.muted{color:var(--muted)}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1280px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .insights{grid-template-columns:1fr 1fr}
  .insight:first-child{grid-column:1/-1}
  .panel,.panel.wide,.grid.two>.panel{grid-column:span 6}
}

/* --- ≤920px: sidebar off, bottom nav on --- */
@media(max-width:920px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .side-card{display:none}

  /* Reserva miejsce na fixed bottom nav */
  .main{padding:12px 14px calc(var(--bottom-nav-h) + 16px)}

  /* Header: stos pionowy */
  .top{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:10px}
  .title-wrap{display:grid;gap:4px}
  .title-wrap>span{display:none}
  .mobile-brand{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
  .mobile-brand img{width:36px;height:36px;filter:drop-shadow(0 8px 14px rgba(23,73,198,.14))}
  .title-wrap h1{font-size:clamp(22px,5vw,30px);margin-top:2px}

  /* Datebox: rozciągnięty */
  .datebox{justify-content:center;flex-wrap:wrap;width:100%}
  .datebox form{flex:1;min-width:220px}
  .date-label{flex:1}
  .datebox input{width:100%}

  /* Bottom tab bar: WIDOCZNY */
  .bottom-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;z-index:100;
    height:var(--bottom-nav-h);
    background:rgba(248,251,255,.96);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    border-top:1px solid rgba(215,225,238,.9);
    box-shadow:0 -6px 24px rgba(15,23,42,.07);
    /* iOS safe area */
    padding-bottom:env(safe-area-inset-bottom)
  }
  .bottom-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:6px 4px 5px;
    color:var(--muted);text-decoration:none;
    font-size:10px;font-weight:600;letter-spacing:.01em;
    border-top:2px solid transparent;
    transition:color .15s ease,border-color .15s ease,background .15s ease;
    -webkit-tap-highlight-color:transparent;
    user-select:none
  }
  .bottom-tab i{font-size:20px;line-height:1}
  .bottom-tab.is-active{color:var(--brand);border-top-color:var(--brand)}
  .bottom-tab:active{background:rgba(29,78,216,.06)}

  /* Siatki */
  .kpis{grid-template-columns:repeat(2,1fr)}
  .panel,.panel.wide,.grid.two>.panel{grid-column:span 12}
  .footer{flex-direction:column;gap:4px;padding-bottom:8px}
}

/* --- ≤620px: małe telefony --- */
@media(max-width:620px){
  html{font-size:13px}
  .main{padding:10px 12px calc(var(--bottom-nav-h) + 12px)}

  .datebox{padding:6px;border-radius:14px;gap:5px;display:grid;grid-template-columns:34px minmax(0,1fr) 34px}
  .datebox form{grid-column:2;min-width:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px}
  .date-label{min-width:0}
  .datebox input{height:34px;font-size:12px;padding:5px 8px;width:100%;min-width:0}
  .date-btn{height:34px;padding:0 10px;font-size:12px}
  .date-arrow{width:34px;height:34px;font-size:20px}
  .latest-link{grid-column:1/-1;height:32px;font-size:11px;padding:0 9px;justify-content:center}
  .mobile-brand strong{font-size:15px}

  .bottom-tab{font-size:9px}
  .bottom-tab i{font-size:18px}

  .insights{grid-template-columns:1fr}
  .hero{display:grid;padding:16px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr}
  .chart{height:220px}
  .chart.chart-compact{height:136px}
  .peak-strip-wrap{padding:8px}
  .peak-strip{gap:3px}
  .peak-mini-bar{height:16px}
  .table table{min-width:620px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ── week.php ── */
.period-nav{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px;margin-bottom:14px;padding:10px 14px;
  background:rgba(255,255,255,.84);border:1px solid rgba(226,232,240,.95);
  border-radius:16px;backdrop-filter:blur(12px);box-shadow:var(--shadow-sm)
}
.mode-tabs{display:flex;gap:4px}
.mode-tab{
  padding:7px 16px;border-radius:10px;font-size:13px;font-weight:700;
  text-decoration:none;color:var(--text-soft);border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s
}
.mode-tab:hover{background:#eff6ff;color:var(--brand)}
.mode-tab.is-active{
  background:linear-gradient(135deg,rgba(219,234,254,.92),rgba(236,253,245,.84));
  border-color:#bfdbfe;color:#0f172a
}
.period-arrows{display:flex;align-items:center;gap:8px}
.period-label{font-size:15px;font-weight:700;letter-spacing:-.02em;min-width:160px;text-align:center}
.price-cheap td,.price-cheap{color:#15803d;font-weight:700}
.price-expensive td,.price-expensive{color:#b91c1c;font-weight:700}
@media(max-width:620px){
  .period-nav{flex-direction:column;align-items:stretch}
  .period-arrows{justify-content:space-between}
  .period-label{min-width:auto;flex:1;text-align:center}
}

@media(max-width:430px){
  .main{padding-left:10px;padding-right:10px}
  .top{gap:8px}
  .title-wrap h1{font-size:21px}
  .datebox{grid-template-columns:32px minmax(0,1fr) 32px}
  .datebox form{grid-template-columns:minmax(0,1fr) 58px}
  .date-arrow{width:32px;height:32px}
  .date-btn{padding:0 8px}
  .panel{padding:13px;border-radius:18px}
  .kpis article{padding:11px 10px;min-height:84px}
  .kpis b{font-size:21px}
  .bottom-tab span{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}


/* ---------- Mobile KPI refinement ---------- */
@media(max-width:620px){
  .kpis,
  .kpis.kpis-5{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-bottom:10px;
  }
  .kpis.kpis-5 article:last-child:nth-child(odd){
    grid-column:1/-1;
  }
  .kpis article{
    min-height:86px;
    padding:12px 11px 10px;
    border-radius:17px;
    box-shadow:0 8px 22px rgba(15,23,42,.055);
  }
  .kpis article:hover{
    transform:none;
  }
  .kpis article::before{
    left:11px;
    right:11px;
    height:3px;
  }
  .kpis span{
    font-size:10.5px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
  }
  .kpis b{
    margin-top:8px;
    font-size:22px;
    line-height:1.04;
    letter-spacing:-.045em;
    word-break:break-word;
  }
  .kpis small{
    margin-top:3px;
    font-size:10.5px;
    line-height:1.2;
  }
}
@media(max-width:360px){
  .kpis,
  .kpis.kpis-5{
    grid-template-columns:1fr;
  }
  .kpis.kpis-5 article:last-child:nth-child(odd){
    grid-column:auto;
  }
}

/* v8: bez widocznych komentarzy opisowych */
.footer{justify-content:flex-start}
.side-card{display:none}
.hero p:empty,.panel p:empty{display:none}

/* ── Etykiety sekcji na dashboardzie ── */
.section-label{
  display:flex;align-items:center;gap:7px;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft);margin:18px 0 6px;
  padding-bottom:6px;border-bottom:1px solid var(--line)
}
.section-label i{font-size:14px;opacity:.7}
.section-label small{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--soft);font-size:10px}

/* ── Wykres mocy zainstalowanej (capacity) ── */
.chart-capacity{height:auto;min-height:200px}

/* ============================================================
   TRYB CIEMNY — natywny motyw bez odwracania filtrem
   ============================================================ */
html[data-theme="dark"]{
  --bg:#07111f;
  --bg2:#0a1626;
  --surface:#0f1b2d;
  --surface-soft:rgba(15,27,45,.88);
  --surface-alt:#111f33;
  --text:#e5edf8;
  --text-soft:#cbd5e1;
  --muted:#93a4bb;
  --soft:#7b8da6;
  --line:#21324d;
  --line-strong:#2d4264;
  --brand:#60a5fa;
  --brand-2:#38bdf8;
  --brand-3:#34d399;
  --amber:#fbbf24;
  --red:#fb7185;
  --shadow-sm:0 8px 24px rgba(0,0,0,.22);
  --shadow:0 18px 48px rgba(0,0,0,.32);
  color-scheme:dark;
  background:#07111f;
  filter:none;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.20), transparent 30%),
    radial-gradient(circle at top right, rgba(14,165,233,.13), transparent 28%),
    linear-gradient(180deg,#081220 0%,#0a1626 48%,#07111f 100%);
  color:var(--text);
}
html[data-theme="dark"] img,
html[data-theme="dark"] svg,
html[data-theme="dark"] .no-invert{filter:none}
html[data-theme="dark"] ::selection{background:#2563eb;color:#fff}
html[data-theme="dark"] .side{
  background:rgba(8,18,32,.92);
  border-color:rgba(45,66,100,.78);
}
html[data-theme="dark"] .brand,
html[data-theme="dark"] .datebox,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .kpis article,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .insight,
html[data-theme="dark"] .empty>div,
html[data-theme="dark"] .period-nav,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .table,
html[data-theme="dark"] .mobile-more-card{
  background:linear-gradient(180deg,rgba(17,31,51,.96),rgba(12,24,42,.92));
  border-color:rgba(45,66,100,.86);
  box-shadow:var(--shadow);
}
html[data-theme="dark"] .brand b,
html[data-theme="dark"] .brand small,
html[data-theme="dark"] .mobile-brand strong{color:#bfdbfe}
html[data-theme="dark"] .brand b span,
html[data-theme="dark"] .brand small span,
html[data-theme="dark"] .mobile-brand strong span{color:#5eead4}
html[data-theme="dark"] .nav-block a{color:var(--text-soft)}
html[data-theme="dark"] .nav-block a:hover,
html[data-theme="dark"] .nav-block a.is-active{
  color:var(--text);
  background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(20,184,166,.12));
  border-color:rgba(96,165,250,.38);
}
html[data-theme="dark"] .nav-block.compact a span,
html[data-theme="dark"] .panel p,
html[data-theme="dark"] .insight p{color:var(--muted)}
html[data-theme="dark"] .datebox input,
html[data-theme="dark"] .latest-link,
html[data-theme="dark"] .date-arrow,
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .mobile-theme-toggle,
html[data-theme="dark"] .mode-tab.is-active,
html[data-theme="dark"] .mobile-more-links a,
html[data-theme="dark"] .mobile-more-head button{
  background:linear-gradient(180deg,#13213a,#0f1b2d);
  color:var(--text-soft);
  border-color:var(--line);
}
html[data-theme="dark"] .datebox input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.18)}
html[data-theme="dark"] .hero::after{background:radial-gradient(circle,rgba(96,165,250,.18) 0%,rgba(56,189,248,.08) 46%,transparent 72%)}
html[data-theme="dark"] .badge{background:rgba(37,99,235,.16);color:#bfdbfe;border-color:rgba(96,165,250,.25)}
html[data-theme="dark"] .badge.green{background:rgba(16,185,129,.14);color:#bbf7d0;border-color:rgba(52,211,153,.25)}
html[data-theme="dark"] .badge.amber{background:rgba(245,158,11,.14);color:#fde68a;border-color:rgba(251,191,36,.25)}
html[data-theme="dark"] .badge.red{background:rgba(239,68,68,.14);color:#fecaca;border-color:rgba(251,113,133,.25)}
html[data-theme="dark"] .list li{
  background:linear-gradient(180deg,#111f33,#0e1a2d);
  border-color:var(--line);
}
html[data-theme="dark"] .table th{background:#111f33;color:var(--text-soft)}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td{border-color:var(--line)}
html[data-theme="dark"] .table tr:hover td{background:#13213a}
html[data-theme="dark"] code{background:#13213a;color:#bfdbfe}
html[data-theme="dark"] .footer{border-color:var(--line)}

/* Wykresy w dark mode: bez białych powierzchni */
html[data-theme="dark"] .chart svg{
  background:linear-gradient(180deg,#0b1728,#0f1b2d);
  border:1px solid rgba(45,66,100,.72);
}
html[data-theme="dark"] .chart-legend span{
  background:rgba(15,27,45,.82);
  color:var(--text-soft);
  border-color:var(--line);
}
html[data-theme="dark"] .chart-empty{
  background:linear-gradient(180deg,#0b1728,#0f1b2d);
  color:var(--muted);
  border-color:var(--line-strong);
}
html[data-theme="dark"] .tip{background:#e5edf8;color:#07111f;box-shadow:0 20px 44px rgba(0,0,0,.38)}
html[data-theme="dark"] .peak-strip-wrap{
  background:linear-gradient(180deg,#0b1728,#0f1b2d);
  border-color:rgba(45,66,100,.72);
}
html[data-theme="dark"] .peak-strip-head span{color:var(--text-soft)}
html[data-theme="dark"] .peak-mini-bar{border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

/* ---------- Przycisk przełącznika motywu ---------- */
.theme-toggle{
  display:flex;align-items:center;gap:9px;width:100%;
  margin-top:10px;padding:9px 12px;border-radius:13px;
  border:1px solid rgba(226,232,240,.95);
  background:linear-gradient(180deg,#fff,#f8fbff);
  color:var(--text-soft);font-size:12.5px;font-weight:700;
  cursor:pointer;box-shadow:var(--shadow-sm);
  transition:background .15s ease,border-color .15s ease,transform .15s ease
}
.theme-toggle:hover{background:#eff6ff;border-color:#bfdbfe}
.theme-toggle i{font-size:16px;opacity:.82}
html[data-theme="dark"] .theme-toggle i::before,
html[data-theme="dark"] .mobile-theme-toggle i::before{content:'☀'}

/* ---------- Mobilne menu Więcej ---------- */
.bottom-more-toggle{border:0;background:transparent;font-family:inherit}
.mobile-more-menu{display:none}
@media(max-width:920px){
  .theme-toggle{display:none}
  html[data-theme="dark"] .bottom-nav{
    background:rgba(8,18,32,.96);
    border-color:rgba(45,66,100,.88);
    box-shadow:0 -8px 30px rgba(0,0,0,.34)
  }
  html[data-theme="dark"] .bottom-tab{color:var(--muted)}
  html[data-theme="dark"] .bottom-tab.is-active{color:var(--brand);border-top-color:var(--brand)}
  .mobile-more-menu{
    display:none;position:fixed;inset:0;z-index:120;
    background:rgba(15,23,42,.28);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
    padding:16px 12px calc(var(--bottom-nav-h) + 14px);
    align-items:flex-end;justify-content:center
  }
  .mobile-more-menu.is-open{display:flex}
  .mobile-more-card{
    width:min(520px,100%);border-radius:22px;padding:12px;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.96));
    border:1px solid rgba(226,232,240,.96);box-shadow:0 18px 54px rgba(15,23,42,.18)
  }
  .mobile-more-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px}
  .mobile-more-head strong{font-size:15px;letter-spacing:-.02em}
  .mobile-more-head button{
    width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:22px;line-height:1;padding:0;box-shadow:none
  }
  .mobile-more-links{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .mobile-more-links a,
  .mobile-theme-toggle{
    min-height:44px;display:flex;align-items:center;gap:9px;padding:10px 11px;
    border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--text-soft);
    text-decoration:none;font-weight:750;font-size:12.5px;box-shadow:none
  }
  .mobile-more-links a.is-active{color:var(--brand);border-color:#bfdbfe;background:#eff6ff}
  .mobile-more-links i,.mobile-theme-toggle i{font-size:18px;color:currentColor;opacity:.85}
  .mobile-theme-toggle{width:100%;margin-top:8px;justify-content:center;cursor:pointer;font-family:inherit}
  html[data-theme="dark"] .mobile-more-menu{background:rgba(0,0,0,.35)}
  html[data-theme="dark"] .mobile-more-links a.is-active{
    background:rgba(37,99,235,.18);border-color:rgba(96,165,250,.38);color:#bfdbfe
  }
}

.chart-note{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.45}


/* Status danych — prosty opis dla użytkownika */
.data-status-strip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 14px;padding:12px 14px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,251,255,.86));
  border:1px solid rgba(226,232,240,.96);box-shadow:var(--shadow-sm)
}
.data-status-title{display:grid;gap:2px;min-width:180px}
.data-status-title strong{font-size:13px;color:var(--text);letter-spacing:-.01em}
.data-status-title span{font-size:11.5px;color:var(--muted)}
.data-status-items{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.data-status-item{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:11.5px;color:var(--text-soft)}
.data-status-item i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.12)}
.data-status-item.is-ok i{background:var(--brand-3);box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.data-status-item b{font-weight:800}.data-status-item em{font-style:normal;color:var(--muted)}
html[data-theme="dark"] .data-status-strip{background:linear-gradient(180deg,#111f33,#0e1a2d);border-color:var(--line)}
html[data-theme="dark"] .data-status-item{background:rgba(15,27,45,.82);border-color:var(--line);color:var(--text-soft)}
@media(max-width:920px){.data-status-strip{display:grid}.data-status-items{justify-content:flex-start}.data-status-item{font-size:11px}}

/* ============================================================
   MODERNIZACJA UI — v20260702v14
   Warstwa nakładkowa: typografia Inter, głębia kart, mikrointerakcje,
   dopracowany dark mode. Nadpisuje wybrane reguły powyżej.
   ============================================================ */

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,.brand b,.brand small{font-family:inherit}
::selection{background:rgba(29,78,216,.18);color:inherit}

/* Liczby tabelaryczne — KPI i tabele nie "skaczą" przy zmianie wartości */
.kpis b,.table table td,.table table th,.datebox,.hero .hero-metric{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* --- Karty: subtelna głębia i uniesienie na hover --- */
.kpis article{transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,border-color .22s ease}
.kpis article:hover{transform:translateY(-3px);border-color:rgba(147,197,253,.85);box-shadow:0 18px 44px rgba(15,23,42,.12)}
.panel,.insight{transition:box-shadow .22s ease,border-color .22s ease}
.panel:hover,.insight:hover{border-color:rgba(191,219,254,.9)}

/* --- KPI: mocniejsza hierarchia liczb --- */
.kpis span{font-weight:650;letter-spacing:.01em;text-transform:uppercase;font-size:10.5px;color:var(--muted)}
.kpis b{font-weight:800}

/* --- Hero: delikatna siatka gradientowa --- */
.hero{
  background:
    radial-gradient(600px 220px at 12% -30%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(480px 200px at 96% 130%, rgba(20,184,166,.10), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.90));
}

/* --- Tabele: hover wierszy + lepsza czytelność nagłówków --- */
.table table thead th{
  position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,#f8fbff,#f1f6fd);
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#64748b;
}
.table table tbody tr{transition:background .12s ease}
.table table tbody tr:hover{background:rgba(59,130,246,.05)}

/* --- Przyciski i fokus: wyraźny, nowoczesny ring --- */
button,.btn,a{outline:none}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid rgba(59,130,246,.65);outline-offset:2px;border-radius:10px;
}
button,.btn{transition:filter .15s ease,transform .12s ease,box-shadow .15s ease}
button:active,.btn:active{transform:translateY(1px) scale(.99)}

/* --- Pasek przewijania w kolorach motywu --- */
*{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.45) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(100,116,139,.38);border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.6);background-clip:content-box;border:2px solid transparent}
::-webkit-scrollbar-track{background:transparent}

/* --- Sidebar: aktywna pozycja z lekkim "pulsem" koloru marki --- */
.nav-block a{transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease}
.nav-block a:hover{transform:translateX(2px)}
.nav-block a.is-active:hover{transform:none}

/* --- Chipy statusu: żywsze, spójne z motywem --- */
.status-pill,.data-status-item{transition:border-color .15s ease,box-shadow .15s ease}
.status-pill:hover,.data-status-item:hover{border-color:rgba(147,197,253,.9)}

/* --- Animacja wejścia treści (subtelna, szanuje prefers-reduced-motion) --- */
@media (prefers-reduced-motion: no-preference){
  .main > *{animation:fadeUp .38s cubic-bezier(.2,.8,.3,1) both}
  .main > *:nth-child(2){animation-delay:.04s}
  .main > *:nth-child(3){animation-delay:.08s}
  .main > *:nth-child(4){animation-delay:.12s}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* --- DARK MODE: większa głębia i kontrast --- */
html[data-theme="dark"] .kpis article:hover{
  border-color:rgba(96,165,250,.45);
  box-shadow:0 18px 46px rgba(0,0,0,.5);
}
html[data-theme="dark"] .hero{
  background:
    radial-gradient(620px 240px at 10% -30%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(500px 210px at 96% 130%, rgba(20,184,166,.12), transparent 62%),
    linear-gradient(180deg,#101d31,#0d1828);
}
html[data-theme="dark"] .table table thead th{
  background:linear-gradient(180deg,#122035,#0e1a2d);color:#8ea3c0;
}
html[data-theme="dark"] .table table tbody tr:hover{background:rgba(96,165,250,.07)}
html[data-theme="dark"] ::selection{background:rgba(96,165,250,.3)}
html[data-theme="dark"] *{scrollbar-color:rgba(148,163,184,.35) transparent}

/* ============================================================
   MODERNIZACJA UI — v20260703v15
   Druga warstwa: głębia i charakter. Gradientowe akcenty marki,
   wyrazistsze KPI, dopracowane przyciski, żywszy hero, spójny
   rytm wizualny. Nadpisuje wybrane reguły v14 i bazowe.
   ============================================================ */

:root{
  --brand-grad: linear-gradient(135deg,#2563eb 0%,#0ea5e9 55%,#14b8a6 100%);
  --ring: 0 0 0 3px rgba(59,130,246,.16);
}

/* --- Tło aplikacji: delikatna siatka świetlna zamiast płaskiego koloru --- */
body{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(20,184,166,.05), transparent 55%),
    radial-gradient(1100px 600px at -10% 0%, rgba(37,99,235,.06), transparent 55%),
    var(--bg, #f8fbff);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(20,184,166,.07), transparent 55%),
    radial-gradient(1100px 600px at -10% 0%, rgba(37,99,235,.10), transparent 55%),
    #0b1524;
}

/* --- KPI: liczby z gradientem marki, wyraźny puls koloru na akcencie --- */
.kpis b{
  font-size:clamp(22px,2.1vw,28px);
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
html[data-theme="dark"] .kpis b{
  background:linear-gradient(135deg,#60a5fa 0%,#38bdf8 55%,#2dd4bf 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* --- Przycisk główny: gradient marki + cień koloru --- */
button,.btn{
  background:var(--brand-grad);
  border:none;
  box-shadow:0 6px 18px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
button:hover,.btn:hover{filter:brightness(1.06);box-shadow:0 8px 22px rgba(37,99,235,.34), inset 0 1px 0 rgba(255,255,255,.25)}
.btn.secondary{background:#fff;box-shadow:none;border:1px solid var(--line)}
html[data-theme="dark"] .btn.secondary{background:#12203a;border-color:#23375a}

/* --- Hero: gradientowa krawędź prowadząca (lewy brzeg) --- */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--brand-grad);opacity:.9;
}

/* --- Panele: tytuły sekcji z akcentem --- */
.panel>h2:first-child, .panel>h2:first-of-type{
  display:flex;align-items:center;gap:10px;
}
.panel>h2:first-child::before, .panel>h2:first-of-type::before{
  content:"";width:8px;height:8px;border-radius:3px;flex:0 0 auto;
  background:var(--brand-grad);
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}

/* --- Listy (Najdroższe godziny itd.): hover i akcent wartości --- */
.list li{transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.list li:hover{transform:translateX(2px);border-color:rgba(147,197,253,.9)}
.list li b{color:#1d4ed8}
html[data-theme="dark"] .list li{background:linear-gradient(180deg,#101d31,#0d1828);border-color:#1c2f4d}
html[data-theme="dark"] .list li b{color:#7fb2ff}

/* --- Kontener wykresu: subtelna wewnętrzna karta --- */
.chart{
  border:1px solid rgba(226,232,240,.7);border-radius:14px;
  background:linear-gradient(180deg,rgba(248,250,252,.6),rgba(255,255,255,.4));
  padding:6px;
}
html[data-theme="dark"] .chart{
  border-color:#1c2f4d;
  background:linear-gradient(180deg,rgba(13,24,40,.7),rgba(10,19,33,.5));
}

/* --- Sidebar: aktywna pozycja jako gradientowy pill --- */
.nav-block a.is-active{
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(20,184,166,.10));
  border-color:rgba(59,130,246,.4);
  position:relative;
}
.nav-block a.is-active::before{
  content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:99px;
  background:var(--brand-grad);
}
html[data-theme="dark"] .nav-block a.is-active{
  background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(20,184,166,.14));
  border-color:rgba(96,165,250,.4);
}

/* --- Datebox: spójny z resztą, subtelny focus ring --- */
.datebox input:focus{box-shadow:var(--ring)}

/* --- Status/pills: kropki statusu z poświatą --- */
.status-pill i, .data-status-item i, .dot{
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
}

/* --- Tabele: pierwsze kolumny wyraźniejsze, zebra bardzo subtelna --- */
.table table tbody tr:nth-child(even){background:rgba(241,245,249,.45)}
.table table tbody tr:nth-child(even):hover{background:rgba(59,130,246,.06)}
html[data-theme="dark"] .table table tbody tr:nth-child(even){background:rgba(18,32,53,.5)}
html[data-theme="dark"] .table table tbody tr:nth-child(even):hover{background:rgba(96,165,250,.08)}

/* --- Footer / drobiazgi --- */
hr{border:none;border-top:1px solid var(--line)}

/* ============================================================
   v18: świeżość danych + pasek nowych danych + drobny polish UX
   ============================================================ */
.freshness{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}

.new-data-bar{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,80px);
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#1d4ed8,#0891b2);color:#fff;
  padding:10px 14px 10px 18px;border-radius:999px;
  box-shadow:0 12px 34px rgba(15,23,42,.35);
  font-size:13.5px;font-weight:600;z-index:999;
  opacity:0;transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .35s ease;
}
.new-data-bar.on{transform:translate(-50%,0);opacity:1}
.new-data-bar button{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  color:#fff;font-weight:700;font-size:12.5px;
  padding:6px 14px;border-radius:999px;cursor:pointer;box-shadow:none;
}
.new-data-bar button:hover{background:rgba(255,255,255,.28);filter:none}

/* Skip-link dla czytników ekranu / klawiatury */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:#1d4ed8;color:#fff;padding:10px 16px;border-radius:0 0 10px 0;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

/* Płynne przewijanie kotwic, szanuje reduced motion */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* Lepszy odczyt tabel na mobile: mniejsze paddingi, bez łamania liczb */
@media (max-width:640px){
  .table table td,.table table th{padding:8px 10px;font-size:12.5px;white-space:nowrap}
  .new-data-bar{width:calc(100% - 28px);justify-content:space-between}
}