:root {
  --glass-bg: #1842c8;
  --primary-blue: #0d47a1;
  --neon: #4da3ff;
  --text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  --imbex-topbar-h: 44px; /* było 54 — odstęp przycisk↔pasek ~o połowę mniejszy */
  --imbex-tabs-h: 54px;
  --imbex-chrome-h: calc(var(--imbex-topbar-h) + var(--imbex-tabs-h));
  --kolizje-surface: #162230;
  --kolizje-surface-hover: #1e2c3c;
  --kolizje-tint-otwarta: rgba(205, 48, 58, 0.62);
  --kolizje-tint-otwarta-hover: rgba(220, 58, 68, 0.72);
  --kolizje-tint-zgloszona: rgba(215, 178, 38, 0.55);
  --kolizje-tint-zgloszona-hover: rgba(230, 192, 48, 0.65);
  --kolizje-bg-otwarta: linear-gradient(var(--kolizje-tint-otwarta), var(--kolizje-tint-otwarta)), var(--kolizje-surface);
  --kolizje-bg-otwarta-hover: linear-gradient(var(--kolizje-tint-otwarta-hover), var(--kolizje-tint-otwarta-hover)), var(--kolizje-surface-hover);
  --kolizje-bg-zgloszona: linear-gradient(var(--kolizje-tint-zgloszona), var(--kolizje-tint-zgloszona)), var(--kolizje-surface);
  --kolizje-bg-zgloszona-hover: linear-gradient(var(--kolizje-tint-zgloszona-hover), var(--kolizje-tint-zgloszona-hover)), var(--kolizje-surface-hover);
}

/* GLOBAL */
body {
  margin: 0;
  padding: 0;
  background: url("assets/img/niebieski.jpg") center/cover no-repeat;
  font-family: 'Segoe UI', sans-serif;
  color: white;
  overflow-x: hidden;
  overflow-y: auto;
}

/* CONTENT */
#content {
  flex: none;
  margin-top: var(--imbex-topbar-h);
  margin-bottom: var(--imbex-tabs-h);
  padding-top: 0;

  width: 100% !important;
  max-width: 100% !important;
  display: block !important;

  height: calc(100vh - var(--imbex-chrome-h));
  box-sizing: border-box;
}

/* Po zalogowaniu / przywróceniu sesji — content dokładnie między topbar a tabs (bez marginesów) */
body.imbex-app-shell #content,
html.imbex-session-restore #content {
  position: fixed;
  top: var(--imbex-topbar-h);
  left: 0;
  right: 0;
  bottom: var(--imbex-tabs-h);
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* Tabele (import, exporty, krajówki…) — białe tło */
#content.content--table {
  overflow: hidden !important;
  background: #ffffff;
}

/* Admin, start — widać tło aplikacji (niebieski.jpg) */
#content.content--glass {
  overflow: auto !important;
  background: transparent;
}

/* Logowanie — pełny ekran (bez pustych pasków topbar/tabs) */
#content.imbex-login-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #020b1c;
}

#content.imbex-login-mode #login-screen,
#content.imbex-login-mode .module-root.start-module {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  overflow: hidden;
}

/* Przywrocona sesja (localStorage) — od razu uklad modulu, bez trybu logowania */
html.imbex-session-restore #topbar,
html.imbex-session-restore #tabs {
  display: flex !important;
}

html.imbex-session-restore #login-screen {
  display: none !important;
}

html.imbex-session-restore body {
  overflow: hidden;
}

html.imbex-session-restore #content.content--table {
  overflow: hidden !important;
  background: #ffffff;
}

html.imbex-session-restore #content.content--table > .module-root,
html.imbex-session-restore #content > .module-root {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

html.imbex-session-restore #content.imbex-login-mode {
  top: 0 !important;
  bottom: 0 !important;
}

/* Admin — scroll tylko w tabeli (HASŁO/EMAIL zawsze widoczne) */
#content.content--glass.content--admin-lock {
  overflow: hidden !important;
  height: calc(100vh - var(--imbex-chrome-h)) !important;
  max-height: calc(100vh - var(--imbex-chrome-h)) !important;
}

#content.content--admin-lock > .module-root,
#content.content--admin-lock > .admin-module {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#content > .module-root {
  margin-top: 0;
  padding: 0 10px 10px;
  height: 100%;
  box-sizing: border-box;
}

/* Po zalogowaniu — moduł wypełnia obszar między topbar a tabs (bez podwójnej ramki) */
body.imbex-app-shell {
  overflow: hidden;
}

body.imbex-app-shell #content.content--table {
  overflow: hidden !important;
  background: #ffffff;
}

body.imbex-app-shell #content.content--table > .module-root {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Moduły tabel — kontener scrolla wypełnia #content (bez calc(100vh) z modułów) */
body.imbex-app-shell #content.content--table .import-table-container,
body.imbex-app-shell #content.content--table .krajowki-table-container,
body.imbex-app-shell #content.content--table .exporty-table-container,
html.imbex-session-restore #content.content--table .import-table-container,
html.imbex-session-restore #content.content--table .krajowki-table-container,
html.imbex-session-restore #content.content--table .exporty-table-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: auto !important;
}

/* ============================
   MODULE TRANSITION (neon shutter)
   Szybkie: krótki cover podczas ładowania; fetch idzie równolegle z animacją.
============================ */
#content.content--mod-leave > *,
#content.content--mod-hold > * {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.1s ease, transform 0.1s ease;
  pointer-events: none;
  will-change: opacity, transform;
}

#content.content--mod-hold > * {
  transition: none !important;
}

#content.content--mod-enter > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: none;
  will-change: opacity, transform;
}

#content.content--mod-enter.content--mod-ready > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-xfer {
  --xfer-door: #071833;
  --xfer-door-edge: rgba(77, 163, 255, 0.55);
  --xfer-beam: #7ec4ff;
  position: fixed;
  top: var(--imbex-topbar-h);
  left: 0;
  right: 0;
  bottom: var(--imbex-tabs-h);
  z-index: 9800;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  contain: layout paint style;
  isolation: isolate;
}

body:not(.imbex-app-shell) .module-xfer,
#content.imbex-login-mode ~ .module-xfer {
  top: 0;
  bottom: 0;
}

.module-xfer.is-on {
  visibility: visible;
}

.module-xfer__door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  background:
    linear-gradient(90deg, rgba(7, 24, 51, 0.28), rgba(7, 24, 51, 0.08) 55%, transparent),
    url("assets/img/niebieski.jpg") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(77, 163, 255, 0.12);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.15s cubic-bezier(0.3, 0.8, 0.2, 1);
}

.module-xfer__door--l {
  left: 0;
  transform: translate3d(-104%, 0, 0);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  border-right: 1px solid var(--xfer-door-edge);
  background-position: left center;
}

.module-xfer__door--r {
  right: 0;
  transform: translate3d(104%, 0, 0);
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
  border-left: 1px solid var(--xfer-door-edge);
  background:
    linear-gradient(270deg, rgba(7, 24, 51, 0.28), rgba(7, 24, 51, 0.08) 55%, transparent),
    url("assets/img/niebieski.jpg") center / cover no-repeat;
  background-position: right center;
}

.module-xfer.is-closing .module-xfer__door--l,
.module-xfer.is-hold .module-xfer__door--l,
.module-xfer.is-opening .module-xfer__door--l {
  transform: translate3d(0, 0, 0);
}

.module-xfer.is-closing .module-xfer__door--r,
.module-xfer.is-hold .module-xfer__door--r,
.module-xfer.is-opening .module-xfer__door--r {
  transform: translate3d(0, 0, 0);
}

