/* =========================================================================
   Kalkulator zużycia energii — reskin 2026 (paleta zielona/żółta z projektu).
   Wszystko scoped pod #energy-calc.ec, żeby nie dotykać reszty motywu ani
   nie zderzać się z globalnym Bootstrapem 4.5. Hooki JS bez zmian.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

#energy-calc.ec {
    --ec-dark: #133d33;
    --ec-dark2: #1d5244;
    --ec-green: #1f6b4f;
    --ec-green2: #2e7d5b;
    --ec-lime: #7cbf4a;
    --ec-yellow: #f5d93a;
    --ec-yellow2: #ffe45a;
    --ec-ink: #15332b;
    --ec-muted: #4d6a61;
    --ec-muted2: #6b857c;
    --ec-line: #dde4df;
    --ec-line2: #e3e8e4;
    --ec-soft: #eef6ea;
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ec-ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

#energy-calc.ec *,
#energy-calc.ec *::before,
#energy-calc.ec *::after { box-sizing: border-box; }

/* ---- Wrap / grid ------------------------------------------------------- */
.ec-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ec-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }

/* ---- Top card: kroki + cena ------------------------------------------- */
.ec-top {
    background: #fff; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(19,61,51,.06), 0 8px 24px rgba(19,61,51,.06);
    padding: 20px 24px;
    margin-bottom: 16px;
    display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center;
}
.ec-steps { display: flex; flex-wrap: wrap; gap: 12px 20px; flex: 1 1 520px; }
.ec-step { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 150px; font-size: 14px; line-height: 1.45; }
.ec-step__no {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: #e4f2dc; color: var(--ec-green);
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ec-price { flex: 0 1 240px; display: flex; flex-direction: column; gap: 6px; }
.ec-price__label {
    font-size: 12px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ec-muted); margin: 0;
}
.ec-price__box {
    display: flex; align-items: stretch;
    border: 1.5px solid var(--ec-line); border-radius: 10px; overflow: hidden; background: #fff;
}
.ec-price__input {
    flex: 1; min-width: 0; border: 0; outline: none;
    padding: 11px 12px; font-size: 17px; font-weight: 600; color: var(--ec-ink); background: transparent;
}
.ec-price__unit {
    padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--ec-muted);
    border-left: 1px solid var(--ec-line2); background: #f6f8f5;
    display: flex; align-items: center;
}

