/* ═══════════════════════════════════════════════════════════════
   Voltaryf - App shell (sidebar rail + topbar + context bar)
   Nowy układ z „Voltaryf Shell.dc.html". Kolory z css/style.css (:root).
   style.css nadal rządzi wnętrzem kart/wykresów/tabel/baterii.
   ═══════════════════════════════════════════════════════════════ */

html { overflow-x: hidden; }

/* ── Boczny rail nawigacji ─────────────────────────────────────── */
#sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
  width: 76px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: width .2s ease, transform .25s ease;
  overflow: hidden;
}
#sidebar.expanded { width: 250px; box-shadow: 10px 0 40px rgba(0,0,0,.45); }

.side-logo {
  height: 60px; flex: none;
  display: flex; align-items: center; gap: 14px; padding: 0 23px;
  border-bottom: 1px solid var(--border);
}
.side-logo > i { color: var(--orange); font-size: 20px; width: 24px; text-align: center; flex: none; }
.side-brand { font: 800 17px 'Inter', sans-serif; letter-spacing: -.01em; color: var(--text); }

/* Etykieta chowana w trybie rail (widoczna tylko po rozwinięciu) */
.side-label {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
  opacity: 0; transition: opacity .18s; white-space: nowrap; overflow: hidden;
}
#sidebar.expanded .side-label { opacity: 1; }
.side-label > span { overflow: hidden; text-overflow: ellipsis; }

#side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 0 14px; }

.nav-group { margin-bottom: 2px; }
.nav-group-title {
  font: 700 10px 'Inter', sans-serif; letter-spacing: .09em; text-transform: uppercase;
  color: #5b6b80; padding: 0 24px; margin: 10px 0 5px;
  height: 0; opacity: 0; overflow: hidden; transition: opacity .18s; white-space: nowrap;
}
#sidebar.expanded .nav-group-title { height: auto; opacity: 1; margin: 14px 0 5px; }

.nav-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  border: none; cursor: pointer; padding: 0 23px; height: 44px;
  background: transparent; color: var(--text-dim);
  font: 600 13.5px 'Inter', sans-serif; text-align: left;
  transition: background .15s, color .15s;
  border-left: 3px solid transparent;
}
.nav-item > i { width: 24px; text-align: center; font-size: 16px; flex: none; color: inherit; }
.nav-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.nav-item.active { background: rgba(59,130,246,.14); color: var(--text); border-left-color: var(--blue); }
.nav-item.active > i { color: var(--blue); }
.nav-badge {
  background: rgba(234,179,8,.15); color: var(--yellow);
  font: 700 8.5px 'Inter', sans-serif; padding: 2px 6px; border-radius: 999px;
  letter-spacing: .05em; text-transform: uppercase; flex: none;
}

.side-admin { border-top: 1px solid var(--border); padding: 8px 0; flex: none; }
#btn-admin-toggle {
  display: flex; align-items: center; gap: 14px; width: 100%;
  border: none; cursor: pointer; padding: 0 23px; height: 42px;
  background: transparent; color: var(--text-dim);
  font: 600 13px 'Inter', sans-serif; text-align: left; border-left: 3px solid transparent;
}
#btn-admin-toggle > i { width: 24px; text-align: center; font-size: 15px; flex: none; }
#btn-admin-toggle:hover { background: rgba(255,255,255,.05); }
#btn-admin-toggle.unlocked { color: var(--green); }
#btn-admin-toggle.unlocked > i { color: var(--green); }

/* ── Główna kolumna ────────────────────────────────────────────── */
#app-main {
  margin-left: 76px; min-height: 100vh;
  display: flex; flex-direction: column;
  transition: margin-left .2s;
}

/* Górny pasek */
#topbar {
  height: 60px; flex: none;
  background: #12151f; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
}
#btn-nav-open {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text); cursor: pointer; font-size: 15px; flex: none;
}
.topbar-titles { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
#page-title { font: 700 16px 'Inter', sans-serif; color: var(--text); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-subtitle { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#admin-chip {
  display: inline-flex; align-items: center;
  background: rgba(34,197,94,.14); color: var(--green);
  font: 600 11px 'Inter', sans-serif; padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(34,197,94,.3);
}
/* Górny profil wczytanego okresu (prawy górny róg, zamiast awatara) - jak na main */
.hdr-coverage {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: 12px; line-height: 1.35; color: var(--text-dim); min-width: 0;
}
.hdr-coverage .cov-line { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.hdr-coverage b { color: var(--text); font-weight: 700; }
.hdr-coverage .cov-sep { color: #3a4257; }
.hdr-coverage .cov-warn { color: var(--red); font-weight: 600; }

/* ── Sticky pasek kontekstu + panel okresu ─────────────────────── */
#context-bar {
  background: #12151f; border-bottom: 1px solid var(--border);
  position: sticky; top: 60px; z-index: 90;
}
.ctx-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 11px 24px; }
.ctx-data { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
.ctx-data > i { color: var(--teal); }
.ctx-data b { color: var(--text); }
.ctx-sep { color: #3a4257; }
.ctx-period-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 12px 'Inter', sans-serif; color: var(--blue);
  background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3);
  border-radius: 999px; padding: 5px 13px; cursor: pointer;
}
.ctx-period-chip:hover { background: rgba(59,130,246,.2); color: var(--text); }
.ctx-period-chip.open { background: rgba(59,130,246,.2); color: var(--text); }
.ctx-chevron { font-size: 9px; opacity: .7; transition: transform .18s; }
.ctx-period-chip.open .ctx-chevron { transform: rotate(180deg); }
/* Prawa strona belki: przycisk „Optymalizuj zużycie" + globalny przełącznik. */
.ctx-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ctx-actions .tariff-config-link { margin: 0; }
/* Brak wyniku ankiety → nie ma czego optymalizować: chowamy switch (przycisk zostaje). */
#ctx-opt-switch.no-opt { display: none; }