.module-xfer.is-opening .module-xfer__door--l {
  transform: translate3d(-104%, 0, 0);
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

.module-xfer.is-opening .module-xfer__door--r {
  transform: translate3d(104%, 0, 0);
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

.module-xfer__seam {
  position: absolute;
  top: -8%;
  left: 50%;
  width: 3px;
  height: 116%;
  margin-left: -1.5px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--xfer-beam) 18%,
    #fff 50%,
    var(--xfer-beam) 82%,
    transparent
  );
  box-shadow:
    0 0 12px rgba(126, 196, 255, 0.95),
    0 0 28px rgba(77, 163, 255, 0.55);
  opacity: 0;
  transform: scaleY(0.2);
  transform-origin: center;
  transition: opacity 0.08s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.module-xfer.is-closing .module-xfer__seam,
.module-xfer.is-hold .module-xfer__seam {
  opacity: 1;
  transform: scaleY(1);
}

.module-xfer.is-hold .module-xfer__seam {
  animation: moduleXferSeamPulse 0.55s ease-in-out infinite;
}

.module-xfer.is-opening .module-xfer__seam {
  opacity: 0;
  transform: scaleY(0.15);
  transition-duration: 0.1s;
}

.module-xfer__slash {
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(126, 196, 255, 0.08) 46%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(126, 196, 255, 0.12) 54%,
    transparent 58%
  );
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
  will-change: transform, opacity;
}

.module-xfer.is-closing .module-xfer__slash {
  animation: moduleXferSlash 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.module-xfer.is-opening .module-xfer__slash {
  animation: moduleXferSlashOut 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.module-xfer__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -46%, 0) scale(0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    opacity 0.1s ease,
    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 18px rgba(77, 163, 255, 0.45));
}

.module-xfer__mark img {
  display: block;
  width: min(240px, 42vw);
  height: auto;
  max-height: 84px;
  object-fit: contain;
  object-position: center;
}

.module-xfer.is-closing .module-xfer__mark,
.module-xfer.is-hold .module-xfer__mark {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.module-xfer.is-hold .module-xfer__mark {
  transition-delay: 0s;
}

.module-xfer.is-opening .module-xfer__mark {
  opacity: 0;
  transform: translate3d(-50%, -56%, 0) scale(1.04);
  transition-duration: 0.1s;
}

.module-xfer__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 86px;
  margin: -43px 0 0 -43px;
  border-radius: 50%;
  border: 1px solid rgba(126, 196, 255, 0.35);
  box-shadow: 0 0 0 0 rgba(77, 163, 255, 0.35);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.1s ease, transform 0.15s ease;
  will-change: transform, opacity;
}

.module-xfer.is-closing .module-xfer__ring,
.module-xfer.is-hold .module-xfer__ring {
  opacity: 1;
  transform: scale(1);
}

.module-xfer.is-hold .module-xfer__ring {
  animation: moduleXferRing 0.7s ease-out infinite;
}

.module-xfer.is-opening .module-xfer__ring {
  opacity: 0;
  transform: scale(1.2);
  transition-duration: 0.1s;
}

@keyframes moduleXferSlash {
  0% { opacity: 0; transform: translate3d(-38%, 0, 0); }
  35% { opacity: 0.95; }
  100% { opacity: 0; transform: translate3d(38%, 0, 0); }
}

@keyframes moduleXferSlashOut {
  0% { opacity: 0; transform: translate3d(20%, 0, 0); }
  40% { opacity: 0.75; }
  100% { opacity: 0; transform: translate3d(-40%, 0, 0); }
}

@keyframes moduleXferSeamPulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@keyframes moduleXferRing {
  0% { box-shadow: 0 0 0 0 rgba(77, 163, 255, 0.4); opacity: 0.9; }
  100% { box-shadow: 0 0 0 18px rgba(77, 163, 255, 0); opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  #content.content--mod-leave > *,
  #content.content--mod-hold > *,
  #content.content--mod-enter > *,
  #content.content--mod-enter.content--mod-ready > * {
    transition: none !important;
    transform: none !important;
  }

  .module-xfer__door,
  .module-xfer__seam,
  .module-xfer__mark,
  .module-xfer__ring {
    transition: none !important;
    animation: none !important;
  }

  .module-xfer__slash {
    display: none !important;
  }

  .module-xfer.is-closing .module-xfer__door--l,
  .module-xfer.is-hold .module-xfer__door--l,
  .module-xfer.is-opening .module-xfer__door--l {
    transform: none;
    left: 0;
    right: auto;
    width: 100%;
    clip-path: none;
    opacity: 1;
  }

  .module-xfer.is-closing .module-xfer__door--r,
  .module-xfer.is-hold .module-xfer__door--r,
  .module-xfer.is-opening .module-xfer__door--r,
  .module-xfer.is-opening .module-xfer__door--l {
    display: none;
  }
}


/* ============================
      TOPBAR
============================ */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--imbex-topbar-h);
  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 0 16px;

  background: linear-gradient(to top, #0d47a1, #1842c8);
  border-bottom: 2px solid var(--neon);
  box-shadow: 0 4px 18px rgba(77,163,255,0.45);

  border-radius: 0;
  z-index: 9999;
  overflow: hidden;

  opacity: 1;
}

@keyframes topbarEnter {
  0% { transform: translateY(-40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

#topbar::after {
  display: none;
}

/* Globalny status zapisu (saveIntegrity) — UI usunięty, zostawiamy hook na wypadek starego DOM */
#imbex-save-status {
  display: none !important;
}

.topbar-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.topbar-btn {
  padding: 8px 22px;
  border: none;
  border-radius: 8px;

  background: rgba(0, 153, 255, 0.12);

  color: #00aaff;
  font-weight: 600;
  letter-spacing: 0.5px;

  cursor: pointer;
  transition: 0.25s ease;
  position: relative;
  overflow: hidden;

  box-shadow:
      inset 0 0 8px rgba(0, 170, 255, 0.35),
      0 0 10px rgba(0, 170, 255, 0.25);
}

.topbar-btn:hover {
  background: rgba(0, 153, 255, 0.22);
  color: #c8ecff;
  transform: translateY(-1px);
}

.topbar-btn:active {
  transform: scale(0.96);
  background: rgba(0, 153, 255, 0.32);
}

/* ============================
      TABS
============================ */
#tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  height: var(--imbex-tabs-h);
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;

  background: linear-gradient(to top, #0d47a1, #1842c8);
  border-top: 2px solid var(--neon);
  box-shadow: 0 -4px 18px rgba(77,163,255,0.45);

  border-radius: 16px 16px 0 0;
  white-space: nowrap;
  overflow-x: auto;

  z-index: 9999;

  opacity: 1;
}

@keyframes tabsEnter {
  0% { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

#tabs .tab-btn {
  padding: 8px 18px;
  font-size: 0.9em;

  background: rgba(255,255,255,0.12);
  border: 1px solid var(--neon);
  border-radius: 12px;

  color: #e9f3ff;
  cursor: pointer;
  transition: 0.2s ease;
  text-shadow: var(--text-shadow);

  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

#tabs .tab-btn.active {
  background: rgba(255,255,255,0.45);
  color: #0d47a1;
  font-weight: bold;
  border-color: white;
  box-shadow: 0 0 20px rgba(255,255,255,0.85);
}

/* ============================
      ADMIN TOOLBAR (topbar)
============================ */
#admin-buttons.admin-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 12px;
}

/* ============================
      TOAST
============================ */
.toast {
  position: fixed;
  top: 68px;
  right: 16px;
  padding: 14px 22px;
  background: #111827;
  border: 2px solid #fbbf24;
  border-radius: 10px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  transition: opacity 0.25s ease;
  z-index: 2147483000;
  max-width: min(520px, calc(100vw - 32px));
  white-space: pre-wrap;
}

.toast.show {
  opacity: 1;
  pointer-events: auto;
}

.toast.toast--success {
  background: #14532d;
  border-color: #4ade80;
}

.toast.toast--error {
  background: #450a0a;
  border-color: #f87171;
}

.toast.toast--info {
  background: #111827;
  border-color: #fbbf24;
}

/* Dymek: dwuklik w kierowcę → kopiowanie danych */
.driver-copy-popup {
  position: fixed;
  z-index: 2147482500;
  background: rgba(8, 28, 64, 0.97);
  border: 1px solid rgba(77, 163, 255, 0.65);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  padding: 12px 14px;
  color: #e8f2ff;
  font-family: "Segoe UI", sans-serif;
}

.driver-copy-popup.hidden {
  display: none;
}

.driver-copy-popup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.driver-copy-popup__title {
  font-size: 13px;
  font-weight: 700;
  color: #4da3ff;
}

.driver-copy-popup__close {
  border: none;
  background: transparent;
  color: #d8d8d8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.driver-copy-popup__body {
  margin: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  white-space: pre-wrap;
  user-select: text;
}

.driver-copy-popup__actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.driver-copy-popup__copy {
  border: 2px solid #4da3ff;
  background: rgba(0, 0, 0, 0.35);
  color: #4da3ff;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
}

.driver-copy-popup__copy:hover {
  background: rgba(0, 150, 255, 0.12);
}

#imbex-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  padding: 8px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  background: #78350f;
  color: #fffbeb;
  border-bottom: 2px solid #fbbf24;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

body.imbex-network-readonly #content {
  outline: 3px solid rgba(251, 191, 36, 0.45);
  outline-offset: -3px;
}

