/* Tarifa, foglalás, pénzügy és üzemeltetői lap.

   A színek **tokenekből** jönnek, nem beírt hexből. Ez nem szépészeti döntés: a
   `theme.css` egy utólagos tokenréteg, ami felsorolt osztályokat hangol át, és
   amit itt beírunk hexben, azt a sötét mód nem tudja követni. Két hibát láttunk
   emiatt ezen a lapon:

     - a `.tariff-card{background:#fff}` fehér táblává vált a sötét lapon,
       mert a `theme.css` ezt az osztályt nem ismerte;
     - a `#tariffs-page .section-title{color:#1d2440}` **erősebb** (id+osztály),
       mint a `theme.css` `.section-title{color:var(--ink)}` szabálya, tehát a
       címsor sötét kéken maradt a sötét háttéren - gyakorlatilag olvashatatlanul.

   A tokennel mindkettő megszűnik, és a specificitás sem számít többé: ugyanaz a
   szabály jó mindkét témában. Két szín marad szándékosan literál: az energiamix
   sávjának napenergia-sárgája és hálózat-türkize, mert azok adatcsatornát
   jelölnek, nem felületet - a jelentésük nem függ a témától. */
.tariff-toolbar,.reservation-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.tariff-toolbar #tariff-summary,.reservation-toolbar #reservation-count{font:700 12px Inter,system-ui,sans-serif;color:var(--ink-2)}
#tariffs-page .section-title,#reservations-page .section-title{margin:26px 0 10px;font-size:14px;color:var(--ink)}
#tariffs-page .section-help,#reservations-page .section-help{margin:-6px 0 12px;font-size:12px;color:var(--ink-3)}

.tariff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:14px}
.tariff-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--hairline);border-left:4px solid var(--accent);border-radius:12px;background:var(--surface)}
.tariff-card.is-inactive{border-left-color:var(--hairline);background:var(--surface-2);opacity:.85}
.tariff-card header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.tariff-card header b{font-size:13.5px;color:var(--ink)}
.tariff-badges{display:flex;flex-wrap:wrap;gap:5px}
/* Ugyanaz a merteke, mint a platform tobbi allapot-cimkejenek
   (`.login-state`, platform.css): 11px/700, 3px 10px. A 10.5px/800 itt
   szorosabbra huzta a szoveget, mint barhol mashol a feluleten. */
.tariff-badge{padding:3px 10px;border-radius:999px;font:700 11px Inter,system-ui,sans-serif;font-style:normal;background:var(--surface-3);color:var(--ink-3)}
.tariff-badge.is-default{background:var(--ok-tint);color:var(--ok-ink)}
.tariff-badge.is-off{background:var(--bad-tint);color:var(--bad-ink)}
/* A uzemmod nem dekoracio: teszt modban semmi nem valodi, elesben minden az.
   Ezert kap sajat, figyelmeztetes-szeru szint, nem a semleges alapot. */
.tariff-badge.is-test{background:var(--warn-tint);color:var(--warn-ink)}
.tariff-badge.is-live-keys{background:var(--ok-tint);color:var(--ok-ink)}
#finance-summary.is-test-mode{color:var(--warn-ink);font-weight:700}
.tariff-meta{margin:0;font-size:11.5px;color:var(--ink-3)}
.tariff-note{margin:0;font-size:12px;color:var(--ink-2);line-height:1.5}
.tariff-card footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.tariff-card footer small{font-size:11px;color:var(--ink-3)}
.tariff-card footer button{padding:5px 12px;font-size:11px}

.tariff-period-table,.tariff-quote-table,.session-price-table{width:100%;border-collapse:collapse;font-size:12px}
.tariff-period-table th,.tariff-quote-table th,.session-price-table th{text-align:left;padding:7px 9px;font:700 10.5px Inter,system-ui,sans-serif;color:var(--ink-3);background:var(--surface-3);border-bottom:1px solid var(--hairline);text-transform:uppercase;letter-spacing:.4px}
.tariff-period-table td,.tariff-quote-table td,.session-price-table td{padding:7px 9px;border-bottom:1px solid var(--hairline-2);color:var(--ink-2)}
.tariff-period-table tr:last-child td,.tariff-quote-table tr:last-child td,.session-price-table tr:last-child td{border-bottom:none}
.tariff-period-table b{color:var(--ink)}
.tariff-period-table small{color:var(--ink-3)}
.tariff-na{color:var(--ink-3);opacity:.6}
.session-price-table{margin-top:8px;border:1px solid var(--hairline);border-radius:10px;overflow:hidden}
.session-unpriced{color:var(--warn-ink);font-weight:700}