#period-panel { padding: 4px 24px 16px; border-top: 1px solid var(--bg3); }
.period-panel-body { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); }
/* Widoczna metoda (flex selektorów) + „Zamknij" w jednym rzędzie - przycisk tuż
   na prawo od ostatniego selektora. Ukryte metody mają display:none (.hidden). */
.period-fields-area { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
/* #period-panel korzysta z istniejących .period-method-tabs / .period-fields / .setting-group ze style.css */
.period-close-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 12.5px 'Inter', sans-serif; color: var(--text);
  background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.35);
  border-radius: 999px; padding: 7px 18px; cursor: pointer;
}
.period-close-btn:hover { background: rgba(59,130,246,.24); }
.period-close-btn i { color: var(--blue); }

/* ── Obszar treści (widoki) ────────────────────────────────────── */
#app-content { flex: 1; padding: 20px 24px 56px; }
/* Neutralizuje globalne section{max-width/margin/padding} ze style.css - gutter
   daje #app-content, a widoki są jednolicie wyśrodkowane w 1520px. */
#app-content > .view { max-width: 1520px; margin: 0 auto; padding: 0; }
/* Zachowaj „kartowy" wygląd sekcji baterii wewnątrz shella (2 id > .view) */
#app-content > #battery-section { padding: 1.5rem; }

/* Widoki osadzone (iframe): pełna szerokość, bez marginesów; wysokość ustawia
   shell.js z postMessage (auto-resize), z sensownym fallbackiem. */
#app-content > .view-embed { max-width: none; margin: 0; }
.embed-frame { display: block; width: 100%; border: 0; min-height: calc(100vh - 60px); background: transparent; }
/* Sticky nagłówek porównania faktur - pod topbar(60)+context-bar(~48) */
.compare-sticky-header { top: 108px; background: var(--bg2); }

/* Footer wyrównany do kolumny głównej */
#main-footer { margin-left: 76px; }