body.imbex-network-readonly #content input:not([readonly]),
body.imbex-network-readonly #content select,
body.imbex-network-readonly #content textarea {
  cursor: not-allowed !important;
}

body.imbex-network-readonly #topbar .tb-btn,
body.imbex-network-readonly .module-toolbar .tb-btn {
  pointer-events: none;
  opacity: 0.5;
}

body.imbex-offline #topbar,
body.imbex-network-readonly #topbar {
  margin-top: 40px;
}


/* Toolbar importu */
#import-buttons {
    display: flex;
    gap: 6px;
    margin-left: 20px;
    align-items: center;
}




/* ============================================
   IMBEX‑TMS PREMIUM — TOPBAR BUTTONS (GLOBAL)
============================================ */
.topbar-btn,
.tb-btn {
    background: rgba(0, 40, 90, 0.45);
    border: 1px solid rgba(0, 180, 255, 0.55);
    color: #e9f3ff;
    padding: 6px 14px;
    margin-right: 6px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;

    box-shadow:
        0 0 6px rgba(0, 180, 255, 0.6),
        inset 0 0 4px rgba(0, 180, 255, 0.4);

    transition: 0.15s ease-in-out;
}

.topbar-btn:hover,
.tb-btn:hover {
    background: rgba(0, 60, 120, 0.55);
    box-shadow:
        0 0 10px rgba(0, 200, 255, 0.9),
        inset 0 0 6px rgba(0, 200, 255, 0.6);
}

.topbar-btn:active,
.tb-btn:active {
    background: rgba(0, 30, 70, 0.55);
    transform: scale(0.96);
}

/* ROZŁADOWANY — ostatni w toolbarze modułu, 3 cm od poprzedniego (bez PROFIL) */
#topbar .tb-btn.tb-btn--rozladowany {
    margin-left: 3cm;
}

/* EXPORTY — 1 cm między DODAJ KLIENTA↔ZAAWIZOWANY oraz ZAŁADOWANY↔DO POTWIERDZENIA */
#topbar #export-buttons #btn-export-awizowany,
#topbar #export-buttons #btn-do-potwierdzenia-export {
    margin-left: 1cm;
}

/* WYLOGUJ — szkło, połysk, krwista czerwień (dolny pasek) */
#tabs #logout-btn.logout-btn {
    margin-left: auto;
    flex-shrink: 0;
    margin-right: 0;
    position: relative;
    overflow: hidden;

    padding: 10px 26px;
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.06em;

    color: #fff8f8;
    text-shadow: 0 1px 2px rgba(60, 0, 0, 0.85);

    background: linear-gradient(
        165deg,
        rgba(220, 45, 58, 0.55) 0%,
        rgba(139, 0, 18, 0.78) 38%,
        rgba(92, 0, 12, 0.88) 100%
    );
    border: 1px solid rgba(255, 90, 100, 0.75);
    border-radius: 12px;

    box-shadow:
        0 0 14px rgba(200, 20, 35, 0.85),
        0 4px 18px rgba(80, 0, 8, 0.55),
        inset 0 1px 0 rgba(255, 160, 170, 0.55),
        inset 0 -2px 8px rgba(50, 0, 0, 0.45);

    transition: 0.2s ease;
}

#tabs #logout-btn.logout-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.42) 42%,
        rgba(255, 200, 205, 0.12) 48%,
        transparent 58%
    );
    pointer-events: none;
}

#tabs #logout-btn.logout-btn:hover {
    background: linear-gradient(
        165deg,
        rgba(240, 55, 68, 0.62) 0%,
        rgba(165, 8, 24, 0.82) 40%,
        rgba(110, 0, 14, 0.92) 100%
    );
    border-color: rgba(255, 130, 138, 0.95);
    box-shadow:
        0 0 22px rgba(255, 35, 50, 0.95),
        0 6px 22px rgba(90, 0, 10, 0.6),
        inset 0 1px 0 rgba(255, 200, 205, 0.65),
        inset 0 -2px 10px rgba(40, 0, 0, 0.5);
}

#tabs #logout-btn.logout-btn:active {
    background: linear-gradient(
        165deg,
        rgba(160, 20, 32, 0.75) 0%,
        rgba(100, 0, 12, 0.9) 100%
    );
    transform: scale(0.97);
    box-shadow:
        0 0 10px rgba(160, 10, 25, 0.8),
        inset 0 2px 10px rgba(30, 0, 0, 0.55);
}

/* VIN-AUTO / VIN-TRAILER — filtr rejestracji (stały prefiks WSC) */
#topbar .vin-reg-filter {
    display: inline-flex;
    align-items: stretch;
    flex: 0 1 220px;
    min-width: 160px;
    max-width: 280px;
    height: 34px;
    margin-right: 6px;
    border-radius: 8px;
    border: 1px solid rgba(77, 163, 255, 0.55);
    background: rgba(0, 18, 50, 0.82);
    overflow: hidden;
    box-sizing: border-box;
}

#topbar .vin-reg-filter__prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 10px;
    background: rgba(77, 163, 255, 0.22);
    border-right: 1px solid rgba(77, 163, 255, 0.4);
    color: #c8e4ff;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    user-select: none;
}

#topbar .vin-reg-filter__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #e8f2ff;
    padding: 0 10px;
    font-size: 0.9rem;
}

#topbar .vin-reg-filter__input::placeholder {
    color: rgba(200, 220, 255, 0.45);
}

#topbar .vin-reg-filter:focus-within {
    border-color: rgba(126, 196, 255, 0.95);
    box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.25);
}

.vin-ciezarowki-table tbody tr.vin-reg-filter-row--match td,
.vin-naczepy-table tbody tr.vin-reg-filter-row--match td {
    outline: 2px solid rgba(255, 193, 7, 0.85);
    outline-offset: -2px;
}

/* Bez VIP — sprzedane wiersze VIN ukryte (nie koliduje z filtrem WSC) */
.vin-ciezarowki-table tbody tr.vin-row--sold-hidden,
.vin-naczepy-table tbody tr.vin-row--sold-hidden {
    display: none !important;
}

/* ADMIN — tb-btn w czerwieni (górny pasek) */
#topbar #admin-buttons .admin-toolbar-btn,
#topbar #admin-android-buttons .admin-toolbar-btn,
#topbar #admin-parking-buttons .admin-toolbar-btn,
#topbar #admin-naczepy-buttons .admin-toolbar-btn {
    background: rgba(180, 24, 36, 0.72);
    border: 1px solid rgba(255, 55, 70, 0.9);
    color: #fff5f5;
    box-shadow:
        0 0 7px rgba(255, 40, 55, 0.65),
        inset 0 0 4px rgba(255, 80, 95, 0.4);
}

