/* ═══════════════════════════════════════════════════════
   MZW RODO — Style sheet v3.0 | Inspiracja: muzeumzolnierzywykletych.pl
   Paleta: Navy #0D1B2A · Red #8B1A1A · Gold #B8962A · Cream #F5F0E8
═══════════════════════════════════════════════════════ */

/* ── Zmienne ── */
:root{
  --navy:  #0D1B2A;
  --navy2: #162436;
  --navy3: #1E3050;
  --red:   #8B1A1A;
  --red2:  #A52020;
  --gold:  #B8962A;
  --gold2: #C9A84C;
  --gold3: #D4B563;
  --cream: #F5F0E8;
  --cream2:#EDE6D8;
  --cream3:#E8E0D0;
  --white: #FFFFFF;
  --text:  #1C1917;
  --text2: #44403C;
  --text3: #78716C;
  --border:#E7E5E4;
  --border2:#D6D3D1;
  --success:#166534;
  --success-bg:#F0FDF4;
  --danger:#991B1B;
  --danger-bg:#FEF2F2;
  --info-bg:#EFF6FF;
  --info:#1E40AF;
  --warn-bg:#FFFBEB;
  --warn:#92400E;
  /* Aliasy dla kompatybilności wstecznej z komponentami */
  --bg:    var(--cream);
  --surface: var(--white);
  --surface2:var(--cream2);
  --hdr:   var(--navy);
  --nav:   var(--navy2);
  --nav-act:var(--navy3);
  --primary:var(--gold);
  --border-col:var(--border);
}

/* ── Dark mode ── */
[data-theme="dark"]{
  --bg:#0D1B2A; --surface:#162436; --surface2:#1E3050;
  --border:#2A3F58; --border2:#3A5070;
  --text:#F5F0E8; --text2:#C9B99A; --text3:#8A7A6A;
  --primary:#C9A84C; --danger:#F87171;
  --hdr:#091422; --nav:#0D1B2A; --nav-act:#1E3050;
  --cream:#162436; --cream2:#1E3050; --cream3:#243A58;
  --white:#162436;
}
[data-theme="dark"] body{background:var(--bg);color:var(--text)}
[data-theme="dark"] .card,[data-theme="dark"] .modal-content{background:var(--surface);border-color:var(--border);color:var(--text)}
[data-theme="dark"] .table{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .table th{background:var(--surface2)}
[data-theme="dark"] .table th,[data-theme="dark"] .table td{border-color:var(--border);color:var(--text)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--surface2);color:var(--text);border-color:var(--border)}
[data-theme="dark"] #modalBody input:not([type=checkbox]):not(.pin-input),
[data-theme="dark"] #modalBody select,[data-theme="dark"] #modalBody textarea{background:var(--surface);color:var(--text);border-color:var(--border2)}
[data-theme="dark"] [data-theme="dark"] .mf-field input,[data-theme="dark"] .mf-field select,[data-theme="dark"] .mf-field textarea{background:var(--surface);color:var(--text);border-color:var(--border2)}
[data-theme="dark"] #modalBody h3,[data-theme="dark"] #modalBody h4{color:var(--text);border-color:var(--border)}
[data-theme="dark"] #modalBody .card,[data-theme="dark"] #modalBody .section{background:var(--surface2);border-color:var(--border)}
[data-theme="dark"] .mf-section{border:1px solid var(--border);border-radius:3px;padding:14px;margin-bottom:12px;background:var(--cream2)}
[data-theme="dark"] .topnav .tablink{background:var(--nav)}
[data-theme="dark"] .topnav .tablink.active{background:var(--nav-act);border-bottom-color:var(--gold)}
[data-theme="dark"] header{background:var(--hdr)}
[data-theme="dark"] footer{background:var(--surface);color:var(--text2)}
[data-theme="dark"] .warn{background:#422006;border-color:#92400e;color:#fde68a}
[data-theme="dark"] .info{background:#0c2a3d;border-color:#1e40af;color:#93c5fd}
[data-theme="dark"] #loginOverlay{background:#1a2f4a}
[data-theme="dark"] #loginCard{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] #loginCard input{background:var(--surface2);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .gsearch-row{background:var(--surface2)!important;border-color:var(--border)!important;color:var(--text)!important}
[data-theme="dark"] #gSearchInput{background:transparent!important;color:var(--text)!important}
[data-theme="dark"] #globalSearchOverlay>div{background:var(--surface)!important;border-color:var(--border)!important}
[data-theme="dark"] .kpill.k-muted{background:#1E3050;color:var(--text2);border-color:var(--border)}
[data-theme="dark"] .hscroll{background:transparent}
[data-theme="dark"] .auth-filter-bar button{background:var(--surface2);border-color:var(--border);color:var(--text2)}
[data-theme="dark"] .auth-filter-bar button.active-filter{background:var(--gold);color:var(--navy);border-color:var(--gold)}
[data-theme="dark"] .xr-detail-row td{background:var(--surface2)}

/* ── Skróty klawiszowe ── */
#scHelpOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:999999;align-items:center;justify-content:center;padding:20px}
#scHelpOverlay.open{display:flex}
#scHelpCard{background:var(--surface);border:1px solid var(--border2);border-radius:4px;padding:28px 32px;max-width:480px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,.3)}
#scHelpCard h3{margin:0 0 16px;font-size:16px;font-weight:700;color:var(--text)}
.sc-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text)}
.sc-row:last-of-type{border:none}
.sc-keys{display:flex;gap:4px}
kbd.sc-key{background:var(--cream2);border:1px solid var(--border2);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700;color:var(--text2);font-family:monospace}

/* ═══ RESET ═══ */
*{box-sizing:border-box}

/* ═══ BODY ═══ */
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Arial,sans-serif;
  margin:0;
  color:var(--text);
  background:var(--cream);
  font-size:14px;
  line-height:1.5;
}

/* ═══ HEADER ═══ */
header{
  background:var(--navy);
  color:#fff;
  padding:0;
  border-bottom:3px solid var(--red);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 16px rgba(0,0,0,.4);
}

/* ── Topbar (logo + akcje) ── */
.mzw-topbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  min-height:52px;
}
.mzw-logo-img{
  height:30px;
  width:auto;
  flex-shrink:0;
  display:block;
}
.mzw-logo-sep{
  width:1px;
  height:28px;
  background:rgba(255,255,255,.15);
  flex-shrink:0;
  margin:0 4px;
}
.mzw-app-name{
  font-size:13px;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
  white-space:nowrap;
}
.mzw-app-sub{
  font-size:9.5px;
  color:rgba(255,255,255,.45);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-top:1px;
}
.mzw-topbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}

/* Przyciski w topbarze */
.mzw-topbar button{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.7) !important;
  padding:5px 11px !important;
  border-radius:3px !important;
  font-size:12px !important;
  font-weight:500 !important;
  cursor:pointer;
  white-space:nowrap;
}
.mzw-topbar button:hover{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
}

/* ── Wersja badge ── */
#headerVerBadge.kpill{
  background:var(--gold) !important;
  color:var(--navy) !important;
  border:none !important;
  font-weight:700 !important;
  border-radius:2px !important;
  padding:.2rem .55rem !important;
}

/* ── NAV (zakładki modułów) ── */
.topnav{
  display:flex;
  gap:0;
  flex-wrap:wrap;
  background:#091422;
  padding:0 8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.topnav::-webkit-scrollbar{display:none}
.topnav .tablink{
  border:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.5) !important;
  padding:8px 12px !important;
  border-radius:0 !important;
  cursor:pointer;
  font-size:12px !important;
  font-weight:500 !important;
  white-space:nowrap;
  border-bottom:2px solid transparent !important;
  transition:all .15s;
  letter-spacing:.01em;
}
.topnav .tablink:hover{
  color:rgba(255,255,255,.9) !important;
  background:rgba(255,255,255,.05) !important;
}
.topnav .tablink.active{
  color:#fff !important;
  background:rgba(184,150,42,.12) !important;
  border-bottom-color:var(--gold) !important;
  font-weight:700 !important;
}
/* Nav badge dla liczników */
.topnav .tablink .nb-count{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:0px 5px;
  border-radius:2px;
  margin-left:4px;
  vertical-align:middle;
}

/* ═══ MAIN ═══ */
main{padding:16px}
.tab{display:none}
.tab.active{display:block}

/* ── Nagłówki sekcji ── */
.tab > h2:first-child{
  font-size:19px;
  font-weight:800;
  color:var(--navy);
  margin:0 0 14px 0;
  padding-bottom:10px;
  border-bottom:2px solid var(--border);
  display:flex;
  align-items:center;
  gap:8px;
}
.tab > h2:first-child::after{
  content:'';
  display:block;
  height:2px;
  width:40px;
  background:var(--gold);
  border-radius:1px;
  margin-left:-8px;
  margin-top:2px;
  /* Dekoracyjna kreska złota pod tytułem */
}

/* ── Toolbar ── */
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}