/* ---- Kolumna pomieszczeń ---------------------------------------------- */
.ec-rooms { flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ec-rooms__head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 2px 2px 4px;
}
.ec-rooms__title { margin: 0; font-size: 22px; font-weight: 700; color: var(--ec-ink); }
.ec-rooms__clear {
    font-size: 13px; color: var(--ec-muted2); text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer; background: none; border: 0;
}
.ec-rooms__clear:hover { color: var(--ec-ink); }
.ec-accordion { display: flex; flex-direction: column; gap: 10px; }
.ec-rooms__add { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.ec-newroom { flex: 1 1 220px; }

/* ---- Karta pomieszczenia (akordeon) ----------------------------------- */
.ec-room { background: #fff; border: 1px solid var(--ec-line2); border-radius: 14px; overflow: hidden; }
.ec-room__head {
    width: 100%; border: 0; background: transparent; cursor: pointer;
    display: flex; align-items: center; gap: 14px; padding: 15px 18px; text-align: left;
    font-family: inherit; color: inherit;
}
.ec-room__head:hover { background: #f8faf7; }
.ec-room__head:focus { outline: none; }
.ec-room__dot {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    border: 1.5px solid #c7d2cb; box-sizing: border-box; background: transparent;
}
.ec-room.is-active .ec-room__dot { background: var(--ec-lime); border-color: var(--ec-lime); }
.ec-room__name { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.ec-room__kwh { font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--ec-green); }
.ec-room__sign {
    width: 28px; height: 28px; border-radius: 50%; background: #eef3ee;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 600; color: #2e5c4c; flex: none;
}
.ec-room__body { border-top: 1px solid #edf1ed; background: #fbfcfa; }
.ec-room__inner { padding: 10px 18px 18px; display: flex; flex-direction: column; gap: 8px; }

/* ---- Urządzenie -------------------------------------------------------- */
.ec-devs { display: flex; flex-direction: column; gap: 8px; }
.ec-dev { background: #fff; border: 1px solid #e6ebe7; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ec-dev__top { display: flex; align-items: center; gap: 10px; }
#energy-calc.ec input.ec-dev__name {
    /* width:0 (nie auto): pole ma się zwężać, a nie wnosić swojej naturalnej szerokości (size=20) do
       szerokości wiersza — razem z etykietą kWh rozpychało to stronę na telefonach. Rośnie przez flex:1. */
    flex: 1; min-width: 0; width: 0; font-family: inherit;
    border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; margin-left: -6px;
    font-size: 15px; font-weight: 600; color: var(--ec-ink); background: transparent; outline: none;
}
#energy-calc.ec input.ec-dev__name:focus { border-color: #b9cbc0; background: #fff; }
#energy-calc.ec input.ec-dev__name::placeholder { color: #9fb2a8; font-weight: 500; }
.ec-dev__kwh { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--ec-green); }
.ec-dev__remove {
    border: 0; background: transparent; width: 28px; height: 28px; border-radius: 8px;
    color: #8aa197; font-size: 18px; line-height: 1; cursor: pointer; flex: none;
}
.ec-dev__remove:hover { background: #fbe9e7; color: #b3402f; }
.ec-dev__fields { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.ec-field { display: flex; flex-direction: column; gap: 4px; }
.ec-field--power { width: 92px; }
.ec-field--qty { width: 72px; }
.ec-field--time { flex: 1 1 220px; min-width: 0; }
.ec-field__label {
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ec-muted2);
}
.ec-field__hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ec-time { display: flex; align-items: center; gap: 10px; }
.ec-time__val { width: 96px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- Inputy ------------------------------------------------------------ */
#energy-calc.ec .ec-input {
    border: 1.5px solid var(--ec-line); border-radius: 8px; padding: 8px 10px;
    font-size: 15px; font-family: inherit; color: var(--ec-ink); background: #fff;
    outline: none; width: 100%; height: auto; box-shadow: none;
}
#energy-calc.ec .ec-input:focus { border-color: var(--ec-green2); box-shadow: none; }
#energy-calc.ec select.ec-input { appearance: auto; }
/* Pole godzina:minuta ma stałą szerokość — inaczej .ec-input{width:100%} rozpycha je
   na całą szerokość i ściska suwak. Wyższa specyficzność niż reguła .ec-input. */
#energy-calc.ec .ec-time .ec-time__val { flex: 0 0 96px; width: 96px; }

/* Suwak czasu — jednolity wygląd cross-browser (zielony uchwyt na jasnym torze) */
#energy-calc.ec .ec-range {
    -webkit-appearance: none; appearance: none;
    flex: 1; min-width: 0; width: 100%; height: 6px; margin: 0; padding: 0;
    border-radius: 999px; background: #dfe8e2; outline: none; cursor: pointer;
}
#energy-calc.ec .ec-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: #dfe8e2; }
#energy-calc.ec .ec-range::-moz-range-track { height: 6px; border-radius: 999px; background: #dfe8e2; }
#energy-calc.ec .ec-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -6px;
    width: 18px; height: 18px; border-radius: 50%; background: var(--ec-green2);
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer;
}
#energy-calc.ec .ec-range::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; background: var(--ec-green2);
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer;
}

/* ---- Aside: wyniki + metryczka ---------------------------------------- */
.ec-aside {
    flex: 1 1 340px; min-width: 0;
    display: flex; flex-direction: column; gap: 16px;
}

/* Karta wyników (ciemnozielona) */
.ec-result { background: var(--ec-dark); color: #fff; border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.ec-result__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ec-result__title { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
.ec-period { display: flex; background: rgba(255,255,255,.08); border-radius: 9px; padding: 3px; gap: 2px; }
.ec-period__btn {
    border: 0; border-radius: 7px; padding: 6px 11px; font: inherit; font-size: 13px; font-weight: 600;
    background: transparent; color: #cfe0d9; cursor: pointer;
}
.ec-period__btn:hover { color: #fff; }
.ec-period__btn.is-active { background: var(--ec-yellow); color: var(--ec-dark); font-weight: 700; }
.ec-result__totals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ec-total { display: flex; flex-direction: column; gap: 4px; }
.ec-total__label { font-size: 13px; color: #a9c6bb; }
.ec-total__val { font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ec-total__val--cost { color: var(--ec-yellow); }
.ec-total__unit { font-size: 15px; font-weight: 600; color: #a9c6bb; }

/* Tabela podziału w karcie wyników */
.ec-result__print { border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
.ec-result__printtitle { display: none; }
#energy-calc.ec .ec-rtable { width: 100%; margin: 0; color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; }
#energy-calc.ec .ec-rtable th,
#energy-calc.ec .ec-rtable td { padding: 8px 6px; border: 0; vertical-align: top; }
#energy-calc.ec .ec-rtable thead th {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #a9c6bb; background: transparent; border-bottom: 1px solid rgba(255,255,255,.12);
    text-align: right;
}
#energy-calc.ec .ec-rtable thead th:first-child { text-align: left; }
#energy-calc.ec .ec-rtable tbody td { border-top: 1px solid rgba(255,255,255,.10); text-align: right; }
#energy-calc.ec .ec-rtable tbody td.place { text-align: left; font-weight: 600; }
/* Wiersz sumy pomieszczenia — nadpisujemy niebieskie tło Bootstrapa (.table-info),
   które siedzi na SAMYM <tr> (nie tylko na komórkach). */
#energy-calc.ec .ec-rtable tbody tr.table-info,
#energy-calc.ec .ec-rtable tbody tr.table-info td,
#energy-calc.ec .ec-rtable tbody tr.table-info th { background: transparent; background-color: transparent; color: #fff; font-weight: 700; }
#energy-calc.ec .ec-rtable .pln { display: block; font-size: 12px; font-weight: 700; color: var(--ec-yellow); }
/* Na ekranie pokazujemy tylko sumy per pomieszczenie (wiersze .table-info) i łącznie;
   szczegółowe wiersze urządzeń (.table-light) zostają w DOM do PDF, ale są ukryte. */
#energy-calc.ec .ec-rtable tbody tr.table-light { display: none; }
#energy-calc.ec .ec-rtable__total td { background: var(--ec-yellow); border-top: 0; font-weight: 800; text-align: right; color: #133d33; padding: 10px 14px; vertical-align: middle; }
#energy-calc.ec .ec-rtable__total td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
#energy-calc.ec .ec-rtable__total td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
#energy-calc.ec .ec-rtable__total td.place { text-align: left; }
#energy-calc.ec .ec-rtable__total .pln { color: #133d33; }

/* Karta „Dane obiektu" */
.ec-obj {}
.ec-meta { background: #fff; border: 1px solid var(--ec-line2); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ec-meta__title { margin: 0 0 2px; font-size: 18px; font-weight: 700; color: var(--ec-ink); }
.ec-metafield { display: flex; flex-direction: column; gap: 5px; }
.ec-metafield__label { font-size: 13px; font-weight: 600; color: var(--ec-muted); }
.ec-metagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ec-terrain { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ec-terrain__opt { position: relative; }
.ec-terrain__opt input { position: absolute; opacity: 0; pointer-events: none; }
.ec-terrain__opt span {
    display: block; text-align: center; border: 1.5px solid var(--ec-line); background: #fff;
    border-radius: 8px; padding: 9px; font-size: 14px; color: var(--ec-muted); cursor: pointer;
}
.ec-terrain__opt:hover span { border-color: #b9cbc0; }
.ec-terrain__opt input:checked + span { border-color: var(--ec-green2); background: var(--ec-soft); color: var(--ec-ink); font-weight: 600; }

/* Upload zdjęcia */
.ec-photobox { position: relative; }
.ec-photo {
    display: flex; align-items: center; gap: 12px;
    border: 1.5px dashed #c9d5cd; border-radius: 10px; padding: 12px 14px; cursor: pointer;
}
.ec-photo:hover { border-color: var(--ec-lime); background: #f8fbf6; }
.ec-photo input[type=file] { display: none; }
.ec-photo__icon {
    width: 34px; height: 34px; border-radius: 8px; background: #eef3ee; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 18px; color: #2e5c4c;
}
.ec-photo__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ec-photo__title { font-size: 14px; font-weight: 600; }
.ec-photo__hint { font-size: 13px; color: var(--ec-muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zapisane zdjęcie: miniatura zamiast „+" (tło ustawia calc.js), z prawej krzyżyk usuwający zdjęcie. */
.ec-photo.has-photo .ec-photo__icon {
    width: 56px; height: 56px; font-size: 0;
    background-color: #eef3ee; background-size: cover; background-position: center;
}
.ec-photo.has-photo { padding-right: 52px; }
.ec-photo__remove {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    border: 0; background: transparent; width: 28px; height: 28px; border-radius: 8px; padding: 0;
    color: #8aa197; font-size: 18px; line-height: 1; cursor: pointer;
}
.ec-photo__remove:hover { background: #fbe9e7; color: #b3402f; }
.ec-photo__remove[hidden] { display: none; }

/* ---- Przyciski --------------------------------------------------------- */
#energy-calc.ec .ec-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px; padding: 11px 18px;
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
    line-height: 1.2;
}
#energy-calc.ec .ec-btn--dark { background: var(--ec-dark); color: #fff; }
#energy-calc.ec .ec-btn--dark:hover { background: var(--ec-dark2); color: #fff; }
#energy-calc.ec .ec-btn--ghost {
    background: transparent; border: 1.5px dashed #b9cbc0; color: var(--ec-green);
    padding: 9px 14px; font-size: 14px;
}
#energy-calc.ec .ec-btn--ghost:hover { background: var(--ec-soft); border-color: var(--ec-lime); color: var(--ec-green); }
#energy-calc.ec .ec-btn--pdf {
    width: 100%; margin-top: 14px; background: var(--ec-yellow); color: var(--ec-dark);
    font-size: 16px; font-weight: 700; padding: 13px 18px;
}
#energy-calc.ec .ec-btn--pdf:hover { background: var(--ec-yellow2); color: var(--ec-dark); }

/* ---- Responsywność ----------------------------------------------------- */

/* Tabela wyników zawsze przewijalna w poziomie, gdy się nie mieści (mobilki).
   width:0 + min-width:100%: sama min-szerokość tabeli (440 px) rozpychała całą treść strony (kontener
   flex bez możliwości zwężenia), więc na telefonach poniżej ok. 490 px strona była szersza od ekranu.
   Tak blok nie wnosi nic do obliczania szerokości rodzica, a układ zostaje pełnoszerokościowy. */
#energy-calc.ec .ec-result__print { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 0; min-width: 100%; }

/* Desktop: podciągnij górę kalkulatora (o 24 px) */
@media (min-width: 601px) {
    .ec-top { margin-top: -24px; }
    /* Gdy nad kartą jest pasek zapisu (calc-sync), to on przejmuje podciągnięcie, a karta zostaje w zwykłym
       odstępie od niego — inaczej jej ujemny margines (−24 px) wchodziłby na pasek (odstęp 20 − 24 = −4 px). */
    #energy-calc.ec .cs-bar:not([hidden]) { margin-top: -24px; }
    #energy-calc.ec .cs-bar:not([hidden]) + .ec-top { margin-top: 0; }
}

@media (max-width: 900px) {
    .ec-aside { position: static; }
}

@media (max-width: 600px) {
    /* Kroki jeden pod drugim + cena na całą szerokość */
    .ec-steps { flex-direction: column; }
    .ec-step { flex: 0 0 auto; }   /* inaczej basis 150px staje się wysokością w kolumnie */
    .ec-price { flex: 1 1 100%; }

    /* Mniejsze, niepotrzebne paddingi poziome na wąskich ekranach */
    .ec-top { padding: 16px 14px; }
    .ec-result { padding: 16px 14px; }
    .ec-meta { padding: 16px 14px; }
    .ec-room__head { padding: 13px 14px; }
    .ec-room__inner { padding: 8px 12px 14px; }
    .ec-dev { padding: 10px 12px; }

    /* Duże sumy jedna pod drugą + nieco mniejszy font */
    .ec-result__totals { grid-template-columns: 1fr; }
    .ec-total__val { font-size: 24px; }

    /* Pola urządzenia: moc i liczba obok siebie, czas na całą szerokość */
    .ec-field--power, .ec-field--qty { width: calc(50% - 7px); }
    .ec-field--time { flex-basis: 100%; }
    .ec-metagrid { grid-template-columns: 1fr 1fr; }

    /* Tabela wyników szersza niż ekran → przewijanie w poziomie zamiast łamania liczb */
    #energy-calc.ec .ec-rtable { min-width: 440px; }

    /* Nagłówki sekcji trochę mniejsze */
    .ec-rooms__title { font-size: 20px; }
    .ec-result__title { font-size: 17px; }
    /* Bez marginesu górnego na tytule karty wyników (motyw narzuca go na nagłówki) */
    #energy-calc.ec .ec-result__title { margin-top: 0; }

    /* Kontener strony bez zbędnego paddingu poziomego — kalkulator na całą szerokość */
    .statut__grid { padding-left: 0; padding-right: 0; }
}

/* ---- Druk (window.print fallback) ------------------------------------- */
@media print {
    .noprint { display: none !important; }
    #energy-calc.ec .ec-rtable tbody tr.table-light { display: table-row; }
    .ec-result { background: #fff; color: #000; }
}