#topbar #admin-buttons .admin-toolbar-btn:hover,
#topbar #admin-android-buttons .admin-toolbar-btn:hover,
#topbar #admin-parking-buttons .admin-toolbar-btn:hover,
#topbar #admin-naczepy-buttons .admin-toolbar-btn:hover {
    background: rgba(220, 35, 50, 0.82);
    border-color: rgba(255, 100, 115, 1);
    box-shadow:
        0 0 11px rgba(255, 50, 65, 0.95),
        inset 0 0 6px rgba(255, 120, 130, 0.5);
}

#topbar #admin-buttons .admin-toolbar-btn:active,
#topbar #admin-android-buttons .admin-toolbar-btn:active,
#topbar #admin-parking-buttons .admin-toolbar-btn:active,
#topbar #admin-naczepy-buttons .admin-toolbar-btn:active {
    background: rgba(140, 18, 30, 0.78);
    transform: scale(0.96);
}

#topbar #admin-naczepy-buttons .admin-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#topbar #admin-buttons .admin-toolbar-btn--primary,
#topbar #admin-android-buttons .admin-toolbar-btn--primary,
#topbar #admin-parking-buttons .admin-toolbar-btn--primary {
    background: rgba(200, 32, 48, 0.85);
    border-color: rgba(255, 120, 130, 1);
    box-shadow:
        0 0 10px rgba(255, 60, 75, 0.85),
        inset 0 0 5px rgba(255, 140, 150, 0.45);
}

#topbar #admin-buttons .admin-toolbar-btn--primary:hover,
#topbar #admin-android-buttons .admin-toolbar-btn--primary:hover,
#topbar #admin-parking-buttons .admin-toolbar-btn--primary:hover {
    background: rgba(235, 45, 62, 0.9);
    box-shadow:
        0 0 14px rgba(255, 80, 95, 1),
        inset 0 0 7px rgba(255, 160, 170, 0.55);
}

#topbar #admin-buttons .admin-toolbar-btn--green,
#topbar #admin-android-buttons .admin-toolbar-btn--green,
#topbar #admin-parking-buttons .admin-toolbar-btn--green,
#topbar #admin-naczepy-buttons .admin-toolbar-btn--green {
    background: rgba(24, 140, 52, 0.82);
    border-color: rgba(90, 220, 120, 1);
    color: #f4fff6;
    box-shadow:
        0 0 10px rgba(60, 200, 90, 0.75),
        inset 0 0 5px rgba(120, 240, 150, 0.4);
}

#topbar #admin-buttons .admin-toolbar-btn--green:hover,
#topbar #admin-android-buttons .admin-toolbar-btn--green:hover,
#topbar #admin-parking-buttons .admin-toolbar-btn--green:hover,
#topbar #admin-naczepy-buttons .admin-toolbar-btn--green:hover {
    background: rgba(32, 165, 62, 0.9);
    border-color: rgba(130, 255, 160, 1);
    box-shadow:
        0 0 14px rgba(80, 230, 110, 0.95),
        inset 0 0 7px rgba(160, 255, 180, 0.5);
}

#topbar #admin-buttons .admin-toolbar-btn--green:active,
#topbar #admin-android-buttons .admin-toolbar-btn--green:active,
#topbar #admin-parking-buttons .admin-toolbar-btn--green:active,
#topbar #admin-naczepy-buttons .admin-toolbar-btn--green:active {
    background: rgba(18, 110, 40, 0.85);
    transform: scale(0.96);
}

/* GPS — cyjan jak przycisk DODAJ KLIENTA */
#tabs .tab-btn[data-module="gps"] {
    background: #00ffff;
    border: 1px solid #66ffff;
    color: #002626;
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.85),
        inset 0 0 6px rgba(180, 255, 255, 0.55);
}

#tabs .tab-btn[data-module="gps"]:hover {
    background: #33ffff;
    border-color: #99ffff;
    color: #001a1a;
    box-shadow:
        0 0 14px rgba(0, 255, 255, 1),
        inset 0 0 8px rgba(210, 255, 255, 0.65);
}

#tabs .tab-btn[data-module="gps"].active {
    background: #00eaea;
    border-color: #b3ffff;
    color: #001a1a;
    font-weight: bold;
    box-shadow:
        0 0 18px rgba(0, 255, 255, 1),
        inset 0 0 10px rgba(220, 255, 255, 0.75);
}

/* IMPORT / EXPORT / EUROPA / KRAJÓWKI / TARCZKI / BI-TEMP — zielone zakładki */
#tabs .tab-btn[data-module="import"],
#tabs .tab-btn[data-module="exporty"],
#tabs .tab-btn[data-module="krajowki"],
#tabs .tab-btn[data-module="europa"],
#tabs .tab-btn[data-module="tarczki"],
#tabs .tab-btn[data-module="bitemp"] {
    background: rgba(22, 120, 52, 0.62);
    border: 1px solid rgba(70, 210, 105, 0.88);
    color: #f0fff4;
    box-shadow: 0 0 7px rgba(50, 200, 95, 0.55);
}

#tabs .tab-btn[data-module="import"]:hover,
#tabs .tab-btn[data-module="exporty"]:hover,
#tabs .tab-btn[data-module="krajowki"]:hover,
#tabs .tab-btn[data-module="europa"]:hover,
#tabs .tab-btn[data-module="tarczki"]:hover,
#tabs .tab-btn[data-module="bitemp"]:hover {
    background: rgba(32, 150, 68, 0.72);
    border-color: rgba(100, 235, 140, 1);
    box-shadow: 0 0 11px rgba(60, 220, 110, 0.8);
}

#tabs .tab-btn[data-module="import"].active,
#tabs .tab-btn[data-module="exporty"].active,
#tabs .tab-btn[data-module="krajowki"].active,
#tabs .tab-btn[data-module="europa"].active,
#tabs .tab-btn[data-module="tarczki"].active,
#tabs .tab-btn[data-module="bitemp"].active {
    background: rgba(45, 175, 82, 0.88);
    color: #fff;
    font-weight: bold;
    border-color: rgba(140, 255, 175, 1);
    box-shadow: 0 0 16px rgba(70, 230, 120, 1);
}

/* DESCARGAS — żółty fluorescent */
#tabs .tab-btn[data-module="descargas"],
#tabs .tab-btn[data-module="rozladunki"] {
    background: rgba(170, 195, 0, 0.58);
    border: 1px solid rgba(220, 255, 0, 0.88);
    color: #141400;
    box-shadow: 0 0 9px rgba(210, 255, 0, 0.55);
}

#tabs .tab-btn[data-module="descargas"]:hover,
#tabs .tab-btn[data-module="rozladunki"]:hover {
    background: rgba(205, 230, 0, 0.74);
    border-color: rgba(240, 255, 60, 1);
    box-shadow: 0 0 14px rgba(230, 255, 0, 0.85);
}

#tabs .tab-btn[data-module="descargas"].active,
#tabs .tab-btn[data-module="rozladunki"].active {
    background: #eaff00;
    color: #0a0a00;
    font-weight: bold;
    border-color: #f6ff4d;
    box-shadow:
        0 0 18px rgba(234, 255, 0, 1),
        0 0 36px rgba(200, 255, 0, 0.7),
        inset 0 0 10px rgba(255, 255, 200, 0.55);
    text-shadow: 0 0 8px rgba(255, 255, 180, 0.9);
}

/* KIEROWCY — żółte zakładki */
#tabs .tab-btn[data-module="kierowcy"] {
    background: rgba(168, 132, 8, 0.68);
    border: 1px solid rgba(255, 215, 70, 0.9);
    color: #fffbe8;
    box-shadow: 0 0 8px rgba(255, 200, 40, 0.55);
}

