:root {
  --bg:#f5f5f4;--bg2:#ffffff;--bg3:#f0f0ef;
  --border:#e2e2e0;--border2:#d4d4d2;
  --text:#1a1a18;--text2:#6b6b68;--text3:#9b9b98;
  --blue:#185FA5;--blue-light:#E6F1FB;--blue-dark:#0C447C;
  --green:#3B6D11;--green-light:#EAF3DE;
  --amber:#BA7517;--amber-light:#FAEEDA;
  --red:#A32D2D;--red-light:#FCEBEB;
  --orange:#c2590a;--orange-light:#FEF0E7;
  --radius:8px;--radius-sm:5px;--radius-lg:12px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Consolas','Monaco',monospace;
  /* Aliasy — używane przez moduły */
  --bg-card:var(--bg2);--surface:var(--bg2);--surface2:var(--bg3);
  --text1:var(--text);--text-muted:var(--text3);--accent:var(--blue);
}

/* ==================== CIEMNY MOTYW ==================== */
[data-theme="dark"]{
  --bg:#18181a;--bg2:#232326;--bg3:#2c2c30;
  --border:#3a3a3f;--border2:#4a4a50;
  --text:#e8e8e6;--text2:#9a9a98;--text3:#6a6a68;
  --blue:#4d9de0;--blue-light:#1a3050;--blue-dark:#2e72b8;
  --green:#5fb336;--green-light:#1a3010;
  --amber:#d4920a;--amber-light:#3a2800;
  --red:#d44a4a;--red-light:#3a1010;
  --orange:#fb923c;--orange-light:#3a1500;
}
[data-theme="dark"] .tbl-wrap,[data-theme="dark"] .stat,
[data-theme="dark"] .panel-right,[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar{border-color:var(--border)}
/* Formularz DT-1 zawsze biały (do druku) */
[data-theme="dark"] .form-page{background:#fff!important;color:#000!important}
/* Toast — jaśniejszy w dark mode */
[data-theme="dark"] .toast{background:#e8e8e6;color:#18181a}
/* Input/select w dark mode */
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:var(--bg3);color:var(--text);border-color:var(--border)
}
[data-theme="dark"] input::placeholder{color:var(--text3)}
/* Toolbar inputs */
[data-theme="dark"] .toolbar input,[data-theme="dark"] .toolbar select{
  background:var(--bg3);color:var(--text)
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;transition:background .2s,color .2s}
.hidden{display:none!important}
.app{display:flex;flex-direction:column;min-height:100vh}

/* TOPBAR */
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 1.5rem;display:flex;align-items:center;gap:12px;height:56px;position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.brand{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;color:var(--text)}
.brand .ti{font-size:20px;color:var(--blue)}
.brand-badge{font-size:10px;background:var(--blue-light);color:var(--blue);padding:2px 7px;border-radius:999px;font-weight:600}
.tnb{background:none;border:none;padding:8px 10px;border-radius:var(--radius);font-size:13px;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--font);font-weight:500;transition:all .15s;width:100%;text-align:left}
.tnb .ti{font-size:16px;flex-shrink:0}
.tnb:hover{background:var(--bg3);color:var(--text)}
.tnb.active{background:var(--blue-light);color:var(--blue)}
.tnb .badge{font-size:10px;background:var(--blue);color:#fff;padding:1px 6px;border-radius:999px;margin-left:auto}
.tnb.active .badge{background:var(--blue-dark)}
.yr-sel{padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:var(--font);background:var(--bg2);color:var(--text);cursor:pointer;outline:none}
.yr-sel:focus{border-color:var(--blue)}
.user-pill{display:flex;align-items:center;gap:8px;background:var(--bg3);border-radius:var(--radius);padding:6px 14px;font-size:13px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}

/* APP BODY */
.app-body{display:flex;flex:1;min-height:0;overflow:hidden}

/* SIDEBAR */
.sidebar{width:210px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:8px;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;gap:1px}
.sidebar-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;padding:14px 10px 5px;margin-top:2px}
.sidebar-label-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;border-radius:var(--radius-sm);transition:background .12s}
.sidebar-label-toggle:hover{background:var(--bg3);color:var(--text2)}
.sidebar-chevron{font-size:11px;opacity:.6;transition:transform .18s;flex-shrink:0}
.sidebar-label-toggle.collapsed .sidebar-chevron{transform:rotate(-90deg)}

/* SIDEBAR MODE TOGGLE */
.sidebar-mode-toggle{display:flex;align-items:center;gap:7px;width:100%;padding:5px 8px;margin-bottom:4px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;transition:all .15s;font-family:var(--font);text-align:left}
.sidebar-mode-toggle:hover{background:var(--blue-light);color:var(--blue);border-color:var(--blue)}
.sidebar-mode-toggle .ti{font-size:13px;flex-shrink:0}
body.sidebar-basic .sidebar-mode-toggle{background:var(--blue-light);color:var(--blue);border-color:var(--blue)}

/* TRYB PROSTY — ukryj przyciski bez tnb-basic */
body.sidebar-basic .tnb:not(.tnb-basic){display:none!important}