/* Hozzárendelés: egy sor egy hatókör, mentés azonnal a választásra. */
.tariff-assign{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:6px 16px 14px}
.tariff-assign h3{margin:16px 0 6px;font:700 11px Inter,system-ui,sans-serif;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px}
.tariff-assign-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--hairline-2);transition:background .2s}
.tariff-assign-row:last-child{border-bottom:none}
.tariff-assign-row.is-saved{background:var(--ok-tint)}
.tariff-assign-row b{display:block;font-size:12.5px;color:var(--ink)}
.tariff-assign-row small{display:block;margin-top:2px;font-size:11px;color:var(--ink-3)}
.tariff-assign-row select{min-width:230px;padding:5px 7px;border:1px solid var(--hairline);border-radius:7px;font:600 12px Inter,system-ui,sans-serif;color:var(--ink);background:var(--surface-2)}

.tariff-quote{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:14px 16px;background:var(--surface);border:1px solid var(--hairline);border-radius:12px}
.tariff-quote label{display:flex;flex-direction:column;gap:4px;font:700 11px Inter,system-ui,sans-serif;color:var(--ink-3)}
.tariff-quote input,.tariff-quote select{padding:6px 8px;border:1px solid var(--hairline);border-radius:7px;font:600 12px Inter,system-ui,sans-serif;color:var(--ink);background:var(--surface-2)}
.tariff-quote-result{flex:1 1 100%;font-size:12px;color:var(--ink-2)}
.tariff-quote-result b{font-size:15px;color:var(--ink)}
.tariff-quote-result small,.session-price-table+small{display:block;margin-top:4px;font-size:11px;color:var(--ink-3)}
.tariff-warning{color:var(--warn-ink)}

/* Idősáv-szerkesztő a tarifa párbeszédben. */
.tariff-period-title{margin:18px 0 2px;font-size:13px;color:var(--ink)}
.tariff-period-head,.tariff-period-row{display:grid;grid-template-columns:1.6fr 1fr .8fr .8fr 1fr 1fr 32px;gap:8px;align-items:center}
.tariff-period-head{padding:0 0 4px;font:700 10.5px Inter,system-ui,sans-serif;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px}
.tariff-period-row{margin-bottom:7px}
.tariff-period-row input,.tariff-period-row select{width:100%;padding:6px 8px;border:1px solid var(--hairline);border-radius:7px;font:600 12px Inter,system-ui,sans-serif;color:var(--ink);background:var(--surface-2)}
.tariff-period-row button{padding:5px 0;font-size:13px;line-height:1}
#tariff-add-period{margin-top:4px;padding:5px 12px;font-size:11px}
#tariff-dialog{max-width:900px}

/* Foglalás. */
.reservation-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.reservation-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--hairline);border-left:4px solid var(--ok);border-radius:12px;background:var(--surface)}
.reservation-card.is-pending{border-left-color:var(--warn)}
.reservation-card header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.reservation-card header b{font-size:13px;color:var(--ink)}
.reservation-card p{margin:0;font-size:12px;color:var(--ink-2)}
.reservation-card small{font-size:11px;color:var(--ink-3)}
.reservation-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.reservation-card footer button{padding:5px 12px;font-size:11px}
.reservation-badge{padding:2px 9px;border-radius:999px;font:800 10.5px Inter,system-ui,sans-serif;font-style:normal;background:var(--ok-tint);color:var(--ok-ink)}
.reservation-card.is-pending .reservation-badge{background:var(--warn-tint);color:var(--warn-ink)}