#tabs .tab-btn[data-module="kierowcy"]:hover {
    background: rgba(195, 155, 12, 0.78);
    border-color: rgba(255, 230, 100, 1);
    box-shadow: 0 0 12px rgba(255, 215, 60, 0.85);
}

#tabs .tab-btn[data-module="kierowcy"].active {
    background: rgba(218, 175, 18, 0.9);
    color: #1a1400;
    font-weight: bold;
    border-color: rgba(255, 240, 140, 1);
    box-shadow: 0 0 18px rgba(255, 220, 70, 1);
}

/* KLIENCI — pomarańczowe zakładki */
#tabs .tab-btn[data-module="klienci"] {
    background: rgba(180, 95, 18, 0.68);
    border: 1px solid rgba(255, 165, 70, 0.9);
    color: #fff8f0;
    box-shadow: 0 0 8px rgba(255, 140, 40, 0.55);
}

#tabs .tab-btn[data-module="klienci"]:hover {
    background: rgba(205, 115, 22, 0.78);
    border-color: rgba(255, 190, 100, 1);
    box-shadow: 0 0 12px rgba(255, 160, 55, 0.85);
}

#tabs .tab-btn[data-module="klienci"].active {
    background: rgba(228, 130, 28, 0.9);
    color: #1a0e00;
    font-weight: bold;
    border-color: rgba(255, 210, 130, 1);
    box-shadow: 0 0 18px rgba(255, 170, 60, 1);
}

/* ANDROID — biały przycisk, niebieski tekst */
#tabs .tab-btn[data-module="android"] {
    background: #ffffff;
    border: 1px solid #c7d7f5;
    color: #1d4ed8;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

#tabs .tab-btn[data-module="android"]:hover {
    background: #f8fbff;
    border-color: #93c5fd;
    color: #1e40af;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
}

#tabs .tab-btn[data-module="android"].active {
    background: #ffffff;
    border-color: #3b82f6;
    color: #1e3a8a;
    font-weight: bold;
    box-shadow:
        0 0 14px rgba(59, 130, 246, 0.45),
        inset 0 0 0 1px rgba(59, 130, 246, 0.25);
}

#tabs .tab-btn[data-module="android"].tab-btn--denied {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(199, 215, 245, 0.5);
    color: rgba(29, 78, 216, 0.45);
    box-shadow: none;
}

/* PALETY — fioletowe zakładki */
#tabs .tab-btn[data-module="palety"] {
    background: rgba(109, 40, 217, 0.72);
    border: 1px solid rgba(167, 139, 250, 0.95);
    color: #faf5ff;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.65);
}

#tabs .tab-btn[data-module="palety"]:hover {
    background: rgba(124, 58, 237, 0.85);
    border-color: rgba(196, 181, 253, 1);
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.85);
}

#tabs .tab-btn[data-module="palety"].active {
    background: rgba(147, 51, 234, 0.95);
    color: #fff;
    font-weight: bold;
    border-color: rgba(216, 180, 254, 1);
    box-shadow:
        0 0 18px rgba(168, 85, 247, 1),
        0 0 32px rgba(124, 58, 237, 0.55);
}

/* KADRY — ten sam kolor co FINANSE */
#tabs .tab-btn[data-module="kadry"] {
    background: rgba(255, 20, 147, 0.72);
    border: 1px solid rgba(255, 120, 200, 1);
    color: #fff;
    box-shadow:
        0 0 10px rgba(255, 20, 147, 0.9),
        0 0 22px rgba(255, 0, 200, 0.55),
        inset 0 0 8px rgba(255, 180, 220, 0.35);
}

#tabs .tab-btn[data-module="kadry"]:hover {
    background: rgba(255, 45, 165, 0.85);
    border-color: rgba(255, 180, 220, 1);
    box-shadow:
        0 0 14px rgba(255, 40, 160, 1),
        0 0 28px rgba(255, 0, 220, 0.75),
        inset 0 0 10px rgba(255, 200, 230, 0.45);
}

#tabs .tab-btn[data-module="kadry"].active {
    background: rgba(255, 60, 175, 0.95);
    color: #fff;
    font-weight: bold;
    border-color: rgba(255, 210, 235, 1);
    box-shadow:
        0 0 18px rgba(255, 50, 170, 1),
        0 0 36px rgba(255, 0, 210, 0.9),
        inset 0 0 12px rgba(255, 220, 240, 0.55);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
}

/* FINANSE — grupa modułów finansowych (modal) */
#tabs .tab-btn[data-module="finanse"] {
    background: rgba(255, 20, 147, 0.72);
    border: 1px solid rgba(255, 120, 200, 1);
    color: #fff;
    box-shadow:
        0 0 10px rgba(255, 20, 147, 0.9),
        0 0 22px rgba(255, 0, 200, 0.55),
        inset 0 0 8px rgba(255, 180, 220, 0.35);
}

#tabs .tab-btn[data-module="finanse"]:hover {
    background: rgba(255, 45, 165, 0.85);
    border-color: rgba(255, 180, 220, 1);
    box-shadow:
        0 0 14px rgba(255, 40, 160, 1),
        0 0 28px rgba(255, 0, 220, 0.75),
        inset 0 0 10px rgba(255, 200, 230, 0.45);
}

#tabs .tab-btn[data-module="finanse"].active {
    background: rgba(255, 60, 175, 0.95);
    color: #fff;
    font-weight: bold;
    border-color: rgba(255, 210, 235, 1);
    box-shadow:
        0 0 18px rgba(255, 50, 170, 1),
        0 0 36px rgba(255, 0, 210, 0.9),
        inset 0 0 12px rgba(255, 220, 240, 0.55);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
}

/* STATYSTYKI — grupa modułów statystycznych (modal) */
#tabs .tab-btn[data-module="statystyki"] {
    background: rgba(200, 30, 30, 0.72);
    border: 1px solid rgba(255, 90, 90, 1);
    color: #fff;
    box-shadow:
        0 0 10px rgba(200, 30, 30, 0.9),
        0 0 22px rgba(220, 0, 0, 0.55),
        inset 0 0 8px rgba(255, 180, 180, 0.35);
}

#tabs .tab-btn[data-module="statystyki"]:hover {
    background: rgba(220, 45, 45, 0.85);
    border-color: rgba(255, 180, 180, 1);
    box-shadow:
        0 0 14px rgba(220, 40, 40, 1),
        0 0 28px rgba(255, 0, 0, 0.75),
        inset 0 0 10px rgba(255, 200, 200, 0.45);
}

#tabs .tab-btn[data-module="statystyki"].active {
    background: rgba(220, 50, 50, 0.95);
    color: #fff;
    font-weight: bold;
    border-color: rgba(255, 210, 210, 1);
    box-shadow:
        0 0 18px rgba(220, 40, 40, 1),
        0 0 36px rgba(255, 0, 0, 0.9),
        inset 0 0 12px rgba(255, 220, 220, 0.55);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
}

/* ROZLICZENIA — topbar (cyjan) */
#topbar #rozliczenia-buttons {
    position: relative;
    z-index: 2;
}

#topbar #rozliczenia-buttons .tb-btn--rozliczenia {
    background: rgba(0, 210, 190, 0.55);
    border: 1px solid rgba(0, 255, 220, 0.75);
    color: #fff;
    box-shadow:
        0 0 8px rgba(0, 255, 220, 0.35),
        inset 0 0 6px rgba(180, 255, 245, 0.2);
}

#topbar #rozliczenia-buttons .tb-btn--rozliczenia:hover:not(:disabled) {
    background: rgba(0, 230, 205, 0.72);
    border-color: rgba(160, 255, 240, 1);
    box-shadow:
        0 0 12px rgba(0, 255, 230, 0.55),
        inset 0 0 8px rgba(200, 255, 250, 0.3);
}

