/* =====================================================================
   CompanyHub — Design System
   Jedno źródło prawdy dla wyglądu aplikacji. Statyczny CSS (bez build).
   Motyw: [data-theme] · Gęstość: [data-density] · Akcent: [data-accent]
   Zachowane nazwy klas semantycznych używanych w 151 widokach.
   ===================================================================== */

/* ---------- 1. Reset / baza ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.5;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
img,svg{max-width:100%}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;color:var(--text)}
p{margin:0}
::selection{background:color-mix(in srgb,var(--accent) 32%,transparent)}

/* ---------- 2. Tokeny — typografia / kształt / gęstość ---------- */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI','Instrument Sans',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --fs-base:14.5px;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  /* gęstość — wartości bazowe (komfort); [data-density] je nadpisuje */
  --pad-card:18px; --pad-cell-y:12px; --pad-cell-x:14px; --pad-control-y:9px; --pad-control-x:12px;
  --gap:16px; --row-h:auto;
  --shadow-sm:0 1px 2px rgba(2,6,23,.18);
  --shadow:0 6px 20px -6px rgba(2,6,23,.35);
  --shadow-lg:0 20px 50px -12px rgba(2,6,23,.55);
  --side-w:268px; --side-w-collapsed:74px;
}
[data-density="compact"]{
  --fs-base:13.5px; --pad-card:13px; --pad-cell-y:8px; --pad-cell-x:11px;
  --pad-control-y:7px; --pad-control-x:10px; --gap:11px;
}
[data-density="comfortable"]{
  --fs-base:15px; --pad-card:22px; --pad-cell-y:15px; --pad-cell-x:16px;
  --pad-control-y:11px; --pad-control-x:14px; --gap:20px;
}

/* ---------- 3. Tokeny — motyw ciemny (domyślny) ---------- */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0e1a;
  --surface-1:#111726;          /* karty, panele */
  --surface-2:#161d30;          /* podniesione / hover */
  --surface-3:#1d2640;          /* aktywne / wejścia hover */
  --sidebar-bg:#080b15;
  --sidebar-bg-2:#0c1120;
  --field-bg:#0b1020;
  --text:#e9eef7;
  --text-secondary:#a3b1c9;
  --text-muted:#6f7f9b;
  --border:rgba(148,163,184,.14);
  --border-strong:rgba(148,163,184,.28);
  --accent:var(--accent-color,#38bdf8);
  --accent-contrast:#04121f;
  --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent);
  --accent-softer:color-mix(in srgb,var(--accent) 9%,transparent);
  --success:#34d399; --success-bg:color-mix(in srgb,#34d399 16%,transparent);
  --warning:#fbbf24; --warning-bg:color-mix(in srgb,#fbbf24 16%,transparent);
  --danger:#f87171;  --danger-bg:color-mix(in srgb,#f87171 16%,transparent);
  --info:#60a5fa;     --info-bg:color-mix(in srgb,#60a5fa 16%,transparent);
}

/* ---------- 3b. Tokeny — motyw jasny ---------- */
[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6fb;
  --surface-1:#ffffff;
  --surface-2:#f7f9fc;
  --surface-3:#eef2f8;
  --sidebar-bg:#ffffff;
  --sidebar-bg-2:#f7f9fc;
  --field-bg:#ffffff;
  --text:#0f1b2d;
  --text-secondary:#475569;
  --text-muted:#7a8aa0;
  --border:rgba(15,23,42,.10);
  --border-strong:rgba(15,23,42,.18);
  --accent:var(--accent-color,#0ea5e9);
  --accent-contrast:#ffffff;
  --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent);
  --accent-softer:color-mix(in srgb,var(--accent) 7%,transparent);
  --success:#059669; --success-bg:color-mix(in srgb,#059669 13%,transparent);
  --warning:#d97706; --warning-bg:color-mix(in srgb,#d97706 14%,transparent);
  --danger:#dc2626;  --danger-bg:color-mix(in srgb,#dc2626 11%,transparent);
  --info:#2563eb;     --info-bg:color-mix(in srgb,#2563eb 11%,transparent);
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 6px 20px -8px rgba(15,23,42,.14);
  --shadow-lg:0 20px 50px -16px rgba(15,23,42,.20);
}

