/* Panel hostingu — styl wg standardu paneli utility PayZO (skill payzo-design → DESIGN.md).
   Nazwy klas celowo takie same jak w admin2, żeby panele wyglądały jak rodzina. */

:root{
  --mark:#277ABD; --mark-light:#A0D4FF; --mark-dark:#105A96;
  --bs-primary:#277ABD;
  --tekst:#1e293b; --tekst-muted:#64748b; --ramka:#e2e8f0;
  --tlo:#f1f5f9; --karta:#ffffff;
  --sidebar:#0f172a; --sidebar-tekst:#b8c8d8;
}
html[data-theme="dark"]{
  --tekst:#e2e8f0; --tekst-muted:#94a3b8; --ramka:#334155;
  --tlo:#0f172a; --karta:#1e293b; --mark:#60a5fa; --mark-dark:#93c5fd;
}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:.875rem; line-height:1.5;
  background:var(--tlo); color:var(--tekst);
}
a{color:var(--mark); text-decoration:none}
a:hover{color:var(--mark-dark); text-decoration:underline}
.btn-primary{background:#277ABD; border-color:#277ABD}
.btn-primary:hover,.btn-primary:focus{background:#105A96; border-color:#105A96}
.material-symbols-outlined{font-size:1.15rem; vertical-align:-.22em}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- Szkielet ---------- */
#sidebar{
  position:fixed; top:0; left:0; width:260px; height:100vh; z-index:1030;
  background:var(--sidebar); color:var(--sidebar-tekst);
  display:flex; flex-direction:column; transition:transform .2s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:.5rem;
  height:60px; padding:0 1.25rem; color:#fff; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand:hover{color:#fff; text-decoration:none}
.sidebar-nav{flex:1; overflow-y:auto; padding:1rem 0}
.sidebar-section{margin-bottom:1rem}
.sidebar-section-toggle{
  padding:.25rem 1.25rem; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:#64748b;
}
.sidebar-list{list-style:none; margin:0; padding:0}
.sidebar-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 1.25rem; color:var(--sidebar-tekst); font-size:.875rem;
}
.sidebar-link:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none}
.sidebar-link.active{background:rgba(255,255,255,.14); color:#fff; font-weight:500}
.sidebar-footer{
  padding:1rem 1.25rem; border-top:1px solid rgba(255,255,255,.08);
  font-size:.8rem; color:var(--sidebar-tekst);
}

#main-wrapper{margin-left:260px; min-height:100vh}
.top-navbar{
  display:flex; align-items:center; gap:.5rem;
  height:60px; padding:0 1.5rem; background:var(--karta);
  border-bottom:1px solid var(--ramka); box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.page-content{padding:1.5rem}
.page-header{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.25rem}
.page-header h1{font-size:1.35rem; font-weight:700; margin:0}
.page-header h1 small{font-size:.875rem; margin-left:.5rem}
.pasek-kontekstu{color:var(--tekst-muted); font-size:.8rem; margin:-.5rem 0 1.25rem}

@media (max-width:991.98px){
  #sidebar{transform:translateX(-260px)}
  body.sidebar-open #sidebar{transform:translateX(0)}
  #main-wrapper{margin-left:0}
  .page-content{padding:1rem}
}

/* ---------- Karty i tabele ---------- */
.stat-card,.table-card,.forms_option{
  background:var(--karta); border:1px solid var(--ramka);
  border-radius:10px; padding:1.5rem; margin-bottom:1.25rem;
}
.table-card{padding:0; overflow:hidden}
.stat-card{display:flex; align-items:center; gap:1rem; padding:1.15rem 1.25rem; height:100%}
.stat-card-icon{
  width:44px; height:44px; border-radius:10px; flex:0 0 44px;
  display:flex; align-items:center; justify-content:center;
}
.stat-card-icon.blue{background:#eff6ff; color:#2563eb}
.stat-card-icon.green{background:#f0fdf4; color:#16a34a}
.stat-card-icon.orange{background:#fff7ed; color:#ea580c}
.stat-card-icon.red{background:#fef2f2; color:#dc2626}
.stat-card-icon.purple{background:#faf5ff; color:#7c3aed}
.stat-card-value{font-size:1.4rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums}
.stat-card-label{font-size:.8rem; color:var(--tekst-muted)}
.forms_option_text{
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tekst-muted); margin-bottom:1rem;
}

.table-card .table{margin:0; color:var(--tekst)}
.table-card .table>:not(caption)>*>*{background:transparent; border-color:var(--ramka)}
.table-card thead th{
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tekst-muted); background:#f8fafc; border-bottom:1px solid var(--ramka);
  white-space:nowrap;
}
html[data-theme="dark"] .table-card thead th{background:#172033}
.table-hover>tbody>tr:hover>*{background:rgba(39,122,189,.06)}

/* ---------- Komunikaty ---------- */
.form_info{border-radius:8px; padding:.85rem 1.15rem; margin-bottom:1.25rem; border-left:4px solid #3b82f6; background:#eff6ff; color:#1d4ed8}
.form_info.ok{border-left-color:#22c55e; background:#f0fdf4; color:#166534}
.form_info.error{border-left-color:#ef4444; background:#fef2f2; color:#991b1b}
.form_info.warning{border-left-color:#f59e0b; background:#fffbeb; color:#92400e}
html[data-theme="dark"] .form_info{background:#172554; color:#93c5fd}
html[data-theme="dark"] .form_info.ok{background:#052e16; color:#86efac}
html[data-theme="dark"] .form_info.error{background:#450a0a; color:#fca5a5}
html[data-theme="dark"] .form_info.warning{background:#451a03; color:#fcd34d}

.badge-dim{background:rgba(100,116,139,.18); color:var(--tekst-muted)}

/* ---------- Formularze ---------- */
.form-control,.form-select{
  background:var(--karta); color:var(--tekst); border-color:var(--ramka); font-size:.875rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--mark); box-shadow:0 0 0 .2rem rgba(39,122,189,.2); background:var(--karta); color:var(--tekst);
}
.col-form-label{font-size:.875rem}
.pole-podpowiedz{font-size:.8rem; color:var(--tekst-muted)}
.uprawnienie-grupa{border:1px solid var(--ramka); border-radius:8px; padding:1rem; margin-bottom:1rem}
.uprawnienie-grupa h3{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--tekst-muted)}

/* ---------- Ekrany bez paska bocznego (logowanie, 2FA) ---------- */
body.ekran-goly{background:var(--tlo)}
.goly-wrap{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem}
.goly-karta{
  width:100%; max-width:420px; background:var(--karta);
  border:1px solid var(--ramka); border-radius:10px; padding:1.75rem;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.goly-logo{display:flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; font-size:1.05rem; margin-bottom:1.25rem}
.goly-stopka{margin-top:1rem; font-size:.75rem; color:var(--tekst-muted)}
.kod-2fa{font-size:1.5rem; letter-spacing:.4em; text-align:center; font-variant-numeric:tabular-nums}
.sekret-2fa{
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace; font-size:.95rem;
  background:var(--tlo); border:1px dashed var(--ramka); border-radius:6px;
  padding:.6rem .8rem; text-align:center; word-break:break-all;
}
#qr{display:flex; justify-content:center; margin:1rem 0; background:#fff; padding:.75rem; border-radius:8px}
.kody-zapasowe{
  font-family:ui-monospace,Consolas,monospace; columns:2; list-style:none;
  padding:.9rem 1rem; margin:0; background:var(--tlo); border:1px solid var(--ramka); border-radius:8px;
}