#topbar #rozliczenia-buttons .tb-btn--rozliczenia:active:not(:disabled) {
    transform: translateY(1px);
}

#topbar #rozliczenia-buttons .tb-btn--rozliczenia-primary {
    background: rgba(0, 245, 220, 0.88);
    border-color: rgba(210, 255, 250, 1);
    color: #003830;
    font-weight: 800;
    box-shadow:
        0 0 12px rgba(0, 255, 230, 0.65),
        inset 0 0 8px rgba(255, 255, 255, 0.35);
}

#topbar #rozliczenia-buttons .tb-btn--rozliczenia-primary:hover:not(:disabled) {
    background: rgba(120, 255, 235, 0.95);
    color: #002820;
}

#topbar #rozliczenia-buttons #btn-rozliczenia-back {
    background: rgba(8, 28, 32, 0.85);
    border-color: rgba(255, 255, 255, 0.45);
    margin-right: 4px;
}

#topbar #rozliczenia-buttons #btn-rozliczenia-back:hover:not(:disabled) {
    background: rgba(20, 48, 52, 0.95);
    border-color: rgba(255, 255, 255, 0.65);
}

#topbar #rozliczenia-buttons .tb-btn--rozliczenia:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
}

/* MANDATY — topbar (pomarańcz) */
#topbar #mandaty-buttons .tb-btn--mandaty {
    background: rgba(220, 85, 25, 0.72);
    border: 1px solid rgba(255, 150, 90, 0.95);
    color: #fff8f2;
    box-shadow:
        0 0 8px rgba(255, 107, 53, 0.55),
        inset 0 0 4px rgba(255, 200, 160, 0.35);
}

#topbar #mandaty-buttons .tb-btn--mandaty:hover {
    background: rgba(240, 100, 35, 0.88);
    border-color: rgba(255, 190, 140, 1);
    box-shadow:
        0 0 12px rgba(255, 120, 60, 0.75),
        inset 0 0 6px rgba(255, 210, 170, 0.45);
}

#topbar #mandaty-buttons .tb-btn--mandaty:active {
    transform: scale(0.96);
}

/* KOLIZJE — topbar (zielony jak moduł) */
#topbar #kolizje-buttons .tb-btn--kolizje {
    background: rgba(0, 255, 120, 0.22);
    border: 1px solid rgba(0, 255, 120, 0.75);
    color: #eafff3;
    box-shadow:
        0 0 10px rgba(0, 255, 120, 0.45),
        inset 0 0 8px rgba(0, 255, 120, 0.12);
}

#topbar #kolizje-buttons .tb-btn--kolizje:hover {
    background: rgba(0, 255, 120, 0.32);
    border-color: rgba(0, 255, 160, 1);
    box-shadow:
        0 0 14px rgba(0, 255, 120, 0.65),
        inset 0 0 10px rgba(0, 255, 120, 0.18);
}

#topbar #kolizje-buttons .tb-btn--kolizje:active {
    transform: scale(0.96);
}

/* KOLIZJE — legenda statusów w górnym pasku */
#topbar #kolizje-buttons {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 240px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#topbar #kolizje-buttons::-webkit-scrollbar {
    display: none;
}

#topbar #kolizje-buttons .kolizje-status-legend {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(0, 255, 120, 0.25);
    flex-shrink: 0;
}

#topbar #kolizje-buttons .kolizje-status-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    color: #eafff3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#topbar #kolizje-buttons .kolizje-status-legend__item::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    flex-shrink: 0;
}

#topbar #kolizje-buttons .kolizje-status-legend__item--otwarta::before {
    background: var(--kolizje-bg-otwarta);
    border-color: rgba(255, 110, 110, 0.55);
}

#topbar #kolizje-buttons .kolizje-status-legend__item--zgloszona::before {
    background: var(--kolizje-bg-zgloszona);
    border-color: rgba(255, 215, 70, 0.55);
}

#topbar #kolizje-buttons .kolizje-status-legend__item--zamknieta::before {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
}

/* WYPŁATY — topbar (różowy fluor) */
#topbar #wyplaty-buttons .tb-btn--wyplaty {
    background: rgba(255, 20, 147, 0.72);
    border: 1px solid rgba(255, 120, 200, 1);
    color: #fff;
    box-shadow:
        0 0 8px rgba(255, 20, 147, 0.75),
        inset 0 0 4px rgba(255, 180, 220, 0.35);
}

#topbar #wyplaty-buttons .tb-btn--wyplaty:hover {
    background: rgba(255, 45, 165, 0.88);
    border-color: rgba(255, 180, 220, 1);
    box-shadow:
        0 0 12px rgba(255, 40, 160, 0.9),
        inset 0 0 6px rgba(255, 200, 230, 0.45);
}

#topbar #wyplaty-buttons .tb-btn--wyplaty:active {
    transform: scale(0.96);
}

/* STAT CIĄGNIKI — topbar (czerwony jak STATYSTYKI) */
#topbar #stat-ciagniki-buttons .tb-btn--stat-ciagniki {
    background: rgba(220, 50, 50, 0.82);
    border: 1px solid rgba(255, 120, 120, 0.95);
    color: #fff;
    box-shadow:
        0 0 8px rgba(220, 50, 50, 0.65),
        inset 0 0 4px rgba(255, 180, 180, 0.25);
}

#topbar #stat-ciagniki-buttons .tb-btn--stat-ciagniki:hover {
    background: rgba(235, 65, 65, 0.92);
    border-color: rgba(255, 160, 160, 1);
    box-shadow:
        0 0 12px rgba(220, 50, 50, 0.85),
        inset 0 0 6px rgba(255, 200, 200, 0.35);
}

#topbar #stat-ciagniki-buttons .tb-btn--stat-ciagniki:active {
    transform: scale(0.96);
}

/* ADMIN / TABELKA — czarne zakładki */
#tabs .tab-btn[data-module="admin"],
#tabs .tab-btn[data-module="tabelka"] {
    background: rgba(12, 12, 16, 0.82);
    border: 1px solid rgba(90, 90, 100, 0.75);
    color: #e8e8ec;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
}

#tabs .tab-btn[data-module="admin"]:hover,
#tabs .tab-btn[data-module="tabelka"]:hover {
    background: rgba(28, 28, 34, 0.88);
    border-color: rgba(140, 140, 155, 0.85);
    box-shadow: 0 0 12px rgba(40, 40, 48, 0.8);
}

#tabs .tab-btn[data-module="admin"].active,
#tabs .tab-btn[data-module="tabelka"].active {
    background: rgba(8, 8, 10, 0.95);
    color: #fff;
    font-weight: bold;
    border-color: rgba(180, 180, 190, 0.9);
    box-shadow:
        0 0 16px rgba(0, 0, 0, 0.9),
        inset 0 0 12px rgba(60, 60, 70, 0.35);
}

body.module-toolbar-green #topbar .tb-btn {
    background: rgba(22, 110, 50, 0.68);
    border: 1px solid rgba(65, 200, 100, 0.88);
    color: #f0fff4;
    box-shadow:
        0 0 7px rgba(50, 190, 90, 0.6),
        inset 0 0 4px rgba(80, 220, 120, 0.4);
}

body.module-toolbar-green #topbar .tb-btn:hover {
    background: rgba(32, 140, 65, 0.78);
    border-color: rgba(100, 235, 140, 1);
    box-shadow:
        0 0 11px rgba(60, 220, 110, 0.9),
        inset 0 0 6px rgba(100, 235, 140, 0.5);
}

body.module-toolbar-green #topbar .tb-btn:active {
    background: rgba(18, 85, 40, 0.75);
    transform: scale(0.96);
}