/* ---------- 3c. Akcenty wybierane przez użytkownika ---------- */
[data-accent="sky"]{--accent-color:#38bdf8}
[data-accent="emerald"]{--accent-color:#34d399}
[data-accent="violet"]{--accent-color:#a78bfa}
[data-accent="amber"]{--accent-color:#fbbf24}
[data-accent="rose"]{--accent-color:#fb7185}
[data-theme="light"][data-accent="sky"]{--accent-color:#0ea5e9}
[data-theme="light"][data-accent="emerald"]{--accent-color:#059669}
[data-theme="light"][data-accent="violet"]{--accent-color:#7c3aed}
[data-theme="light"][data-accent="amber"]{--accent-color:#d97706}
[data-theme="light"][data-accent="rose"]{--accent-color:#e11d48}

/* ---------- 3d. Aliasy wstecznej kompatybilności ----------
   Stary layout definiował --line/--panel/--muted/--card; dziesiątki widoków
   używają ich we własnych <style>. Mapujemy je na nowe tokeny — jeden punkt,
   żeby nie edytować 38 plików i nie stracić kolorów w obu motywach. */
:root{
  --line:var(--border-strong);
  --panel:var(--surface-1);
  --card:var(--surface-1);
  --muted:var(--text-muted);
}

/* ---------- 4. Layout aplikacji ---------- */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;
  transition:grid-template-columns .18s ease}
.main{min-width:0;padding:26px clamp(16px,2.4vw,34px);max-width:1700px}
.muted{color:var(--text-muted)}

/* ---------- 5. Sidebar / nawigacja ---------- */
.sidebar{background:linear-gradient(180deg,var(--sidebar-bg-2),var(--sidebar-bg));
  border-right:1px solid var(--border);padding:18px 14px;position:relative;
  display:flex;flex-direction:column;min-height:100vh}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 8px 16px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.brand{min-width:0;display:flex;align-items:center;gap:10px}
.brand-mark{flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));
  color:var(--accent-contrast);font-weight:700;font-size:15px;box-shadow:var(--shadow-sm)}
.brand h1{font-size:17px;letter-spacing:-.03em;line-height:1.1}
.brand small{display:block;color:var(--text-muted);font-size:11px;font-weight:500;margin-top:1px}
.sidebar-collapse-button{display:none;flex:0 0 32px;width:32px;height:32px;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:9px;background:var(--surface-1);color:var(--text-secondary);
  font-size:18px;line-height:1;cursor:pointer;transition:.15s}
.sidebar-collapse-button:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}

.company-switcher{margin:4px 4px 8px}
.company-switcher label{display:grid;gap:6px;color:var(--text-muted);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em}
.company-switcher select{font-size:13.5px;padding:8px 10px}

.nav{display:flex;flex-direction:column;overflow-y:auto;flex:1;margin:4px -4px 0;padding:0 4px;
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
.nav-title{color:var(--text-muted);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;margin:16px 12px 6px}
.nav-title:first-child{margin-top:4px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  color:var(--text-secondary);font-size:13.5px;font-weight:500;margin-bottom:1px;
  white-space:nowrap;transition:background .14s,color .14s}
.nav a .nav-ico{flex:0 0 18px;width:18px;height:18px;opacity:.85;display:inline-grid;place-items:center}
.nav a .nav-ico svg{width:17px;height:17px;display:block}
.nav a:hover{background:var(--accent-softer);color:var(--text)}
.nav a.active{background:var(--accent-soft);color:var(--text);font-weight:600}
.nav a.active .nav-ico{opacity:1;color:var(--accent)}
.nav a.is-accent{color:color-mix(in srgb,var(--accent) 78%,var(--text))}

.sidebar-footer{margin-top:8px;padding-top:10px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:3px}
.sidebar-footer .btn{font-weight:500}

/* zwijane grupy nawigacji */
.nav-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:transparent;border:0;cursor:pointer;color:var(--text-muted);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;margin:16px 0 6px;padding:0 12px}
.nav-group-toggle .chev{transition:transform .16s;font-size:13px}
.nav-group[data-collapsed="1"] .chev{transform:rotate(-90deg)}
.nav-group[data-collapsed="1"] .nav-group-body{display:none}

/* ---------- 6. Topbar ---------- */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.topbar h2{font-size:23px;letter-spacing:-.03em}
.topbar .eyebrow{display:flex;align-items:center;gap:7px;color:var(--text-muted);font-size:12.5px;
  font-weight:600;margin-bottom:4px}
.topbar p{margin-top:5px;color:var(--text-muted);font-size:13.5px}
.topbar-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- 7. Karty / sekcje ---------- */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--pad-card);box-shadow:var(--shadow-sm)}
.card + .card{margin-top:var(--gap)}
.section{margin-top:var(--gap)}
.section h3{font-size:16px;margin-bottom:13px}
.collapsible-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.collapsible-header h3{margin:0}
.section-collapsed .collapsible-body{display:none}
.collapse-toggle{white-space:nowrap}
.grid{display:grid;gap:var(--gap)}
.grid.stats{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- 8. Metryki ---------- */
.metric{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px 16px}
.metric-label{display:flex;align-items:center;gap:6px;color:var(--text-muted);
  font-size:12.5px;font-weight:500;margin-bottom:8px}
.metric-value{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1}
.metric-sub{margin-top:6px;font-size:12px;color:var(--text-muted)}
.metric-card .metric-value{font-size:23px}
.metric.is-success .metric-value{color:var(--success)}
.metric.is-warning .metric-value{color:var(--warning)}
.metric.is-danger .metric-value{color:var(--danger)}

/* ---------- 9. Tabele ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
.table-wrap table{border:0}
table{width:100%;border-collapse:collapse;background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
th,td{padding:var(--pad-cell-y) var(--pad-cell-x);border-bottom:1px solid var(--border);
  text-align:left;vertical-align:middle}
th{color:var(--text-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--surface-2);white-space:nowrap}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--surface-2)}
tr:last-child td{border-bottom:0}
.table-actions{min-width:150px}

/* ---------- 10. Formularze ---------- */
label{display:block;color:var(--text-secondary);font-size:13px;font-weight:500;margin-bottom:6px}
/* wzorzec <label>Tekst <input></label> — pole wewnątrz etykiety */
label:has(> input:not([type=checkbox]):not([type=radio])),
label:has(> select),label:has(> textarea){display:grid;gap:6px;margin-bottom:14px}
input,select,textarea{width:100%;min-width:0;background:var(--field-bg);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:var(--pad-control-y) var(--pad-control-x);font-size:14px;font-family:inherit;
  transition:border-color .14s,box-shadow .14s}
textarea{line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
input[type="checkbox"],input[type="radio"]{width:auto;min-width:0;accent-color:var(--accent);
  width:17px;height:17px;vertical-align:-3px}
input[type="date"]{appearance:none;-webkit-appearance:none;display:block;height:40px;line-height:20px}
[data-theme="dark"] input[type="date"]{color-scheme:dark}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.field{display:block;margin-bottom:14px}
.field label{margin-bottom:6px}
.checks{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.checks label{display:inline-flex;align-items:center;gap:7px;margin:0;cursor:pointer}

/* ---------- 11. Przyciski ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);
  padding:var(--pad-control-y) var(--pad-control-x);border-radius:var(--radius-sm);
  font-size:13.5px;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s,transform .06s}
.btn:hover{background:var(--surface-3);border-color:var(--border-strong)}
.btn:active{transform:translateY(.5px)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,#fff)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--accent-softer);border-color:var(--border)}
.btn.secondary{background:transparent;border-color:var(--border-strong);color:var(--text-secondary)}
.btn.secondary:hover{background:var(--surface-2);color:var(--text)}
.btn.success{background:var(--success-bg);border-color:transparent;color:var(--success)}
.btn.warning{background:var(--warning-bg);border-color:transparent;color:var(--warning)}
.btn.danger{background:var(--danger-bg);border-color:transparent;color:var(--danger)}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 24%,transparent)}
.btn.small{padding:7px 10px;font-size:12.5px}
.btn.tiny{padding:5px 9px;font-size:12px}
.btn.block{width:100%}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}
.link-button{appearance:none;background:transparent;border:0;cursor:pointer;font:inherit;padding:0;
  text-align:left;color:var(--accent)}
.actions,.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- 12. Pille / badge / statusy ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  color:var(--text-secondary);padding:6px 11px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:500}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  padding:4px 9px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;color:var(--text-secondary)}
.status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:600;line-height:1.3}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.status.success{color:var(--success);background:var(--success-bg)}
.status.warning{color:var(--warning);background:var(--warning-bg)}
.status.danger{color:var(--danger);background:var(--danger-bg)}
.status.info{color:var(--info);background:var(--info-bg)}
.status.neutral{color:var(--text-muted);background:var(--surface-2)}

/* ---------- 13. Zakładki w module ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;
  scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs button{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;
  color:var(--text-secondary);font-size:14px;font-weight:500;border:0;background:transparent;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.14s}
.tabs a:hover,.tabs button:hover{color:var(--text)}
.tabs a.active,.tabs button.active{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}

/* ---------- 14. Stan pusty ---------- */
.empty{color:var(--text-muted);padding:34px 24px;border:1px dashed var(--border-strong);
  border-radius:var(--radius);text-align:center;background:var(--surface-1)}
.empty .empty-ico{font-size:26px;opacity:.5;margin-bottom:8px}

/* ---------- 15. Paginacja (Laravel nav) ---------- */
.main nav[role="navigation"]{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;color:var(--text-muted);font-size:12.5px;flex-wrap:wrap}
.main nav[role="navigation"] > div:first-child{display:none}
.main nav[role="navigation"] > div:last-child{display:flex;align-items:center;justify-content:space-between;
  gap:12px;width:100%}
.main nav[role="navigation"] p{margin:0}
.main nav[role="navigation"] a,
.main nav[role="navigation"] span[aria-current="page"] span{display:inline-flex;align-items:center;
  justify-content:center;min-width:32px;height:32px;padding:0 9px;border:1px solid var(--border);
  background:var(--surface-1);color:var(--text-secondary);border-radius:8px;margin-left:4px}
.main nav[role="navigation"] a:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.main nav[role="navigation"] span[aria-current="page"] span{background:var(--accent-soft);
  border-color:var(--accent);color:var(--text)}
.main nav[role="navigation"] svg{width:16px;height:16px;display:block}
.main nav[role="navigation"] .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 16. Mobilne menu / przyciski ---------- */
.mobile-menu-button{display:none;position:fixed;top:12px;left:12px;z-index:70;align-items:center;
  justify-content:center;gap:8px;border:1px solid var(--border-strong);border-radius:12px;
  background:var(--surface-1);color:var(--text);padding:0 16px;height:44px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow)}
.mobile-menu-backdrop{display:none;position:fixed;inset:0;z-index:50;background:rgba(2,6,23,.6);
  backdrop-filter:blur(2px)}
body.menu-open .mobile-menu-backdrop{display:block}

/* ---------- 17. Przełącznik wyglądu ---------- */
.appearance-pop{position:relative}
.appearance-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:230px;
  background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:14px;display:none}
.appearance-menu.open{display:block}
.appearance-menu h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
  margin:0 0 8px;font-weight:700}
.appearance-menu h4:not(:first-child){margin-top:14px}
.seg{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px}
.seg button{flex:1;padding:6px 8px;border:0;background:transparent;color:var(--text-secondary);
  font-size:12.5px;font-weight:600;border-radius:7px;cursor:pointer;transition:.12s}
.seg button:hover{color:var(--text)}
.seg button.active{background:var(--accent);color:var(--accent-contrast)}
.accent-swatches{display:flex;gap:8px}
.accent-swatches button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  padding:0}
.accent-swatches button[data-val="sky"]{background:#38bdf8}
.accent-swatches button[data-val="emerald"]{background:#34d399}
.accent-swatches button[data-val="violet"]{background:#a78bfa}
.accent-swatches button[data-val="amber"]{background:#fbbf24}
.accent-swatches button[data-val="rose"]{background:#fb7185}
.accent-swatches button.active{border-color:var(--text)}

/* ---------- 18. Responsywność — Mac Studio / duże ekrany ---------- */
@media(min-width:1921px){
  /* na grid-itemie samo margin-inline:auto wymusza shrink-to-fit — width:100% każe
     wypełnić kolumnę do max-width, a auto-marginesy centrują (Mac Studio / 4K/5K) */
  .main{width:100%;max-width:2040px;margin-inline:auto}
  :root{--side-w:300px}
}
/* MacBook i mniejsze desktopy: przycisk zwijania sidebara */
@media(min-width:1181px){
  .sidebar-collapse-button{display:inline-flex}
  body.sidebar-collapsed .app,html.sidebar-collapsed-pending .app{
    grid-template-columns:var(--side-w-collapsed) minmax(0,1fr)}
  body.sidebar-collapsed .sidebar,html.sidebar-collapsed-pending .sidebar{padding:18px 10px;overflow:hidden}
  body.sidebar-collapsed .sidebar-top,html.sidebar-collapsed-pending .sidebar-top{justify-content:center}
  body.sidebar-collapsed .brand h1,body.sidebar-collapsed .brand small,
  html.sidebar-collapsed-pending .brand h1,html.sidebar-collapsed-pending .brand small{display:none}
  body.sidebar-collapsed .company-switcher,body.sidebar-collapsed .nav-title,
  body.sidebar-collapsed .nav a span,body.sidebar-collapsed .nav-group-toggle,
  html.sidebar-collapsed-pending .company-switcher,html.sidebar-collapsed-pending .nav-title,
  html.sidebar-collapsed-pending .nav a span,html.sidebar-collapsed-pending .nav-group-toggle{display:none}
  body.sidebar-collapsed .nav a,html.sidebar-collapsed-pending .nav a{justify-content:center;padding:10px}
  body.sidebar-collapsed .nav-group-body,html.sidebar-collapsed-pending .nav-group-body{display:block}
  body.sidebar-collapsed .sidebar-footer span,html.sidebar-collapsed-pending .sidebar-footer span{display:none}
  body.sidebar-collapsed .sidebar-footer .btn,html.sidebar-collapsed-pending .sidebar-footer .btn{justify-content:center;padding:10px}
  body.sidebar-collapsed .appearance-menu,html.sidebar-collapsed-pending .appearance-menu{left:0;right:auto}
  body.sidebar-collapsed .sidebar-collapse-button,html.sidebar-collapsed-pending .sidebar-collapse-button{
    transform:rotate(180deg)}
}
/* tablet / telefon: sidebar jako szuflada */
@media(max-width:1180px){
  .app{display:block}
  .mobile-menu-button{display:inline-flex}
  .sidebar{position:fixed;z-index:60;top:0;left:0;width:min(330px,86vw);height:100vh;overflow:auto;
    transform:translateX(-105%);transition:transform .2s ease;box-shadow:22px 0 70px rgba(0,0,0,.4)}
  body.menu-open .sidebar{transform:translateX(0)}
  body.menu-open{overflow:hidden}
  .main{padding-top:74px}
  .grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* telefon: pojedyncze kolumny + tabele jako karty */
@media(max-width:760px){
  .topbar{flex-direction:column}
  .topbar-tools{width:100%}
  .form-grid{grid-template-columns:1fr}
  .grid.stats{grid-template-columns:1fr}
  .main{padding:74px 13px 18px}
  .table-wrap{overflow:visible;border:0}
  .responsive-list-table{display:block;border:0;background:transparent;border-radius:0;overflow:visible}
  .responsive-list-table thead{display:none}
  .responsive-list-table tbody{display:grid;gap:10px}
  .responsive-list-table tr{display:grid;border:1px solid var(--border);border-radius:var(--radius);
    background:var(--surface-1);overflow:hidden}
  .responsive-list-table tr:hover{background:var(--surface-1)}
  .responsive-list-table td{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);gap:10px;
    align-items:start;padding:10px 13px;border-bottom:1px solid var(--border);min-width:0;word-break:break-word}
  .responsive-list-table td:last-child{border-bottom:0}
  .responsive-list-table td[data-label]::before{content:attr(data-label);display:block;color:var(--text-muted);
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  .responsive-list-table td[colspan]{display:block}
  .responsive-list-table td[colspan]::before{display:none}
  .responsive-list-table td:has(.btn),.responsive-list-table .table-actions{grid-template-columns:1fr}
  .responsive-list-table .actions,.responsive-list-table .row-actions,
  .responsive-list-table .table-actions{min-width:0;justify-content:flex-start}
  .responsive-list-table td:first-child{font-size:15px;font-weight:700;color:var(--text)}
  .responsive-list-table .pill{width:max-content}
}

/* ---------- 19. Dotyk vs kursor ---------- */
@media(hover:none){
  .btn,.nav a{min-height:42px}
  .btn.tiny,.btn.small{min-height:36px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- 20. Wyszukiwarka globalna (Ctrl+K) ---------- */
.gsearch-trigger{display:flex;align-items:center;gap:9px;width:calc(100% - 8px);margin:0 4px 6px;
  padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-1);
  color:var(--text-muted);font-size:13px;cursor:pointer;transition:.14s}
.gsearch-trigger:hover{border-color:var(--accent);color:var(--text)}
.gsearch-trigger span{flex:1;text-align:left}
.gsearch-trigger kbd{font-family:inherit;font-size:10.5px;padding:2px 6px;border:1px solid var(--border);
  border-radius:5px;background:var(--surface-2);color:var(--text-muted)}
.gsearch-backdrop{position:fixed;inset:0;z-index:90;background:rgba(2,6,23,.6);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:min(14vh,120px) 16px 16px}
.gsearch-panel{width:min(640px,100%);background:var(--surface-1);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.gsearch-inputwrap{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);
  color:var(--text-muted)}
.gsearch-inputwrap input{flex:1;border:0;background:transparent;padding:4px 0;font-size:15.5px}
.gsearch-inputwrap input:focus{outline:none;box-shadow:none;border:0}
.gsearch-results{max-height:min(52vh,460px);overflow-y:auto;padding:8px}
.gsearch-hint{color:var(--text-muted);font-size:13px;padding:14px;text-align:center}
.gsearch-group{color:var(--text-muted);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:10px 10px 5px}
.gsearch-item{display:block;padding:9px 11px;border-radius:9px;text-decoration:none}
.gsearch-item strong{display:block;color:var(--text);font-size:14px;font-weight:500}
.gsearch-item small{color:var(--text-muted);font-size:12px}
.gsearch-item.active{background:var(--accent-soft)}
.gsearch-item.active strong{color:var(--accent)}
@media(max-width:760px){.gsearch-backdrop{padding:12px}.gsearch-trigger kbd{display:none}}

/* ---------- 21. Szlif: mikrointerakcje / dostępność / druk ---------- */
/* płynna zmiana motywu (kolory przechodzą, nie skaczą) */
body,.card,.sidebar,.metric,table,th,.empty,.gsearch-panel{
  transition:background-color .22s ease,border-color .22s ease,color .22s ease}
/* klikalne metryki (dashboard) delikatnie unoszą się pod kursorem */
a.metric{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background-color .22s ease}
@media(hover:hover){
  a.metric:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}
}
/* wyraźny pierścień fokusa z klawiatury (dostępność) */
.btn:focus-visible,a:focus-visible,.link-button:focus-visible,.nav a:focus-visible,
.tabs a:focus-visible,.seg button:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
/* spójne scrollbary w całej aplikacji */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;
  border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted)}
*::-webkit-scrollbar-track{background:transparent}
/* klawisze skrótów */
kbd{font-family:var(--font-mono);font-size:11px;padding:2px 6px;border:1px solid var(--border);
  border-bottom-width:2px;border-radius:5px;background:var(--surface-2);color:var(--text-secondary)}
/* druk: czysta treść bez nawigacji */
@media print{
  .sidebar,.mobile-menu-button,.mobile-menu-backdrop,.topbar-tools,.gsearch-backdrop,
  .appearance-menu,.actions,.row-actions,.table-actions,.main nav[role="navigation"]{display:none!important}
  .app{display:block}
  .main{padding:0;max-width:none}
  body{background:#fff;color:#000}
  .card,table,th,td{background:#fff;color:#000;border-color:#ccc;box-shadow:none}
  th{color:#333}
  .status{border:1px solid #999;color:#000;background:#fff}
  .status::before{display:none}
}