/* ═══ WIDOK PRZEGLĄD ═══ */
.ov-hero {
  background: linear-gradient(135deg, #12203f 0%, #161923 55%);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 28px; margin-bottom: 20px;
  display: flex; gap: 32px; flex-wrap: wrap; align-items: center;
}
.ov-hero-compare { flex: 1; min-width: 260px; }
.ov-hero-label { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.ov-hero-label span { opacity: .7; text-transform: none; letter-spacing: 0; }
.ov-hero-tariffs { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.ov-hero-tariffs > div { text-align: center; }
.ov-hero-cap { font-size: 11.5px; color: var(--text-dim); margin-bottom: 2px; }
.ov-hero-val { font: 800 30px 'Inter', sans-serif; letter-spacing: -.02em; }
.ov-hero-val.ov-cur { color: var(--orange); }
.ov-hero-val.ov-best { color: var(--blue); }
.ov-hero-unit { font-size: 15px; font-weight: 600; color: var(--text-dim); }
.ov-hero-arrow { color: #3a4257; font-size: 20px; display: flex; align-items: center; }
.ov-hero-save {
  flex: none; min-width: 210px;
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.28);
  border-radius: 12px; padding: 18px 22px; text-align: center;
}
.ov-hero-save-cap { font-size: 11.5px; color: var(--text-dim); margin-bottom: 3px; }
.ov-hero-save-val { font: 800 32px 'Inter', sans-serif; letter-spacing: -.02em; color: var(--green); }
.ov-hero-save-sub { font-size: 12px; color: var(--green); font-weight: 600; margin-top: 2px; }

.ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.ov-stat {
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--blue); border-radius: 12px;
  padding: 16px 18px; display: flex; align-items: center; gap: 14px;
}
.ov-stat-ic { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; background: rgba(59,130,246,.15); color: var(--blue); }
.ov-stat-val { font: 800 22px 'Inter', sans-serif; letter-spacing: -.02em; color: var(--text); }
.ov-stat-lbl { font-size: 11.5px; color: var(--text-dim); }
.ov-stat.accent-blue   { border-left-color: var(--blue); }
.ov-stat.accent-teal   { border-left-color: var(--teal); }
.ov-stat.accent-green  { border-left-color: var(--green); }
.ov-stat.accent-purple { border-left-color: var(--purple); }
.ov-stat.accent-teal   .ov-stat-ic { background: rgba(20,184,166,.15); color: var(--teal); }
.ov-stat.accent-green  .ov-stat-ic { background: rgba(34,197,94,.15); color: var(--green); }
.ov-stat.accent-purple .ov-stat-ic { background: rgba(168,85,247,.15); color: var(--purple); }

.ov-entries-title { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin: 22px 0 12px; }
.ov-entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ov-entry {
  text-align: left; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; cursor: pointer;
  display: flex; gap: 14px; align-items: center; transition: border-color .15s, background .15s;
}
.ov-entry:hover { border-color: var(--blue); background: #1a1f2e; }
.ov-entry-ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; background: rgba(59,130,246,.15); color: var(--blue); }
.ov-entry-ic.accent-green  { background: rgba(34,197,94,.15); color: var(--green); }
.ov-entry-ic.accent-purple { background: rgba(168,85,247,.15); color: var(--purple); }
.ov-entry-t { font: 600 13.5px 'Inter', sans-serif; color: var(--text); }
.ov-entry-s { font-size: 11.5px; color: var(--text-dim); }

/* ═══ WIDOK DANE I OKRES ═══ */
.data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.data-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.data-card h2 { font: 600 15px 'Inter', sans-serif; color: var(--text); margin-bottom: 8px; }
.data-card h2 i { color: var(--blue); margin-right: 8px; }
.data-card-desc { font-size: 12.5px; color: var(--text-dim); margin-bottom: 18px; line-height: 1.5; }
.data-card-desc code { color: var(--text); }
.data-card .upload-status { margin-top: 12px; }
.data-card input[type="file"] { display: none; }
.data-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.data-hint { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px; }
/* #data-coverage: nadpisz „flex-end" z .data-coverage (dawny nagłówek) na pełną szerokość */
#data-coverage { align-items: stretch; font-size: 13px; gap: 0; color: var(--text-dim); }
.cov-row { display: flex; justify-content: space-between; font-size: 13px; border-bottom: 1px solid var(--bg3); padding: 10px 0; }
.cov-row:last-child { border-bottom: none; }
.cov-row b { color: var(--text); }
.data-note { margin-top: 18px; background: #12151f; border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
.data-note i { color: var(--blue); margin-right: 6px; }
.cov-warn { color: var(--red); }

/* ═══ WIDOK PLACEHOLDER (wspólny) ═══ */
.ph-card { max-width: 640px; margin: 40px auto; text-align: center; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 48px 40px; }
.ph-icon { width: 76px; height: 76px; border-radius: 20px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: rgba(136,153,170,.15); color: var(--text-dim); }
.ph-badge { display: inline-block; background: rgba(234,179,8,.15); color: var(--yellow); font: 700 10px 'Inter', sans-serif; padding: 4px 11px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; animation: vpulse 2s ease-in-out infinite; }
.ph-card h2 { font: 700 22px 'Inter', sans-serif; color: var(--text); margin-bottom: 12px; letter-spacing: -.01em; }
.ph-card p { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin-bottom: 20px; }
.ph-note { display: inline-flex; align-items: center; background: #12151f; border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; font: 500 12.5px 'Inter', sans-serif; color: var(--text-dim); max-width: 100%; }
.ph-note i { color: var(--teal); margin-right: 8px; }
@keyframes vpulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ── Mobilna szuflada nawigacji ────────────────────────────────── */
#nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 150; display: none; }
body.nav-open #nav-overlay { display: block; }

@media (max-width: 880px) {
  #app-main { margin-left: 0; }
  #main-footer { margin-left: 0; }
  #btn-nav-open { display: inline-flex; }
  #sidebar { width: 280px; transform: translateX(-100%); box-shadow: none; }
  #sidebar.expanded { width: 280px; }
  body.nav-open #sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.6); }
  /* Na mobile etykiety zawsze widoczne (szuflada rozwinięta) */
  body.nav-open .side-label,
  body.nav-open .nav-group-title { opacity: 1; }
  body.nav-open .nav-group-title { height: auto; margin: 14px 0 5px; }
  #app-content { padding: 16px 14px 48px; }
  .ctx-row { padding: 10px 14px; }
  #period-panel { padding: 4px 14px 14px; }
  /* Ciasny topbar na mobile: mniejszy profil danych, druga linia znika */
  .hdr-coverage { font-size: 11px; }
  .hdr-coverage .cov-line:last-child { display: none; }
}