/* TABELKA — DODAJ / USUŃ WIERSZ (czerwony) */
#topbar .tb-btn--red,
#topbar #tabelka-buttons #btn-add-row,
#topbar #tabelka-buttons #btn-tabelka-delete-row {
    background: rgba(180, 24, 36, 0.72);
    border: 1px solid rgba(255, 55, 70, 0.9);
    color: #fff5f5;
    box-shadow:
        0 0 8px rgba(255, 40, 55, 0.75),
        inset 0 0 5px rgba(255, 80, 95, 0.45);
}

#topbar .tb-btn--red:hover,
#topbar #tabelka-buttons #btn-add-row:hover,
#topbar #tabelka-buttons #btn-tabelka-delete-row:hover {
    background: rgba(220, 35, 50, 0.82);
    border-color: rgba(255, 100, 115, 1);
    box-shadow:
        0 0 14px rgba(255, 50, 65, 1),
        inset 0 0 7px rgba(255, 120, 130, 0.55);
}

#topbar .tb-btn--red:active,
#topbar #tabelka-buttons #btn-add-row:active,
#topbar #tabelka-buttons #btn-tabelka-delete-row:active {
    background: rgba(140, 18, 30, 0.78);
    transform: scale(0.96);
}

/* TABELKA — DRUKUJ (zielony) */
#topbar .tb-btn--green,
#topbar #tabelka-buttons #btn-print {
    background: rgba(22, 115, 52, 0.78);
    border: 1px solid rgba(70, 200, 110, 0.95);
    color: #f0fff4;
    box-shadow:
        0 0 8px rgba(50, 200, 100, 0.65),
        inset 0 0 5px rgba(90, 230, 140, 0.4);
}

#topbar .tb-btn--green:hover,
#topbar #tabelka-buttons #btn-print:hover {
    background: rgba(32, 145, 68, 0.88);
    border-color: rgba(100, 230, 150, 1);
    box-shadow:
        0 0 14px rgba(60, 220, 120, 0.9),
        inset 0 0 7px rgba(120, 245, 165, 0.5);
}

#topbar .tb-btn--green:active,
#topbar #tabelka-buttons #btn-print:active {
    background: rgba(16, 90, 42, 0.85);
    transform: scale(0.96);
}

/* TABELKA — WYCOFANY (żółty) */
#topbar .tb-btn--yellow,
#topbar #tabelka-buttons #btn-tabelka-wycofany {
    background: rgba(230, 180, 0, 0.92);
    border: 1px solid rgba(255, 220, 40, 0.98);
    color: #2a1f00;
    box-shadow:
        0 0 8px rgba(255, 210, 30, 0.75),
        inset 0 0 5px rgba(255, 235, 80, 0.45);
}

#topbar .tb-btn--yellow:hover,
#topbar #tabelka-buttons #btn-tabelka-wycofany:hover {
    background: rgba(245, 200, 10, 0.98);
    border-color: rgba(255, 235, 80, 1);
    box-shadow:
        0 0 14px rgba(255, 220, 40, 0.95),
        inset 0 0 7px rgba(255, 245, 120, 0.55);
}

#topbar .tb-btn--yellow:active,
#topbar #tabelka-buttons #btn-tabelka-wycofany:active {
    background: rgba(200, 155, 0, 0.95);
    transform: scale(0.96);
}

/* DO POTWIERDZENIA — różowy przycisk (IMPORT / EXPORTY) */
#topbar .tb-btn--pink {
    background: rgba(190, 55, 95, 0.82);
    border: 1px solid rgba(255, 150, 185, 0.95);
    color: #fff8fa;
    box-shadow:
        0 0 8px rgba(255, 100, 150, 0.55),
        inset 0 0 4px rgba(255, 180, 200, 0.35);
}

#topbar .tb-btn--pink:hover {
    background: rgba(210, 70, 110, 0.9);
    border-color: rgba(255, 190, 210, 1);
    box-shadow:
        0 0 12px rgba(255, 120, 170, 0.75),
        inset 0 0 6px rgba(255, 200, 215, 0.45);
}

#topbar .tb-btn--pink:active {
    background: rgba(160, 45, 80, 0.88);
    transform: scale(0.96);
}

/* MYCIE — pomarańczowy przycisk (EXPORTY) */
#topbar .tb-btn.tb-btn--orange,
#topbar #export-buttons #btn-export-mycie {
    background: #ff8c00 !important;
    border: 1px solid #ffb84d !important;
    color: #1a0f00 !important;
    font-weight: 700;
    box-shadow:
        0 0 10px rgba(255, 140, 0, 0.85),
        inset 0 0 5px rgba(255, 210, 120, 0.45);
}

#topbar .tb-btn.tb-btn--orange:hover,
#topbar #export-buttons #btn-export-mycie:hover {
    background: #ffa500 !important;
    border-color: #ffd080 !important;
    color: #1a0f00 !important;
    box-shadow:
        0 0 14px rgba(255, 160, 20, 1),
        inset 0 0 7px rgba(255, 220, 140, 0.55);
}

#topbar .tb-btn.tb-btn--orange:active,
#topbar #export-buttons #btn-export-mycie:active {
    background: #e67a00 !important;
    transform: scale(0.96);
}

body.module-toolbar-green #topbar .tb-btn.tb-btn--orange,
body.module-toolbar-green #topbar #export-buttons #btn-export-mycie {
    background: #ff8c00 !important;
    border: 1px solid #ffb84d !important;
    color: #1a0f00 !important;
    box-shadow:
        0 0 10px rgba(255, 140, 0, 0.85),
        inset 0 0 5px rgba(255, 210, 120, 0.45);
}

body.module-toolbar-green #topbar .tb-btn.tb-btn--orange:hover,
body.module-toolbar-green #topbar #export-buttons #btn-export-mycie:hover {
    background: #ffa500 !important;
    border-color: #ffd080 !important;
    box-shadow:
        0 0 14px rgba(255, 160, 20, 1),
        inset 0 0 7px rgba(255, 220, 140, 0.55);
}

body.module-toolbar-green #topbar .tb-btn.tb-btn--orange:active,
body.module-toolbar-green #topbar #export-buttons #btn-export-mycie:active {
    background: #e67a00 !important;
    transform: scale(0.96);
}

/* PALETY — skrót do modułu (kolor jak zakładka PALETY) */
#topbar .tb-btn--palety {
    background: rgba(109, 40, 217, 0.72);
    border: 1px solid rgba(167, 139, 250, 0.95);
    color: #faf5ff;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.65);
}

#topbar .tb-btn--palety:hover {
    background: rgba(124, 58, 237, 0.85);
    border-color: rgba(196, 181, 253, 1);
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.85);
}

#topbar .tb-btn--palety:active {
    background: rgba(147, 51, 234, 0.95);
    color: #fff;
    border-color: rgba(216, 180, 254, 1);
    box-shadow:
        0 0 18px rgba(168, 85, 247, 1),
        0 0 32px rgba(124, 58, 237, 0.55);
    transform: scale(0.96);
}

/* DODAJ KLIENTA — cyjan (IMPORT / EXPORTY / KRAJÓWKI / EUROPA) */
#topbar #import-buttons .btn-add-client-module,
#topbar #export-buttons .btn-add-client-module,
#topbar #krajowki-buttons .btn-add-client-module,
#topbar #europa-buttons .btn-add-client-module {
    background: #00ffff;
    border: 1px solid #66ffff;
    color: #002626;
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.85),
        inset 0 0 6px rgba(180, 255, 255, 0.55);
}

#topbar #import-buttons .btn-add-client-module:hover,
#topbar #export-buttons .btn-add-client-module:hover,
#topbar #krajowki-buttons .btn-add-client-module:hover,
#topbar #europa-buttons .btn-add-client-module:hover {
    background: #33ffff;
    border-color: #99ffff;
    color: #001a1a;
    box-shadow:
        0 0 14px rgba(0, 255, 255, 1),
        inset 0 0 8px rgba(210, 255, 255, 0.65);
}