/* ═══ PRZYCISKI ═══ */
button{
  background:var(--navy);
  border:0;
  color:#fff;
  padding:7px 14px;
  border-radius:3px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  transition:all .15s;
  letter-spacing:.02em;
}
button:hover:not(:disabled){background:var(--navy3);filter:none}
button:active:not(:disabled){opacity:.85}
button.secondary{background:transparent;color:var(--navy);border:1.5px solid var(--navy2)}
button.secondary:hover{background:var(--navy);color:#fff}
button.danger{background:var(--red)}
button.danger:hover{background:var(--red2)}
/* Złoty przycisk główny (CTA) */
button.primary,
.btn-primary{
  background:var(--gold) !important;
  color:var(--navy) !important;
  border:none !important;
  border-bottom:3px solid #7A5F10 !important;
  font-weight:700 !important;
}
button.primary:hover,.btn-primary:hover{background:var(--gold2) !important}

/* ── Przyciski ikon w tabelach ── */
.btn-icon{
  background:transparent !important;
  border:1px solid var(--border2) !important;
  color:var(--text3) !important;
  padding:4px 7px !important;
  border-radius:3px !important;
  font-size:13px !important;
  line-height:1;
}
.btn-icon:hover:not(:disabled){background:var(--cream) !important;border-color:var(--border2) !important;color:var(--text) !important}
.btn-icon.edit:hover{color:var(--navy) !important;border-color:var(--navy) !important;background:var(--cream2) !important}
.btn-icon.print:hover{color:var(--text2) !important}
.btn-icon.del{color:var(--danger) !important;border-color:#fecaca !important}
.btn-icon.del:hover{background:var(--danger-bg) !important;border-color:#f87171 !important}
.btn-icon.hist:hover{color:#7c3aed !important;border-color:#ddd6fe !important;background:#f5f3ff !important}
.btn-group{display:flex;gap:3px;flex-wrap:nowrap;min-width:max-content}

/* ═══ FORMULARZE ═══ */
input,select,textarea{
  padding:8px 10px;
  border:1.5px solid var(--border2);
  border-radius:3px;
  font-size:13px;
  color:var(--text);
  background:var(--white);
  transition:border-color .15s;
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,150,42,.12);
}
label{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}

/* ═══ TABELE ═══ */
.table{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  font-size:13px;
}
.table th,.table td{
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
  white-space:nowrap;
}
.table th{
  background:var(--navy);
  color:rgba(255,255,255,.85);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.table th:first-child{border-left:3px solid var(--gold)}
.table tbody tr{cursor:pointer;transition:background .1s}
.table tbody tr:hover{background:var(--cream)}
.table tbody tr:last-child td{border-bottom:none}

/* ═══ KARTY ═══ */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:4px;
  padding:14px;
  border-top:3px solid var(--border2);
}
.card h3{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  margin:0 0 10px 0;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.card.gold-top{border-top-color:var(--gold)}
.card.red-top{border-top-color:var(--red)}
.card.green-top{border-top-color:#16A34A}

/* Quick buttons */
.quick button{
  margin:4px 4px 0 0;
  background:var(--cream2);
  color:var(--navy);
  border:1px solid var(--border2);
  font-weight:600;
  font-size:12px;
}
.quick button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ═══ MODAL ═══ */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9000}
.modal.hidden{display:none}
.modal-content{
  background:var(--cream);
  color:var(--text);
  max-width:980px;width:100%;max-height:85vh;overflow:auto;
  border-radius:4px;padding:0;position:relative;
  border-top:4px solid var(--red);
  box-shadow:0 8px 40px rgba(0,0,0,.4);
}
.modal-content .mf-header{
  background:var(--navy);
  color:#fff;
  padding:14px 18px;
  display:flex;align-items:center;gap:10px;
}
.modal-content .mf-header h3{
  font-size:15px;font-weight:700;color:#fff;margin:0;
}
.close{
  position:absolute;top:10px;right:10px;
  background:rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
  border-radius:2px !important;
  font-size:14px !important;
  padding:3px 10px !important;
  z-index:10;
}
.close:hover{background:var(--red) !important}

/* ── Formularz modalny ── */
.mf-section{border:1px solid var(--border);border-radius:3px;padding:14px;margin-bottom:12px;background:var(--cream2)}
.mf-section h4{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.mf-actions{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--cream2);border-top:1px solid var(--border);flex-wrap:wrap;margin:-12px -12px}
/* Klasy przycisków modalnych */
.mf-btn{background:var(--cream2);color:var(--text2);border:1px solid var(--border2);font-size:12px;font-weight:600;padding:7px 14px;border-radius:3px;cursor:pointer}
.mf-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.mf-btn-primary{background:var(--navy) !important;color:#fff !important;border-color:var(--navy) !important}
.mf-btn-primary:hover{background:var(--navy3) !important}
.mf-btn-secondary{background:transparent !important;color:var(--navy) !important;border-color:var(--navy) !important}
.mf-btn-secondary:hover{background:var(--navy) !important;color:#fff !important}
.mf-btn-danger{background:var(--danger-bg) !important;color:var(--danger) !important;border-color:var(--danger) !important}
.mf-btn-danger:hover{background:var(--red) !important;color:#fff !important}
.mf-spacer{flex:1}
.mf-hint{font-size:11px;color:var(--text3)}
.mf-icon{width:36px;height:36px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.mf-blue{background:rgba(255,255,255,.12)}

/* ═══ ALERTY ═══ */
.warn{background:var(--warn-bg);border:1px solid #fcd34d;border-left:4px solid #f59e0b;border-radius:0 4px 4px 0;padding:10px 12px;color:var(--warn);margin-top:12px;font-size:13px}
.info{background:var(--info-bg);border:1px solid #bfdbfe;border-left:4px solid var(--gold);border-radius:0 4px 4px 0;padding:10px 12px;color:var(--info);margin-top:12px;font-size:13px}
.danger-box{background:var(--danger-bg);border:1px solid #fca5a5;border-left:4px solid var(--red);border-radius:0 4px 4px 0;padding:10px 12px;color:var(--danger);margin-top:12px;font-size:13px}

/* ═══ FOOTER ═══ */
footer{
  padding:10px 16px;
  color:rgba(255,255,255,.45);
  background:var(--navy);
  font-size:11.5px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  gap:12px;
}
footer b{color:rgba(255,255,255,.7)}
footer::before{
  content:'';
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}

/* ═══ LOGIN ═══ */
#loginOverlay{display:none}
#loginOverlay.active{display:flex !important}
#loginCard{border-top:4px solid var(--gold) !important}
#loginCard .mzw-login-logo{height:32px;width:auto;display:block;margin-bottom:4px}
#loginCard h2,#loginCard h3{color:var(--navy) !important}

.pin-input{width:46px;height:52px;border:1.5px solid var(--border2);border-radius:10px;font-size:20px;text-align:center;background:var(--cream);color:var(--text);outline:none;transition:border-color .15s,background .15s,transform .1s;-webkit-text-security:disc}
.pin-input:focus{border-color:var(--gold);background:var(--white);box-shadow:0 0 0 3px rgba(184,150,42,.15)}
.pin-input.pin-filled{border-color:var(--navy);background:var(--navy);color:#fff}
.pin-input.pin-error{border-color:var(--red);background:var(--danger-bg);animation:pinShake .3s ease}
@keyframes pinShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#loginBtn:disabled{opacity:.5;cursor:not-allowed}
#lockTimer{display:none;font-size:12px;color:var(--red);text-align:center;margin-top:10px;font-weight:500}
#autoLockBar{position:fixed;bottom:28px;right:16px;background:var(--navy2);color:var(--cream);font-size:12px;padding:5px 12px;border-radius:3px;display:none;z-index:9980;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.1)}
#autoLockBar.visible{display:flex}
#autoLockBar button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:2px 8px;border-radius:2px;font-size:11px;cursor:pointer}

/* ═══ MISC ═══ */
.small{font-size:13px}
.hidden{display:none}
.hscroll{overflow:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.section{border:1px solid var(--border);padding:10px;border-radius:3px;margin-top:8px;background:var(--cream)}
.stack .section{margin-top:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{background:var(--cream2);border:1px solid var(--border2);border-radius:3px;padding:4px 8px;display:inline-flex;align-items:center;gap:6px;font-size:12px}
.chipx{background:var(--red);color:#fff;border:0;border-radius:2px;cursor:pointer;padding:0 6px;font-size:11px}
.wrap{white-space:normal !important;word-break:break-word;overflow-wrap:anywhere}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.clamp-1{-webkit-line-clamp:1}.clamp-2{-webkit-line-clamp:2}.clamp-3{-webkit-line-clamp:3}
.clamp.expanded{display:block;-webkit-line-clamp:unset;max-height:none}
.is-invalid{border-color:var(--red) !important;box-shadow:0 0 0 2px rgba(139,26,26,.12)}
.field-error{color:var(--danger);font-size:12px;margin-top:4px}
.field-hint{color:var(--text3);font-size:12px;margin-top:4px}
.grid.compact label{margin-bottom:6px}
.grid.compact input,.grid.compact select,.grid.compact textarea{margin-top:4px}

/* ── Pill/Badge system ── */
.kpill{display:inline-block;padding:.2rem .55rem;border-radius:3px;font-size:.82em;font-weight:600;letter-spacing:.02em}
.kpill.k-ok    {background:#F0FDF4;color:#166534;border:1px solid #22c55e}
.kpill.k-muted {background:var(--cream2);color:var(--text2);border:1px solid var(--border2)}
.kpill.k-warn  {background:#FFFBEB;color:#92400E;border:1px solid #f59e0b}
.kpill.k-info  {background:#EFF6FF;color:#1E40AF;border:1px solid #93c5fd}
.kpill.k-danger{background:#FEF2F2;color:#991B1B;border:1px solid #ef4444}
.kpill .ico{display:inline-block;margin-right:.35em;font-weight:700;line-height:1}

/* Pill toggle (C/I/A) */
.pill-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:.25rem 0 .5rem}
.pill-label{font-size:12px;color:var(--text3);margin-right:4px}
.toggle-pill{display:inline-flex;align-items:center}
.toggle-pill input{display:none}
.toggle-pill .pill{display:inline-block;padding:6px 10px;border-radius:3px;border:1px solid var(--border2);background:var(--cream2);color:var(--text);cursor:pointer;user-select:none;transition:all .15s}
.toggle-pill input:checked+.pill{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ── Risk colors ── */
.k-low{background:#16a34a}.k-med{background:#f59e0b}.k-high{background:#ef4444}.k-vhigh{background:#7f1d1d}

/* ── Druk ── */
.print-page{background:#fff;color:#000;padding:12mm;max-width:200mm;margin:0 auto;border:1px solid #e5e7eb}
.print-page h1{margin-top:0;font-size:18px}
.print-table{width:100%;border-collapse:collapse}
.print-table th,.print-table td{border:1px solid #000;padding:4px;font-size:12px}
.signatures{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:12px}
.signatures .line{border-bottom:1px solid #000;height:32px}
@media print{
  header,nav,footer,.toolbar,.no-print,
  .mzw-nav,.mzw-sidebar,.mzw-topbar,
  #mzwNav,#mzwSidebar,
  .mzw-nav-extra,#btnDarkModeNav{display:none!important}
  .mzw-layout{height:auto!important;overflow:visible!important}
  .mzw-content{overflow:visible!important;height:auto!important;padding:0!important}
  .print-table th,.print-table td{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.2}
  body{background:#fff}
  .print-page{border:0;page-break-after:always}
  .kpill.k-ok    {background:#dcfce7;color:#065f46;border:1px solid #22c55e}
  .kpill.k-muted {background:#e5e7eb;color:#111827;border:1px solid #9ca3af}
  .kpill.k-warn  {background:#fef3c7;color:#92400e;border:1px solid #f59e0b}
  .kpill.k-info  {background:rgba(184,150,42,.12);color:#1e3a8a;border:1px solid var(--gold)}
  .kpill.k-danger{background:#fee2e2;color:#991b1b;border:1px solid #ef4444}
  .kpill .ico{margin-right:.35em;font-weight:700}
}

/* ── RCP tabela ── */
#rcpTable{table-layout:fixed;width:100%}
#rcpTable th,#rcpTable td{vertical-align:top}
#rcpTable td{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.25;hyphens:auto}
#rcpTable th:nth-child(1){width:100px}#rcpTable th:nth-child(2){width:180px}
#rcpTable th:nth-child(3){width:180px}#rcpTable th:nth-child(4){width:180px}
#rcpTable th:nth-child(5){width:180px}#rcpTable th:nth-child(6){width:180px}
#rcpTable th:nth-child(7){width:180px}#rcpTable th:nth-child(8){width:180px}
#rcpTable th:nth-child(9){width:160px}#rcpTable th:nth-child(10){width:180px}
#rcpTable th:nth-child(11){width:180px}#rcpTable th:nth-child(12){width:180px}
#rcpTable th:nth-child(13){width:100px}#rcpTable th:nth-child(14){width:110px}
#rcpTable th:nth-child(15){width:120px}

/* ── Dark mode header button ── */
.hdr-icon-btn{background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.6);padding:5px 9px;border-radius:3px;cursor:pointer;font-size:15px;line-height:1;transition:background .15s;display:inline-flex;align-items:center}
.hdr-icon-btn:hover{background:rgba(255,255,255,.15);color:#fff}

/* ── Walidacja RCP ── */
.calc-table{display:flex;flex-direction:column;gap:6px}
.calc-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px 10px;background:var(--cream);border-radius:3px;border:.5px solid var(--border)}

/* ── Consent pills ── */
.consent-pill{display:inline-flex;align-items:center;padding:2px 10px;border-radius:3px;font-size:11px;font-weight:600}
.cp-active {background:#F0FDF4;color:#065f46;border:1px solid #22c55e}
.cp-revoked{background:#FEF2F2;color:#991b1b;border:1px solid #ef4444}
.cp-expired{background:var(--cream2);color:var(--text2);border:1px solid var(--border2)}
[data-theme="dark"] .cp-active {background:#052e16;color:#4ade80;border-color:#166534}
[data-theme="dark"] .cp-revoked{background:#450a0a;color:#fca5a5;border-color:#7f1d1d}
[data-theme="dark"] .cp-expired{background:var(--surface2);color:var(--text2);border-color:var(--border)}

/* ── Raport zgodności ── */
.rpt-wrap{max-width:860px}
.rpt-hero{display:flex;align-items:center;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.rpt-ring{width:80px;height:80px;border-radius:50%;border:5px solid;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;flex-shrink:0}
.rpt-ring.ok    {border-color:#22c55e;color:#16a34a;background:#F0FDF4}
.rpt-ring.warn  {border-color:#f59e0b;color:#92400e;background:#FFFBEB}
.rpt-ring.danger{border-color:#ef4444;color:#991b1b;background:#FEF2F2}
[data-theme="dark"] .rpt-ring.ok    {background:#052e16}
[data-theme="dark"] .rpt-ring.warn  {background:#422006}
[data-theme="dark"] .rpt-ring.danger{background:#450a0a}
.rpt-section{background:var(--white);border:1px solid var(--border);border-radius:4px;margin-bottom:14px;overflow:hidden}
.rpt-section-title{background:var(--cream2);padding:10px 16px;font-size:13px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.rpt-row{display:flex;align-items:center;padding:9px 16px;border-bottom:1px solid var(--border);font-size:13px;gap:12px}
.rpt-row:last-child{border:none}
.rpt-lbl{flex:1;color:var(--text2)}
.rpt-val{font-weight:600;color:var(--text)}

/* ── Demo banner ── */
#demoBanner{border-bottom:2px solid rgba(0,0,0,.1)}

/* ── XR expand/collapse ── */
.xr-main{cursor:pointer}
.xr-main:hover td{background:var(--cream)}
.xr-chev{display:inline-block;margin-right:6px;font-size:10px;transition:transform .2s;color:var(--text3)}
.xr-main.xr-open .xr-chev{transform:rotate(90deg)}
.xr-detail-row{display:none}
.xr-detail-row.xr-visible{display:table-row}
.xr-detail-row td{background:var(--cream);padding:10px 14px}
.xr-detail-inner{display:flex;flex-wrap:wrap;gap:10px 20px;padding:2px 0}
.xr-field{min-width:160px;max-width:280px}
.xr-lbl{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.xr-val{font-size:13px;color:var(--text);white-space:pre-wrap;word-break:break-word}
.xr-detail-empty{color:var(--text3);font-style:italic;font-size:13px}

/* ── Auth filter bar ── */
.auth-filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.auth-filter-bar button{background:var(--cream2);color:var(--text2);border:1px solid var(--border2);font-size:12px;padding:5px 12px;border-radius:3px;font-weight:600}
.auth-filter-bar button.active-filter{background:var(--navy);color:#fff;border-color:var(--navy)}
.auth-filter-bar button:hover:not(.active-filter){background:var(--navy3);color:#fff}

/* ── Global search ── */
#globalSearchOverlay>div{border-radius:4px !important;border-top:3px solid var(--gold) !important}
.gsearch-row{border-radius:3px !important}
.gsearch-row:hover{background:var(--cream) !important}

/* ── Toast ── */
.undo-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:3px;font-size:13px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 20px rgba(0,0,0,.3);z-index:99999;border-left:3px solid var(--gold)}
.undo-toast button{background:var(--gold) !important;color:var(--navy) !important;border:none !important;font-size:12px !important;padding:4px 12px !important;border-radius:2px !important;font-weight:700 !important}

/* ── Mapa cieplna ── */
.heatmap-grid{display:grid;grid-template-columns:repeat(5,40px);gap:4px}
.heatmap-cell{width:40px;height:40px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;cursor:pointer}
.hm-1{background:#F0FDF4;color:#166534}.hm-2{background:#fef9c3;color:#854d0e}
.hm-3{background:#fed7aa;color:#9a3412}.hm-4{background:#fca5a5;color:#7f1d1d}
.hm-5{background:#b91c1c;color:#fff}



/* ===================================================================
   DPIA — Krok 3: Katalog kontrolek ISO 27001:2022
   =================================================================== */

/* ── Pasek filtrów głównych ── */
.dpia-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 8px;
  padding: 10px 0 4px;
}
.dpia-fl {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dpia-fl-grow { flex: 1; min-width: 160px; }
.dpia-fl-lbl { font-size: 12px; color: var(--text2); font-weight: 500; }
.dpia-fl-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}
.dpia-fl-actions .kpill { font-size: 13px; padding: 5px 10px; }

/* ── Pasek filtrów atrybutowych ── */
.dpia-attr-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dpia-attr-bar .dpia-fl select { font-size: 13px; }

/* ── Rekomendacje ── */
.dpia-reco-box {
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: #f0f9ff;
}
.dpia-reco-box > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #1e40af;
  user-select: none;
  list-style: none;
}
.dpia-reco-box > summary::marker,
.dpia-reco-box > summary::-webkit-details-marker { display: none; }
.dpia-reco-box > summary::before { content: '▶ '; font-size: 10px; }
.dpia-reco-box[open] > summary::before { content: '▼ '; }

/* ── Katalog — tabela z przewijaniem ── */
.dpia-catalog-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  max-height: 340px;
  margin-bottom: 12px;
}
.dpia-ctrl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dpia-ctrl-table thead th {
  background: var(--cream2);
  padding: 7px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid var(--border);
}
.dpia-ctrl-table tbody tr {
  border-bottom: 1px solid var(--cream2);
  transition: background .1s;
  cursor: pointer;
}
.dpia-ctrl-table tbody tr:last-child { border-bottom: none; }
.dpia-ctrl-table tbody tr:hover { background: var(--cream); }
.dpia-ctrl-table tbody tr.is-selected { background: #eff6ff; }
.dpia-ctrl-table tbody tr.is-selected:hover { background: rgba(184,150,42,.12); }

.dctrl-code {
  padding: 8px 10px;
  white-space: nowrap;
  vertical-align: top;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}
.dctrl-name {
  padding: 8px 10px;
  vertical-align: top;
  line-height: 1.4;
}
.dctrl-pills {
  padding: 6px 8px;
  vertical-align: top;
}
.dctrl-action {
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.dctrl-btn {
  font-size: 12px !important;
  padding: 4px 10px !important;
  white-space: nowrap;
}

/* ── Pigułki atrybutów w katalogu ── */
.kpill-type  { background: #dcfce7; color: #065f46; border: 1px solid #86efac; font-size: 11px; }
.kpill-csc   { background: rgba(184,150,42,.12); color: #1e40af; border: 1px solid #93c5fd; font-size: 11px; }
.kpill-ops   { background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; font-size: 11px; }
.kpill-cia   { background: #f3e8ff; color: #5b21b6; border: 1px solid #c4b5fd; font-size: 11px; }
.dctrl-pills .kpill { display: inline-block; margin: 2px 2px 2px 0; padding: 2px 6px; border-radius: 999px; }

/* ── Panel wybranych środków ── */
.dpia-selected-panel {
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 12px;
  background: #eff6ff;
  margin-top: 4px;
}
.dpia-selected-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.dpia-sel-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.dpia-sel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid rgba(184,150,42,.12);
  font-size: 13px;
  line-height: 1.3;
}
.dpia-sel-code {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  min-width: 60px;
  flex-shrink: 0;
}
.dpia-sel-name { flex: 1; }
.dpia-sel-grp  { font-size: 11px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }
.dpia-sel-row .chipx { flex-shrink: 0; }

@media print {
  .dpia-filter-bar, .dpia-attr-bar, .dpia-reco-box,
  .dpia-selected-panel .dpia-selected-hdr button { display: none !important; }
  .dpia-catalog-wrap { max-height: none; overflow: visible; border: none; }
}

/* ===== Inline threshold slider w toolbarze Naruszeń ===== */
.inc-thresh-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  background: var(--cream2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
}
.inc-thresh-lbl {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
}
.inc-thresh-inline input[type="range"] {
  width: 90px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.inc-thresh-inline input[type="number"] {
  width: 46px;
  padding: 3px 5px;
  font-size: 13px;
  text-align: center;
  border: 1px solid var(--border2);
  border-radius: 4px;
}
.inc-thresh-unit {
  font-size: 12px;
  color: var(--text3);
}

/* ===================================================================
   NOWE FUNKCJE — Dashboard, Upoważnienia, Procesory, Tryb podglądu
   =================================================================== */

/* Dashboard KPI cards */
.dash-kpi-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.dash-kpi { background:var(--white); border:1px solid var(--border); border-top:3px solid var(--border2); border-radius:3px; padding:10px 14px; min-width:110px; text-align:center; flex:1; }
.dash-kpi-num { font-size:26px; font-weight:800; color:var(--navy); line-height:1.1; }
.dash-kpi-lbl { font-size:10.5px; color:var(--text3); margin-top:3px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.dash-kpi-warn .dash-kpi-num { color:var(--warn); }
.dash-kpi-warn { background:var(--warn-bg); border-color:#fcd34d; border-top-color:#f59e0b; }
.dash-kpi-danger .dash-kpi-num { color:var(--danger); }
.dash-kpi-danger { background:var(--danger-bg); border-color:#fca5a5; border-top-color:var(--red); }

/* Dashboard bar charts */
.dash-charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.dash-chart-card { background:var(--white); border:1px solid var(--border); border-radius:3px; padding:12px; border-top:3px solid var(--gold); }
.dash-chart-title { font-size:11px; font-weight:700; color:var(--text2); margin-bottom:10px; text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:6px; }
.dash-chart-title::before { content:''; display:inline-block; width:3px; height:12px; background:var(--gold); border-radius:1px; }
.dash-bar-chart { display:flex; flex-direction:column; gap:5px; }
.dash-bar-row { display:flex; align-items:center; gap:6px; font-size:12px; }
.dash-bar-lbl { width:110px; color:var(--text2); text-align:right; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-bar-track { flex:1; background:var(--cream2); border-radius:2px; height:10px; overflow:hidden; }
.dash-bar-fill { height:100%; border-radius:2px; transition:width .4s ease; }
.dash-bar-ok     { background:#16a34a; }
.dash-bar-warn   { background:var(--gold); }
.dash-bar-danger { background:var(--red); }
.dash-bar-muted  { background:var(--text3); }
.dash-bar-val { width:28px; font-weight:700; color:var(--text); font-size:12px; }

/* Auth filter bar */
.auth-filter-bar { display:flex; flex-wrap:wrap; gap:6px; padding:6px 0 10px; }
.auth-sf-btn { font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--border2); background:var(--cream); color:var(--text2); cursor:pointer; transition:all .15s; }
.auth-sf-btn.active { background:var(--gold); color:#fff; border-color:var(--gold); }
.auth-sf-btn:hover:not(.active) { background:var(--border); }

/* Auth row status colors */
tr.auth-row-soon  td { background:#fffbeb; }
tr.auth-row-expired td { background:#fef2f2; }
tr.auth-row-revoked td { background:var(--cream); color:#94a3b8; }

/* Global search rows */
.gsearch-row { display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; border-bottom:.5px solid var(--cream2); transition:background .1s; }
.gsearch-row:hover { background:var(--cream); }
.gsearch-row:last-child { border-bottom:none; }

/* Read-only mode */
body.app-readonly::after {
  content: '\1F512  TRYB PODGL\104 DU — edycja zablokowana';
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--navy2); color: #f59e0b;
  text-align: center; padding: 6px 0; font-size: 13px;
  font-weight: 600; letter-spacing: .06em; z-index: 9990;
}


/* ===================================================================
   EXPAND-ROW (xr) — rozwijane wiersze w tabelach
   =================================================================== */

/* Nagłówki tabel — mniejszy tekst, uppercase */
.table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text2);
  white-space: nowrap;
  background: var(--cream);
}

/* Wiersz główny */
tr.xr-main {
  cursor: pointer;
  transition: background .1s;
}
tr.xr-main:hover { background: var(--cream); }
tr.xr-main.xr-open { background: #eff6ff; }
tr.xr-main td { vertical-align: middle; }

/* Chevron */
.xr-chev {
  display: inline-block;
  font-size: 9px;
  color: #94a3b8;
  margin-right: 6px;
  transition: transform .15s ease;
  vertical-align: middle;
}
tr.xr-main.xr-open .xr-chev { transform: rotate(90deg); }

/* Wiersz szczegółów */
tr.xr-detail-row td { padding: 0 !important; border-bottom: none; }

/* Panel szczegółów */
.xr-detail-inner {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 16px;
  padding: 12px 16px 14px 28px;
  background: #f0f7ff;
  border-top: 1px solid #bfdbfe;
  border-bottom: 1px solid rgba(184,150,42,.12);
  animation: xrFadeIn .15s ease;
}
.xr-detail-inner.xr-open { display: grid; }
.xr-detail-inner.xr-detail-empty { display: block; color: #94a3b8; font-size: 13px; }

@keyframes xrFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pole etykieta + wartość */
.xr-field { display: flex; flex-direction: column; gap: 2px; }
.xr-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
}
.xr-val {
  font-size: 13px;
  color: var(--navy);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Puste stany tabel */
.xr-empty {
  padding: 16px !important;
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
}

/* Kolory wierszy upoważnień działają z xr */
tr.xr-main.auth-row-soon td  { background: #fffbeb; }
tr.xr-main.auth-row-expired td { background: #fef2f2; }
tr.xr-main.auth-row-revoked td { background: var(--cream); color: #94a3b8; }
tr.xr-main.auth-row-soon.xr-open td  { background: #fef3c7; }
tr.xr-main.auth-row-expired.xr-open td { background: #fee2e2; }

/* Wydruk — ukryj wiersze szczegółów */
@media print {
  tr.xr-detail-row { display: none !important; }
  .xr-chev { display: none !important; }
  tr.xr-main.xr-open td { background: inherit !important; }
}

/* Read-only blocked buttons */
button.ro-blocked {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ===================================================================
   Nowe elementy: liczniki tabel, alert 72h, rozmiar bazy
   =================================================================== */

/* Licznik rekordów pod tabelą */
.tbl-counter {
  font-size: 12px;
  color: #94a3b8;
  padding: 4px 2px;
  text-align: right;
}

/* Alert 72h na pulpicie */
.dash-alert-box {
  background: #fff1f2;
  border: 1px solid #fca5a5;
  border-radius: 3px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.dash-alert-title {
  font-size: 13px;
  font-weight: 600;
  color: #991b1b;
  margin-bottom: 8px;
}
.dash-alert-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: .5px solid #fecaca;
}
.dash-alert-row:last-child { border-bottom: none; }

/* Rozmiar bazy */
.dash-db-size {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: inline-block;
}

/* ===================================================================
   LOGIN SCREEN
   =================================================================== */
#loginOverlay { display: none; }
#loginOverlay.active { display: flex !important; }

.pin-input {
  width: 46px;
  height: 52px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 20px;
  text-align: center;
  background: var(--cream);
  color: var(--navy);
  outline: none;
  transition: border-color .15s, background .15s, transform .1s;
  -webkit-text-security: disc;
}
.pin-input:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  transform: translateY(-2px);
}
.pin-input.pin-filled {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
.pin-input.pin-error {
  border-color: #ef4444;
  background: #fef2f2;
  animation: pinShake .3s ease;
}
@keyframes pinShake {
  0%,100%{ transform:translateX(0) }
  25%     { transform:translateX(-6px) }
  75%     { transform:translateX(6px) }
}

/* Blokada po N błędach */
#loginBtn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Pasek blokady czasowej */
#lockTimer {
  display: none;
  font-size: 12px;
  color: #dc2626;
  text-align: center;
  margin-top: 10px;
  font-weight: 500;
}

/* Pasek auto-blokady */
#autoLockBar {
  position: fixed;
  bottom: 28px;
  right: 16px;
  background: var(--navy2);
  color: var(--cream);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  display: none;
  z-index: 9980;
  align-items: center;
  gap: 8px;
}
#autoLockBar.visible { display: flex; }
#autoLockBar button {
  background: var(--navy3);
  border: none;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

/* ===== KALKULATOR TERMINÓW ===== */
.calc-table { display:flex; flex-direction:column; gap:6px; }
.calc-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:7px 10px; background:var(--cream); border-radius:3px; border:.5px solid var(--border); }
.calc-lbl { font-size:12px; color:var(--text2); flex:1; }

/* ===== KALENDARZ ===== */
.cal-evt { font-size:10px; padding:1px 4px; border-radius:3px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:default; }
.cal-red   { background:#fee2e2; color:#991b1b; }
.cal-blue  { background:#dbeafe; color:#1e40af; }
.cal-green { background:#dcfce7; color:#166534; }
.cal-amber { background:#fef3c7; color:#92400e; }

/* ===== WIZARD RCP ===== */
.rcp-wizard-bar { display:flex; align-items:center; gap:0; margin:12px 0 18px; padding:12px 16px; background:var(--cream); border-radius:4px; border:.5px solid var(--border); }
.rcp-wz-step { display:flex; align-items:center; gap:8px; cursor:pointer; }
.rcp-wz-num { width:26px; height:26px; border-radius:50%; border:2px solid var(--border2); background:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#94a3b8; flex-shrink:0; transition:all .2s; }
.rcp-wz-step.active .rcp-wz-num { border-color:var(--gold); background:var(--gold); color:#fff; }
.rcp-wz-step.done .rcp-wz-num { border-color:#16a34a; background:#16a34a; color:#fff; }
.rcp-wz-lbl { font-size:11px; color:#94a3b8; transition:color .2s; white-space:nowrap; }
.rcp-wz-step.active .rcp-wz-lbl { color:var(--gold); font-weight:600; }
.rcp-wz-step.done .rcp-wz-lbl { color:#16a34a; }
.rcp-wz-line { flex:1; height:2px; background:var(--border); min-width:20px; margin:0 6px; }

/* ═══════════════════════════════════════════════════════════════
   UNIFIED FORM DESIGN SYSTEM
   Spójny wygląd wszystkich formularzy modalnych
   ═══════════════════════════════════════════════════════════════ */

/* ── Nagłówek modalu ───────────────────────────────────────────── */
.mf-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.mf-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mf-icon.mf-blue   { background: var(--gold); }
.mf-icon.mf-green  { background: #16a34a; }
.mf-icon.mf-amber  { background: #d97706; }
.mf-icon.mf-red    { background: #dc2626; }
.mf-icon.mf-purple { background: #7c3aed; }
.mf-icon.mf-teal   { background: #0d9488; }

.mf-title { font-size: 18px; font-weight: 600; color: var(--navy); line-height: 1.2; }
.mf-subtitle { font-size: 12px; color: #94a3b8; margin-top: 2px; }

/* ── Sekcja z tytułem ──────────────────────────────────────────── */
.mf-section {
  margin-bottom: 20px;
}
.mf-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cream2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mf-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--gold);
  border-radius: 2px;
}

/* ── Siatka pól ────────────────────────────────────────────────── */
.mf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.mf-grid.mf-grid-1 { grid-template-columns: 1fr; }
.mf-grid.mf-grid-2 { grid-template-columns: 1fr 1fr; }
.mf-grid.mf-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ── Pole formularza ───────────────────────────────────────────── */
.mf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mf-field.mf-full { grid-column: 1 / -1; }

.mf-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mf-required::after {
  content: '*';
  color: #dc2626;
  margin-left: 2px;
}
.mf-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ── Inputy w systemie mf ──────────────────────────────────────── */
.mf-field input,
.mf-field select,
.mf-field textarea {
  padding: 9px 12px;
  border: 1.5px solid var(--border2);
  border-radius: 3px;
  font-size: 13px;
  color: var(--text);
  background: #ffffff;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.mf-field input:hover:not(:focus),
.mf-field select:hover:not(:focus),
.mf-field textarea:hover:not(:focus) {
  border-color: var(--navy3);
}
.mf-field input:focus,
.mf-field select:focus,
.mf-field textarea:focus {
  border-color: var(--gold);
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,150,42,.15);
}
.mf-field input.mf-invalid,
.mf-field select.mf-invalid {
  border-color: #dc2626;
  background: #fef2f2;
}
.mf-field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.mf-error { font-size: 11px; color: #dc2626; margin-top: 2px; }

/* ── Separator ─────────────────────────────────────────────────── */
.mf-divider {
  height: 1px;
  background: var(--cream2);
  margin: 18px 0;
}

/* ── Pasek przycisków ──────────────────────────────────────────── */
.mf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--cream2);
  flex-wrap: wrap;
}
.mf-actions .mf-spacer { flex: 1; }

/* ── Przyciski w systemie mf ───────────────────────────────────── */
.mf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .15s;
  white-space: nowrap;
}
.mf-btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.mf-btn-primary:hover { background: var(--navy2); }
.mf-btn-secondary {
  background: var(--cream);
  color: #374151;
  border-color: var(--border);
}
.mf-btn-secondary:hover { background: var(--cream2); border-color: var(--border2); }
.mf-btn-danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}
.mf-btn-danger:hover { background: #fee2e2; }
.mf-btn-ghost {
  background: transparent;
  color: var(--text3);
  border-color: transparent;
}
.mf-btn-ghost:hover { background: var(--cream2); }

/* ── Info box ──────────────────────────────────────────────────── */
.mf-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #1e40af;
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.mf-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

/* ── Karta podsumowania (np. wybrany pracownik) ─────────────────── */
.mf-summary-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mf-summary-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1e40af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Ujednolicony modal-content ─────────────────────────────────── */
.modal-content {
  padding: 24px 28px;
}
@media (max-width: 600px) {
  .modal-content { padding: 16px; }
  .mf-grid.mf-grid-2,
  .mf-grid.mf-grid-3 { grid-template-columns: 1fr; }
}


/* ===================================================================
   UJEDNOLICENIE STYLU WSZYSTKICH MODALI (#modalBody)
   Obejmuje formularze które nie używają klas mf- bezpośrednio
   =================================================================== */

/* ── Nagłówek h3 w modalu → wygląd jak mf-header ── */
#modalBody h3, #modalBody h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
#modalBody h4 {
  font-size: 15px;
  margin: 16px 0 12px;
  padding-bottom: 10px;
}

/* ── Etykiety ── */
#modalBody label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 2px;
}
#modalBody label > b { font-size: 12px; }

/* ── Inputy, selecty, textarey ── */
#modalBody input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.pin-input),
#modalBody select,
#modalBody textarea {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--navy);
  background: var(--cream);
  transition: border-color .15s, background .15s, box-shadow .15s;
  width: 100%;
  font-family: inherit;
}
#modalBody input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.pin-input):focus,
#modalBody select:focus,
#modalBody textarea:focus {
  border-color: var(--gold);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
#modalBody textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

/* ── Toolbar w modalu → mf-actions ── */
#modalBody .toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--cream2);
  flex-wrap: wrap;
}

/* ── Przyciski w modalu ── */
#modalBody button:not(.chipx):not(.close):not(.dctrl-btn):not(.auth-sf-btn):not(.rcp-wz-step):not([data-add-ctrl]):not([data-del-ctrl]):not([data-clear-ctrls]):not(.mf-btn) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .15s;
  white-space: nowrap;
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
#modalBody button.secondary:not(.chipx):not(.mf-btn) {
  background: var(--cream);
  color: #374151;
  border-color: var(--border);
}
#modalBody button.secondary:hover:not(.chipx):not(.mf-btn) {
  background: var(--cream2);
  border-color: var(--border2);
}
#modalBody button.danger:not(.chipx):not(.mf-btn) {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}
#modalBody button.danger:hover:not(.chipx):not(.mf-btn) { background: #fee2e2; }
#modalBody button:not(.chipx):not(.close):not(.mf-btn):not(.secondary):not(.danger):hover {
  background: var(--navy2);
}

/* ── Karta/sekcja w modalu ── */
#modalBody .card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
#modalBody .section {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
}

/* ── Kroki wizarda w modalu ── */
#modalBody details.card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  margin-bottom: 10px;
}
#modalBody details.card summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
#modalBody details.card summary::before {
  content: '▶';
  font-size: 10px;
  color: #94a3b8;
  transition: transform .15s;
}
#modalBody details[open].card summary::before { transform: rotate(90deg); }
#modalBody details.card > *:not(summary) { padding: 14px 16px; }

/* ── Grid w modalu ── */
#modalBody .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}
#modalBody .grid.compact { gap: 10px; }

/* ── Wizard kroki RCP ── */
#modalBody .wz-step { padding: 4px 0; }

/* Zapobiegaj nakładaniu się stylów na kalkulator */
#rodoCalcCard button {
  background: var(--cream2);
  color: var(--navy);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background .12s;
}
#rodoCalcCard button:hover { background: var(--border); }

/* =====================================================================
   CHECKLIST RODO
   ===================================================================== */
.cl-progress-wrap {
  background: var(--surface, #fff);
  border: 1px solid var(--border, var(--border));
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 4px;
}
.cl-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.cl-progress-title { font-size: 15px; font-weight: 700; color: var(--text, var(--navy)); }
.cl-progress-track {
  height: 12px;
  background: var(--surface2, var(--cream2));
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}
.cl-progress-fill {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--gold) 0%, #16a34a 100%);
  transition: width .5s cubic-bezier(.4,0,.2,1);
  min-width: 2px;
}
.cl-progress-sub { font-size: 12px; color: var(--text3, #94a3b8); }
.cl-group {
  background: var(--surface, #fff);
  border: 1px solid var(--border, var(--border));
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.cl-group-hdr {
  background: var(--surface2, var(--cream2));
  padding: 10px 16px;
  font-size: 13px; font-weight: 700;
  color: var(--text, var(--navy));
  border-bottom: 1px solid var(--border, var(--border));
  display: flex; align-items: center; justify-content: space-between;
}
.cl-group-prog { font-size: 11px; font-weight: 400; color: var(--text3, #94a3b8); }
.cl-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, var(--border));
  transition: background .1s;
}
.cl-item:last-child { border-bottom: none; }
.cl-item:hover { background: var(--surface2, var(--cream2)); }
.cl-item-text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--text, var(--navy)); }
.cl-item-ref { font-size: 11px; color: var(--text3, #94a3b8); margin-top: 2px; }
.cl-sel {
  padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border2, var(--border2));
  background: var(--surface, #fff); color: var(--text, var(--navy));
  cursor: pointer; min-width: 130px; flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.cl-sel[data-s="done"]     { background:#dcfce7; color:#065f46; border-color:#22c55e; }
.cl-sel[data-s="progress"] { background:#fef3c7; color:#92400e; border-color:#f59e0b; }
.cl-sel[data-s="na"]       { background:var(--cream2); color:var(--text3); border-color:var(--border2); }
.cl-sel[data-s="todo"]     { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
[data-theme="dark"] .cl-sel[data-s="done"]     { background:#052e16; color:#4ade80; border-color:#166534; }
[data-theme="dark"] .cl-sel[data-s="progress"] { background:#422006; color:#fde68a; border-color:#92400e; }
[data-theme="dark"] .cl-sel[data-s="todo"]     { background:#450a0a; color:#fca5a5; border-color:#7f1d1d; }
[data-theme="dark"] .cl-sel[data-s="na"]       { background:var(--navy2); color:var(--text3); border-color:var(--navy3); }
@media print {
  .cl-progress-wrap { page-break-inside: avoid; }
  .cl-group { page-break-inside: avoid; }
  #btnChecklistPrint, #btnChecklistReset { display: none !important; }
}

/* =====================================================================
   MAPA CIEPLNA RYZYK
   ===================================================================== */
.rhm-wrap { margin-top: 16px; }
.rhm-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, var(--border));
  border-radius: 10px;
  padding: 14px 18px;
  overflow: hidden;
}
.rhm-title { font-size: 14px; font-weight: 700; color: var(--text, var(--navy)); margin-bottom: 12px; display:flex; align-items:center; justify-content:space-between; }
.rhm-legend { font-size: 11px; color: var(--text3, #94a3b8); margin-top: 8px; }
.rhm-table-wrap { overflow-x: auto; }
.rhm-table { border-collapse: collapse; width: 100%; min-width: 360px; }
.rhm-table th {
  background: var(--surface2, var(--cream2)); color: var(--text2, var(--text2));
  font-size: 10px; font-weight: 600; padding: 3px 6px;
  border: 1px solid var(--border, var(--border)); text-align: center;
}
.rhm-ylbl {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 9px; color: var(--text3, #94a3b8);
  background: var(--surface2, var(--cream2));
  border: 1px solid var(--border, var(--border));
  padding: 4px 2px; text-align: center;
}
.rhm-cell {
  width: 18%; height: 36px; text-align: center; vertical-align: middle;
  border: 1px solid var(--border, var(--border));
  font-size: 10px; font-weight: 700;
  cursor: pointer; transition: opacity .15s, transform .1s;
  position: relative;
}
.rhm-cell:hover { opacity: .82; transform: scale(1.04); z-index: 1; }
.rhm-cell.rhm-active { outline: 2px solid var(--navy); outline-offset: -2px; }
.rhm-cell .rhm-cnt  { font-size: 13px; font-weight: 800; line-height: 1; display: block; }
.rhm-cell .rhm-sub  { font-size: 8px; opacity: .75; }
/* kolory wg P×I */
.rhm-1  { background:#d1fae5; color:#065f46; }
.rhm-2  { background:#a7f3d0; color:#065f46; }
.rhm-3  { background:#fef9c3; color:#713f12; }
.rhm-4  { background:#fde68a; color:#713f12; }
.rhm-5  { background:#fed7aa; color:#7c2d12; }
.rhm-6  { background:#fca5a5; color:#7f1d1d; }
.rhm-8  { background:#f87171; color:#fff; }
.rhm-9  { background:#ef4444; color:#fff; }
.rhm-10 { background:#991b1b; color:#fff; }
.rhm-filter-info {
  display: none; background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 6px; padding: 6px 12px; font-size: 12px; color: #1e40af;
  margin-top: 8px; align-items: center; gap: 8px;
}
.rhm-filter-info.visible { display: flex; }
[data-theme="dark"] .rhm-filter-info { background: #0c1a2e; border-color: #1e40af; color: #93c5fd; }

/* =====================================================================
   CHANGELOG / WERSJONOWANIE
   ===================================================================== */
.cl-ver-entry {
  border-left: 3px solid var(--border2, var(--border2));
  margin-bottom: 16px;
  padding-left: 14px;
}
.cl-ver-entry:first-child { border-left-color: var(--primary, var(--gold)); }
.cl-ver-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.cl-ver-num {
  font-size: 14px; font-weight: 800; color: var(--text, var(--navy));
  font-family: monospace;
}
.cl-ver-date {
  font-size: 11px; color: var(--text3, #94a3b8);
}
.cl-ver-list {
  margin: 0; padding: 0 0 0 18px;
  font-size: 13px; color: var(--text2, var(--text2));
  line-height: 1.7;
}
.cl-ver-list li { margin-bottom: 2px; }

/* =====================================================================
   METODOLOGIA RYZYKA
   ===================================================================== */
.mth-wrap { max-width: 860px; }

/* Numerowane kroki */
.mth-step {
  background: var(--surface, #fff);
  border: 1px solid var(--border, var(--border));
  border-left: 4px solid var(--primary, var(--gold));
  border-radius: 0 10px 10px 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.mth-step-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--surface2, var(--cream2));
  border-bottom: 1px solid var(--border, var(--border));
  cursor: pointer; user-select: none;
}
.mth-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary, var(--gold)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.mth-step-title { font-size: 14px; font-weight: 700; color: var(--text, var(--navy)); flex: 1; }
.mth-step-chev  { font-size: 11px; color: var(--text3, #94a3b8); transition: transform .2s; }
.mth-step-hdr.open .mth-step-chev { transform: rotate(90deg); }
.mth-step-body  { padding: 16px 20px; display: none; }
.mth-step-body.open { display: block; }

/* Tabela macierzy */
.mth-matrix {
  width: 100%; border-collapse: collapse;
  margin: 12px 0; font-size: 13px;
}
.mth-matrix th {
  background: var(--surface2); color: var(--text2);
  padding: 7px 10px; border: 1px solid var(--border);
  text-align: center; font-size: 12px;
}
.mth-matrix td {
  padding: 7px 10px; border: 1px solid var(--border);
  text-align: center; font-weight: 700;
}
.mth-matrix td.rl-n { background: #dcfce7; color: #065f46; }
.mth-matrix td.rl-s { background: #fef9c3; color: #713f12; }
.mth-matrix td.rl-w { background: #fed7aa; color: #7c2d12; }
.mth-matrix td.rl-k { background: #fecaca; color: #7f1d1d; }

/* Tabele skal */
.mth-table {
  width: 100%; border-collapse: collapse;
  margin: 10px 0; font-size: 13px;
}
.mth-table th {
  background: var(--surface2); padding: 7px 12px;
  border: 1px solid var(--border); text-align: left;
  font-size: 12px; color: var(--text2);
}
.mth-table td { padding: 7px 12px; border: 1px solid var(--border); color: var(--text); }
.mth-table td:first-child { font-weight: 700; text-align: center; white-space: nowrap; }

/* Callout box */
.mth-callout {
  border-radius: 8px; padding: 10px 14px;
  margin: 10px 0; font-size: 13px;
  display: flex; gap: 10px; align-items: flex-start;
}
.mth-callout.info  { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.mth-callout.warn  { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.mth-callout.ok    { background: #f0fdf4; border: 1px solid #bbf7d0; color: #065f46; }
[data-theme="dark"] .mth-callout.info { background:#0c1a2e; border-color:#1e40af; color:#93c5fd; }
[data-theme="dark"] .mth-callout.warn { background:#422006; border-color:#92400e; color:#fde68a; }
[data-theme="dark"] .mth-callout.ok   { background:#052e16; border-color:#166534; color:#4ade80; }
[data-theme="dark"] .mth-matrix td.rl-n { background:#052e16; color:#4ade80; }
[data-theme="dark"] .mth-matrix td.rl-s { background:#422006; color:#fde68a; }
[data-theme="dark"] .mth-matrix td.rl-w { background:#431407; color:#fdba74; }
[data-theme="dark"] .mth-matrix td.rl-k { background:#450a0a; color:#fca5a5; }

/* Przykład liczbowy */
.mth-example {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 16px; margin: 12px 0;
  font-size: 13px;
}
.mth-example-title { font-weight: 700; margin-bottom: 8px; color: var(--text); }

@media print {
  .mth-step-body { display: block !important; }
  .mth-step-chev { display: none; }
  .toolbar button { display: none !important; }
}

/* =====================================================================
   ZAKŁADKA INSTRUKCJE — nawigacja sekcji
   ===================================================================== */
.instr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.instr-nav-btn {
  background: var(--surface, #fff);
  border: 1px solid var(--border, var(--border));
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2, var(--text2));
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.instr-nav-btn:hover {
  background: var(--surface2, var(--cream2));
  border-color: var(--primary, var(--gold));
  color: var(--primary, var(--gold));
}
.instr-nav-btn.active {
  background: var(--primary, var(--gold));
  border-color: var(--primary, var(--gold));
  color: #fff;
}

/* Sekcja instrukcji */
.instr-section { display: none; }
.instr-section.active { display: block; }

/* Nagłówek sekcji */
.instr-section-hdr {
  background: var(--surface2, var(--cream2));
  border: 1px solid var(--border, var(--border));
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.instr-section-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.instr-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, var(--navy));
  margin: 0;
}
.instr-section-desc {
  font-size: 13px;
  color: var(--text2, var(--text2));
  margin-top: 2px;
}


/* =============================================================
   RESPONSYWNOŚĆ MOBILNA — MZW RODO v2.0
   Breakpointy: 768px (tablet), 480px (telefon)
   ============================================================= */

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {

  /* Header — ukryj wersję i skróć tytuł */
  header { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
  header h2 { font-size: 15px; }
  #headerVerBadge { display: none; }

  /* Nawigacja — przewijana poziomo */
  .topnav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
    gap: 4px;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav .tablink {
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 9px;
    white-space: nowrap;
  }
  /* Przycisk demo i motyw — schowane w headerze na mobile, widoczne w nav */
  #btnDarkModeNav, button[title*="Demo"] { font-size: 12px; padding: 3px 8px; }

  /* Toolbar — wrap na osobne wiersze */
  .toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }
  .toolbar h2 { font-size: 16px; width: 100%; margin-bottom: 2px; }
  .toolbar button, .toolbar select, .toolbar input {
    font-size: 12px;
  }
  .toolbar input[type="text"],
  .toolbar input[type="search"],
  .toolbar input[placeholder] {
    flex: 1 1 120px;
    min-width: 100px;
  }

  /* Karty — mniejszy padding */
  .card { padding: 10px; border-radius: 6px; }

  /* Dashboard KPI — 2 kolumny zamiast 4 */
  .dash-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .dash-charts {
    grid-template-columns: 1fr !important;
  }

  /* Tabele — poziome przewijanie */
  .hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 600px; }
  .table th, .table td { font-size: 12px; padding: 6px 8px; }

  /* Formularze modali — pojedyncza kolumna */
  .mf-grid { grid-template-columns: 1fr !important; }
  .mf-grid-2, .mf-grid-3 { grid-template-columns: 1fr !important; }
  .mf-full { grid-column: 1 !important; }
  .modal-content { padding: 12px !important; margin: 8px !important; max-height: 95vh; }

  /* Mapa cieplna ryzyk */
  .risk-heatmap { overflow-x: auto; }
  .risk-heatmap table { font-size: 10px; }

  /* Wyszukiwarka globalna */
  #gSearchOverlay .gSearchBox { width: 95vw !important; max-width: none !important; }
}

/* ── Telefon (≤ 480px) ── */
@media (max-width: 480px) {
  .pin-input { width: 38px; height: 44px; font-size: 16px; border-radius: 8px; }
  #loginCard { padding: 24px 16px !important; max-width: 100% !important; }

  /* Header jeszcze mniejszy */
  header { padding: 8px 10px; }
  header h2 { font-size: 13px; }
  .hdr-icon-btn { padding: 4px 7px; font-size: 13px; }
  /* Ukryj skrót Ctrl+K i Ctrl+L w headerze */
  header kbd { display: none; }

  /* Dashboard — 1 kolumna na bardzo małych ekranach */
  .dash-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .dash-kpi { padding: 10px 8px !important; }
  .dash-kpi-num { font-size: 24px !important; }

  /* Tabele — mniejsza czcionka, krótsze nagłówki */
  .table th, .table td { font-size: 11px; padding: 5px 6px; }

  /* Przyciski w toolbarze — ikony + tekst */
  .toolbar button { padding: 6px 10px; font-size: 12px; }

  /* Upoważnienia / karty w modal */
  .fields { grid-template-columns: 1fr !important; }
  .field.full { grid-column: 1 !important; }

  /* Ryzyko DPIA — katalog ISO */
  .dpia-filter-bar, .dpia-attr-bar { flex-wrap: wrap !important; }
  .dpia-fl { min-width: 100% !important; }

  /* Mapa cieplna — ukryj przy bardzo małym ekranie */
  .heatmap-legend { display: none; }

  /* Tab — pełna szerokość */
  .tab.active { padding: 0 4px; }

  /* Card w zakładkach */
  .card { padding: 8px; }
  .card h3 { font-size: 15px; }
}

/* ── Orientacja pozioma na telefonie ── */
@media (max-width: 768px) and (orientation: landscape) {
  header { padding: 6px 12px; }
  header h2 { font-size: 13px; }
  .topnav { max-height: 36px; }
}


/* =============================================================
   CIEMNY MOTYW — KOMPLETNE POPRAWKI CZYTELNOŚCI MODALI v2.0
   ============================================================= */

/* Tło i kolor tekstu modalu */
[data-theme="dark"] .modal { background: rgba(0,0,0,.75); }
[data-theme="dark"] .modal-content {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}

/* Nagłówek mf-header w modalu */
[data-theme="dark"] .mf-header { border-bottom: 1px solid var(--border); }
[data-theme="dark"] .mf-title  { color: var(--text) !important; }
[data-theme="dark"] .mf-subtitle { color: var(--text2, #94a3b8) !important; }

/* Sekcje w modalu */
[data-theme="dark"] .mf-section { background: var(--surface) !important; }
[data-theme="dark"] .mf-section-title {
  color: #60a5fa !important;
  border-bottom-color: var(--border) !important;
}

/* Etykiety pól */
[data-theme="dark"] .mf-label { color: var(--border2) !important; }
[data-theme="dark"] .mf-hint  { color: var(--text3) !important; }
[data-theme="dark"] .mf-required::after { color: #f87171 !important; }

/* Pola input / select / textarea w modalu */
[data-theme="dark"] .mf-field input,
[data-theme="dark"] .mf-field select,
[data-theme="dark"] .mf-field textarea {
  background: var(--navy2) !important;
  color: var(--cream2) !important;
  border-color: var(--navy3) !important;
}
[data-theme="dark"] .mf-field input:focus,
[data-theme="dark"] .mf-field select:focus,
[data-theme="dark"] .mf-field textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
  outline: none;
}
[data-theme="dark"] .mf-field input::placeholder,
[data-theme="dark"] .mf-field textarea::placeholder { color: var(--text2) !important; }
[data-theme="dark"] .mf-field input.mf-invalid,
[data-theme="dark"] .mf-field select.mf-invalid { border-color: #f87171 !important; }

/* Karty wewnątrz modalu */
[data-theme="dark"] #modalBody .card,
[data-theme="dark"] .modal-content .card {
  background: var(--navy2) !important;
  border-color: var(--navy3) !important;
  color: var(--text) !important;
}

/* Wszystkie inputy w modalBody (fallback) */
[data-theme="dark"] #modalBody input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.pin-input),
[data-theme="dark"] #modalBody select,
[data-theme="dark"] #modalBody textarea {
  background: var(--navy2) !important;
  color: var(--cream2) !important;
  border-color: var(--navy3) !important;
}
[data-theme="dark"] #modalBody label { color: var(--border2) !important; }
[data-theme="dark"] #modalBody p,
[data-theme="dark"] #modalBody li,
[data-theme="dark"] #modalBody span:not(.kpill):not(.nav-badge):not(.nav-count) {
  color: var(--text, var(--cream2));
}

/* Checkbox label */
[data-theme="dark"] #modalBody input[type=checkbox] + *,
[data-theme="dark"] .modal-content label { color: var(--border2) !important; }

/* Przyciski w modalu */
[data-theme="dark"] .mf-actions { border-top-color: var(--border) !important; }
[data-theme="dark"] .mf-btn-secondary {
  background: var(--navy2) !important;
  color: var(--border2) !important;
  border-color: var(--navy3) !important;
}
[data-theme="dark"] .mf-btn-secondary:hover {
  background: var(--navy3) !important;
  color: var(--cream2) !important;
}

/* Tabele w modalu */
[data-theme="dark"] .modal-content .table th { background: var(--navy) !important; color: #fff !important; }
[data-theme="dark"] .modal-content .table td { border-color: var(--navy3) !important; color: var(--text) !important; }
[data-theme="dark"] .modal-content .table tr:nth-child(even) td { background: var(--navy2) !important; }

/* Info boxy / pbox / mf-section wewnętrzne */
[data-theme="dark"] .pbox { background: #1e3a5f !important; color: #93c5fd !important; border-left-color: var(--gold) !important; }
[data-theme="dark"] .pbox.warn { background: #44330a !important; color: #fcd34d !important; border-left-color: #f59e0b !important; }
[data-theme="dark"] .pbox.danger { background: #3b0c0c !important; color: #fca5a5 !important; border-left-color: #ef4444 !important; }

/* Scrollbar w ciemnym modalu */
[data-theme="dark"] .modal-content::-webkit-scrollbar { width: 6px; }
[data-theme="dark"] .modal-content::-webkit-scrollbar-track { background: var(--navy); }
[data-theme="dark"] .modal-content::-webkit-scrollbar-thumb { background: var(--navy3); border-radius: 3px; }

/* Podgląd klauzuli */
[data-theme="dark"] #clausePreview { background: var(--navy2) !important; color: var(--cream2) !important; }

/* xr-detail (rozwijane wiersze w tabelach pracowników) */
[data-theme="dark"] .xr-detail-inner { background: var(--navy2) !important; border-top-color: var(--navy3) !important; }
[data-theme="dark"] .xr-lbl { color: #94a3b8 !important; }
[data-theme="dark"] .xr-val { color: var(--cream2) !important; }


/* Ciemny motyw — przyciski ikon w tabelach */
[data-theme="dark"] .btn-icon { background: var(--navy2) !important; border-color: var(--navy3) !important; color: #94a3b8 !important; }
[data-theme="dark"] .btn-icon:hover:not(:disabled) { background: var(--navy3) !important; color: var(--cream2) !important; }
[data-theme="dark"] .btn-icon.del { color: #f87171 !important; border-color: #7f1d1d !important; }
[data-theme="dark"] .btn-icon.edit:hover { background: #1e3a5f !important; color: #60a5fa !important; border-color: var(--navy) !important; }

/* ═══════════════════════════════════════════════════════
   REDESIGN v3 — pełna nawigacja MZW
   Topbar + Flat nav + Sidebar + Layout
═══════════════════════════════════════════════════════ */

/* ── TOPBAR ── */
.mzw-topbar{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;min-height:52px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mzw-logo-img{height:28px;width:auto;flex-shrink:0;display:block}
.mzw-logo-sep{width:1px;height:26px;background:rgba(255,255,255,.15);flex-shrink:0;margin:0 2px}
.mzw-app-name{font-size:13px;font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap}
.mzw-app-sub{font-size:9.5px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;margin-top:1px}
.mzw-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.tb-action-btn{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:rgba(255,255,255,.6) !important;
  padding:5px 10px !important;
  border-radius:2px !important;
  font-size:12px !important;
  font-weight:500 !important;
  white-space:nowrap;
}
.tb-action-btn:hover{background:rgba(255,255,255,.13) !important;color:#fff !important}
.tb-action-btn kbd{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:2px;
  padding:1px 5px;
  font-size:10px;
  font-family:monospace;
}
.tb-action-lock{background:rgba(139,26,26,.3) !important;border-color:rgba(139,26,26,.5) !important}
.tb-action-lock:hover{background:var(--red) !important;border-color:var(--red) !important;color:#fff !important}

/* ── NAWIGACJA MODUŁÓW ── */
.mzw-nav{
  display:flex;gap:0;
  flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;
  background:#091422;
  padding:0 8px;
  border-top:1px solid rgba(255,255,255,.04);
}
.mzw-nav::-webkit-scrollbar{display:none}
.mzw-tab{
  border:none !important;
  background:transparent !important;
  color:rgba(255,255,255,.45) !important;
  padding:9px 13px !important;
  border-radius:0 !important;
  cursor:pointer;
  font-size:12px !important;
  font-weight:500 !important;
  white-space:nowrap;
  letter-spacing:.015em;
  border-bottom:2px solid transparent !important;
  transition:all .15s;
  position:relative;
}
.mzw-tab:hover{color:rgba(255,255,255,.85) !important;background:rgba(255,255,255,.04) !important}
.mzw-tab.active{
  color:#fff !important;
  background:rgba(184,150,42,.1) !important;
  border-bottom-color:var(--gold) !important;
  font-weight:700 !important;
}
.mzw-tab-badge{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-size:9px;
  font-weight:800;
  padding:0 5px;
  border-radius:2px;
  margin-left:5px;
  vertical-align:middle;
  min-width:16px;
  text-align:center;
  line-height:16px;
}
.mzw-tab-badge:empty{display:none}

/* ── LAYOUT: sidebar + content ── */
.mzw-layout{
  display:flex;
  flex:1;
  overflow:hidden;
  min-height:0;
  height:calc(100vh - 52px - 40px - 40px); /* viewport - topbar - nav - footer */
}

/* ── SIDEBAR ── */
.mzw-sidebar{
  width:190px;
  flex-shrink:0;
  background:var(--navy2);
  border-right:1px solid rgba(255,255,255,.06);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
.mzw-sidebar::-webkit-scrollbar{width:4px}
.mzw-sidebar::-webkit-scrollbar-track{background:transparent}
.mzw-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px}

.mzw-sidebar-inner{padding:10px 0 20px}

.sb-title{
  font-size:10px;
  font-weight:700;
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:10px 14px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:4px;
}
.sb-group{margin-bottom:4px}
.sb-group-label{
  font-size:9px;
  font-weight:700;
  color:rgba(255,255,255,.25);
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:8px 14px 4px;
}
.sb-item{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  text-align:left !important;
  padding:6px 14px !important;
  background:transparent !important;
  border:none !important;
  color:rgba(255,255,255,.5) !important;
  font-size:12px !important;
  font-weight:400 !important;
  cursor:pointer;
  border-radius:0 !important;
  border-left:2px solid transparent !important;
  transition:all .12s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sb-item:hover{
  background:rgba(255,255,255,.06) !important;
  color:rgba(255,255,255,.9) !important;
  border-left-color:var(--gold) !important;
}
.sb-icon{font-size:13px;flex-shrink:0;width:16px;text-align:center}
.sb-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── CONTENT AREA ── */
.mzw-content{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--cream);
  display:flex;
  flex-direction:column;
}
.mzw-content main{flex:1;padding:18px 20px}

/* ── FOOTER ── */
.mzw-footer{
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.06);
  padding:7px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font-size:11.5px;
  color:rgba(255,255,255,.35);
}
.mzw-footer b{color:rgba(255,255,255,.6);font-weight:600}
.mzw-footer-right{margin-left:auto;white-space:nowrap}

/* ── DARK MODE sidebar ── */
[data-theme="dark"] .mzw-sidebar{background:#091422}
[data-theme="dark"] .mzw-content{background:var(--bg)}
[data-theme="dark"] .mzw-footer{background:#020d18}

/* ── SECTION HEADERS w modułach ── */
.tab.active > h2:first-child {
  font-size:17px;
  font-weight:800;
  color:var(--navy);
  margin:0 0 16px 0;
  padding-bottom:12px;
  border-bottom:2px solid var(--border);
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:-.01em;
}
[data-theme="dark"] .tab.active > h2:first-child{color:var(--text);border-color:var(--border)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .mzw-sidebar{display:none}
  .mzw-layout{height:auto}
  .mzw-content{overflow-x:auto}
}

/* ── Placeholder widoczny na białym tle ── */
.mf-field input::placeholder,
.mf-field textarea::placeholder {
  color: var(--text3);
  opacity: .8;
}
.mf-field select option:first-child {
  color: var(--text3);
}

/* ── NAV: pionowe separatory grup ── */
.mzw-tab[data-tab="employees"],
.mzw-tab[data-tab="rcp"],
.mzw-tab[data-tab="risk"],
.mzw-tab[data-tab="incidents"],
.mzw-tab[data-tab="disclosures"],
.mzw-tab[data-tab="archive"],
.mzw-tab[data-tab="report"],
.mzw-tab[data-tab="export"] {
  border-left: 1px solid rgba(255,255,255,.08);
  margin-left: 4px;
  padding-left: 16px !important;
}

/* ── RCP Wizard bar — MZW paleta ── */
.rcp-wizard-bar {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  gap: 0;
}
.rcp-wz-step {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 3px;
  transition: all .15s;
}
.rcp-wz-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream2);
  border: 2px solid var(--border2);
  color: var(--text3);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.rcp-wz-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  white-space: nowrap;
}
.rcp-wz-step.active .rcp-wz-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.rcp-wz-step.active .rcp-wz-lbl {
  color: var(--gold);
}
.rcp-wz-step.done .rcp-wz-num {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.rcp-wz-step.done .rcp-wz-lbl {
  color: var(--navy);
}
.rcp-wz-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 4px;
  min-width: 20px;
}

/* ── Section title w modalach ── */
.mf-section-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 12px 0;
  padding: 0 0 8px 10px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--gold);
}

/* ── Widoczne pola na kremowym tle — ostateczna reguła ── */
.mf-section input,
.mf-section select,
.mf-section textarea,
.mf-field input,
.mf-field select,
.mf-field textarea {
  background: #FFFFFF !important;
  border: 1.5px solid #C8BFB4 !important;
  border-radius: 3px !important;
  color: var(--navy) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06) !important;
}
.mf-section input:focus,
.mf-section select:focus,
.mf-section textarea:focus,
.mf-field input:focus,
.mf-field select:focus,
.mf-field textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(184,150,42,.18), inset 0 1px 3px rgba(0,0,0,.04) !important;
  outline: none !important;
}

/* ── Dark mode pola ── */
[data-theme="dark"] .mf-section input,
[data-theme="dark"] .mf-section select,
[data-theme="dark"] .mf-section textarea,
[data-theme="dark"] .mf-field input,
[data-theme="dark"] .mf-field select,
[data-theme="dark"] .mf-field textarea {
  background: var(--navy) !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════
   DROPDOWN NAV — MZW v2.1
═══════════════════════════════════════════════════════ */

/* Nadpisz stary .mzw-nav padding żeby pasował do dropdown */
.mzw-nav{
  display:flex !important;
  align-items:stretch !important;
  flex-wrap:nowrap !important;
  overflow:visible !important;  /* dropdown musi wychodzić poza nav */
  height:36px;
  padding:0 6px !important;
  background:#091422;
  border-bottom:1px solid rgba(255,255,255,.05);
  position:relative;
  z-index:200;
}

/* Separator pionowy między grupami */
.mzw-nav-sep{
  width:1px;
  background:rgba(255,255,255,.08);
  margin:7px 2px;
  flex-shrink:0;
}

/* Solo tab (Pulpit) */
.mzw-tab-solo{
  border:none !important;
  background:transparent !important;
  color:rgba(255,255,255,.5) !important;
  padding:0 13px !important;
  font-size:12px !important;
  font-weight:600 !important;
  cursor:pointer;
  height:100%;
  border-bottom:2px solid transparent !important;
  transition:all .15s;
  white-space:nowrap;
  align-self:stretch;
  display:flex;
  align-items:center;
}
.mzw-tab-solo:hover{color:#fff !important;background:rgba(255,255,255,.05) !important}
.mzw-tab-solo.active{color:#fff !important;background:rgba(184,150,42,.1) !important;border-bottom-color:var(--gold) !important;font-weight:700 !important}

/* Kontener grupy */
.mzw-ng{
  position:relative;
  display:flex;
  align-items:stretch;
}

/* Przycisk grupy */
.mzw-ng-btn{
  border:none !important;
  background:transparent !important;
  color:rgba(255,255,255,.5) !important;
  padding:0 12px !important;
  font-size:12px !important;
  font-weight:600 !important;
  cursor:pointer;
  height:100%;
  border-bottom:2px solid transparent !important;
  transition:all .15s;
  white-space:nowrap;
  align-self:stretch;
  display:flex;
  align-items:center;
  gap:5px;
  letter-spacing:.01em;
}
.mzw-ng-btn:hover{color:#fff !important;background:rgba(255,255,255,.05) !important}
.mzw-ng-btn.mzw-ng-open{color:#fff !important;background:rgba(255,255,255,.07) !important;border-bottom-color:var(--gold) !important}
.mzw-ng-btn.mzw-ng-active{color:var(--gold2) !important;font-weight:700 !important}
.mzw-ng-btn.mzw-ng-active.mzw-ng-open{color:#fff !important}

/* Strzałka obok przycisku */
.mzw-ng-arr{
  display:inline-block;
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.5;
  transition:transform .15s, opacity .15s;
  flex-shrink:0;
}
.mzw-ng-open .mzw-ng-arr{transform:rotate(180deg);opacity:1}

/* Dropdown panel */
.mzw-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 1px);
  left:0;
  min-width:200px;
  background:var(--navy2);
  border:1px solid rgba(255,255,255,.1);
  border-top:2px solid var(--gold);
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  z-index:500;
}
.mzw-dropdown.mzw-dd-open{display:block}
.mzw-dropdown-right{left:auto;right:0}

/* Pozycja w dropdown */
.mzw-dd-item{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 14px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.6);
  font-size:12px;
  font-weight:400;
  cursor:pointer;
  border-left:2px solid transparent;
  transition:all .12s;
  white-space:nowrap;
  letter-spacing:.01em;
}
.mzw-dd-item:hover{background:rgba(255,255,255,.06);color:#fff;border-left-color:var(--gold)}
.mzw-dd-item.active{color:var(--gold2);font-weight:600;border-left-color:var(--gold)}

/* Separator w dropdown */
.mzw-dd-sep{height:1px;background:rgba(255,255,255,.07);margin:3px 0}

/* Badge w nav */
.mzw-tab-badge{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-size:9px;
  font-weight:800;
  padding:1px 5px;
  border-radius:2px;
  margin-left:4px;
  min-width:16px;
  text-align:center;
  line-height:16px;
  vertical-align:middle;
}
.mzw-tab-badge:empty{display:none}

/* Dodatkowe przyciski (Demo, Motyw) */
.mzw-nav-extra{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.5) !important;
  padding:4px 9px !important;
  border-radius:2px !important;
  font-size:12px !important;
  cursor:pointer;
  margin-left:4px;
  align-self:center;
  white-space:nowrap;
}
.mzw-nav-extra:hover{background:rgba(255,255,255,.1) !important;color:#fff !important}

/* ukryj pasek zamknięcia nav na desktopie */
.mzw-nav-close{display:none}

/* ── P3.1: Responsywność mobilna nawigacji ── */
#mzw-hamburger{
  display:none;
  background:transparent;
  border:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  padding:6px 12px;
  line-height:1;
  flex-shrink:0;
}
@media(max-width:768px){
  #mzw-hamburger{display:block}

  /* Nav chowa się domyślnie, pokazuje jako fullscreen overlay */
  .mzw-nav{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    z-index:999;
    flex-direction:column;
    overflow-y:auto;
    padding:0;
    background:#091422;
  }
  .mzw-nav.mzw-nav-open{display:flex}

  /* Przycisk zamknięcia w górnym rogu */
  .mzw-nav-close{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    border-bottom:1px solid rgba(255,255,255,.08);
    flex-shrink:0;
  }
  .mzw-nav-close-lbl{color:rgba(255,255,255,.6);font-size:13px;font-weight:600;letter-spacing:.05em}
  .mzw-nav-close-btn{
    background:transparent;border:none;color:rgba(255,255,255,.5);
    font-size:22px;cursor:pointer;padding:4px 8px;line-height:1;
  }
  .mzw-nav-close-btn:hover{color:#fff}

  /* Przyciski grupy i pozycji */
  .mzw-tab-solo{
    width:100%;text-align:left;
    padding:13px 20px !important;
    font-size:14px !important;
    border-bottom:1px solid rgba(255,255,255,.05) !important;
  }
  .mzw-ng{width:100%;position:relative}
  .mzw-ng-btn{
    width:100%;text-align:left;
    padding:13px 20px !important;
    font-size:14px !important;
    border-bottom:1px solid rgba(255,255,255,.05) !important;
    display:flex;justify-content:space-between;align-items:center;
  }
  .mzw-dropdown{
    position:static !important;
    display:none;
    box-shadow:none !important;
    border-radius:0 !important;
    background:rgba(255,255,255,.04) !important;
    border:none !important;
    padding:0 !important;
  }
  .mzw-ng-open .mzw-dropdown{display:block}
  .mzw-dd-item{
    padding:11px 20px 11px 36px !important;
    font-size:13px !important;
    border-bottom:1px solid rgba(255,255,255,.03) !important;
    width:100%;text-align:left;
  }
  .mzw-nav-sep{display:none}
  .mzw-nav-extra{
    width:calc(50% - 16px) !important;
    margin:4px 8px !important;
    text-align:center;
  }
  .mzw-nav-extras-row{
    display:flex;flex-wrap:wrap;
    padding:8px;
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:auto;
  }

  /* Topbar — pokaż hamburger */
  .mzw-topbar{display:flex;align-items:center}

  /* Layout mobilny */
  .mzw-layout{height:auto!important;flex-direction:column}
  .mzw-content{overflow-x:auto}
}

/* ── Nowy pulpit (dashboard v2) ── */
#dash-root{padding:12px;display:flex;flex-direction:column;gap:10px}
.dsh-zone-alerts{display:flex;flex-direction:column;gap:6px}
.dsh-alert{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--border-radius-md);border:0.5px solid}
.dsh-alert-danger{background:var(--cream,#fef2f2);border-color:var(--red,#fca5a5)}
.dsh-alert-warn{background:#fffbeb;border-color:#fcd34d}
.dsh-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--border-radius-md);white-space:nowrap;flex-shrink:0}
.dsh-pill-danger{background:var(--red,#fee2e2);color:#991b1b}
.dsh-pill-warn{background:#fef9c3;color:#78350f}
.dsh-alert-txt{font-size:13px;flex:1;color:var(--text,#1c1917)}
.dsh-alert-btn{font-size:11px;padding:3px 10px;border-radius:var(--border-radius-md);border:0.5px solid #fca5a5;background:transparent;color:#991b1b;cursor:pointer;white-space:nowrap}
.dsh-alert-btn-warn{font-size:11px;padding:3px 10px;border-radius:var(--border-radius-md);border:0.5px solid #fcd34d;background:transparent;color:#78350f;cursor:pointer;white-space:nowrap}

.dsh-kpi-group{display:flex;flex-direction:column;gap:4px}
.dsh-group-lbl{font-size:11px;font-weight:500;color:var(--text3,#94a3b8);letter-spacing:.05em;padding:0 2px}
.dsh-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dsh-kpi{background:var(--surface2,#f8f5f0);border-radius:var(--border-radius-md);padding:10px 12px;border:0.5px solid var(--border,#e2e8f0);transition:border-color .15s}
.dsh-kpi:hover{border-color:var(--border2,#cbd5e1)}
.dsh-kpi-icon{font-size:14px;display:block;margin-bottom:4px}
.dsh-kpi-val{font-size:22px;font-weight:500;line-height:1.1;color:var(--text,#1c1917)}
.dsh-kpi-lbl{font-size:11px;color:var(--text2,#64748b);margin-top:3px}
.dsh-kpi-danger .dsh-kpi-val{color:#dc2626}
.dsh-kpi-warn .dsh-kpi-val{color:#d97706}
.dsh-kpi-ok .dsh-kpi-val{color:#16a34a}

.dsh-bottom-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}
.dsh-chart-card{background:var(--surface2,#f8f5f0);border-radius:var(--border-radius-md);padding:12px;border:0.5px solid var(--border,#e2e8f0)}
.dsh-chart-title{font-size:12px;font-weight:500;color:var(--text2,#64748b);margin-bottom:10px}
.dsh-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dsh-bar-lbl{font-size:11px;color:var(--text2,#64748b);width:80px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsh-bar-track{flex:1;height:6px;background:var(--border,#e2e8f0);border-radius:3px;overflow:hidden}
.dsh-bar-fill{height:100%;border-radius:3px}
.dsh-bar-val{font-size:11px;font-weight:500;color:var(--text,#1c1917);width:22px;text-align:right;flex-shrink:0}
.dsh-bar-ok{background:#16a34a}.dsh-bar-warn{background:#d97706}.dsh-bar-danger{background:#dc2626}.dsh-bar-muted{background:#94a3b8}

.dsh-audit-row{font-size:11px;color:var(--text2,#64748b);padding:5px 0;border-bottom:0.5px solid var(--border,#e2e8f0);line-height:1.4}
.dsh-audit-row:last-child{border-bottom:none}
.dsh-audit-ts{color:var(--text3,#94a3b8);font-size:10px;display:block}
.dsh-audit-empty{font-size:12px;color:var(--text3,#94a3b8)}

.dsh-shortcuts{display:flex;flex-direction:column;gap:4px}
.dsh-shortcut-btn{background:transparent;border:0.5px solid var(--border,#e2e8f0);border-radius:var(--border-radius-md);padding:6px 10px;font-size:12px;color:var(--text,#1c1917);cursor:pointer;text-align:left;transition:background .1s}
.dsh-shortcut-btn:hover{background:var(--surface2,#f8f5f0)}

.dsh-db-bar{display:flex;align-items:center;gap:10px;background:var(--surface2,#f8f5f0);border-radius:var(--border-radius-md);padding:8px 14px;border:0.5px solid var(--border,#e2e8f0)}
.dsh-db-lbl{font-size:11px;color:var(--text2,#64748b)}
.dsh-db-track{flex:1;height:4px;background:var(--border,#e2e8f0);border-radius:2px;overflow:hidden}
.dsh-db-fill{height:100%;border-radius:2px}
.dsh-db-ok{background:#16a34a}.dsh-db-warn{background:#d97706}.dsh-db-danger{background:#dc2626}

[data-theme="dark"] .dsh-alert-danger{background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.3)}
[data-theme="dark"] .dsh-alert-warn{background:rgba(217,119,6,.1);border-color:rgba(217,119,6,.3)}
[data-theme="dark"] .dsh-alert-txt{color:var(--text)}
[data-theme="dark"] .dsh-kpi,[data-theme="dark"] .dsh-chart-card,[data-theme="dark"] .dsh-db-bar{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .dsh-shortcut-btn{border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .dsh-shortcut-btn:hover{background:rgba(255,255,255,.06)}

@media(max-width:768px){
  .dsh-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dsh-bottom-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .dsh-bottom-grid{grid-template-columns:1fr}
}


/* Siatka kafelków — auto-fill, min 160px */
.dsh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:12px}

/* Kafelek */
.dsh-tile{background:var(--surface2,#f8f5f0);border:1px solid var(--border,#e2e8f0);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:box-shadow .15s,border-color .15s,opacity .15s;user-select:none;position:relative}
.dsh-tile:hover{border-color:var(--border2,#cbd5e1);box-shadow:0 2px 8px rgba(0,0,0,.07)}
.dsh-tile-icon{font-size:20px;flex-shrink:0;line-height:1}
.dsh-tile-body{flex:1;min-width:0}
.dsh-tile-val{font-size:22px;font-weight:600;line-height:1;color:var(--text,#1c1917)}
.dsh-tile-lbl{font-size:11px;color:var(--text2,#64748b);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsh-tile-drag{position:absolute;top:6px;right:6px;font-size:14px;color:var(--text3,#94a3b8);cursor:grab;opacity:0;transition:opacity .15s;line-height:1}
.dsh-tile:hover .dsh-tile-drag{opacity:1}
.dsh-tile-drag:active{cursor:grabbing}

/* Kolory wartości */
.dsh-tile-danger .dsh-tile-val{color:#dc2626}
.dsh-tile-warn   .dsh-tile-val{color:#d97706}
.dsh-tile-ok     .dsh-tile-val{color:#16a34a}

/* Drag states */
.dsh-tile-dragging{opacity:.35;box-shadow:none}
.dsh-tile-over{border-color:#6366f1;box-shadow:0 0 0 2px #6366f133;background:var(--surface,#fff)}

/* Pasek bazy */
.dsh-db-bar{display:flex;align-items:center;gap:10px;background:var(--surface2,#f8f5f0);border-radius:6px;padding:7px 14px;border:0.5px solid var(--border,#e2e8f0);font-size:11px;color:var(--text2,#64748b);margin-top:4px}
.dsh-db-track{flex:1;height:4px;background:var(--border,#e2e8f0);border-radius:2px;overflow:hidden}
.dsh-db-fill{height:100%;border-radius:2px}
.dsh-db-ok{background:#16a34a}.dsh-db-warn{background:#d97706}.dsh-db-danger{background:#dc2626}

/* Modal konfiguracji */
.dsh-cfg-group-hdr{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text3,#94a3b8);text-transform:uppercase;padding:10px 0 4px;border-bottom:1px solid var(--border,#e2e8f0);margin-bottom:4px}
.dsh-cfg-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:6px;cursor:pointer;transition:background .1s}
.dsh-cfg-row:hover{background:var(--surface2,#f8f5f0)}
.dsh-cfg-row input[type="checkbox"]{width:16px;height:16px;cursor:pointer;flex-shrink:0;accent-color:#6366f1}
.dsh-cfg-icon{font-size:16px}
.dsh-cfg-title{flex:1;font-size:13px;color:var(--text,#1c1917)}
.dsh-cfg-badge{font-size:10px;padding:2px 7px;border-radius:10px;background:#f1f5f9;color:#94a3b8;font-weight:500}
.dsh-cfg-on{background:#dcfce7;color:#15803d}

/* Dark mode */
[data-theme="dark"] .dsh-tile{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .dsh-tile:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
[data-theme="dark"] .dsh-tile-over{border-color:#818cf8;background:rgba(99,102,241,.12)}
[data-theme="dark"] .dsh-db-bar{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .dsh-cfg-row:hover{background:rgba(255,255,255,.05)}
[data-theme="dark"] .dsh-cfg-badge{background:rgba(255,255,255,.08);color:#94a3b8}
[data-theme="dark"] .dsh-cfg-on{background:rgba(21,128,61,.25);color:#4ade80}

@media(max-width:600px){
  .dsh-grid{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════
   DASHBOARD WIDGET GRID v2
   ══════════════════════════════════════════ */
.dsh-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dsh-customize-btn{font-size:11px;padding:5px 12px;border-radius:6px;border:1px solid var(--border,#e2e8f0);background:transparent;color:var(--text2,#64748b);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .1s}
.dsh-customize-btn:hover{background:var(--surface2,#f8f5f0)}

/* Siatka */
.dsh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}

/* Kafelek KPI */
.dsh-tile{background:var(--surface2,#f8f5f0);border:1px solid var(--border,#e2e8f0);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:box-shadow .15s,border-color .15s,opacity .15s;user-select:none;position:relative;min-height:72px}
.dsh-tile:hover{border-color:var(--border2,#cbd5e1);box-shadow:0 2px 8px rgba(0,0,0,.07)}
.dsh-tile-icon{font-size:22px;flex-shrink:0;line-height:1}
.dsh-tile-body{flex:1;min-width:0}
.dsh-tile-val{font-size:22px;font-weight:700;line-height:1;color:var(--text,#1c1917)}
.dsh-tile-lbl{font-size:11px;color:var(--text2,#64748b);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Rozmiary — grid-column span */
.dsh-tile-sz-small{grid-column:span 1}
.dsh-tile-sz-medium{grid-column:span 2}
.dsh-tile-sz-large{grid-column:span 4}

/* Kolory */
.dsh-tile-danger .dsh-tile-val{color:#dc2626}
.dsh-tile-warn   .dsh-tile-val{color:#d97706}
.dsh-tile-ok     .dsh-tile-val{color:#16a34a}

/* Drag handle */
.dsh-tile-drag{position:absolute;top:6px;right:6px;font-size:13px;color:var(--text3,#94a3b8);cursor:grab;opacity:0;transition:opacity .15s;line-height:1}
.dsh-tile:hover .dsh-tile-drag{opacity:1}
.dsh-tile-dragging{opacity:.3;box-shadow:none !important}
.dsh-tile-over{border-color:#6366f1 !important;box-shadow:0 0 0 2px #6366f133 !important;background:var(--surface,#fff)}

/* Panel (widgety specjalne) */
.dsh-tile-panel{flex-direction:column;align-items:stretch;cursor:default;padding:0}
.dsh-tile-panel-inner{display:flex;flex-direction:column;flex:1;padding:12px 14px}
.dsh-tile-panel-hdr{font-size:12px;font-weight:600;color:var(--text2,#64748b);margin-bottom:10px;display:flex;align-items:center;gap:6px}

/* Skróty */
.dsh-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.dsh-shortcut-btn{background:transparent;border:1px solid var(--border,#e2e8f0);border-radius:6px;padding:5px 8px;font-size:11px;color:var(--text,#1c1917);cursor:pointer;text-align:left;transition:background .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsh-shortcut-btn:hover{background:var(--surface,#fff)}

/* Zdarzenia */
.dsh-event-row{display:flex;flex-direction:column;padding:4px 0;border-bottom:0.5px solid var(--border,#e2e8f0);font-size:11px}
.dsh-event-row:last-child{border-bottom:none}
.dsh-event-ts{color:var(--text3,#94a3b8);font-size:10px}
.dsh-event-msg{color:var(--text2,#64748b);margin-top:1px}

/* Alerty */
.dsh-alert-row{font-size:12px;padding:5px 8px;border-radius:5px;margin-bottom:4px}
.dsh-alert-danger{background:#fef2f2;color:#991b1b}
.dsh-alert-warn{background:#fffbeb;color:#78350f}

/* Pasek bazy */
.dsh-db-bar{display:flex;align-items:center;gap:10px;background:var(--surface2,#f8f5f0);border-radius:6px;padding:7px 14px;border:0.5px solid var(--border,#e2e8f0);font-size:11px;color:var(--text2,#64748b);margin-top:4px}
.dsh-db-track{flex:1;height:4px;background:var(--border,#e2e8f0);border-radius:2px;overflow:hidden}
.dsh-db-fill{height:100%;border-radius:2px}
.dsh-db-ok{background:#16a34a}.dsh-db-warn{background:#d97706}.dsh-db-danger{background:#dc2626}

/* Modal konfiguracji */
.dsh-cfg-group-hdr{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text3,#94a3b8);text-transform:uppercase;padding:10px 0 4px;border-bottom:1px solid var(--border,#e2e8f0);margin-bottom:4px}
.dsh-cfg-row{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:6px;transition:background .1s}
.dsh-cfg-row:hover{background:var(--surface2,#f8f5f0)}
.dsh-cfg-row input[type="checkbox"]{width:16px;height:16px;cursor:pointer;flex-shrink:0;accent-color:#6366f1}
.dsh-cfg-icon{font-size:15px;flex-shrink:0}
.dsh-cfg-title{flex:1;font-size:13px;color:var(--text,#1c1917)}
.dsh-cfg-size{font-size:11px;padding:2px 6px;border-radius:5px;border:1px solid var(--border,#e2e8f0);background:var(--surface,#fff);color:var(--text2,#64748b);cursor:pointer}
.dsh-cfg-badge{font-size:10px;padding:2px 7px;border-radius:10px;background:#f1f5f9;color:#94a3b8;font-weight:500;flex-shrink:0}
.dsh-cfg-on{background:#dcfce7;color:#15803d}

/* Dark mode */
[data-theme="dark"] .dsh-tile{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .dsh-tile:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
[data-theme="dark"] .dsh-tile-over{border-color:#818cf8 !important;background:rgba(99,102,241,.12)}
[data-theme="dark"] .dsh-db-bar,[data-theme="dark"] .dsh-tile-panel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .dsh-shortcut-btn{border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .dsh-shortcut-btn:hover{background:rgba(255,255,255,.06)}
[data-theme="dark"] .dsh-alert-danger{background:rgba(220,38,38,.12);color:#fca5a5}
[data-theme="dark"] .dsh-alert-warn{background:rgba(217,119,6,.12);color:#fcd34d}
[data-theme="dark"] .dsh-cfg-row:hover{background:rgba(255,255,255,.05)}
[data-theme="dark"] .dsh-cfg-badge{background:rgba(255,255,255,.08);color:#94a3b8}
[data-theme="dark"] .dsh-cfg-on{background:rgba(21,128,61,.25);color:#4ade80}
[data-theme="dark"] .dsh-cfg-size{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--text2)}

@media(max-width:768px){
  .dsh-grid{grid-template-columns:repeat(2,1fr)}
  .dsh-tile-sz-large{grid-column:span 2}
  .dsh-tile-sz-medium{grid-column:span 1}
}
@media(max-width:480px){
  .dsh-grid{grid-template-columns:1fr}
  .dsh-tile-sz-medium,.dsh-tile-sz-large{grid-column:span 1}
}
#retBody{width:100%;overflow:visible}
#retBody table{table-layout:fixed;width:100%}
#retBody td{white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.4;vertical-align:top}
#retBody td:nth-child(1){width:35%}
#retBody td:nth-child(2){width:12%}
#retBody td:nth-child(3){width:28%}
#retBody td:nth-child(4){width:15%}
#retBody td:nth-child(5){width:10%}

/* ── Mobile: nowy dashboard ── */
@media(max-width:768px){
  .dsh-bottom-grid{grid-template-columns:1fr 1fr !important;gap:6px}
  .dsh-kpi-row{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:480px){
  .dsh-bottom-grid{grid-template-columns:1fr !important}
  .dsh-kpi-row{grid-template-columns:repeat(2,1fr) !important}
  .dsh-kpi-val{font-size:18px !important}
}

/* ── Mobile: retencja tabela ── */
@media(max-width:768px){
  #retBody table{table-layout:auto !important}
  #retBody td:nth-child(3){display:none}
}

/* ── Mobile: topbar-actions ── */
@media(max-width:768px){
  .mzw-topbar-actions .tb-action-btn:not(#btnDarkModeNav):not(.tb-action-lock){display:none}
  .tb-action-lock kbd, .tb-action-btn kbd{display:none}
  .tb-action-lock{font-size:11px;padding:4px 8px}
}

/* ── Mobile: modal pełna szerokość ── */
@media(max-width:480px){
  .modal-overlay{padding:0 !important}
  .modal-content{max-width:100vw !important;border-radius:0 !important;margin:0 !important;max-height:100vh !important}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE TABLES & STICKY SCROLLBARS — global fix
   ═══════════════════════════════════════════════════════════════ */

/* 1. Tekst w komórkach zawija się — nie nowrap */
.table th, .table td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 2. Kolumny z krótkimi wartościami pozostają nowrap */
.table th,
.table td:first-child,
.table .btn-group,
.table .kpill {
  white-space: nowrap;
}

/* 3. Długie teksty w td zawijają się elegancko */
.table td {
  min-width: 60px;
  max-width: 340px;
}

/* 4. Kolumna akcji (btn-group) nie może się rozciągać */
.table td:last-child {
  white-space: nowrap;
  width: 1%;
  min-width: unset;
  max-width: unset;
}

/* 5. hscroll — zawsze widoczny pasek przewijania (sticky) */
.hscroll {
  overflow-x: auto;
  overflow-y: visible;
  /* Zawsze pokazuj pasek — nie chowaj go */
  scrollbar-width: thin;
  scrollbar-color: var(--gold, #ae9046) transparent;
  /* Przyklejony pasek do dolnej krawędzi widocznego obszaru */
  position: relative;
}

/* Webkit — zawsze widoczny pasek */
.hscroll::-webkit-scrollbar {
  height: 6px;
  display: block;
}
.hscroll::-webkit-scrollbar-track {
  background: var(--border, #e2e8f0);
  border-radius: 3px;
}
.hscroll::-webkit-scrollbar-thumb {
  background: var(--gold, #ae9046);
  border-radius: 3px;
}
.hscroll::-webkit-scrollbar-thumb:hover {
  background: var(--gold2, #c9a84c);
}

/* 6. mzw-content — pozwól na poziome przewijanie zamiast ukrywać */
.mzw-content {
  overflow-x: auto !important;
  overflow-y: auto;
}

/* 7. Sticky scrollbar trick — pasek zawsze przy dole viewportu */
/* Wrapper wokół hscroll sticky-scroll */
.hscroll-wrap {
  position: relative;
  overflow: hidden;
}

/* 8. Tabela nie kurczy się poniżej minimum */
.hscroll > .table {
  min-width: 600px;
}

/* Specyficzne min-width dla gęstych tabel */
#rcpTable { min-width: 700px; }
#riskTable { min-width: 800px; }
#authsTable { min-width: 650px; }
#employeesTable { min-width: 500px; }
#incidentsTable { min-width: 650px; }
#dsarTable { min-width: 600px; }

/* 9. Rozszerzony tekst w xr-detail (rozwinięty wiersz) */
.xr-detail td {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 10. Responsywność — małe ekrany */
@media (max-width: 900px) {
  .table th, .table td {
    font-size: 11px;
    padding: 6px 7px;
  }
  .table td {
    max-width: 200px;
  }
  .mzw-sidebar {
    width: 160px;
  }
}

@media (max-width: 640px) {
  .mzw-sidebar {
    display: none;
  }
  .table th, .table td {
    font-size: 10px;
    padding: 5px 6px;
  }
  .hscroll > .table {
    min-width: 480px;
  }
}

/* 11. Toolbar wrap na małych ekranach */
.toolbar {
  flex-wrap: wrap;
  gap: 6px;
}

/* 12. Clamp — skrócony tekst z rozwinięciem po kliknięciu */
.table td.clamp-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.table td.clamp-cell.expanded {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* ═══════════════════════════════════════════════════════
   MOBILE REDESIGN v3 — iPhone-first, clean & readable
   ═══════════════════════════════════════════════════════ */

/* ── Bottom Navigation Bar ── */
#mobileBottomNav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(54px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--navy, #0D1B2A);
  border-top: 1px solid rgba(255,255,255,.1);
  z-index: 9999;
  flex-direction: row;
  align-items: stretch;
  box-shadow: 0 -2px 20px rgba(0,0,0,.35);
}
.mbn-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: rgba(255,255,255,.38);
  padding: 6px 2px 4px;
  cursor: pointer;
  transition: color .15s, background .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-width: 0;
  font-family: inherit;
}
.mbn-btn:active { background: rgba(255,255,255,.07); }
.mbn-btn.active { color: var(--gold, #B8962A); }
.mbn-ico { font-size: 21px; line-height: 1; display: block; }
.mbn-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 768px) {

  /* ── Pokaż bottom nav ── */
  #mobileBottomNav { display: flex; }

  /* ── Ukryj górną nawigację i sidebar ── */
  .mzw-nav { display: none !important; }
  .mzw-sidebar { display: none !important; }
  .mzw-footer { display: none !important; }

  /* ── TOPBAR — bardzo slim ── */
  .mzw-topbar {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    gap: 6px;
  }
  /* Topbar mobilny — zachowaj logo, ukryj teksty i zbędne przyciski */
  .mzw-logo-sep { display: none !important; }
  .mzw-app-sub  { display: none !important; }
  .mzw-app-name { display: none !important; }
  /* Logo obrazek — widoczny */
  .mzw-logo-img { height: 26px !important; display: block !important; }
  .mzw-topbar-logo { padding: 0 6px !important; display: flex !important; align-items: center !important; }
  /* Ukryj przyciski akcji poza blokadą */
  .tb-action-btn { display: none !important; }
  .tb-action-lock {
    display: flex !important;
    align-items: center;
    font-size: 11px !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
  }
  #mzw-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 6px 10px;
    margin-left: auto;
    background: rgba(255,255,255,.07);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
  }

  /* ── Layout ── */
  .mzw-layout {
    height: calc(100dvh - 44px - 54px - env(safe-area-inset-bottom)) !important;
    flex-direction: column;
    overflow: hidden;
  }
  .mzw-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .mzw-content main {
    padding: 10px 10px 20px;
  }

  /* ── Hamburger fullscreen overlay ── */
  .mzw-nav.mzw-nav-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    flex-direction: column !important;
    overflow-y: auto;
    overflow-x: hidden;
    background: #091422 !important;
    padding-top: calc(env(safe-area-inset-top) + 0px) !important;
    padding-bottom: calc(54px + env(safe-area-inset-bottom)) !important;
  }
  /* Przyciski nawigacyjne w menu mobilnym — duże touch targets */
  .mzw-nav.mzw-nav-open .mzw-tab-solo,
  .mzw-nav.mzw-nav-open .mzw-ng-btn {
    min-height: 52px !important;
    font-size: 15px !important;
    padding: 14px 20px !important;
  }
  .mzw-nav.mzw-nav-open .mzw-dd-item {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 12px 20px 12px 40px !important;
    display: flex !important;
    align-items: center;
  }
  /* Nagłówek menu */
  .mzw-nav-close {
    position: sticky;
    top: 0;
    background: #091422;
    z-index: 1;
    padding: 12px 16px !important;
    min-height: 52px;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  .mzw-nav-close-btn {
    font-size: 24px !important;
    padding: 4px 10px !important;
  }

  /* ── DASHBOARD ALERTY — przeprojektowane ── */
  #dash-root { padding: 8px 10px; gap: 10px; }

  .dsh-zone-alerts { gap: 8px; }

  .dsh-alert {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 4px 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    align-items: start;
  }
  .dsh-alert .dsh-pill,
  .dsh-alert .dsh-pill-danger,
  .dsh-alert [class*="pill"] {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    font-size: 10px !important;
    white-space: nowrap;
  }
  .dsh-alert .dsh-alert-txt,
  .dsh-alert-txt {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px !important;
    line-height: 1.4;
  }
  .dsh-alert-btn,
  .dsh-alert-btn-warn {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 4px 0 0 !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    min-height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ── Dashboard KPI ── */
  .dash-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .dash-kpi {
    padding: 12px 8px !important;
    border-radius: 10px !important;
  }
  .dash-kpi-num { font-size: 24px !important; }
  .dash-kpi-label { font-size: 10px !important; }
  .dash-charts { grid-template-columns: 1fr !important; }

  /* ── Toolbar ── */
  .toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
  }
  .toolbar h2 {
    font-size: 16px;
    width: 100%;
    margin: 0 0 4px;
    font-weight: 700;
  }
  .toolbar button {
    font-size: 13px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    touch-action: manipulation;
  }
  .toolbar select, .toolbar input {
    font-size: 14px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    flex: 1;
  }

  /* ── Karty ── */
  .card { padding: 12px; border-radius: 10px; margin-bottom: 8px; }

  /* ── Tabele ── */
  .hscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -10px;
    padding: 0 10px 4px;
  }
  .table { font-size: 12px; min-width: 480px; }
  .table th { font-size: 10px; padding: 7px 8px; font-weight: 700; }
  .table td { padding: 9px 8px; vertical-align: middle; }

  /* ── Modal ── */
  .modal-content {
    margin: 4px !important;
    max-height: calc(96dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 16px !important;
    overflow-y: auto;
  }
  #modalBody { padding: 14px !important; }
  .mf-grid, .mf-grid-2, .mf-grid-3 { grid-template-columns: 1fr !important; }
  .mf-full { grid-column: 1 !important; }
  .mf-field input, .mf-field select, .mf-field textarea {
    font-size: 16px !important;
    min-height: 44px;
    touch-action: manipulation;
    border-radius: 8px;
  }
  .mf-btn {
    min-height: 48px;
    font-size: 14px !important;
    border-radius: 10px;
    touch-action: manipulation;
  }
  .mf-section-title { font-size: 11px; }
  .mf-actions { gap: 8px; padding-top: 8px; }

  /* ── Przyciski globalne ── */
  button { touch-action: manipulation; }
  .btn-icon { width: 34px; height: 34px; font-size: 15px; }
  .btn-group { gap: 4px; }
  .kpill { font-size: 10px; padding: 2px 7px; }

  /* ── Login ── */
  #loginCard {
    padding: 28px 18px !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 16px !important;
  }

  /* ── Global search ── */
  #globalSearchOverlay > div {
    width: 96vw !important;
    max-width: none !important;
    margin: 54px auto 0 !important;
    border-radius: 12px !important;
  }
  #gSearchInput { font-size: 16px !important; }

  /* ── Perm cards (uprawnienia) ── */
  .perm-cards { grid-template-columns: repeat(3, 1fr) !important; }
  .perm-card { padding: 8px 4px 6px !important; }
  .perm-card-ico { font-size: 16px !important; }
  .perm-card-name { font-size: 9px !important; }
}

/* ── Notch / Dynamic Island — safe area ── */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    .mzw-topbar {
      padding-top: env(safe-area-inset-top) !important;
      height: calc(44px + env(safe-area-inset-top)) !important;
      min-height: calc(44px + env(safe-area-inset-top)) !important;
    }
    .mzw-layout {
      height: calc(100dvh - 44px - env(safe-area-inset-top) - 54px - env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ── Bardzo mały ekran (SE, starsze iPhony) ── */
@media (max-width: 375px) {
  .mbn-ico { font-size: 18px; }
  .mbn-lbl { font-size: 8px; }
  .pin-input { width: 32px !important; height: 38px !important; font-size: 14px !important; }
  .dash-kpi-num { font-size: 20px !important; }
}

/* ── Desktop — ukryj bottom nav ── */
@media (min-width: 769px) {
  #mobileBottomNav { display: none !important; }
}

/* ── Ukryj etykietę "Zablokuj" na mobile — zostaw tylko ikonę ── */
@media (max-width: 768px) {
  .lock-label { display: none; }
  .tb-action-lock { padding: 6px 8px !important; }
}