/* CONTENT */
.content{flex:1;padding:1.5rem;overflow-y:auto;min-width:0}
.page{display:none}
.page.active{display:block}
/* Generic card — używana przez moduły (feature-config, rate-reader itp.) */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.pg-title{font-size:18px;font-weight:600;margin-bottom:1.25rem;display:flex;align-items:center;gap:10px}
.pg-title .ti{font-size:22px;color:var(--text2)}
.pg-sub{font-size:13px;color:var(--text2);margin-top:-14px;margin-bottom:16px;margin-left:34px}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.5rem}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;cursor:pointer;transition:border-color .15s}
.stat:hover{border-color:var(--blue)}
.stat-label{font-size:12px;color:var(--text2);margin-bottom:6px;font-weight:500}
.stat-val{font-size:28px;font-weight:700}
.stat-sub{font-size:12px;color:var(--text3);margin-top:3px}

/* TOOLBAR */
.toolbar{display:flex;gap:8px;margin-bottom:1.25rem;align-items:center;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:var(--font);outline:none;transition:border-color .15s;background:var(--bg2)}
.toolbar input:focus,.toolbar select:focus{border-color:var(--blue)}
.toolbar input{flex:1;min-width:180px}
.btn{border:none;border-radius:var(--radius);padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:6px;white-space:nowrap;transition:all .15s}
.btn .ti{font-size:15px}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:#2d5509}
.btn-gray{background:var(--bg3);color:var(--text);border:1px solid var(--border)}
.btn-gray:hover{background:var(--bg)}
.btn-amber{background:var(--amber);color:#fff}
.btn-red{background:var(--red);color:#fff}

/* TABLE */
.tbl-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
#fleet-tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;font-weight:600;color:var(--text2);padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg3);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
td{padding:10px 16px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg3)}
tr.row-sel td{background:var(--blue-light)!important}
tr.row-sel:hover td{background:#d5e8f8!important}
tr.row-alert-red td{background:#fff5f5}
tr.row-alert-red:hover td{background:#fee2e2}
tr.row-alert-amber td{background:#fffbf0}
tr.row-alert-amber:hover td{background:#fef3c7}
/* Sticky columns — nr rej. + marka zawsze widoczne */
.col-sticky,.col-sticky-th{position:sticky;z-index:1;background:var(--bg2)}
.col-sticky-th{background:var(--bg3);z-index:3}
tr:hover .col-sticky{background:var(--bg3)}
tr.row-sel .col-sticky{background:var(--blue-light)!important}
tr.row-sel:hover .col-sticky{background:#d5e8f8!important}
tr.row-alert-red .col-sticky{background:#fff5f5}
tr.row-alert-red:hover .col-sticky{background:#fee2e2}
tr.row-alert-amber .col-sticky{background:#fffbf0}
tr.row-alert-amber:hover .col-sticky{background:#fef3c7}
th input[type=checkbox],td input[type=checkbox]{cursor:pointer;width:15px;height:15px}
th.sort-th{cursor:pointer;user-select:none}
th.sort-th:hover{color:var(--blue)}

/* PILLS */
.pill{display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;font-weight:600}
.pill-blue{background:var(--blue-light);color:var(--blue)}
.pill-green{background:var(--green-light);color:var(--green)}
.pill-amber{background:var(--amber-light);color:var(--amber)}
.pill-red{background:var(--red-light);color:var(--red)}
.pill-gray{background:var(--bg3);color:var(--text2)}
.pill-new{background:#dcfce7;color:#166534}
.stat-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;background:var(--bg3);border:1px solid var(--border)}
.stat-chip span{font-weight:700;font-size:14px}
.stat-chip-green{background:rgba(34,197,94,.1);border-color:var(--green)}
.stat-chip-amber{background:rgba(245,158,11,.1);border-color:var(--amber)}

/* INLINE SELECTS */
.isel{padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font);background:var(--bg2);color:var(--text);cursor:pointer;outline:none}
.isel:focus{border-color:var(--blue)}
.inum{padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-family:var(--mono);background:var(--bg2);color:var(--text);width:55px;text-align:center;outline:none}
.inum:focus{border-color:var(--blue)}

/* KOSZYK / PANEL PRAWA */
.panel-right{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;position:sticky;top:70px}
.panel-title{font-size:15px;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.sum-row:last-child{border-bottom:none}
.sum-row.big{font-size:16px;font-weight:700;padding:10px 0 0;border-top:2px solid var(--border);margin-top:4px;border-bottom:none}
.sum-val{font-family:var(--mono);font-weight:600}
.sum-val.green{color:var(--green)}
.sum-val.blue{color:var(--blue)}
.sum-val.amber{color:var(--amber)}

/* BOXES */
.ebox{background:var(--red-light);border:1px solid #F09595;border-radius:var(--radius);padding:12px 16px;font-size:13px;color:#791F1F;margin-bottom:1rem;display:flex;gap:8px;align-items:center}
.wbox{background:var(--amber-light);border:1px solid #EF9F27;border-radius:var(--radius);padding:12px 16px;font-size:13px;color:#633806;margin-bottom:1rem;display:flex;gap:8px;align-items:flex-start}
.ibox{background:var(--blue-light);border:1px solid #B5D4F4;border-radius:var(--radius);padding:12px 16px;font-size:13px;color:var(--blue-dark);margin-bottom:1rem;display:flex;gap:8px;align-items:flex-start}
.ibox .ti{flex-shrink:0;font-size:16px;margin-top:1px}
.gbox{background:var(--green-light);border:1px solid #a3c97a;border-radius:var(--radius);padding:12px 16px;font-size:13px;color:var(--green);margin-bottom:1rem;display:flex;gap:8px;align-items:center}

/* AI CHAT */
.ai-msg{display:flex;align-items:flex-start;gap:10px}
.ai-msg-user{flex-direction:row-reverse}
.ai-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text2);flex-shrink:0}
.ai-msg-bot .ai-avatar{background:var(--blue-light);color:var(--blue);border-color:#B5D4F4}
.ai-bubble{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 14px;font-size:13px;line-height:1.6;max-width:85%;white-space:pre-wrap}
.ai-msg-user .ai-bubble{background:var(--blue);color:#fff;border-color:var(--blue-dark)}
.ai-example{background:none;border:1px solid var(--border);border-radius:var(--radius);padding:7px 10px;font-size:12px;color:var(--text2);cursor:pointer;font-family:var(--font);text-align:left;transition:all .15s;line-height:1.4}
.ai-example:hover{background:var(--bg3);color:var(--text);border-color:var(--blue)}

/* FORM PAGE (print) */
.form-page{background:#fff;color:#000;font-family:'Courier New',Courier,monospace;font-size:7.5pt;border:1px solid #888;margin:0 auto 20px;padding:6mm 8mm;max-width:190mm}
.form-dark-hdr{background:#2a2a2a;color:#fff;font-size:6.5pt;padding:3px 5px;text-align:center;display:flex;justify-content:space-between;margin-bottom:3px}
.form-main-title{display:flex;align-items:stretch;border:1px solid #000;margin-bottom:3px}
.fmt-left{padding:4px 8px;border-right:1px solid #000;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:70px}
.fmt-right{padding:4px 8px;flex:1}
.fmt-big{font-size:13pt;font-weight:bold;font-family:Arial,sans-serif}
.fmt-sub{font-size:8pt;font-weight:bold;font-family:Arial,sans-serif}
.fsec{font-size:7pt;font-weight:bold;font-family:Arial,sans-serif;background:#e8e8e8;border:1px solid #000;border-bottom:none;padding:2px 5px;margin-top:2px}
.frow{border:1px solid #000;border-top:none;padding:3px 5px;display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.frow.top{border-top:1px solid #000}
.fn{font-size:6pt;font-weight:bold;color:#333;min-width:10px}
.fv{font-size:8pt;font-weight:bold;color:#000;font-family:'Courier New',monospace}
.fvn{font-size:8pt;color:#000}
.fbox{border:1px solid #000;padding:2px 5px;min-height:14px;display:inline-block;font-size:7.5pt;font-family:'Courier New',monospace;font-weight:bold}
.ftable{width:100%;border-collapse:collapse;font-size:7pt}
.ftable th{border:1px solid #000;padding:2px 3px;background:#e8e8e8;font-family:Arial,sans-serif;font-weight:bold;text-align:center;font-size:6.5pt}
.ftable td{border:1px solid #000;padding:2px 4px;font-size:7pt;vertical-align:middle}
.ftable td.lbl{font-family:Arial,sans-serif;font-size:6.5pt}
.ftable td.num{text-align:center;font-family:'Courier New',monospace;font-weight:bold}
.ftable td.amt{text-align:right;font-family:'Courier New',monospace;font-weight:bold;color:#006600}
.ftable td.fn-cell{font-size:6pt;font-weight:bold;text-align:right;padding-right:3px;color:#333}
.ftable tr.filled td{background:#f0fff0}
.veh-sec-hdr{font-size:7pt;font-weight:bold;font-family:Arial,sans-serif;background:#d8d8d8;border:1px solid #000;border-bottom:none;padding:2px 5px;margin-top:3px}
.vfts{width:100%;border-collapse:collapse}
.vfts td{border:1px solid #000;padding:2px 5px;font-size:7pt;vertical-align:top}
.vfts td:not(:first-child){border-left:none}
.vfts tr:not(:first-child) td{border-top:none}
.vfield-lbl{font-family:Arial,sans-serif;font-size:6pt;color:#333;display:block;margin-bottom:1px}
.vfield-val{font-size:8pt;font-weight:bold;font-family:'Courier New',monospace}
.vfield-empty{font-size:8pt;color:#aaa}
.sig-row{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #000;border-top:none}
.sig-cell{padding:8px 6px;border-right:1px solid #000;min-height:28px}
.sig-cell:last-child{border-right:none}

/* STAWKI TABLE */
.rtable{width:100%;border-collapse:collapse;font-size:12px}
.rtable th{background:var(--bg3);padding:8px 12px;text-align:left;font-weight:600;font-size:11px;border:0.5px solid var(--border);color:var(--text2)}
.rtable td{padding:7px 12px;border:0.5px solid var(--border)}
.rtable td.rate{text-align:right;font-family:var(--mono);font-weight:600;color:var(--green)}
.rtable td.rate2{text-align:right;font-family:var(--mono);color:var(--blue)}
.rtable tr.section-hdr td,.rtable tr.section-hdr th{background:var(--bg3);font-weight:600;font-size:11px;color:var(--text2)}

/* DANE PODATNIKA */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{display:flex;flex-direction:column;gap:4px}
.f.full{grid-column:1/-1}
.f label{font-size:12px;color:var(--text2);font-weight:500}
.f input,.f select,.f textarea{padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:var(--font);outline:none;transition:border-color .15s;background:var(--bg2);color:var(--text)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue)}

/* TOAST */
.toast{position:fixed;bottom:2rem;right:2rem;background:#1a1a18;color:#fff;padding:12px 20px;border-radius:var(--radius);font-size:14px;z-index:999;opacity:0;transition:opacity .2s;box-shadow:0 4px 16px rgba(0,0,0,.2);pointer-events:none;display:flex;align-items:center;gap:8px}
.toast.show{opacity:1}

/* LOADER / EMPTY */
.loader{text-align:center;padding:3rem;color:var(--text2);font-size:14px}
.loader .ti{font-size:40px;display:block;margin-bottom:12px;color:var(--text3)}
.empty{text-align:center;padding:3rem;color:var(--text2);font-size:14px}
.empty .ti{font-size:40px;display:block;margin-bottom:12px;color:var(--text3)}

/* PD STEPS */
.step{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--bg3);border-radius:var(--radius-lg);margin-bottom:10px;border:1px solid var(--border)}
.step-num{min-width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.step-title{font-weight:600;font-size:14px;margin-bottom:3px}
.step-desc{font-size:12px;color:var(--text2);line-height:1.6}

@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ocr-field-row{display:grid;grid-template-columns:140px 1fr 1fr;gap:0;border-bottom:0.5px solid var(--border);font-size:12px}
.ocr-field-row:last-child{border-bottom:none}
.ocr-cell{padding:8px 12px}
.ocr-cell.label{font-weight:500;color:var(--text2);background:var(--bg3);font-size:11px;display:flex;align-items:center}
.ocr-cell.old{color:var(--text2)}
.ocr-cell.new-val{font-weight:600;color:var(--green)}
.ocr-cell.new-val.changed{color:var(--blue);background:var(--blue-light)}
.ocr-cell.new-val.warn{color:var(--amber);background:var(--amber-light)}
.diff-badge{display:inline-block;font-size:9px;padding:1px 5px;border-radius:3px;background:var(--blue);color:#fff;margin-left:5px;font-weight:700}

@media print{
  body{background:white!important}
  .topbar,.content>*:not(#page-formularze){display:none!important}
  #page-formularze{display:block!important}
  .no-print{display:none!important}
  .form-page{border:none;page-break-after:always;padding:8mm 10mm}
  .form-page:last-child{page-break-after:avoid}
}

/* ==================== RESPONSYWNOŚĆ MOBILNA ==================== */

/* Hamburger — ukryty na desktop */
.mob-menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--text);font-size:22px;padding:6px 8px;border-radius:var(--radius-sm);flex-shrink:0;align-items:center;line-height:1}
.mob-menu-btn:hover{background:var(--bg3)}

/* Overlay — ciemne tło za sidebar na mobile */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:190;opacity:0;transition:opacity .25s}

/* ==================== MODALE (overlay wyśrodkowany, tło przyciemnione) ==================== */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9600;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}

/* Mały przycisk akcji w wierszu tabeli (edytuj/usuń/itp.) */
.tbtn{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:13px;transition:background .15s,color .15s}
.tbtn:hover{background:var(--border);color:var(--text)}
.sidebar-overlay.open{display:block;opacity:1}

/* -------- TABLET ≤ 900px -------- */
@media(max-width:900px){
  /* Tabela floty — przewijana w poziomie */
  .tbl-wrap{overflow-x:auto}
  table{min-width:600px}

  /* Stats KPI — 2 kolumny */
  .stats{grid-template-columns:repeat(2,1fr)}

  /* Topbar: mniejsze padding */
  .topbar{padding:0 .75rem;gap:8px}
}

/* -------- MOBILE ≤ 640px -------- */
@media(max-width:640px){
  /* Pokaż hamburger */
  .mob-menu-btn{display:flex}

  /* Sidebar — slide-in z lewej */
  .sidebar{
    position:fixed;
    left:-220px;
    top:0;
    height:100vh;
    z-index:200;
    transition:left .25s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    box-shadow:none;
  }
  .sidebar.open{left:0;box-shadow:4px 0 24px rgba(0,0,0,.2)}

  /* Content — pełna szerokość */
  .content{padding:.875rem .75rem}

  /* Topbar */
  .topbar{padding:0 .625rem;gap:6px;height:52px}
  .brand{font-size:13px;gap:6px}
  .brand .ti{font-size:18px}
  .brand-badge{display:none}

  /* Ukryj mniej ważne elementy topbara na telefonach */
  .topbar .company-sel-wrap{display:none!important}
  #company-badge{display:none!important}
  /* Rok — zachowaj ale kompaktowy, bez etykiety */
  .topbar .yr-wrap label{display:none}
  .topbar .yr-wrap{margin-left:auto;gap:0!important}
  /* Przesuń i18n na prawo gdy yr-wrap jest uproszczone */
  #i18n-selector{margin-left:0}

  /* Stats KPI — 1 kolumna */
  .stats{grid-template-columns:1fr 1fr}

  /* Toolbar — przewijana lub zawijana */
  .toolbar{flex-wrap:wrap;gap:6px}
  .toolbar input{min-width:140px}

  /* Formularz DT-1 — grid 1-kol */
  .fg{grid-template-columns:1fr}
  .f.full{grid-column:1}

  /* Tabela */
  .tbl-wrap{border-radius:var(--radius)}
  table{min-width:520px}
  th,td{padding:8px 10px}

  /* Toast — pełna szerokość */
  .toast{left:1rem;right:1rem;bottom:1rem;justify-content:center}

  /* Mniejszy padding paneli */
  .panel-right{position:static;margin-top:1rem}
}

/* -------- MAŁE TELEFONY ≤ 400px -------- */
@media(max-width:400px){
  .stats{grid-template-columns:1fr}
  .topbar{height:48px}
}

/* Ukryj nazwę i rolę użytkownika na telefonach — tylko avatar + logout */
@media(max-width:500px){
  #user-name,#user-role-lbl{display:none}
}

/* ===== TOPBAR — i18n selector fix ===== */
/* Przyciski flag nigdy nie zawijają się do nowej linii */
#i18n-selector{flex-wrap:nowrap!important;flex-shrink:0}
/* Przy umiarkowanej szerokości chowamy oddzielną "pigułkę" firmy (duplikat selecta) */
@media(max-width:900px){#company-badge{display:none!important}}
/* Przy wąskim oknie chowamy cały selektor firmy */
@media(max-width:780px){.topbar .company-sel-wrap{display:none!important}}
/* Na telefonach chowamy i18n — zostawia za mało miejsca */
@media(max-width:640px){#i18n-selector{display:none!important}}

/* ===== DASHBOARD CARDS ===== */
.dash-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:1.25rem}
.dash-card-hdr{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.dash-card-hdr .ti{font-size:15px;flex-shrink:0}
/* 2- i 3-kolumnowe gridy pulpitu */
.dash-2col{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
.dash-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1.25rem}
/* Karty powiadomień — zawsze widoczne */
.dash-notif-card{border-radius:var(--radius-lg);padding:12px 14px;min-height:54px}
.dash-notif-red{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.3)}
.dash-notif-amber{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.3)}
.dash-notif-blue{background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.3)}
/* Dashboard 2col → 1col na tabletach */
@media(max-width:900px){
  .dash-2col{grid-template-columns:1fr}
  .dash-3col{grid-template-columns:1fr 1fr}
}
/* Dashboard 1col na telefonach */
@media(max-width:640px){
  .dash-2col,.dash-3col{grid-template-columns:1fr}
  .dash-card{padding:14px 16px}
}
/* Dash-2col kontenery nie mają marginesu-bottom — mają go karty wewnątrz */
.dash-2col>.dash-card,.dash-3col>.dash-notif-card{margin-bottom:0}

/* Modularny kokpit — siatka 2-kolumnowa */
.dash-widget{grid-column:span 2;min-width:0}
.dash-widget-half{grid-column:span 1 !important}
@media(max-width:900px){
  .dash-widget-half{grid-column:span 2 !important}
}
/* Wiersz drag-and-drop w modalu */
.dash-widget-row:hover{background:var(--bg3,var(--bg2))}
.dash-widget-row.drag-over{border-top:2px solid var(--blue)}

/* ===== FLEET KPI STRIP ===== */
.fleet-kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1rem}
.fkpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 16px;display:flex;flex-direction:column;gap:2px;transition:border-color .15s}
.fkpi-val{font-size:28px;font-weight:700;line-height:1;font-family:var(--mono)}
.fkpi-lab{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:500}
.fkpi-red{border-color:var(--red)!important;background:var(--red-light)!important}.fkpi-red .fkpi-val{color:var(--red)}
.fkpi-amber{border-color:var(--amber)!important;background:var(--amber-light)!important}.fkpi-amber .fkpi-val{color:var(--amber)}
@media(max-width:600px){.fleet-kpi-strip{grid-template-columns:repeat(2,1fr)}}

/* ===== FLEET ALERT BANNER ===== */
.fleet-alert-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius);font-size:12px;cursor:pointer;transition:opacity .15s;user-select:none}
.fleet-alert-chip:hover{opacity:.8}
.fleet-alert-red{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.fleet-alert-amber{background:#fffbeb;border:1px solid #fde68a;color:#92400e}

/* ===== FLEET VIEW MODE TOGGLE ===== */
.view-mode-bar{display:flex;gap:4px;margin-bottom:8px;align-items:center;flex-wrap:wrap}
.view-mode-bar .btn{font-size:12px;padding:5px 12px}

/* ===== FLEET CARD GRID ===== */
#fleet-cards{display:none;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;padding:2px 0}
.fleet-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;transition:box-shadow .15s,border-color .15s;display:flex;flex-direction:column;gap:6px}
.fleet-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.10);border-color:var(--blue)}
.fc-alert-red{border-left:4px solid var(--red)!important}
.fc-alert-amber{border-left:4px solid var(--amber)!important}
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fc-plate{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.5px}
.fc-brand{font-size:13px;font-weight:600;color:var(--text1)}
.fc-meta{font-size:11px;color:var(--text3)}
.fc-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.fc-icon{font-size:13px;flex-shrink:0}
.fc-dates{display:flex;flex-wrap:wrap;gap:4px;font-size:11px;color:var(--text3);margin-top:2px}
.fc-dates span{display:flex;align-items:center;gap:3px}
[data-theme="dark"] .fleet-card{background:var(--bg2);border-color:var(--border)}

/* ===== FORMULARZ DT-1 — styl oryginału MF ===== */
.form-page{font-family:Arial,Helvetica,sans-serif;font-size:7pt;background:#fff;color:#000;width:210mm;min-height:297mm;padding:6mm 8mm;margin:0 auto 12px;border:none;box-shadow:0 0 12px rgba(0,0,0,.25);position:relative;box-sizing:border-box}
.form-page *{box-sizing:border-box}
@media print{body{background:#fff!important}.form-page{box-shadow:none!important;margin:0!important;page-break-after:always}.no-print{display:none!important}}
#forms-container{background:#c8c8c8;padding:16px;min-height:200px}
/* Ciemne nagłówki sekcji jak w MF */
.form-page .f-sec-hdr{background:#2b2b2b;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:8pt;padding:2px 5px;margin-top:2px}
/* Szare nagłówki podsekcji */
.form-page .f-sub-hdr{background:#d8d8d8;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:8pt;padding:2px 5px;border:0.5px solid #000}
/* Wartości — Courier New Bold jak w formularzach MF */
.form-page .f-val{font-family:'Courier New',Courier,monospace;font-weight:bold}
/* Obrys pola */
.form-page table{border-collapse:collapse;width:100%}
.form-page td,.form-page th{border:0.5px solid #000;padding:1.5px 3px;vertical-align:top}



/* ===== COLUMN FILTER INPUTS ===== */
.col-fi{width:100%;padding:2px 5px;font-size:10px;border:1px solid var(--border);border-radius:4px;background:var(--bg3);color:var(--text1);outline:none}
.col-fi:focus{border-color:var(--blue)}
thead tr:has(.col-fi) th{padding:3px 4px!important;background:var(--bg2)!important}
/* Fleet per-column filter row */
#veh-filter-row th{padding:3px 4px!important;background:var(--bg2)!important}
#veh-filter-row .col-fi{min-width:40px}

/* Modal tab bar — ukryj scrollbar we wszystkich przeglądarkach (nawigacja przez przyciski ‹›) */
#vd-tabs::-webkit-scrollbar{display:none}

/* =====================================================================
   UI IMPROVEMENTS 2026-07
   ===================================================================== */

/* --- Typografia i renderowanie --- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5}

/* --- Globalny styl inputów (.fi — używane w 125 miejscach) --- */
.fi{padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:var(--font);outline:none;transition:border-color .15s,box-shadow .15s;background:var(--bg2);color:var(--text);width:100%}
.fi:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,95,165,.12)}
.fi::placeholder{color:var(--text3)}
[data-theme="dark"] .fi{background:var(--bg3);color:var(--text);border-color:var(--border)}

/* --- Focus ringi dla dostępności --- */
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.toolbar input:focus,.toolbar select:focus,.f input:focus,.f select:focus,.f textarea:focus{box-shadow:0 0 0 3px rgba(24,95,165,.12)}
.isel:focus,.inum:focus{box-shadow:0 0 0 2px rgba(24,95,165,.15)}

/* --- Custom scrollbar — slim, nowoczesny --- */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
#vd-tabs::-webkit-scrollbar{display:none}

/* --- Topbar — mocniejszy cień --- */
.topbar{box-shadow:0 1px 12px rgba(0,0,0,.10)}
.brand{font-weight:700;font-size:16px}
[data-theme="dark"] .topbar{box-shadow:0 1px 12px rgba(0,0,0,.35)}

/* --- Sidebar — lewa belka aktywnego elementu --- */
.tnb{border-left:3px solid transparent;padding-left:7px;border-radius:0 var(--radius) var(--radius) 0}
.tnb.active{border-left-color:var(--blue);border-radius:0 var(--radius) var(--radius) 0}
.tnb:hover:not(.active){border-left-color:var(--border2)}

/* --- Karty z cieniem --- */
.dash-card{box-shadow:0 1px 4px rgba(0,0,0,.07)}
.tbl-wrap{box-shadow:0 1px 4px rgba(0,0,0,.06)}
.panel-right{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.dash-notif-card{box-shadow:0 1px 4px rgba(0,0,0,.06)}
[data-theme="dark"] .dash-card,[data-theme="dark"] .tbl-wrap,
[data-theme="dark"] .panel-right,[data-theme="dark"] .dash-notif-card{box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* --- Stat karty — efekt unoszenia --- */
.stat{box-shadow:0 1px 4px rgba(0,0,0,.06);transition:box-shadow .2s,border-color .15s,transform .2s}
.stat:hover{box-shadow:0 6px 20px rgba(0,0,0,.11);transform:translateY(-2px)}
[data-theme="dark"] .stat{box-shadow:0 1px 4px rgba(0,0,0,.3)}
[data-theme="dark"] .stat:hover{box-shadow:0 6px 20px rgba(0,0,0,.45)}

/* --- Fleet cards — lepszy hover --- */
.fleet-card{transition:box-shadow .2s,border-color .2s,transform .2s}
.fleet-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.13);transform:translateY(-2px)}

/* --- Tabela — płynne przejścia --- */
td{transition:background .1s}

/* --- Przyciski tbtn — czytelniejszy hover --- */
.tbtn{transition:background .15s,color .15s,border-color .15s}
.tbtn:hover{background:var(--border);color:var(--text);border-color:var(--border2)}

/* --- Empty i loader — obramowanie przerywane --- */
.empty,.loader{background:var(--bg2);border:1.5px dashed var(--border2);border-radius:var(--radius-lg)}

/* --- Modale — rozmycie tła --- */
.modal-bg{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#vd-modal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* --- Pill — delikatna litera-spacing --- */
.pill{letter-spacing:.02em}

/* --- Toast — lekko zaokrąglony, lepszy cień --- */
.toast{border-radius:var(--radius-lg);box-shadow:0 4px 24px rgba(0,0,0,.25)}

/* --- pg-title — subtelna linia pod tytułem strony --- */
.pg-title{padding-bottom:14px;margin-bottom:1.5rem;border-bottom:1px solid var(--border)}

/* === UX: redukcja wizualnego hałasu === */

/* Sidebar: ikony monochromatyczne — nie mieszaj kolorów na każdym przycisku */
.tnb .ti{color:inherit;opacity:.75}
.tnb.active .ti{opacity:1}
.tnb:hover .ti{opacity:1}

/* Sidebar: label-toggle — mniejszy padding u góry (mniej pustej przestrzeni) */
.sidebar-label{padding-top:10px;padding-bottom:4px}

/* Sidebar: aktywny element — bardziej subtelne tło */
.tnb.active{background:var(--blue-light);color:var(--blue);font-weight:600}

/* Topbar: wyszukiwarka — trochę szersza, bardziej widoczna */
#gs-input{width:240px!important}
@media(max-width:900px){#gs-input{width:180px!important}}

/* Tabele: lepszy kontrast nagłówków */
th{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);white-space:nowrap}

/* pg-title: lekko większy font */
.pg-title{font-size:17px;font-weight:700;gap:8px}

/* --- Animacja przejść między stronami --- */
@keyframes page-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.page.active{animation:page-enter .15s ease-out forwards}

/* Vehicle detail form grid — baza (media queries nadpisują w src/style.css poniżej) */
.vdfg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px}
.vdf{min-width:0;display:flex;flex-direction:column;gap:3px}
.vdl{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
/* Aliasy klas formularzy — używane w modułach pisanych na Bootstrap-podobne konwencje */
.form-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.form-row label,.vdf label{font-size:11px;font-weight:600;color:var(--text3)}
.form-control,.form-input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;font-family:var(--font);background:var(--bg2);color:var(--text);outline:none;transition:border-color .15s}
.form-control:focus,.form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,95,165,.1)}
[data-theme="dark"] .form-control,[data-theme="dark"] .form-input{background:var(--bg3);color:var(--text);border-color:var(--border)}

/* ==================== MOBILE RESPONSIVENESS ==================== */
/* Telefony ≤ 480px */
@media(max-width:480px){
  /* Topbar */
  .topbar{flex-wrap:wrap;gap:4px;padding:6px 10px}
  .yr-wrap label{display:none}
  #gs-input{width:140px}
  .brand-badge{display:none}
  #user-role-lbl{display:none}
  #user-name{font-size:11px}
  /* Sidebar — zmniejsz tekst */
  .tnb{font-size:11px;padding:7px 10px}
  .sidebar-label{font-size:9px;padding:6px 10px 2px}
  /* Stats / KPI chips — 2 kolumny zamiast 5 */
  .stats{grid-template-columns:repeat(2,1fr)!important}
  #rp-kpi{grid-template-columns:repeat(2,1fr)!important}
  #budp-kpi{grid-template-columns:repeat(2,1fr)!important}
  /* Raporty — wykres + pie w jednej kolumnie */
  #page-raporty>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  /* Budżet plan */
  #budp-plan>div:last-child{flex-direction:column!important}
  /* Dashboard layout */
  .dash-widget,.dash-card{min-width:0}
  /* Toolbar — zawijanie */
  .toolbar{flex-wrap:wrap;gap:4px}
  .toolbar .fi{min-width:0;width:100%!important}
  .toolbar .btn{font-size:11px;padding:5px 8px}
  /* Tabele — zawsze scroll poziomy */
  .tbl-wrap{overflow-x:auto}
  table{font-size:11px}
  th,td{padding:5px 7px!important;white-space:nowrap}
  /* Vehicle detail — pola formularza w 1 kolumnie */
  .vdfg{grid-template-columns:1fr!important}
  /* VD modal — full width */
  #vd-modal>.modal-inner,#vd-modal>[style*="width"]{width:100%!important;max-width:100vw!important;margin:0!important;border-radius:0!important}
  /* Modal generyczny */
  .modal-bg>div{width:95vw!important;max-width:95vw!important}
  /* Karty flotowe — 1 kolumna */
  #fleet-cards{grid-template-columns:1fr!important}
  /* Dash quick actions — mniejsze przyciski */
  #dash-quick-actions .btn{font-size:11px;padding:5px 8px}
  #dash-quick-actions{gap:4px!important}
  /* Bulk-bar */
  #bulk-bar{flex-wrap:wrap;gap:6px;padding:8px 10px}
  /* Page title */
  .pg-title{font-size:15px}
  /* Reports charts — zmniejsz */
  #rp-bar-canvas,#rp-pie-canvas{max-height:200px!important}
}
/* Tablety ≤ 768px */
@media(max-width:768px){
  .stats{grid-template-columns:repeat(3,1fr)!important}
  #page-raporty>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .vdfg{grid-template-columns:1fr 1fr!important}
  #gs-input{width:160px}
  table{font-size:12px}
}

/* --- Przycisk szybkich akcji w dashboardzie — hover --- */
#dash-quick-actions .btn{transition:all .15s}
#dash-quick-actions .btn-gray:hover{background:var(--bg3);border-color:var(--blue);color:var(--blue)}
#dash-quick-actions .btn-blue:hover{box-shadow:0 2px 8px rgba(24,95,165,.3)}

/* --- Skeleton screens — animowane szare prostokąty podczas ładowania --- */
@keyframes sk-pulse{0%,100%{opacity:.45}50%{opacity:.85}}
.sk{background:var(--border);border-radius:4px;display:inline-block;animation:sk-pulse 1.5s ease-in-out infinite}
.sk-row td{padding:8px 12px}
.sk-line{height:12px;border-radius:3px;background:var(--border);display:block;animation:sk-pulse 1.5s ease-in-out infinite}
.sk-line+.sk-line{margin-top:6px}
.sk-circle{border-radius:50%;background:var(--border);animation:sk-pulse 1.5s ease-in-out infinite;flex-shrink:0}

/* --- Budget/TCO page --- */
.budp-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 22px}
.budp-prog{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-top:6px}
.budp-prog-fill{height:100%;border-radius:4px;transition:width .5s}

/* --- Keyboard shortcut badge --- */
kbd{background:var(--bg2);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:2px 7px;font-size:11px;font-family:var(--mono);font-weight:700;color:var(--text)}

/* --- User card dropdown menu --- */
.user-mitem{display:flex;align-items:center;gap:9px;width:100%;padding:8px 14px;background:none;border:none;cursor:pointer;font-size:13px;color:var(--text);text-align:left;transition:background .1s;font-family:var(--font)}
.user-mitem:hover{background:var(--bg3)}
.user-mitem .ti{font-size:15px;color:var(--text2);flex-shrink:0}

/* ═══════════════ SECTION TABS BAR (A+C) ═══════════════ */
.section-tabs-bar{
  position:sticky;top:56px;z-index:91;
  display:flex;align-items:center;gap:2px;
  padding:4px 10px;background:var(--bg2);
  border-bottom:1px solid var(--border);height:44px;
  flex-shrink:0;overflow-x:auto;
}
.section-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border:none;background:none;
  border-radius:var(--radius);font-size:12px;font-weight:600;
  color:var(--text3);cursor:pointer;font-family:var(--font);
  letter-spacing:.04em;transition:all .15s;white-space:nowrap;
}
.section-tab:hover{background:var(--bg3);color:var(--text)}
.section-tab.active{background:var(--blue-light);color:var(--blue)}
.section-tab .ti{font-size:14px;flex-shrink:0}

/* ═══════════════ SIDEBAR SECTION GROUPS ═══════════════ */
.sidebar-section-items{display:contents}
.sidebar-section-items.s-hidden{display:none}

/* When tabs-mode: hide section label headers (they're in top tabs now) */
body.tabs-mode .sidebar-label{display:none!important}
body.tabs-mode .sidebar{top:100px;height:calc(100vh - 100px)}

/* ═══════════════ SIDEBAR ICON-ONLY (zwinięty) ═══════════════ */
.sidebar.icon-only{width:52px;padding:8px 4px;overflow:visible}
.sidebar.icon-only .tnb span:not(.badge){display:none}
.sidebar.icon-only .tnb{padding:9px;justify-content:center}
.sidebar.icon-only .tnb .ti{font-size:17px}
.sidebar.icon-only .sidebar-mode-toggle{display:none}
.sidebar.icon-only .sidebar-collapse-btn span{display:none}
.sidebar.icon-only .sidebar-collapse-btn{justify-content:center;padding:9px}

.sidebar-collapse-btn{
  display:flex;align-items:center;gap:7px;width:100%;
  padding:5px 8px;margin-bottom:4px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius);font-size:11px;font-weight:600;
  color:var(--text3);cursor:pointer;transition:all .15s;
  font-family:var(--font);text-align:left;
}
.sidebar-collapse-btn:hover{background:var(--blue-light);color:var(--blue);border-color:var(--blue)}
.sidebar-collapse-btn .ti{font-size:13px;flex-shrink:0}

/* ═══════════════ SIDEBAR TOOLTIP (JS-managed) ═══════════════ */
#sb-tooltip{
  position:fixed;background:var(--text);color:var(--bg);
  padding:5px 11px;border-radius:var(--radius-sm);
  font-size:12px;font-weight:500;white-space:nowrap;
  z-index:9999;pointer-events:none;display:none;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  font-family:var(--font);
}

/* ═══════════════ MOBILE: ukryj tabs bar ═══════════════ */
@media(max-width:640px){
  .section-tabs-bar{display:none}
  body.tabs-mode .sidebar{top:0;height:100vh}
}