#topbar #import-buttons .btn-add-client-module:active,
#topbar #export-buttons .btn-add-client-module:active,
#topbar #krajowki-buttons .btn-add-client-module:active,
#topbar #europa-buttons .btn-add-client-module:active {
    background: #00d4d4;
    transform: scale(0.96);
}

body.module-toolbar-green #topbar #import-buttons .btn-add-client-module,
body.module-toolbar-green #topbar #export-buttons .btn-add-client-module,
body.module-toolbar-green #topbar #krajowki-buttons .btn-add-client-module,
body.module-toolbar-green #topbar #europa-buttons .btn-add-client-module {
    background: #00ffff;
    border-color: #66ffff;
    color: #002626;
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.85),
        inset 0 0 6px rgba(180, 255, 255, 0.55);
}

body.module-toolbar-green #topbar #import-buttons .btn-add-client-module:hover,
body.module-toolbar-green #topbar #export-buttons .btn-add-client-module:hover,
body.module-toolbar-green #topbar #krajowki-buttons .btn-add-client-module:hover,
body.module-toolbar-green #topbar #europa-buttons .btn-add-client-module:hover {
    background: #33ffff;
    border-color: #99ffff;
    color: #001a1a;
    box-shadow:
        0 0 14px rgba(0, 255, 255, 1),
        inset 0 0 8px rgba(210, 255, 255, 0.65);
}

body.module-toolbar-green #topbar #import-buttons .btn-add-client-module:active,
body.module-toolbar-green #topbar #export-buttons .btn-add-client-module:active,
body.module-toolbar-green #topbar #krajowki-buttons .btn-add-client-module:active,
body.module-toolbar-green #topbar #europa-buttons .btn-add-client-module:active {
    background: #00d4d4;
}

/* VIN-AUTO — czarny przycisk raportu */
#topbar #vin-ciezarowki-buttons .tb-btn--red,
#topbar #vin-naczepy-buttons .tb-btn--red {
    flex-shrink: 0;
}

#topbar #vin-ciezarowki-buttons .tb-btn--black {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    box-shadow:
        0 0 6px rgba(0, 0, 0, 0.5),
        inset 0 0 4px rgba(255, 255, 255, 0.08);
}

#topbar #vin-ciezarowki-buttons .tb-btn--black:hover {
    background: #2d2d2d;
    border-color: #444;
    box-shadow:
        0 0 10px rgba(0, 0, 0, 0.65),
        inset 0 0 6px rgba(255, 255, 255, 0.12);
}

#topbar #vin-ciezarowki-buttons .tb-btn--black:active {
    background: #0d0d0d;
}

#topbar #vin-ciezarowki-buttons .tb-btn--black:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* USUŃ / ZMIEN TELEFON — odsunięte od pozostałych przycisków */
#topbar #vin-ciezarowki-buttons .vin-ciezarowki-phone-actions {
    margin-left: 2cm;
}

/* VIN-TRAILER — czarny przycisk raportu */
#topbar #vin-naczepy-buttons .tb-btn--black {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    box-shadow:
        0 0 6px rgba(0, 0, 0, 0.5),
        inset 0 0 4px rgba(255, 255, 255, 0.08);
    margin-right: 10px;
    flex-shrink: 0;
}

#topbar #vin-naczepy-buttons .tb-btn--black:hover {
    background: #2d2d2d;
    border-color: #444;
}

#topbar #vin-naczepy-buttons .tb-btn--black:active {
    background: #0d0d0d;
}

#topbar #vin-naczepy-buttons .tb-btn--black:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

body.module-toolbar-green #topbar .tb-btn--pink {
    background: rgba(175, 50, 88, 0.85);
    border-color: rgba(255, 140, 175, 0.95);
    color: #fff8fa;
}

body.module-toolbar-green #topbar .tb-btn--pink:hover {
    background: rgba(195, 65, 105, 0.92);
    border-color: rgba(255, 185, 205, 1);
}

/* PALETY — fiolet jak zakładka, mimo zielonego toolbara */
body.module-toolbar-green #topbar .tb-btn.tb-btn--palety,
body.module-toolbar-green #topbar .btn-goto-palety {
    background: rgba(109, 40, 217, 0.72);
    border: 1px solid rgba(167, 139, 250, 0.95);
    color: #faf5ff;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.65);
}

body.module-toolbar-green #topbar .tb-btn.tb-btn--palety:hover,
body.module-toolbar-green #topbar .btn-goto-palety:hover {
    background: rgba(124, 58, 237, 0.85);
    border-color: rgba(196, 181, 253, 1);
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.85);
}

body.module-toolbar-green #topbar .tb-btn.tb-btn--palety:active,
body.module-toolbar-green #topbar .btn-goto-palety:active {
    background: rgba(147, 51, 234, 0.95);
    color: #fff;
    border-color: rgba(216, 180, 254, 1);
    box-shadow:
        0 0 18px rgba(168, 85, 247, 1),
        0 0 32px rgba(124, 58, 237, 0.55);
    transform: scale(0.96);
}

/* IMPORT — PRZEPINKA zostaje czerwony mimo zielonego toolbara */
body.module-toolbar-green #topbar .tb-btn--red,
body.module-toolbar-green #topbar #import-buttons #btn-import-przepinka {
    background: rgba(180, 24, 36, 0.78);
    border: 1px solid rgba(255, 55, 70, 0.95);
    color: #fff5f5;
    box-shadow:
        0 0 8px rgba(255, 40, 55, 0.8),
        inset 0 0 5px rgba(255, 80, 95, 0.45);
}

body.module-toolbar-green #topbar .tb-btn--red:hover,
body.module-toolbar-green #topbar #import-buttons #btn-import-przepinka:hover {
    background: rgba(220, 35, 50, 0.88);
    border-color: rgba(255, 100, 115, 1);
    box-shadow:
        0 0 14px rgba(255, 50, 65, 1),
        inset 0 0 7px rgba(255, 120, 130, 0.55);
}

body.module-toolbar-green #topbar .tb-btn--red:active,
body.module-toolbar-green #topbar #import-buttons #btn-import-przepinka:active {
    background: rgba(140, 18, 30, 0.82);
    transform: scale(0.96);
}


/* PRZYCISKI W GÓRNYM PASKU — DO LEWEJ */
#topbar .module-toolbar,
#topbar .admin-buttons {
    justify-content: flex-start !important;
}

#topbar #obcokrajowcy-buttons #btn-obcokrajowcy-employed {
    margin-left: 3cm;
}

/* VIN-TRAILER — legenda wymiarów w górnym pasku */
#topbar .vin-naczepy-topbar-info {
    align-items: center;
    gap: 10px;
    margin-left: 4px;
}

#topbar .vin-naczepy-topbar-spec {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-radius: 6px;
}

#topbar .vin-naczepy-topbar-item {
    display: inline-block;
    padding: 4px 12px;
}

#topbar .vin-naczepy-topbar-item + .vin-naczepy-topbar-item {
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}

#topbar .vin-naczepy-topbar-spec--width .vin-naczepy-topbar-item + .vin-naczepy-topbar-item {
    border-left-color: rgba(200, 255, 210, 0.45);
}

#topbar .vin-naczepy-topbar-spec--height {
    color: #e9f3ff;
    text-shadow: var(--text-shadow);
    background: rgba(0, 40, 90, 0.45);
    border: 1px solid rgba(0, 180, 255, 0.55);
    box-shadow:
        0 0 6px rgba(0, 180, 255, 0.45),
        inset 0 0 4px rgba(0, 180, 255, 0.25);
}

#topbar .vin-naczepy-topbar-spec--width {
    color: #f0fff4;
    text-shadow: 0 1px 2px rgba(10, 50, 20, 0.85);
    background: rgba(22, 110, 50, 0.68);
    border: 1px solid rgba(65, 200, 100, 0.88);
    box-shadow:
        0 0 7px rgba(50, 190, 90, 0.6),
        inset 0 0 4px rgba(80, 220, 120, 0.35);
}