.reservation-table table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.reservation-table th{text-align:left;padding:10px 12px;font:700 11px Inter,system-ui,sans-serif;color:var(--ink-3);background:var(--surface-3);border-bottom:1px solid var(--hairline);text-transform:uppercase;letter-spacing:.4px}
.reservation-table td{padding:10px 12px;border-bottom:1px solid var(--hairline-2);font-size:12px;color:var(--ink-2)}
.reservation-table tr:last-child td{border-bottom:none}
.reservation-state{padding:2px 9px;border-radius:999px;font:700 11px Inter,system-ui,sans-serif;background:var(--surface-3);color:var(--ink-3)}
.reservation-state.is-used{background:var(--ok-tint);color:var(--ok-ink)}
.reservation-state.is-expired,.reservation-state.is-cancelled{background:var(--surface-3);color:var(--ink-3)}
.reservation-state.is-rejected,.reservation-state.is-faulted,.reservation-state.is-occupied,.reservation-state.is-unavailable{background:var(--bad-tint);color:var(--bad-ink)}

/* Az ár két sorban olvasható: bruttó nagyban, nettó alatta halványan. */
#sessions-list td small,#session-detail dd small{display:block;margin-top:2px;font-size:11px;color:var(--ink-3);font-weight:400}
#session-detail dd b{font-size:13.5px;color:var(--ink)}

/* Pénzügy oldal. */
.provider-grid-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.provider-card{display:flex;flex-direction:column;gap:9px;padding:14px 16px;border:1px solid var(--hairline);border-left:4px solid var(--ok);border-radius:12px;background:var(--surface)}
.provider-card.is-off{border-left-color:var(--hairline);background:var(--surface-2)}
.provider-card header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.provider-card header b{font-size:13.5px;color:var(--ink)}
.provider-card header span{display:flex;align-items:center;gap:8px}
.provider-note,.provider-warn{margin:0;font-size:11.5px}
.provider-note{color:var(--ink-3)}
.provider-warn{color:var(--warn-ink)}
.provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.provider-grid label{display:flex;flex-direction:column;gap:4px;font:700 11px Inter,system-ui,sans-serif;color:var(--ink-3)}
.provider-grid input{padding:6px 8px;border:1px solid var(--hairline);border-radius:7px;font:600 12px Inter,system-ui,sans-serif;color:var(--ink);background:var(--surface-2)}
.wallet-row{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--ink-2)}
.wallet-row label{display:flex;align-items:center;gap:7px;cursor:pointer}
.provider-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:4px}
.provider-default{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.provider-card footer button{padding:5px 12px;font-size:11px}
.qr-url{font-size:11px;color:var(--ink-2);word-break:break-all;max-width:280px}
#qr-list code,#payment-list code{background:var(--surface-3);padding:2px 6px;border-radius:5px;font-size:11.5px;letter-spacing:.08em}
#qr-list small,#payment-list small{display:block;margin-top:2px;font-size:11px;color:var(--ink-3)}
#qr-list button,#payment-list button{padding:4px 10px;font-size:11px;margin-right:4px}
.payment-state{padding:2px 9px;border-radius:999px;font:700 11px Inter,system-ui,sans-serif;background:var(--surface-3);color:var(--ink-3)}
.payment-state.is-captured{background:var(--ok-tint);color:var(--ok-ink)}
.payment-state.is-authorized{background:var(--warn-tint);color:var(--warn-ink)}
.payment-state.is-failed{background:var(--bad-tint);color:var(--bad-ink)}
.payment-error{color:var(--bad-ink)}
.qr-off{color:var(--warn-ink);font-weight:700}
.qr-charger-row td{background:var(--surface-3);border-top:1px solid var(--hairline)}
.qr-charger-row b{font-size:12.5px;color:var(--ink)}
.qr-mode{padding:5px 7px;border:1px solid var(--hairline);border-radius:7px;font:600 11.5px Inter,system-ui,sans-serif;background:var(--surface-2);color:var(--ink)}
/* Üzemeltetői adatok: az üzemmód a legfontosabb döntés, ezért kártyaként választható. */
.operator-mode{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:14px}
.mode-card{text-align:left;padding:16px;border:1px solid var(--hairline);border-radius:12px;background:var(--surface);cursor:pointer;display:grid;gap:5px}
.mode-card b{font-size:14px;color:var(--ink)}
.mode-card small{font-size:12px;color:var(--ink-3);line-height:1.5}
.mode-card.active{border-color:var(--live);background:var(--live-tint);box-shadow:0 0 0 1px var(--live) inset}
#operator-form .form-grid{padding:0;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
#operator-form .form-grid small{font-weight:400;color:var(--ink-3)}
#operator-form .form-grid code{background:var(--surface-3);padding:1px 5px;border-radius:4px}
#operator-form .modal-actions{padding:8px 0 0;justify-content:flex-start}
.evse-input{width:100%;padding:6px 8px;border:1px solid var(--hairline);border-radius:7px;font:600 12px ui-monospace,Menlo,Consolas,monospace;color:var(--ink);background:var(--surface-2)}
#afir-list tr.is-saved td{background:var(--ok-tint)}
#afir-list code{background:var(--surface-3);padding:2px 6px;border-radius:5px;font-size:11.5px}
#afir-list small{display:block;margin-top:2px;font-size:11px;color:var(--ink-3)}
/* A keszulek beallitasa a "Kijelzes es nyilvanossag..." ablakban el, nem a
   listaban: igy egy tolto EGY sort foglal csatlakozonkent, es a tablazatban
   csak adat marad. A csuszka ugyanaz, mint a riasztasoknal. */
.form-grid label.qr-public{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.qr-public b{display:block;font-size:12px;color:var(--ink)}
.qr-public .alert-toggle{margin-top:2px;flex:none}
/* A sormenu kapcsoloja a toltopont-listaebol ismeros - csak tokenekkel, mert a
   theme.css utolagos reteg, es egy beirt hex csendben elrontana a sotet modot. */
.qr-actions{text-align:right}
.qr-actions .action-menu-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--hairline);border-radius:7px;background:var(--surface-3);color:var(--ink-2);font:700 11px Inter,system-ui,sans-serif;padding:6px 10px;cursor:pointer;white-space:nowrap}
.qr-actions .action-menu-toggle:hover:not(:disabled){border-color:var(--accent);background:var(--accent-tint);color:var(--accent-ink)}
.qr-actions .action-menu-toggle:disabled{opacity:.6;cursor:default}
.qr-actions .action-menu-toggle span{font-size:13px;line-height:1}
.qr-actions .action-menu-toggle[aria-expanded="true"] span{transform:rotate(180deg)}

