/* Design system KonfiguratorMPS — przeniesiony ze szkicu portalu (konfigurator_mps.html).
   Etap 0: bazowe komponenty. Kolejne etapy przenoszą resztę stylów 1:1. */

:root{
  --orange:#f47c20;
  --orange-dark:#df5f00;
  --black:#151515;
  --line:#dedede;
  --green:#11823b;
  --red:#c62828;
  --header-bg:#f7f7f8;
  --header-text:#202124;
  --soft-line:#e9e9ec;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:#fff;
  color:#1d1d1f;
}

.top{
  border-top:5px solid var(--orange);
  padding:7px 12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
}

.logo{min-height:42px;display:flex;align-items:center;flex:0 0 auto}
.top h1{flex:1 1 260px;min-width:0}
.logo img{width:140px;max-width:100%;max-height:44px;height:auto;object-fit:contain;object-position:left center;display:block}
.logo-fallback{display:flex;align-items:flex-start;flex-direction:column;line-height:1}
.logo-tag{font-size:12px;font-weight:800;color:#5b6b88;letter-spacing:.14em;white-space:nowrap}
.logo-tiles{display:inline-flex;gap:4px;margin-top:5px}
.logo-tiles i{
  font-style:normal;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:#e8824e;
  color:#fff;
  font-weight:800;font-size:19px;
  border-radius:6px;
}

h1{margin:0;text-align:left;font-size:22px;text-transform:uppercase;letter-spacing:.06em}

.shell{padding:0}

.card{
  border:1px solid var(--soft-line);
  overflow:hidden;
  margin-bottom:10px;
}

.table-wrap{overflow:auto;position:relative}

table{width:100%;border-collapse:separate;border-spacing:0}
th{
  position:sticky;top:0;z-index:3;
  background:var(--header-bg);color:var(--header-text);
  font-size:11px;font-weight:700;line-height:1.22;padding:7px 6px;text-align:center;
  border-bottom:2px solid rgba(244,124,32,.45);
  border-right:1px solid var(--soft-line);
}
td{
  border-top:1px solid var(--soft-line);
  border-right:1px solid var(--soft-line);
  padding:7px 6px;font-size:12px;text-align:center;vertical-align:middle;
}
td:last-child,th:last-child{border-right:0}
tbody tr:hover td{background:#fcfcfd}

input,select{
  width:100%;height:34px;border:1px solid #ccc;border-radius:7px;
  padding:5px 7px;font-size:12px;text-align:center;background:#fff;
}
/* Checkboxy wyłamane z reguły wyżej (width:100%;height:34px) — bez tego rysowały się
   jako wielkie kwadraty na całą szerokość kolumny. */
input[type="checkbox"]{
  width:16px;height:16px;flex:0 0 auto;margin:0;padding:0;
  border-radius:4px;accent-color:var(--orange-dark);cursor:pointer;
}
/* Grupa checkboxów w jednej komórce siatki: „Mono / Kolor / Aktywne" w rzędzie,
   rozłożone na całą szerokość pola i wyrównane dolną krawędzią do pól obok. */
.field.checks{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px;flex-wrap:wrap;min-height:39px;
}
.field.checks label{
  display:inline-flex;align-items:center;gap:8px;
  margin:0;white-space:nowrap;cursor:pointer;
  font-size:13px;font-weight:600;
}
.field.checks input[type="checkbox"]{width:21px;height:21px;border-radius:5px}
input:disabled{background:#f2f2f2;color:#767676}
input.missing{border:2px solid #d60000!important;background:#fff4f4!important}

button{height:34px;border-radius:8px;padding:0 14px;font-weight:700;text-transform:uppercase;cursor:pointer}
a.btn-link{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;border-radius:8px;padding:0 14px;
  font-weight:700;text-transform:uppercase;font-size:13px;
  text-decoration:none;cursor:pointer;
}
a.btn-link.mini-btn{height:32px;padding:0 10px;font-size:11px}
a.btn-link.tab-btn{height:34px}

/* widoczny fokus dla klawiatury (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--orange-dark);
  outline-offset:2px;
}

/* link pomijający do treści */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#fff;color:var(--orange-dark);padding:8px 14px;font-weight:700;
}
.skip-link:focus{left:8px;top:8px}
.primary{background:linear-gradient(#ff8b35,#f26b10);color:#fff;border:1px solid var(--orange-dark)}
.secondary,.reset{background:#fff;color:var(--orange-dark);border:1px solid var(--orange-dark)}
.mini-btn{height:32px;padding:0 10px;font-size:11px}

.tab-btn{background:#fff;color:var(--orange-dark);border:1px solid var(--orange-dark);height:34px}
.tab-btn.active{background:linear-gradient(#ff8b35,#f26b10);color:#fff}

/* podświetlenie przycisków po najechaniu — cały portal */
button,a.btn-link{transition:background-color .15s,box-shadow .15s,filter .15s}
button:hover,a.btn-link:hover{box-shadow:0 1px 6px rgba(244,124,32,.30)}
.secondary:hover,.reset:hover,.tab-btn:hover{background-color:#fff1e6}
.primary:hover,.tab-btn.active:hover{filter:brightness(1.09)}

/* nagłówek tylko dla czytników ekranu (WCAG) — wizualnie zastępuje go aktywna zakładka */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* pasek filtrów nad listą: pola i przyciski w jednym wierszu od lewej */
form.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
form.filters input[type="search"]{width:260px}
form.filters select{width:auto;min-width:150px}
form.filters .filters-actions{display:flex;gap:8px;align-items:center}

/* kolumna akcji w tabelach: przyciski równo przy prawej krawędzi */
th.akcje,td.akcje{text-align:right}
td.akcje>div{display:flex;gap:6px;justify-content:flex-end}

/* status (np. kontraktu) — plakietka informacyjna, nie przycisk */
.status-pill{
  display:inline-flex;align-items:center;height:26px;padding:0 14px;border-radius:999px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:#f1f5f9;color:#3f4c63;
}

.main-nav{
  padding:8px 12px;
  border-top:1px solid var(--soft-line);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:8px 12px;
  align-items:center;
  flex-wrap:wrap;
  background:#fff;
}
.nav-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nav-tabs a{text-decoration:none}
.user-info{font-size:12px;color:#555;display:flex;align-items:center}

.flash{padding:9px 14px;font-size:13px;border-bottom:1px solid var(--line)}
.flash-success{background:#f0faf3;color:var(--green)}
.flash-error{background:#fff4f4;color:var(--red)}

.money{white-space:nowrap;font-variant-numeric:tabular-nums}
.profit{font-weight:700;color:var(--green)}
.loss{color:var(--red)}
.green{color:var(--green)!important}
.red{color:var(--red)!important}

.form{padding:16px}
.form h2{margin:0 0 12px;color:var(--orange-dark);text-transform:uppercase;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px}
.field label{font-size:11px;display:block;margin-bottom:5px}
.field input{text-align:left}
.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}

@media(max-width:900px){
  h1{font-size:20px}
  .grid{grid-template-columns:1fr}
  .actions{flex-direction:column}
}

/* ===== Konfigurator (przeniesione ze szkicu) ===== */

.bar{
  padding:6px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:8px 14px;
  align-items:center;
  flex-wrap:wrap;
}
.bar b{font-size:13px}
.bar .small-select{width:150px}
.bar select{height:34px}

.global-check{display:flex;align-items:center;gap:8px;font-size:13px}
.global-check input{width:18px;height:18px;accent-color:var(--orange)}

.install-panel{
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:8px 10px;
  align-items:center;
  flex-wrap:wrap;
  background:#fffaf5;
  font-size:13px;
}
.install-panel b{font-size:13px}
/* 18.09.2026: checkboxy w panelu instalacji wyglądają jak „Instalacja urządzeń przez THI”
   (.global-check) — reguła szerokości/wysokości dotyczy tylko pól tekstowych i list */
.install-panel select,.install-panel input:not([type=checkbox]){height:34px;width:150px}

.summary{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
  padding:5px 8px;
  background:#fafafa;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sum{border:1px solid #eee;border-radius:8px;padding:4px 6px;background:#fff;text-align:center}
.sum span{display:block;font-size:10px;margin-bottom:2px}
.sum strong{font-size:15px;color:var(--orange-dark)}

.device{text-align:left;display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center}
.device img{width:54px;max-height:62px;object-fit:contain;display:block}
.type{font-weight:700}
.model{margin-top:3px;color:#444;word-break:break-word}
.speed{margin-top:3px;font-size:11px;color:#6d6d6d}
.standard-option{margin-top:4px;font-size:11px;color:#666;line-height:1.25}

.options-compact{
  margin-top:6px;display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px;border:1px solid #ddd;border-radius:999px;background:#fff;
  font-size:11px;color:#333;
}
.options-compact b{color:var(--orange-dark)}
.option-link{
  border:0;background:transparent;color:var(--orange-dark);height:auto;padding:0;
  font-size:11px;font-weight:700;text-transform:none;text-decoration:underline;
}

.inactive-row td{background:#f7f7f7}
.inactive-row input:not([id^="qty"]){background:#eeeeee;color:#767676;border-color:#ddd}

.color-row td{background:#fff9f1}
.color-row td:first-child{border-left:5px solid #f47c20}
.color-row.inactive-row td{background:#fbf5ec}
.color-badge{ /* 10px dopuszczalne: etykieta dekoracyjna */
  display:inline-flex;align-items:center;gap:4px;margin-bottom:4px;padding:3px 7px;
  border-radius:999px;background:#f47c20;color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.42);display:none;
  align-items:center;justify-content:center;z-index:50;padding:18px;
}
.modal-backdrop.show{display:flex}
.modal{
  width:min(760px,96vw);max-height:86vh;overflow:auto;background:#fff;
  border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.28);border:1px solid #ddd;
}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #eee}
.modal-head h3{margin:0;font-size:18px;color:var(--orange-dark)}
.modal-close{width:34px;height:34px;padding:0;border:1px solid #ddd;background:#fff;color:#333;border-radius:8px;font-size:18px;text-transform:none}
.modal-body{padding:14px 16px}
.modal-standard{padding:10px 12px;border:1px solid #eee;border-radius:10px;background:#fafafa;font-size:12px;margin-bottom:12px}
.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid #eee;background:#fafafa}
.modal-total{font-size:14px}
.modal-total strong{color:var(--orange-dark);font-size:18px}

.option-row{
  display:grid;grid-template-columns:1fr 110px 115px 145px;gap:10px;align-items:center;
  padding:10px 0;border-top:1px solid #eee;font-size:12px;
}
.option-row:first-of-type{border-top:0}
.option-row strong{display:block;font-size:13px;margin-bottom:2px}
.option-qty input{max-width:100px}
.option-qty small{display:block;margin-top:3px;color:#6d6d6d;font-size:11px}
.option-price{text-align:right;font-weight:700;white-space:nowrap}

.location-note{font-size:12px;color:#555;line-height:1.4;margin-bottom:10px}
.location-summary{font-size:12px;color:#333;margin-top:8px;line-height:1.45}
.location-device-card{border:1px solid #eee;border-radius:12px;margin-bottom:12px;overflow:hidden;background:#fff}
.location-device-head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px;background:#fffaf5;border-bottom:1px solid #eee}
.location-device-title b{display:block;font-size:13px}
.location-device-title span{font-size:11px;color:#666}
.location-assign-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(130px,1.4fr) 90px;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid #f0f0f0;font-size:12px}
.location-assign-row:first-of-type{border-top:0}
.location-assign-row input{height:32px;text-align:center}
.location-address{color:#666;font-size:11px;line-height:1.25}

.info{padding:10px 16px;border-top:1px solid #eee;font-size:12px;color:#555;display:flex;gap:30px;flex-wrap:wrap}

@media(max-width:900px){
  .summary{grid-template-columns:repeat(2,1fr)}
  .bar select,.install-panel select,.install-panel input{width:100%}
}

/* Strona logowania: logo wyśrodkowane, tytuł pod spodem */
.top-centered{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  padding:26px 12px 14px;
}
.top-centered .logo-fallback{align-items:center}
.top-centered h1{
  text-align:center;
  color:#3f4c63;
  text-transform:none;
  letter-spacing:normal;
  font-size:19px;
  font-weight:600;
}

/* U2: komunikat o testowym GUS */
.gus-sandbox{margin-top:6px;padding:8px 10px;border-radius:6px;background:#fff8e1;border:1px solid #f1d38a;color:#6b4e00;font-size:12.5px;line-height:1.4}