/* Energiamix a töltés részleteinél. A sáv két színe adatcsatorna - napenergia és
   hálózat -, ezért szándékosan literál: a jelentésük nem függ a témától. */
.energy-mix{display:flex;align-items:center;gap:10px;margin-top:4px}
.energy-mix-bar{flex:1;height:9px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.energy-mix-bar i{display:block;height:100%;background:linear-gradient(90deg,#f5b700,#0ba8a4)}
.energy-mix b{font-size:13px;color:var(--ink);white-space:nowrap}
#session-detail dd .energy-mix-note{display:block;margin-top:5px;font-size:10.5px;color:var(--ink-3);line-height:1.45;font-weight:400}

/* Az Idősávok blokk ugyanazon a hasábon álljon, mint fölötte minden más.

   Az „Idősávok" cím, a magyarázata és a sávok táblázata a `form-grid`-en KÍVÜL
   áll, tehát nem kapja meg annak a belső margóját. Ezt egy korábbi javítás már
   észrevette, de 4px-szel pótolta - az ablak többi blokkja viszont 28px-en áll
   (`.modal-header`, `.form-grid`, `.modal-actions`, `.error`). Az eredmény
   rosszabb volt, mint a semmi: a sávok sora 24px-szel TÚLLÓGOTT a fölötte lévő
   mezőkön, tehát úgy nézett ki, mintha kifutna a kártyából.

   Ezért itt nem szám áll, hanem ugyanaz a szám: a többi blokké. Ha az ablak
   margója valaha változik, ezt is vinni kell vele - ezért egy helyen, egyetlen
   szabályban. */
#tariff-dialog .tariff-period-title,
#tariff-dialog > form > .section-help,
#tariff-dialog .tariff-period-head,
#tariff-dialog #tariff-period-rows { padding-inline: 28px; }
#tariff-dialog .tariff-period-title { margin-top: 22px; }
/* A gombnak MARGO kell, nem belso margo: a `padding` nala nem eltol, hanem
   felfuj - a felirata beljebb kerulne, a hattere viszont a kartya szeleig
   futna. */
#tariff-dialog #tariff-add-period { margin-inline-start: 28px; }

/* Keskeny kijelzőn az ablak margója 18px-re szűkül (`app.css` 460px-es
   töréspontja) - a sávok is kövessék, különben ott áll elő ugyanaz a csúszás. */
@media (max-width: 460px) {
  #tariff-dialog .tariff-period-title,
  #tariff-dialog > form > .section-help,
  #tariff-dialog .tariff-period-head,
  #tariff-dialog #tariff-period-rows { padding-inline: 18px; }
  #tariff-dialog #tariff-add-period { margin-inline-start: 18px; }
}


/* A megjegyzes ablakban, nem a sorban.

   A szamlazo valasza egesz mondat ("invalid API key provided..."), es amig a
   cellaban allt, harom sor magasra huzta az egesz tablazatot - EGY hibas
   tranzakcio miatt is. A sorban ezert csak egy gomb marad; a szoveg valtozatlanul
   megvan, csak egy kattintasnyira. Szo szerint mutatjuk: abbol derul ki, melyik
   mezon kell igazitani. */
#payment-note-dialog{width:min(560px,94vw)}
.payment-note-body{display:grid;gap:14px;padding:20px 28px}
.payment-note-body section{display:grid;gap:5px}
.payment-note-body b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.payment-note-body p{margin:0;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.payment-note{white-space:nowrap}
.payment-note.is-error{background:var(--bad-tint);color:var(--bad-ink)}

/* Az alcimke sajat sorba.

   A `<small>` alapertelmezesben soron belul all, tehat a cellaban a fo ertekhez
   TAPADT: "stripecard", "ART-2026-1nyugta", "adhoc-9f2a2026. 09. 09.". Harom
   informacio egy szokent - ettol tunt zsufoltnak a lista, meg a hosszu
   hibaszoveg nelkul is.

   Sajat jelolo, nem a `.reservation-table` egesze: a tarifa- es a
   foglalas-tablaban ugyanez a szerkezet mast jelent, es nem ez a kerdes most. */
.stacked-cells td small{display:block;font-size:11px;line-height:1.35;margin-top:3px}

/* Ütemezett töltés a foglalások lapján (Otthon-csomag, 2026-09-13). Csak tokenek. */
.schedule-block{margin-bottom:22px}
.schedule-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px}
.schedule-head .section-title{margin:0 0 4px}
.schedule-head .section-help{margin:0}
.schedule-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.schedule-list .empty{grid-column:1/-1}
.schedule-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--hairline);border-left:4px solid var(--ink-3);border-radius:12px;background:var(--surface)}
.schedule-card.is-planned{border-left-color:var(--warn)}
.schedule-card.is-started{border-left-color:var(--accent)}
.schedule-card.is-stopped{border-left-color:var(--ok)}
.schedule-card.is-failed{border-left-color:var(--bad)}
.schedule-card header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.schedule-card header b{font-size:13px;color:var(--ink)}
.schedule-card p{margin:0;font-size:12px;color:var(--ink-2);min-height:1em}
.schedule-card small{font-size:11px;color:var(--ink-3)}
.schedule-card .schedule-error{color:var(--bad-ink);background:var(--bad-tint);padding:6px 8px;border-radius:8px}
.schedule-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.schedule-history{grid-column:1/-1;display:grid;gap:10px}
.schedule-history summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--ink-2)}
.schedule-history .schedule-card{opacity:.8}
#schedule-add{white-space:nowrap}