/* ═══════════════════════════════════════════════════════════════════════════════
   VPX GLOBAL CSS — Woltanic CRM+FSM | VULPEX SYSTEM
   Design system 1:1 ze screenshotów Woltanic
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Box model ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── CSS Custom Properties ─────────────────────────────────────────────────────── */
:root {
  /* ── Sidebar (1:1 z produkcji Woltanic, 2026-05-14) ──────────────────── */
  --vpx-sidebar-bg:          #003f7f;
  --vpx-sidebar-text:        #fafafa;
  --vpx-sidebar-active:      #004d9c;
  --vpx-sidebar-hover:       #004d9c;
  --vpx-sidebar-border:      #003262;

  /* Background */
  --vpx-bg-main:             #ffffff;
  --vpx-bg-card:             #ffffff;
  --vpx-bg-table-header:     #f5f5f5;
  --vpx-bg-input:            #ffffff;

  /* Stat boxy (Home dashboard) */
  --vpx-bg-stat-blue:        #eef6ff;
  --vpx-bg-stat-green:       #f0fdf4;
  --vpx-bg-stat-purple:      #f9f5ff;

  /* Text */
  --vpx-text-primary:        #0a0a0a;
  --vpx-text-secondary:      #737373;
  --vpx-text-link:           #1c3d77;
  --vpx-text-muted:          #737373;

  /* Borders */
  --vpx-border:              #e5e5e5;
  --vpx-border-input:        #e5e5e5;

  /* Accent (żółto-złoty) */
  --vpx-accent:              #f8be3b;
  --vpx-accent-text:         #0a0a0a;
  --vpx-accent-light:        #fef3c7;

  /* Brand primary */
  --vpx-primary:             #1c3d77;
  --vpx-primary-text:        #ffffff;

  /* Buttons */
  --vpx-btn-primary-bg:      #1c3d77;
  --vpx-btn-primary-text:    #ffffff;
  --vpx-btn-primary-hover-border: #1c3d77;
  --vpx-btn-secondary-bg:    #ffffff;
  --vpx-btn-secondary-text:  #0a0a0a;
  --vpx-btn-secondary-border:#e5e5e5;

  /* Quick action color buttons (Home — 3 kafle z kolorami) */
  --vpx-btn-qa-gray:         #687282;
  --vpx-btn-qa-orange:       #ff6800;
  --vpx-btn-qa-indigo:       #2c64ff;

  /* Stat icons */
  --vpx-stat-icon-blue:      #1c3d77;
  --vpx-stat-icon-green:     #16a34a;
  --vpx-stat-icon-amber:     #f8be3b;
  --vpx-stat-icon-gray:      #737373;
  --vpx-stat-icon-purple:    #7c3aed;

  /* Semantic */
  --vpx-error:               #eb0005;
  --vpx-success:             #16a34a;
  --vpx-warning:             #f8be3b;
  --vpx-info:                #004de5;

  /* Layout */
  --vpx-sidebar-width:       256px;
  --vpx-topbar-height:       64px;
  --vpx-radius:              10px;
  --vpx-radius-sm:           6px;
  --vpx-radius-lg:           14px;
  --vpx-shadow-card:         0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --vpx-shadow-modal:        0 20px 60px rgba(0,0,0,0.18);
  --vpx-transition:          0.15s ease;

  /* Font stack (Geist + fallback ui-sans-serif) */
  --vpx-font-sans:           'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --vpx-font-mono:           'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Base ────────────────────────────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--vpx-text-primary);
  background: var(--vpx-bg-main);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--vpx-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video, iframe { max-width: 100%; height: auto; }

/* ── Typography ──────────────────────────────────────────────────────────────── */
.vpx-h1 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0; }
.vpx-h2 { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; }
.vpx-h3 { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; }
.vpx-body { font-size: 14px; font-weight: 400; line-height: 1.5; }
.vpx-small { font-size: 12px; font-weight: 400; line-height: 1.4; }
.vpx-tiny  { font-size: 11px; font-weight: 400; line-height: 1.3; }
.vpx-text-safe { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }
.vpx-text-secondary { color: var(--vpx-text-secondary); }
.vpx-text-muted { color: var(--vpx-text-muted); }
.vpx-text-link { color: var(--vpx-text-link); }
.vpx-text-error { color: var(--vpx-error); }
.vpx-text-success { color: var(--vpx-success); }

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.vpx-app {
  display: flex;
  min-height: 100vh;
  background: var(--vpx-bg-main);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.vpx-sidebar {
  width: var(--vpx-sidebar-width);
  background: var(--vpx-sidebar-bg);
  color: var(--vpx-sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 900;
  transition: transform var(--vpx-transition);
  overflow-y: auto;
  overflow-x: hidden;
}
.vpx-sidebar-logo {
  display: flex;
  align-items: center;
  padding: 20px 20px 16px;
  min-height: 72px;
  border-bottom: 1px solid var(--vpx-sidebar-border);
}
.vpx-sidebar-logo img {
  max-height: 36px;
  width: auto;
}
.vpx-sidebar-logo-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.3px;
}
.vpx-sidebar-logo-placeholder .vpx-logo-dot {
  width: 10px;
  height: 10px;
  background: var(--vpx-accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.vpx-nav-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  padding: 20px 20px 6px;
}
.vpx-nav {
  flex: 1;
  padding: 8px 12px;
}
.vpx-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--vpx-radius-sm);
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--vpx-transition), color var(--vpx-transition);
  text-decoration: none;
  margin-bottom: 2px;
}
.vpx-nav-item:hover {
  background: var(--vpx-sidebar-hover);
  color: #FFFFFF;
  text-decoration: none;
}
.vpx-nav-item.is-active {
  background: var(--vpx-sidebar-active);
  color: #FFFFFF;
  font-weight: 600;
}
.vpx-nav-item .vpx-nav-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: 14px;
}
.vpx-nav-item .vpx-nav-badge {
  margin-left: auto;
  background: var(--vpx-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.vpx-sidebar-spacer {
  flex: 1;
}
.vpx-sidebar-user {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid var(--vpx-sidebar-border);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background var(--vpx-transition);
  flex-shrink: 0;
}
.vpx-sidebar-user:hover { background: rgba(255,255,255,0.04); }
.vpx-sidebar-user-info {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.vpx-sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vpx-sidebar-user-email {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Main area ───────────────────────────────────────────────────────────────── */
.vpx-main {
  flex: 1;
  min-width: 0; /* 2026-06-25 fix overflow mobile: pozwala flex-itemowi kurczyc sie ponizej min-content, dzieki czemu overflow-x:auto wrapperow tabel dziala. Bez tego na telefonie strona rozdmuchuje sie do szerokosci tabeli (~1225px na 390px) i trzeba oddalac zoom. */
  margin-left: var(--vpx-sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Topbar ──────────────────────────────────────────────────────────────────── */
.vpx-topbar {
  height: var(--vpx-topbar-height);
  background: var(--vpx-bg-card);
  border-bottom: 1px solid var(--vpx-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 800;
}
.vpx-topbar-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--vpx-text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--vpx-radius-sm);
}
.vpx-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--vpx-text-secondary);
  flex: 1;
}
.vpx-breadcrumb-sep {
  color: var(--vpx-border-input);
}
.vpx-breadcrumb-current {
  color: var(--vpx-text-primary);
  font-weight: 500;
}
.vpx-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vpx-notification-bell {
  position: relative;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--vpx-text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--vpx-radius-sm);
  transition: color var(--vpx-transition);
}
.vpx-notification-bell:hover { color: var(--vpx-text-primary); }
.vpx-notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--vpx-error);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ── Content area ────────────────────────────────────────────────────────────── */
.vpx-content-area {
  flex: 1;
  max-width: none;       /* Sebastian 2026-06-17: panel pełną szerokością (to nie strona www) */
  width: 100%;
  margin: 0 auto;
  padding: 24px;         /* minimalny margines */
}
.vpx-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.vpx-page-header-title { }
.vpx-page-header-title h1 { margin-bottom: 4px; }
.vpx-page-subtitle {
  font-size: 13px;
  color: var(--vpx-text-secondary);
  margin: 0;
}
.vpx-page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Stat cards ──────────────────────────────────────────────────────────────── */
.vpx-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.vpx-stat-card {
  background: var(--vpx-bg-card);
  border: 1px solid var(--vpx-border);
  border-radius: var(--vpx-radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--vpx-shadow-card);
}
.vpx-stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vpx-stat-card__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--vpx-text-secondary);
}
.vpx-stat-card__icon {
  font-size: 16px;
  color: var(--vpx-text-muted);
}
.vpx-stat-card__icon--blue   { color: var(--vpx-stat-icon-blue); }
.vpx-stat-card__icon--green  { color: var(--vpx-stat-icon-green); }
.vpx-stat-card__icon--amber  { color: var(--vpx-stat-icon-amber); }
.vpx-stat-card__icon--gray   { color: var(--vpx-stat-icon-gray); }
.vpx-stat-card__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--vpx-text-primary);
  line-height: 1;
}
.vpx-stat-card__sublabel {
  font-size: 12px;
  color: var(--vpx-text-muted);
}

/* ── Card container ──────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   OSTRZEŻENIE DLA NASTĘPNEGO MODELU AI (Sebastian 2026-05-17):
   Tu była DRUGA, zduplikowana definicja .vpx-card (padding:24px 0) która
   nadpisywała kanoniczną z góry pliku i KASOWAŁA marginesy boczne w CAŁYM
   CRM. USUNIĘTA. Kanoniczna .vpx-card jest JEDNA, wyżej (padding:20px).
   UWAGA: .vpx-settings-card (gdzie indziej) też ma padding:24px 0 — to
   INNA klasa, jej NIE ruszać. ZAKAZ definiowania .vpx-card po raz drugi.
   Łamie SKILL #1 (nie dubluj) i #19 (DRY).
   ───────────────────────────────────────────────────────────────────────── */
.vpx-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--vpx-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Tabele ──────────────────────────────────────────────────────────────────── */
.vpx-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--vpx-radius);
  border: 1px solid var(--vpx-border);
}
.vpx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vpx-table thead {
  background: var(--vpx-bg-table-header);
}
.vpx-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--vpx-text-secondary);
  white-space: nowrap;
  border-bottom: 1px solid var(--vpx-border);
}
.vpx-table tbody tr {
  border-bottom: 1px solid var(--vpx-border);
  transition: background var(--vpx-transition);
}
.vpx-table tbody tr:last-child { border-bottom: none; }
.vpx-table tbody tr:hover { background: #F9FAFB; }
.vpx-table td {
  padding: 12px 14px;
  vertical-align: middle;
  color: var(--vpx-text-primary);
}
.vpx-table td.vpx-text-safe { overflow-wrap: break-word; word-break: break-word; max-width: 200px; }
.vpx-table__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vpx-table-count {
  padding: 10px 0 0;
  font-size: 12px;
  color: var(--vpx-text-muted);
}

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.vpx-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 0;
  font-size: 13px;
  color: var(--vpx-text-secondary);
}
.vpx-pagination-pages {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vpx-pagination-btn {
  padding: 6px 14px;
  border-radius: var(--vpx-radius-sm);
  border: 1px solid var(--vpx-border);
  background: var(--vpx-bg-card);
  color: var(--vpx-text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--vpx-transition), box-shadow var(--vpx-transition);
}
.vpx-pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vpx-pagination-btn:not(:disabled):hover {
  box-shadow: 0 0 0 2px var(--vpx-btn-primary-hover-border);
}

/* ── Przyciski ───────────────────────────────────────────────────────────────── */
/* WAŻNE: żaden przycisk NIE czerwienieje na hover — zasada #23 */
.vpx-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--vpx-radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: box-shadow var(--vpx-transition), transform 0.1s ease, background var(--vpx-transition) !important;
  text-decoration: none;
  white-space: nowrap;
  min-height: 38px;
}
.vpx-btn:focus { outline: 2px solid var(--vpx-btn-primary-hover-border); outline-offset: 2px; }

/* Primary — granatowy */
.vpx-btn--primary {
  background: var(--vpx-btn-primary-bg) !important;
  color: var(--vpx-btn-primary-text) !important;
  border-color: var(--vpx-btn-primary-bg) !important;
}
.vpx-btn--primary:hover {
  box-shadow: 0 0 0 3px rgba(37,99,235,0.3) !important;
  transform: translateY(-1px);
  background: var(--vpx-btn-primary-bg) !important;
}

/* Secondary */
/* Przyciski nigdy nie podkreślają tekstu (nadpisuje globalne a:hover{underline}). Sebastian 2026-06-23. */
.vpx-btn, .vpx-btn:hover, .vpx-btn:focus, .vpx-btn:active, .vpx-btn:visited { text-decoration: none !important; }
.vpx-btn--secondary {
  background: var(--vpx-btn-secondary-bg) !important;
  color: var(--vpx-btn-secondary-text) !important;
  border-color: var(--vpx-btn-secondary-border) !important;
}
.vpx-btn--secondary:hover {
  background: var(--vpx-accent) !important;
  color: var(--vpx-accent-text) !important;
  border-color: var(--vpx-accent) !important;
  transform: translateY(-1px);
}

/* Text / link */
.vpx-btn--text {
  background: transparent !important;
  color: var(--vpx-text-link) !important;
  border-color: transparent !important;
  padding-left: 4px;
  padding-right: 4px;
}
.vpx-btn--text:hover {
  background: rgba(37,99,235,0.06) !important;
  box-shadow: none !important;
}

/* Danger — tylko do akcji destrukcyjnych, ramka czerwona NIE tło */
.vpx-btn--danger {
  background: var(--vpx-btn-primary-bg) !important;
  color: var(--vpx-btn-primary-text) !important;
  border-color: var(--vpx-error) !important;
}
.vpx-btn--danger:hover {
  box-shadow: 0 0 0 2px rgba(220,38,38,0.3) !important;
  transform: translateY(-1px);
  background: var(--vpx-btn-primary-bg) !important;
}

/* Sizes */
.vpx-btn--small { padding: 5px 12px; font-size: 12px; min-height: 30px; }
.vpx-btn--block { width: 100%; justify-content: center; }

/* Actions button (trzy kropki) */
.vpx-btn-actions {
  width: 32px;
  height: 32px;
  padding: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vpx-bg-card) !important;
  border: 1px solid var(--vpx-border) !important;
  color: var(--vpx-text-secondary) !important;
  border-radius: var(--vpx-radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: box-shadow var(--vpx-transition) !important;
}
.vpx-btn-actions:hover {
  box-shadow: 0 0 0 2px var(--vpx-btn-primary-hover-border) !important;
  transform: none;
  background: var(--vpx-bg-card) !important;
}

/* ── Formularze ──────────────────────────────────────────────────────────────── */
.vpx-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
}
.vpx-form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--vpx-text-primary);
}
.vpx-form-label .required { color: var(--vpx-error); margin-left: 2px; }
.vpx-form-input,
.vpx-form-select,
.vpx-form-textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--vpx-border-input);
  border-radius: var(--vpx-radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--vpx-text-primary);
  background: var(--vpx-bg-input);
  transition: border-color var(--vpx-transition), box-shadow var(--vpx-transition);
  -webkit-appearance: none;
  appearance: none;
}
.vpx-form-input::placeholder,
.vpx-form-textarea::placeholder { color: var(--vpx-text-muted); }
.vpx-form-input:focus,
.vpx-form-select:focus,
.vpx-form-textarea:focus {
  outline: none;
  border-color: var(--vpx-info);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.vpx-form-input.is-error,
.vpx-form-select.is-error { border-color: var(--vpx-error); }
.vpx-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.vpx-form-textarea { min-height: 100px; resize: vertical; }
.vpx-form-error {
  font-size: 12px;
  color: var(--vpx-error);
  display: flex;
  align-items: center;
  gap: 4px;
}
.vpx-form-hint {
  font-size: 11px;
  color: var(--vpx-text-muted);
}
.vpx-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.vpx-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Flatpickr override — ciemny styl zgodny z designem */
.flatpickr-input { cursor: pointer; }
.flatpickr-calendar {
  box-shadow: var(--vpx-shadow-modal) !important;
  border-radius: var(--vpx-radius) !important;
  border: 1px solid var(--vpx-border) !important;
}

/* ── Search bar ──────────────────────────────────────────────────────────────── */
.vpx-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.vpx-search-input-wrap {
  position: relative;
  flex: 1;
}
.vpx-search-input-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vpx-text-muted);
  pointer-events: none;
}
.vpx-search-input-wrap .vpx-form-input {
  padding-left: 36px;
}
.vpx-search-hint {
  font-size: 11px;
  color: var(--vpx-text-muted);
  margin-bottom: 16px;
}
.vpx-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vpx-filter-select {
  min-height: 38px;
  padding: 7px 32px 7px 12px;
  border: 1px solid var(--vpx-border-input);
  border-radius: var(--vpx-radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--vpx-text-primary);
  background: var(--vpx-bg-card);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

/* ── Modals ──────────────────────────────────────────────────────────────────── */
.vpx-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--vpx-transition), visibility var(--vpx-transition);
}
.vpx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.vpx-modal {
  background: var(--vpx-bg-card);
  border-radius: var(--vpx-radius-lg);
  box-shadow: var(--vpx-shadow-modal);
  width: 90%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(16px);
  transition: transform var(--vpx-transition);
}
.vpx-modal-overlay.is-open .vpx-modal { transform: translateY(0); }
.vpx-modal--sm  { max-width: 400px; }
.vpx-modal--lg  { max-width: 800px; }
.vpx-modal--xl  { max-width: 1100px; }
.vpx-modal--full { max-width: 95vw; max-height: 95vh; }
.vpx-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--vpx-border);
}
.vpx-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--vpx-text-primary);
  margin: 0;
}
.vpx-modal__subtitle {
  font-size: 12px;
  color: var(--vpx-text-secondary);
  margin: 4px 0 0;
}
.vpx-modal__close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--vpx-text-muted);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  transition: color var(--vpx-transition);
  flex-shrink: 0;
}
.vpx-modal__close:hover { color: var(--vpx-text-primary); }
.vpx-modal__body {
  padding: 20px 24px;
}
.vpx-modal__section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--vpx-text-primary);
  margin: 0 0 14px;
  padding-top: 4px;
}
.vpx-modal__section-title:not(:first-child) { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--vpx-border); }
.vpx-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--vpx-border);
  background: var(--vpx-bg-table-header);
  border-radius: 0 0 var(--vpx-radius-lg) var(--vpx-radius-lg);
}

/* ── Badges / Status ─────────────────────────────────────────────────────────── */
.vpx-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.vpx-badge--green  { background: rgba(16,185,129,0.12); color: #065F46; }
.vpx-badge--red    { background: rgba(220,38,38,0.1);   color: #991B1B; }
.vpx-badge--amber  { background: rgba(245,158,11,0.12); color: #92400E; }
.vpx-badge--gray   { background: rgba(107,114,128,0.1); color: #374151; }
.vpx-badge--blue   { background: rgba(37,99,235,0.1);   color: #1E40AF; }
.vpx-badge--custom { } /* kolor z style="background:...; color:..." */

/* ── Dropdown (custom select) ────────────────────────────────────────────────── */
.vpx-dropdown-menu {
  position: absolute;
  background: var(--vpx-bg-card);
  border: 1px solid var(--vpx-border);
  border-radius: var(--vpx-radius);
  box-shadow: var(--vpx-shadow-modal);
  min-width: 180px;
  z-index: 9100;
  overflow: hidden;
}
.vpx-dropdown-item {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--vpx-text-primary);
  cursor: pointer;
  transition: background var(--vpx-transition);
}
.vpx-dropdown-item:hover { background: var(--vpx-bg-table-header); }
.vpx-dropdown-item.is-selected {
  background: var(--vpx-accent) !important;
  color: #FFFFFF;
  font-weight: 600;
}
.vpx-dropdown-divider {
  height: 1px;
  background: var(--vpx-border);
  margin: 4px 0;
}

/* ── Toast notifications ─────────────────────────────────────────────────────── */
.vpx-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
  pointer-events: none;
}
.vpx-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--vpx-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  font-size: 13px;
  font-weight: 500;
  pointer-events: all;
  animation: vpx-toast-in 0.25s ease forwards;
  max-width: 100%;
}
.vpx-toast.is-hiding { animation: vpx-toast-out 0.25s ease forwards; }
@keyframes vpx-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vpx-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}
.vpx-toast--success { background: #ECFDF5; color: #065F46; border-left: 4px solid #10B981; }
.vpx-toast--error   { background: #FEF2F2; color: #991B1B; border-left: 4px solid #DC2626; }
.vpx-toast--info    { background: #EFF6FF; color: #1E40AF; border-left: 4px solid #2563EB; }
.vpx-toast--warning { background: #FFFBEB; color: #92400E; border-left: 4px solid #F59E0B; }
.vpx-toast-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.vpx-toast-msg  { flex: 1; line-height: 1.4; }

/* ── Timeline ────────────────────────────────────────────────────────────────── */
.vpx-timeline { display: flex; flex-direction: column; gap: 0; }
.vpx-timeline__entry {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  position: relative;
}
.vpx-timeline__entry::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 28px;
  bottom: 0;
  width: 1px;
  background: var(--vpx-border);
}
.vpx-timeline__entry:last-child::before { display: none; }
.vpx-timeline__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vpx-bg-table-header);
  border: 1px solid var(--vpx-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--vpx-text-secondary);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.vpx-timeline__content {
  flex: 1;
  background: var(--vpx-bg-card);
  border: 1px solid var(--vpx-border);
  border-radius: var(--vpx-radius-sm);
  padding: 10px 14px;
}
.vpx-timeline__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.vpx-timeline__author {
  font-size: 12px;
  font-weight: 600;
  color: var(--vpx-text-primary);
}
.vpx-timeline__time {
  font-size: 11px;
  color: var(--vpx-text-muted);
}
.vpx-timeline__body {
  font-size: 13px;
  color: var(--vpx-text-secondary);
  line-height: 1.5;
}

/* ── Avatar ──────────────────────────────────────────────────────────────────── */
.vpx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
  color: #FFFFFF;
  font-size: 12px;
  background: var(--vpx-stat-icon-blue); /* override per user */
}
.vpx-avatar--sm { width: 24px; height: 24px; font-size: 9px; }
.vpx-avatar--md { width: 40px; height: 40px; font-size: 14px; }
.vpx-avatar--lg { width: 64px; height: 64px; font-size: 22px; }

/* ── Tabs ────────────────────────────────────────────────────────────────────── */
.vpx-tabs {
  display: flex;
  gap: 2px;
  background: var(--vpx-bg-table-header);
  border: 1px solid var(--vpx-border);
  border-radius: var(--vpx-radius-sm);
  padding: 3px;
  width: fit-content;
  margin-bottom: 20px;
}
.vpx-tab {
  padding: 7px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vpx-text-secondary);
  cursor: pointer;
  transition: background var(--vpx-transition), color var(--vpx-transition);
  border: none;
  background: none;
  font-family: inherit;
}
.vpx-tab:hover { color: var(--vpx-text-primary); }
.vpx-tab.is-active {
  background: var(--vpx-bg-card);
  color: var(--vpx-text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── Steps / Wizard ──────────────────────────────────────────────────────────── */
.vpx-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
}
.vpx-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--vpx-text-muted);
}
.vpx-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--vpx-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.vpx-step.is-done .vpx-step-num {
  background: var(--vpx-success);
  border-color: var(--vpx-success);
  color: #fff;
}
.vpx-step.is-active .vpx-step-num {
  background: var(--vpx-btn-primary-bg);
  border-color: var(--vpx-btn-primary-bg);
  color: #fff;
}
.vpx-step.is-active { color: var(--vpx-text-primary); font-weight: 600; }
.vpx-step-connector {
  flex: 1;
  height: 1px;
  background: var(--vpx-border);
  margin: 0 8px;
  min-width: 20px;
}

/* ── Loader overlay ──────────────────────────────────────────────────────────── */
.vpx-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.6);
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vpx-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--vpx-border);
  border-top-color: var(--vpx-btn-primary-bg);
  border-radius: 50%;
  animation: vpx-spin 0.7s linear infinite;
}
@keyframes vpx-spin { to { transform: rotate(360deg); } }

/* ── Attribution bar (§3.3 umowy SaaS — nieusuwalny) ────────────────────────── */
.vpx-attribution-bar {
  margin-top: 48px;
  padding: 16px 24px;
  font-size: 11px;
  color: var(--vpx-text-muted);
  text-align: center;
  border-top: 1px solid var(--vpx-border);
}
.vpx-attribution-bar a {
  color: var(--vpx-text-secondary);
  text-decoration: underline;
  font-weight: 500;
}
.vpx-attribution-bar a:hover { color: var(--vpx-text-primary); }

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.vpx-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--vpx-text-muted);
}
.vpx-empty-state i {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
}
.vpx-empty-state p { margin: 0; font-size: 14px; }

/* ── Utility ─────────────────────────────────────────────────────────────────── */
.vpx-d-flex { display: flex; }
.vpx-align-center { align-items: center; }
.vpx-gap-8 { gap: 8px; }
.vpx-gap-12 { gap: 12px; }
.vpx-mt-0 { margin-top: 0; }
.vpx-mb-0 { margin-bottom: 0; }
.vpx-mb-16 { margin-bottom: 16px; }
.vpx-mb-24 { margin-bottom: 24px; }
.vpx-w-100 { width: 100%; }
.vpx-text-right { text-align: right; }
.vpx-text-center { text-align: center; }
.vpx-fw-600 { font-weight: 600; }
.vpx-monospace { font-family: 'Courier New', monospace; font-size: 12px; }

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — 3 poziomy: mobile base / tablet 768 / desktop 1024
   ───────────────────────────────────────────────────────────────────────────── */

/* Mobile base (< 768px) */
.vpx-sidebar {
  transform: translateX(-100%);
}
.vpx-sidebar.is-open {
  transform: translateX(0);
}
.vpx-main {
  margin-left: 0;
}
.vpx-topbar-hamburger {
  display: flex;
}
.vpx-stat-grid {
  grid-template-columns: 1fr 1fr;
}
.vpx-form-row {
  grid-template-columns: 1fr;
}
.vpx-form-row--3 {
  grid-template-columns: 1fr;
}
.vpx-modal {
  width: 100%;
  min-height: 100%;
  max-height: 100vh;
  border-radius: 0;
  margin: 0;
  align-self: flex-end;
}
.vpx-modal-overlay {
  align-items: flex-end;
  padding: 0;
}
.vpx-page-header {
  flex-direction: column;
  align-items: flex-start;
}

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
  .vpx-form-row { grid-template-columns: 1fr 1fr; }
  .vpx-form-row--3 { grid-template-columns: 1fr 1fr; }
  .vpx-modal {
    width: 90%;
    min-height: auto;
    max-height: 90vh;
    border-radius: var(--vpx-radius-lg);
    margin: auto;
    align-self: center;
  }
  .vpx-modal-overlay { align-items: center; padding: 20px; }
  .vpx-page-header { flex-direction: row; align-items: flex-start; }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .vpx-sidebar {
    transform: none;
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
  }
  .vpx-main { margin-left: var(--vpx-sidebar-width); }
  .vpx-topbar-hamburger { display: none; }
  .vpx-stat-grid { grid-template-columns: repeat(4, 1fr); }
  .vpx-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 1023px) {
  /* Sidebar overlay na mobile/tablet */
  .vpx-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 899;
  }
  .vpx-sidebar.is-open + .vpx-sidebar-overlay { display: block; }
}
/* ═══════════════════════════════════════════════════════════════════════════════
   E1 — NOWE KLASY CSS
   ═══════════════════════════════════════════════════════════════════════════════ */
 
/* ── Sidebar E1 ─────────────────────────────────────────────────────────────── */
.vpx-sidebar-logo-link {
  text-decoration: none;
  display: flex;
  align-items: center;
}
.vpx-sidebar-logo-img {
  height: 32px;
  width: auto;
}
.vpx-sidebar-section {
  padding: 8px 0;
}
.vpx-sidebar-section-label {
  display: block;
  padding: 24px 24px 6px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  text-transform: none;
  letter-spacing: 0;
}
.vpx-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 24px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--vpx-transition), color var(--vpx-transition);
  border-left: 4px solid transparent;
}
.vpx-sidebar-item:hover {
  background: rgba(255,255,255,0.04);
  color: #FFFFFF;
  text-decoration: none;
}
.vpx-sidebar-item.is-active {
  background: rgba(255,255,255,0.08);
  color: #FFFFFF;
  font-weight: 500;
  border-left-color: #FFFFFF;
}
/* Korekta paddingu dla aktywnej (border-left 4px zajmuje 4px z paddingu) */
.vpx-sidebar-item.is-active { padding-left: 20px; }
.vpx-sidebar-item-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 15px; }
.vpx-sidebar-item-label { flex: 1; }
.vpx-sidebar-spacer { flex: 1; }
/* User avatar & dropdown */
.vpx-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background var(--vpx-transition);
}
.vpx-sidebar-user:hover { background: rgba(255,255,255,0.04); }
.vpx-sidebar-user-info { flex: 1; overflow: hidden; }
.vpx-sidebar-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vpx-sidebar-user-email {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vpx-sidebar-user-chevron {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  transition: transform var(--vpx-transition);
}
.vpx-sidebar-user.is-open .vpx-sidebar-user-chevron { transform: rotate(180deg); }
.vpx-sidebar-user-dropdown {
  background: rgba(255,255,255,0.05);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.vpx-sidebar-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 20px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--vpx-transition), color var(--vpx-transition);
  text-align: left;
}
.vpx-sidebar-user-dropdown-item:hover {
  background: rgba(255,255,255,0.06);
  color: #FFFFFF;
}
 
/* ── Topbar E1 ──────────────────────────────────────────────────────────────── */
.vpx-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}
.vpx-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Breadcrumb — spec §10.2 */
.vpx-breadcrumb-item { font-size: 14px; }
.vpx-breadcrumb-item--link {
  color: var(--vpx-text-link);
  text-decoration: none;
}
.vpx-breadcrumb-item--link:hover { text-decoration: underline; }
.vpx-breadcrumb-item--current {
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.vpx-breadcrumb-sep {
  color: var(--vpx-text-muted);
  padding: 0 4px;
  flex-shrink: 0;
}
 
/* ── Bell dropdown (spec §10.3) ─────────────────────────────────────────────── */
.vpx-bell-wrapper { position: relative; }
.vpx-bell-btn {
  position: relative;
  background: none;
  border: none;
  font-size: 18px;
  color: #374151;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--vpx-radius-sm);
  transition: color var(--vpx-transition), background var(--vpx-transition);
}
.vpx-bell-btn:hover { color: var(--vpx-text-primary); background: var(--vpx-bg-table-header); }
.vpx-bell-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--vpx-error);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.vpx-bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--vpx-bg-card);
  border: 1px solid var(--vpx-border);
  border-radius: var(--vpx-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 500;
}
.vpx-bell-dropdown-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--vpx-border);
}
.vpx-bell-dropdown-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--vpx-text-primary);
}
.vpx-bell-dropdown-body { padding: 16px; }
.vpx-bell-dropdown-empty { text-align: center; padding: 12px 0; }
.vpx-bell-dropdown-empty-icon {
  font-size: 28px;
  color: var(--vpx-text-muted);
  margin-bottom: 10px;
  display: block;
}
.vpx-bell-dropdown-empty-text {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vpx-text-secondary);
}
.vpx-bell-dropdown-empty-sub {
  margin: 0;
  font-size: 12px;
  color: var(--vpx-text-muted);
}
 
/* ── Landing page (spec §5) ─────────────────────────────────────────────────── */
html.vpx-landing-body,
body.vpx-landing-body {
  height: 100%;
  overflow: hidden;
}
.vpx-landing {
  min-height: 100vh;
  background: linear-gradient(135deg, #0D1B3E 0%, #1E3A8A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}
.vpx-landing-inner {
  text-align: center;
  max-width: 480px;
  width: 100%;
}
.vpx-landing-logo-wrap { margin-bottom: 20px; }
.vpx-landing-logo-img  { height: 80px; width: auto; }
.vpx-landing-logo-placeholder {
  font-size: 32px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.5px;
}
.vpx-landing-title {
  font-size: 36px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 8px;
  line-height: 1.15;
}
.vpx-landing-subtitle {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  margin: 0 0 32px;
}
.vpx-landing-cta { display: flex; justify-content: center; }
.vpx-landing-btn {
  width: 240px;
  height: 48px;
  background: #FFFFFF;
  color: #0D1B3E;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: var(--vpx-radius-sm);
  cursor: pointer;
  transition: background var(--vpx-transition), box-shadow var(--vpx-transition), transform 0.1s ease;
}
.vpx-landing-btn:hover {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}
 
/* Landing attribution — biały (spec §5.4) */
.vpx-attribution-bar--landing {
  color: rgba(255,255,255,0.7) !important;
}
.vpx-attribution-bar--landing a {
  color: rgba(255,255,255,0.7) !important;
}
/* Fixed bottom-right (spec §11.1) — nadpisuje E0 inline display */
.vpx-attribution-bar {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 12px 16px;
  font-size: 11px;
  color: var(--vpx-text-muted);
  background: transparent;
  z-index: 99;
  margin-top: 0;
  border-top: none;
  text-align: right;
}
.vpx-attribution-bar a { color: var(--vpx-text-muted); text-decoration: underline; font-weight: 400; }
.vpx-attribution-bar a:hover { color: var(--vpx-text-secondary); }
 
/* Modal logowania nad landingiem */
.vpx-login-modal { max-width: 400px; }
.vpx-login-modal-logo { height: 40px; width: auto; margin-bottom: 4px; display: block; }
 
/* ── Ekran logowania (spec §6.3) ────────────────────────────────────────────── */
html.vpx-login-body,
body.vpx-login-body {
  background: #F1F5F9;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vpx-login-screen {
  width: 100%;
  max-width: 420px;
}
.vpx-login-card {
  background: #FFFFFF;
  padding: 48px 40px 40px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  width: 100%;
}
.vpx-login-card-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.vpx-login-card-logo-img { height: 44px; width: auto; }
.vpx-login-card-title {
  font-size: 22px;
  font-weight: 600;
  color: #111827;
  text-align: center;
  margin: 0 0 6px;
}
.vpx-login-card-subtitle {
  font-size: 14px;
  color: #6B7280;
  text-align: center;
  margin: 0 0 28px;
}
.vpx-login-logo-placeholder {
  font-size: 22px;
  font-weight: 700;
  color: #1E40AF;
}
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.vpx-login-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vpx-login-card {
  width: 100%;
  max-width: 400px;
  padding: 40px;
  background: #FFFFFF;
  border-radius: var(--vpx-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.vpx-login-card-logo {
  text-align: center;
  margin-bottom: 20px;
}
.vpx-login-logo-img { height: 60px; width: auto; }
.vpx-login-logo-placeholder {
  font-size: 22px;
  font-weight: 700;
  color: var(--vpx-btn-primary-bg);
  letter-spacing: -0.3px;
}
.vpx-login-card-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--vpx-text-primary);
  text-align: center;
  margin: 0 0 24px;
}
/* Komunikaty */
.vpx-login-error {
  background: #FEF2F2;
  color: #991B1B;
  border-left: 4px solid var(--vpx-error);
  padding: 10px 14px;
  border-radius: var(--vpx-radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
}
.vpx-login-session-expired-notice {
  background: #FFFBEB;
  color: #92400E;
  border-left: 4px solid var(--vpx-warning);
  padding: 10px 14px;
  border-radius: var(--vpx-radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Pole hasła z togglem */
.vpx-login-pass-wrapper {
  position: relative;
}
.vpx-login-pass-wrapper .vpx-form-input { padding-right: 44px; }
.vpx-login-pass-toggle {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 40px;
  background: none;
  border: none;
  color: var(--vpx-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 0 var(--vpx-radius-sm) var(--vpx-radius-sm) 0;
  transition: color var(--vpx-transition);
}
.vpx-login-pass-toggle:hover { color: var(--vpx-text-primary); }
/* Checkbox zapamiętaj */
.vpx-login-remember { margin-bottom: 16px; }
.vpx-login-remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--vpx-text-secondary);
  cursor: pointer;
}
.vpx-login-remember-label input { cursor: pointer; }
/* Stopka formularza */
.vpx-login-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.vpx-login-forgot-link,
.vpx-login-back-link {
  font-size: 12px;
  color: var(--vpx-text-secondary);
  text-decoration: none;
}
.vpx-login-forgot-link:hover,
.vpx-login-back-link:hover { color: var(--vpx-text-link); text-decoration: underline; }
 
/* ── Reset hasła (spec §7) ──────────────────────────────────────────────────── */
.vpx-reset-subtitle {
  font-size: 13px;
  color: var(--vpx-text-secondary);
  text-align: center;
  margin: -16px 0 20px;
  line-height: 1.5;
}
.vpx-reset-feedback {
  background: #ECFDF5;
  color: #065F46;
  border-left: 4px solid var(--vpx-success);
  padding: 10px 14px;
  border-radius: var(--vpx-radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
}
.vpx-reset-error { margin-bottom: 16px; }
.vpx-reset-error-state {
  text-align: center;
  padding: 20px 0;
  color: var(--vpx-text-secondary);
}
.vpx-reset-error-icon {
  font-size: 40px;
  color: var(--vpx-warning);
  margin-bottom: 12px;
  display: block;
}
.vpx-reset-error-state p { margin: 0 0 8px; font-size: 14px; }
 
/* ── Wskaźnik siły hasła (spec §8.3) ───────────────────────────────────────── */
.vpx-password-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.vpx-password-strength-bars {
  display: flex;
  gap: 4px;
  flex: 1;
}
.vpx-password-strength-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--vpx-border);
  transition: background 0.2s ease;
}
.vpx-password-strength-bar.is-weak   { background: var(--vpx-error); }
.vpx-password-strength-bar.is-medium { background: var(--vpx-warning); }
.vpx-password-strength-bar.is-strong { background: var(--vpx-success); }
.vpx-password-strength-label {
  font-size: 11px;
  font-weight: 600;
  min-width: 50px;
  color: var(--vpx-text-muted);
}
.vpx-strength-weak   { color: var(--vpx-error); }
.vpx-strength-medium { color: var(--vpx-warning); }
.vpx-strength-strong { color: var(--vpx-success); }
 
/* ── Strony błędów (spec §12) ───────────────────────────────────────────────── */
.vpx-error-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 48px 24px;
}
.vpx-error-icon {
  font-size: 96px;
  color: var(--vpx-text-muted);
  margin-bottom: 20px;
  display: block;
}
.vpx-error-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--vpx-text-primary);
  margin: 0 0 12px;
}
.vpx-error-message {
  font-size: 14px;
  color: var(--vpx-text-secondary);
  max-width: 400px;
  line-height: 1.6;
  margin: 0 0 24px;
}
 
/* ── Panel body ─────────────────────────────────────────────────────────────── */
body.vpx-panel-body {
  margin: 0;
  padding: 0;
  background: var(--vpx-bg-main);
}
.vpx-main--full { margin-left: 0 !important; }
 
/* ── Page title + header ────────────────────────────────────────────────────── */
.vpx-page-title  { font-size: 28px; font-weight: 700; color: var(--vpx-text-primary); margin: 0 0 4px; }
.vpx-page-subtitle { font-size: 14px; color: var(--vpx-text-secondary); margin: 0; }
 
/* ── Leaflet map container ──────────────────────────────────────────────────── */
.vpx-map-container {
  height: 300px;
  border-radius: var(--vpx-radius);
  overflow: hidden;
  border: 1px solid var(--vpx-border);
}
 
/* ── E1 Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .vpx-login-card { padding: 28px 20px; }
  .vpx-landing-btn { width: calc(100% - 0px); max-width: 340px; }
  .vpx-landing-title { font-size: 28px; }
}
@media (min-width: 1024px) {
  .vpx-sidebar { position: sticky; top: 0; height: 100vh; align-self: flex-start; transform: none; }
  .vpx-main { margin-left: var(--vpx-sidebar-width); }
  .vpx-topbar-hamburger { display: none; }
}
					 
					 
					 
/* ── Klasy placeholder E0 ──────────────────────────────────────────────────── */
.vpx-sidebar-nav-placeholder {
  padding: 16px 12px;
}
.vpx-sidebar-nav-placeholder__label {
  color: rgba(255,255,255,0.35);
  font-size: 12px;
  text-align: center;
  margin: 0;
}
.vpx-breadcrumb-chevron {
  font-size: 9px;
}
.vpx-placeholder-screen {
  text-align: center;
  padding: 80px 24px;
}
.vpx-placeholder-icon {
  font-size: 48px;
  color: var(--vpx-border);
  margin-bottom: 16px;
  display: block;
}
.vpx-placeholder-title {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--vpx-text-primary);
}
.vpx-placeholder-message {
  margin: 0;
  color: var(--vpx-text-secondary);
  font-size: 14px;
}
.vpx-placeholder-meta {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--vpx-text-muted);
}
.vpx-confirm-message {
  margin: 0;
  font-size: 14px;
  color: var(--vpx-text-secondary);
  line-height: 1.5;
}
/* Hidden modifiers — zastępują style="display:none" w modalach */
.vpx-modal__subtitle--hidden { display: none; }
.vpx-modal__footer--hidden   { display: none; }
/* Avatar z CSS custom property */
.vpx-avatar { background: var(--avatar-bg, var(--vpx-stat-icon-blue)); }

/* ═══════════════════════════════════════════════════════════════════════════
   WOLTANIC THEME OVERRIDES — 1:1 z produkcji klienta
   Skan z https://crmpl.woltanic.app/sales-representative (2026-05-14)
   Overrides wymiarów, paddingów, fontów dla sidebar / topbar / avatar / card.
   Kolory ustawiane przez :root wyżej.
   Decyzja: ten blok na końcu CSS — cascade nadpisuje wcześniejsze reguły.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Font globalny — Geist */
html, body, .vpx-sidebar, .vpx-topbar, .vpx-breadcrumb, .vpx-btn, .vpx-form-input,
.vpx-form-label, .vpx-table, .vpx-card, .vpx-modal {
  font-family: var(--vpx-font-sans) !important;
}

/* ── Sidebar — kontener ─────────────────────────────────────────────────── */
.vpx-sidebar {
  width: var(--vpx-sidebar-width);
  border-right: 1px solid var(--vpx-sidebar-border);
}

/* ── Sidebar — header logo (kontener 64px, padding 8) ───────────────────── */
.vpx-sidebar-logo {
  min-height: 64px;
  height: 64px;
  padding: 8px;
  border-bottom: none;
  justify-content: center;
}
.vpx-sidebar-logo-img {
  height: 32px;
  width: auto;
  max-width: 120px;
}
.vpx-sidebar-logo-placeholder {
  font-size: 16px;
  font-weight: 700;
  color: #fafafa;
}

/* ── Sidebar — sekcja Platform + label ──────────────────────────────────── */
.vpx-sidebar-section {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vpx-sidebar-section-label {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(250,250,250,0.7);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

/* ── Sidebar — pozycje menu ─────────────────────────────────────────────── */
.vpx-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 8px;
  border-radius: var(--vpx-radius);
  color: var(--vpx-sidebar-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  border-left: none;
  transition: background var(--vpx-transition), color var(--vpx-transition);
}
.vpx-sidebar-item:hover {
  background: var(--vpx-sidebar-hover);
  color: var(--vpx-sidebar-text);
}
.vpx-sidebar-item.is-active {
  background: var(--vpx-sidebar-active);
  color: var(--vpx-sidebar-text);
  font-weight: 500;
  padding-left: 8px;
  border-left: none;
}
.vpx-sidebar-item-icon {
  width: 16px;
  height: 16px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vpx-sidebar-item-label {
  font-size: 14px;
  font-weight: inherit;
  line-height: 20px;
}

/* ── Sidebar — footer (user block) ──────────────────────────────────────── */
.vpx-sidebar-footer, .vpx-sidebar-user {
  padding: 8px;
  border-top: none;
}
.vpx-sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  border-radius: var(--vpx-radius);
  transition: background var(--vpx-transition);
}
.vpx-sidebar-user:hover {
  background: var(--vpx-sidebar-hover);
}
.vpx-sidebar-user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--vpx-sidebar-text);
  line-height: 20px;
}
.vpx-sidebar-user-email {
  font-size: 12px;
  color: rgba(250,250,250,0.7);
  line-height: 16px;
}

/* ── Avatar w sidebar user (kwadrat zaokrąglony, jasne tło, czarny tekst) ─ */
.vpx-sidebar-user .vpx-avatar,
.vpx-sidebar-user .vpx-avatar--md {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #f5f5f5 !important;
  color: #0a0a0a;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

/* ── Topbar (64px, padding 16, gap 8) ───────────────────────────────────── */
.vpx-topbar {
  height: 64px;
  padding: 0 16px;
  gap: 8px;
  background: var(--vpx-bg-main);
  border-bottom: 1px solid var(--vpx-border);
}
.vpx-topbar-hamburger,
.vpx-sidebar-trigger {
  width: 28px;
  height: 28px;
  border-radius: var(--vpx-radius);
  margin-left: -4px;
  color: var(--vpx-text-primary);
  font-size: 14px;
}

/* ── Topbar separator pionowy ───────────────────────────────────────────── */
.vpx-topbar-separator {
  width: 1px;
  height: 16px;
  background: var(--vpx-border);
  margin-right: 8px;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.vpx-breadcrumb {
  font-size: 14px;
  color: var(--vpx-text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.vpx-breadcrumb-item--link,
.vpx-breadcrumb-link {
  font-size: 14px;
  color: var(--vpx-text-secondary);
  text-decoration: none;
  transition: color var(--vpx-transition);
}
.vpx-breadcrumb-item--link:hover,
.vpx-breadcrumb-link:hover {
  color: var(--vpx-text-primary);
}
.vpx-breadcrumb-item--current,
.vpx-breadcrumb-current {
  font-size: 14px;
  font-weight: 400;
  color: var(--vpx-text-primary);
}

/* ── Dzwonek powiadomień (32x32) ────────────────────────────────────────── */
.vpx-topbar-bell, .vpx-topbar-notif-trigger, .vpx-bell-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--vpx-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Main h1 (24px bold, letter-spacing -0.6) ───────────────────────────── */
.vpx-page-title, main h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.6px;
  color: var(--vpx-text-primary);
  margin: 0;
}

/* ── Card override (border 1px, radius 14px, shadow subtle) ─────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   OSTRZEŻENIE DLA NASTĘPNEGO MODELU AI (Sebastian 2026-05-17):
   Tu była DRUGA, zduplikowana definicja .vpx-card (padding:24px 0) która
   nadpisywała kanoniczną z góry pliku i KASOWAŁA marginesy boczne w CAŁYM
   CRM — treść przyklejona do krawędzi. USUNIĘTA. Kanoniczna .vpx-card jest
   JEDNA, wyżej w pliku (padding:20px). ZAKAZ definiowania .vpx-card po raz
   drugi. Inny układ karty? Zrób NOWĄ scoped klasę — nie nadpisuj bazowej.
   Łamie SKILL #1 (nie dubluj) i #19 (DRY).
   ───────────────────────────────────────────────────────────────────────── */
.vpx-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vpx-card-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--vpx-text-muted);
}

/* ── Stat box (Home dashboard) ──────────────────────────────────────────── */
.vpx-stat-box {
  border-radius: var(--vpx-radius);
  padding: 12px;
  text-align: center;
}
.vpx-stat-box--blue   { background: var(--vpx-bg-stat-blue);   color: var(--vpx-stat-icon-blue); }
.vpx-stat-box--green  { background: var(--vpx-bg-stat-green);  color: var(--vpx-stat-icon-green); }
.vpx-stat-box--purple { background: var(--vpx-bg-stat-purple); color: var(--vpx-stat-icon-purple); }
.vpx-stat-box-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
.vpx-stat-box-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* ── Quick action button (Home — 3 kafle z kolorami) ────────────────────── */
.vpx-quick-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  height: 80px;
  padding: 16px;
  border-radius: var(--vpx-radius);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity var(--vpx-transition);
}
.vpx-quick-action:hover { opacity: 0.9; }
.vpx-quick-action--gray   { background: var(--vpx-btn-qa-gray); }
.vpx-quick-action--orange { background: var(--vpx-btn-qa-orange); }
.vpx-quick-action--indigo { background: var(--vpx-btn-qa-indigo); }

/* ── Pasek ogłoszenia (czerwony / niebieski) ────────────────────────────── */
.vpx-announcement {
  padding: 12px 24px;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.vpx-announcement--danger { background: var(--vpx-error); }
.vpx-announcement--info   { background: var(--vpx-info); }

/* ── Sidebar trigger button (1:1 z produkcji klienta, widoczny zawsze) ──── */
.vpx-sidebar-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--vpx-text-primary);
  font-size: 14px;
  border-radius: var(--vpx-radius);
  margin-left: -4px;
  cursor: pointer;
  transition: background var(--vpx-transition);
}
.vpx-sidebar-trigger:hover {
  background: var(--vpx-bg-table-header);
}
.vpx-sidebar-trigger .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ── Hamburger ukryty na desktop, sidebar-trigger widoczny zawsze ───────── */
@media (min-width: 1024px) {
  .vpx-topbar-hamburger { display: none !important; }
  .vpx-sidebar-trigger  { display: inline-flex !important; }
}
@media (max-width: 1023px) {
  /* Na mobile hamburger ZOSTAJE (mobile flow), trigger znika */
  .vpx-sidebar-trigger { display: none !important; }
}

/* ── Stan "sidebar schowany" (desktop) ──────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR HEADER WRAPPER — logo + trigger w jednym wierszu (klient ma tak)
   ═══════════════════════════════════════════════════════════════════════════ */
.vpx-sidebar-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  min-height: 64px;
  gap: 8px;
}

.vpx-sidebar-header-wrapper .vpx-sidebar-logo {
  flex: 1;            /* logo zajmuje wolną przestrzeń */
  min-width: 0;       /* zezwala na truncate */
  min-height: 0;      /* nadpisuje wcześniejsze min-height: 64 */
  justify-content: flex-start; /* logo wyrównane do lewej, nie wycentrowane */
  padding: 0;
}

/* Trigger w sidebar header — DOMYŚLNIE pomarańczowy (gdy expanded) */
.vpx-sidebar-header-wrapper .vpx-sidebar-trigger {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vpx-accent);    /* ŻÓŁTO-POMARAŃCZOWY (jak u klienta) */
  color: var(--vpx-sidebar-bg);     /* ciemna ikona na żółtym tle */
  transition: background 0.15s ease;
}
.vpx-sidebar-header-wrapper .vpx-sidebar-trigger:hover {
  background: #fbcb56;              /* lekko jaśniejszy żółty na hover */
}
.vpx-sidebar-header-wrapper .vpx-sidebar-trigger svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Collapsed state — trigger neutralny */
body.vpx-sidebar-collapsed .vpx-sidebar-header-wrapper .vpx-sidebar-trigger {
  background: transparent;
  color: var(--vpx-sidebar-text);
}
body.vpx-sidebar-collapsed .vpx-sidebar-header-wrapper .vpx-sidebar-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLLAPSE-TO-ICONS — sidebar zwija się do 56px, NIE chowa (klient tak ma)
   Tylko desktop ≥1024px. Mobile używa hamburgera (inny mechanizm).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Sidebar zwęża się — zostają widoczne tylko ikony */
  body.vpx-sidebar-collapsed .vpx-sidebar {
    width: 56px;
    transform: none;           /* anuluje poprzednie translateX(-100%) */
  }

  /* Main content rozszerza się o odzyskaną przestrzeń */
  body.vpx-sidebar-collapsed .vpx-main {
    margin-left: 56px;
  }

  /* Ukrywamy wszystkie etykiety tekstowe — zostają same ikony */
  body.vpx-sidebar-collapsed .vpx-sidebar-logo,
  body.vpx-sidebar-collapsed .vpx-sidebar-section-label,
  body.vpx-sidebar-collapsed .vpx-sidebar-item-label,
  body.vpx-sidebar-collapsed .vpx-sidebar-user-info,
  body.vpx-sidebar-collapsed .vpx-sidebar-user-chevron {
    display: none;
  }

  /* Wycentrowanie ikon w zwiniętej szerokości */
  body.vpx-sidebar-collapsed .vpx-sidebar-header-wrapper {
    justify-content: center;
    padding: 8px 4px;
  }
  body.vpx-sidebar-collapsed .vpx-sidebar-item {
    justify-content: center;
    padding: 8px 4px;
  }
  body.vpx-sidebar-collapsed .vpx-sidebar-section {
    padding: 8px 4px;
  }
  body.vpx-sidebar-collapsed .vpx-sidebar-user {
    justify-content: center;
    padding: 8px 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POPRAWKI PIXEL-PERFECT v4 — 2026-05-14 (architektura skorygowana po image 2)
   
   ARCHITEKTURA (1:1 z produkcją klienta crmpl.woltanic.app):
   ─ Trigger w TOPBARZE (nie w sidebar header) — po lewej, gap 8 do "Home"
   ─ Sidebar header pokazuje JEDEN element naraz, WYCENTROWANY:
       expanded  → logo (vpx-sidebar-logo)
       collapsed → favicon (vpx-sidebar-favicon-link)
   ─ Trigger: hover-only pomarańczowy (user explicit)
   ─ Home zaraz po triggerze, dzwonek wypchnięty do prawej
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── SEKCJA A: TOPBAR — Home przy lewej, dzwonek przy prawej ──────────── */
.vpx-topbar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  height: var(--vpx-topbar-height);
}
.vpx-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;             /* gap między trigger i Home (klient: 8) */
  flex: 0 0 auto;       /* NIE rozciągaj — breadcrumb wąski, przy lewej */
}
.vpx-breadcrumb {
  flex: 0 0 auto;       /* NIE rozciągaj — kluczowe: bez tego Home idzie na środek */
  gap: 8px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.vpx-topbar-right {
  margin-left: auto;    /* WYPYCHA dzwonek do prawej krawędzi topbara */
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ─── SEKCJA B: TRIGGER W TOPBARZE — hover-only pomarańczowy ───────────── */
.vpx-sidebar-trigger {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;            /* DOMYŚLNIE PRZEZROCZYSTY */
  color: var(--vpx-text-primary);     /* ciemna ikona na białym topbarze */
  transition: background 0.15s ease, color 0.15s ease;
}
.vpx-sidebar-trigger:hover {
  background: var(--vpx-accent);      /* POMARAŃCZOWY WYŁĄCZNIE NA HOVER */
  color: var(--vpx-sidebar-bg);
}
.vpx-sidebar-trigger svg {
  width: 16px;
  height: 16px;
  display: block;
}


/* ─── SEKCJA C: BELL BUTTON + BREADCRUMB LINK ─────────────────────────────── */
.vpx-bell-btn,
.vpx-topbar-bell {
  font-size: 14px !important;
  padding: 0 !important;
  border-radius: 8px;
  width: 32px;
  height: 32px;
}
.vpx-bell-btn i { font-size: 16px; }
/* Dzwonek hover — pomarańczowy, identycznie jak trigger (decyzja usera #47) */
.vpx-bell-btn:hover,
.vpx-topbar-bell:hover {
  background: var(--vpx-accent);
  color: var(--vpx-sidebar-bg);
}
.vpx-bell-btn:hover i,
.vpx-topbar-bell:hover i {
  color: var(--vpx-sidebar-bg);
}

.vpx-breadcrumb a,
.vpx-breadcrumb-item--link {
  text-decoration: none !important;
  color: var(--vpx-text-muted);
}
.vpx-breadcrumb a:hover,
.vpx-breadcrumb-item--link:hover {
  color: var(--vpx-text-primary);
  text-decoration: none !important;
}


/* ─── SEKCJA D: SIDEBAR HEADER — jeden element widoczny naraz ──────────── */
/* Sidebar header: logo wycentrowane (jak u klienta) */
.vpx-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  min-height: 64px;
}
.vpx-sidebar-logo-img {
  max-height: 32px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Favicon — domyślnie UKRYTY (widać tylko w collapsed) */
.vpx-sidebar-favicon-link {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  padding: 8px;
}
.vpx-sidebar-favicon {
  width: 32px;            /* wyraźny rozmiar, nie wciśnięty */
  height: 32px;
  border-radius: 6px;
  display: block;
  object-fit: contain;
}


/* ─── SEKCJA E: COLLAPSE-TO-ICONS — sidebar 56px ────────────────────────── */
@media (min-width: 1024px) {

  body.vpx-sidebar-collapsed .vpx-sidebar {
    width: 56px;
    transform: none;
  }
  body.vpx-sidebar-collapsed .vpx-main {
    margin-left: 56px;
  }

  /* COLLAPSED: ukryj logo, pokaż favicon */
  body.vpx-sidebar-collapsed .vpx-sidebar-logo,
  body.vpx-sidebar-collapsed .vpx-sidebar-section-label,
  body.vpx-sidebar-collapsed .vpx-sidebar-item-label,
  body.vpx-sidebar-collapsed .vpx-sidebar-user-info,
  body.vpx-sidebar-collapsed .vpx-sidebar-user-chevron {
    display: none;
  }
  body.vpx-sidebar-collapsed .vpx-sidebar-favicon-link {
    display: flex;
  }

  /* COLLAPSED: stała wysokość pozycji menu */
  body.vpx-sidebar-collapsed .vpx-sidebar-section {
    padding: 8px;
  }
  body.vpx-sidebar-collapsed .vpx-sidebar-item {
    justify-content: center;
    padding: 8px;
    height: 32px;
  }
  body.vpx-sidebar-collapsed .vpx-sidebar-user {
    justify-content: center;
    padding: 8px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SEKCJA F: FIX MARGIN-LEFT NA .vpx-main (kluczowy — DevTools pokazuje
   pomarańczowy pas między sidebar a topbar = margin-left main)
   
   PRZYCZYNA: w pliku #001 są 3 stare reguły:
     .vpx-main { margin-left: var(--vpx-sidebar-width); }
   pochodzące z czasów gdy sidebar był `position: fixed` (nie zajmował miejsca
   w layout). Po przejściu na .vpx-app { display: flex } sidebar JEST flex
   itemem i już sam zajmuje 256px. Margin-left = podwójne wcięcie = pas 220-256px
   między sidebar a topbar.
   
   FIX: zerujemy margin-left we wszystkich stanach (expanded + collapsed).
   Sidebar zajmuje miejsce flexem (256 / 56px), main z flex:1 wypełnia resztę.
   ═══════════════════════════════════════════════════════════════════════════ */
.vpx-main {
  margin-left: 0 !important;
}
body.vpx-sidebar-collapsed .vpx-main {
  margin-left: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEKCJA H: STRONY USTAWIEŃ i PROFILU (E1) — wymiary 1:1 z klientem
   crmpl.woltanic.app/settings + /settings/profile (decyzja #48)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page title — h1 nad listą kart */
.vpx-page-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.6px;
  color: var(--vpx-text-primary);
  margin: 0 0 16px 0;
}

/* Lista kart — pionowy stos z odstępem 24 */
.vpx-settings-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Pojedyncza karta */
.vpx-settings-card {
  background: #ffffff;
  border: 1px solid var(--vpx-border);
  border-radius: 14px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
}

/* Header karty (tytuł + opis) */
.vpx-settings-card-header {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vpx-settings-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  color: var(--vpx-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.vpx-settings-card-title i {
  font-size: 16px;
  color: var(--vpx-text-primary);
}
.vpx-settings-card-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--vpx-text-muted);
  margin: 0;
}

/* Body karty */
.vpx-settings-card-body {
  padding: 0 24px;
}

/* Wiersz w body — info po lewej, akcja po prawej */
.vpx-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.vpx-settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vpx-settings-row-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--vpx-text-primary);
}
.vpx-settings-row-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--vpx-text-muted);
}

/* Button secondary z ikoną (Przejdź do profilu, Zmień hasło itd.) */
.vpx-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: var(--vpx-text-primary);
  border: 1px solid var(--vpx-border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.vpx-settings-btn:hover {
  background: var(--vpx-accent);
  color: var(--vpx-sidebar-bg);
}
.vpx-settings-btn i { font-size: 14px; }
.vpx-settings-btn[disabled],
.vpx-settings-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── STRONA PROFILU — sekcja avatar + dane + grid ──────────────────────── */
.vpx-profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.vpx-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--vpx-bg-avatar, #f5f5f5);
  color: var(--vpx-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 500;
  flex-shrink: 0;
}
.vpx-profile-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--vpx-text-primary);
  margin: 0;
}
.vpx-profile-email {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--vpx-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0 0;
}
.vpx-profile-email i { font-size: 14px; }

/* Separator wewnątrz karty profilu */
.vpx-profile-divider {
  height: 1px;
  background: var(--vpx-border);
  margin: 24px 0;
  width: 100%;
}

/* Grid 4 kolumny: Status / Data utworzenia / Ostatnia aktualizacja / Role */
.vpx-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .vpx-profile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .vpx-profile-grid { grid-template-columns: 1fr; }
}
.vpx-profile-cell-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--vpx-text-primary);
  margin: 0 0 4px 0;
}
.vpx-profile-cell-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--vpx-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.vpx-profile-cell-value i { font-size: 14px; color: var(--vpx-text-muted); }

/* Badge — Aktywne / Sales Representative itd. */
.vpx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--vpx-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  padding: 4px 10px;
  border-radius: 999px;
}
.vpx-badge--outline {
  background: transparent;
  color: var(--vpx-text-primary);
  border: 1px solid var(--vpx-border);
}
.vpx-badge i { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEKCJA I: USER POPOVER (decyzja #50) — wyskakuje z prawej od user buttona.
   Zastępuje akordeon (poprzednio rozwijał się w dół, miał tylko "Wyloguj").
   ═══════════════════════════════════════════════════════════════════════════ */

/* User trigger jest teraz <button> — reset stylowania natywnego */
button.vpx-sidebar-user {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
button.vpx-sidebar-user:focus-visible {
  outline: 2px solid var(--vpx-accent);
  outline-offset: 2px;
}

/* Popover — biały bloczek 240px, pozycja fixed obok sidebar */
.vpx-sidebar-user-popover {
  position: fixed;
  left: calc(var(--vpx-sidebar-width) + 8px);  /* 256 + 8 = 264 (dla expanded) */
  bottom: 16px;
  width: 240px;
  background: #ffffff;
  border: 1px solid var(--vpx-border);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  padding: 4px;
  z-index: 1000;
  display: none;
}
.vpx-sidebar-user-popover[aria-hidden="false"] {
  display: block;
}

/* W collapsed sidebar (56px) — przesuń popover bliżej */
body.vpx-sidebar-collapsed .vpx-sidebar-user-popover {
  left: 64px;  /* 56 + 8 */
}

/* Header popovera — avatar + nazwa/email/rola */
.vpx-user-popover-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.vpx-user-popover-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vpx-user-popover-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--vpx-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vpx-user-popover-email {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--vpx-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vpx-user-popover-role {
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: var(--vpx-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* Separator wewnątrz popovera */
.vpx-user-popover-separator {
  height: 1px;
  background: var(--vpx-border);
  margin: 4px 0;
}

/* Item popovera — Ustawienia / Wyloguj */
.vpx-user-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--vpx-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.vpx-user-popover-item i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  color: var(--vpx-text-muted);
}
.vpx-user-popover-item:hover {
  background: var(--vpx-accent);
  color: var(--vpx-sidebar-bg);
}
.vpx-user-popover-item:hover i {
  color: var(--vpx-sidebar-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEKCJA J: USUNIĘCIE PODKREŚLENIA NA HOVER — domyślnie <a>:hover ma
   text-decoration: underline w przeglądarce. Override dla wszystkich linków
   wewnątrz nowych komponentów (decyzja #52).
   ═══════════════════════════════════════════════════════════════════════════ */
.vpx-settings-btn,
.vpx-settings-btn:hover,
.vpx-settings-btn:focus,
.vpx-settings-btn:active,
.vpx-user-popover-item,
.vpx-user-popover-item:hover,
.vpx-user-popover-item:focus,
.vpx-user-popover-item:active,
.vpx-settings-row a,
.vpx-settings-row a:hover,
.vpx-settings-card a,
.vpx-settings-card a:hover,
.vpx-tab,
.vpx-tab:hover,
.vpx-tab:focus,
.vpx-tab:active {
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEKCJA K: MODAL — zmiana hasła zalogowanego usera (decyzja #54)
   Globalny mechanizm modali (vpx-modal-overlay + vpx-modal-dialog),
   data-modal-open / data-modal-close do otwierania/zamykania przez JS (#002).
   ═══════════════════════════════════════════════════════════════════════════ */

.vpx-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vpx-modal-overlay[aria-hidden="false"] {
  display: flex;
}
.vpx-modal-dialog {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 64px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.vpx-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0;
}
.vpx-modal-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--vpx-text-primary);
  margin: 0;
}
.vpx-modal-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vpx-text-muted);
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
.vpx-modal-close:hover {
  background: var(--vpx-accent);
  color: var(--vpx-sidebar-bg);
}
.vpx-modal-body {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vpx-modal-description {
  font-size: 14px;
  line-height: 20px;
  color: var(--vpx-text-muted);
  margin: 0;
}
.vpx-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vpx-form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--vpx-text-primary);
}
.vpx-form-group input {
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px;
  border: 1px solid var(--vpx-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--vpx-text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
.vpx-form-group input:focus {
  border-color: var(--vpx-primary);
  box-shadow: 0 0 0 3px rgba(28, 61, 119, 0.15);
}
.vpx-form-hint {
  font-size: 12px;
  color: var(--vpx-text-muted);
}
.vpx-modal-error {
  background: rgba(235, 0, 5, 0.08);
  color: var(--vpx-error);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
}
.vpx-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 24px 24px;
}

/* Button primary (granatowy z białym tekstem — main CTA w modalu) */
.vpx-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vpx-primary);
  color: #ffffff;
  border: 1px solid var(--vpx-primary);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  text-decoration: none !important;
}
.vpx-btn-primary:hover {
  background: #14305c;
  color: #ffffff;
}
.vpx-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.vpx-btn-primary i {
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEKCJA K2: MODAL — wymuszenie pełnej widoczności (decyzja #56)
   
   Diagnostyka (konsola na /panel/ustawienia/) wykazała że po `openModal()`:
     display: flex      ✓  (sekcja K już to ustawia)
     visibility: hidden ❌ (gdzieś wcześniej w CSS, prawdopodobnie reguła
                            dla [hidden] lub fade transition)
     opacity: 0         ❌ (j.w.)
   
   Override wymusza wszystkie 3 property naraz dla stanu otwartego.
   ═══════════════════════════════════════════════════════════════════════════ */
.vpx-modal-overlay[aria-hidden="false"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.vpx-modal-overlay[aria-hidden="true"],
.vpx-modal-overlay[hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DRAG & DROP — sortowanie wierszy w słownikach (E3, Sortable.js)
   ═══════════════════════════════════════════════════════════════════════════ */
.vpx-drag-handle {
  cursor: grab;
  color: var(--vpx-text-muted);
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.vpx-drag-handle:hover  { color: var(--vpx-text-primary); }
.vpx-drag-handle:active { cursor: grabbing; }
.vpx-sortable-ghost     { opacity: 0.4; background: var(--vpx-bg-main); }
.vpx-sortable-chosen    { box-shadow: var(--vpx-shadow-modal); }

/* ═══════════════════════════════════════════════════════════════════════════
   SŁOWNIKI (E3 — kropka koloru w tabeli + box informacyjny zaślepki)
   ═══════════════════════════════════════════════════════════════════════════ */
.vpx-color-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--vpx-border);
  vertical-align: middle;
}
.vpx-dict-info-box {
  margin-top: 16px;
  padding: 16px;
  background: var(--vpx-bg-table-header);
  border-left: 3px solid var(--vpx-accent);
  border-radius: var(--vpx-radius-sm);
}
.vpx-dict-info-box h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vpx-text-primary);
}
.vpx-dict-info-box p {
  margin: 0;
  font-size: 13px;
  color: var(--vpx-text-secondary);
  line-height: 1.5;
}
.vpx-dict-subtitle {
  margin: 0 0 24px;
  color: var(--vpx-text-secondary);
  font-size: 13px;
}

/* ── Szerokości kolumn tabel słowników (zamiast inline style="width:") ─────── */
.vpx-table__col-color  { width: 60px; }
.vpx-table__col-sort   { width: 70px; }
.vpx-table__col-status { width: 110px; }
.vpx-table__col-icon   { width: 50px; }

/* ── Ikona kłódki w wierszu / nagłówku karty (is_protected) ───────────────── */
.vpx-icon-lock      { color: var(--vpx-text-muted); }
.vpx-icon-lock--sm  { font-size: 12px; }

/* ── Odstęp tytuł karty → opis (pionowy gap w headerze) ───────────────────── */
.vpx-card-title { margin: 0 0 4px; }

/* ── Wyrównanie nagłówka karty z pierwszą kolumną tabeli ──────────────────────
   Treść komórki tabeli: padding .vpx-card (20px) + border .vpx-table-wrapper
   (1px) + padding td (14px) = 35px od krawędzi karty. Nagłówek bez wcięcia =
   20px → 15px niespójności. Wcięcie 15px wyrównuje nagłówek z kolumną tabeli.
   Globalne — działa na każdej karcie z tabelą w całym CRM. */
.vpx-card-header {
  padding-left: 15px;
  padding-right: 15px;
}

/* ── SŁOWNIKI 2.2.B/C — akcje w wierszu, modal formularza, drag-handle ─────── */
.vpx-dict-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
/* ─────────────────────────────────────────────────────────────────────────
   HARDENING NAGŁÓWKA KARTY (Sebastian 2026-05-17)
   Motyw WordPress resetuje semantyczny <header> przez
   header{display:block!important} — to bije .vpx-card-header{display:flex}
   (!important > zwykła reguła mimo wyższej specyficzności klasy) i przycisk
   "+ Dodaj" spada pod opis NA tabelę. To NIE jest duplikat .vpx-card-header
   — to celowa tarcza przeciw zewnętrznemu !important z motywu.
   Potwierdzone renderem. MAPA DLA NASTĘPNEGO MODELU AI: NIE usuwać,
   to nie jest naruszenie SKILL #1/#19 (DRY).
   ───────────────────────────────────────────────────────────────────────── */
.vpx-card > .vpx-card-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: auto !important;
  position: static !important;
}
.vpx-card > .vpx-card-header > div:first-child { min-width: 0; flex: 1 1 auto; }
.vpx-card-header .vpx-dict-card-actions { flex: 0 0 auto; }

.vpx-dict-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vpx-dict-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.vpx-dict-form-grid .vpx-form-group--full {
  grid-column: 1 / -1;
}
.vpx-dict-flags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
/* ─────────────────────────────────────────────────────────────────────────
   OSTRZEŻENIE DLA NASTĘPNEGO MODELU AI (Sebastian 2026-05-17):
   Ten układ checkbox+opis był rozjechany w KAŻDYM modalu (typy pozycji,
   role usera, pozycje systemowe). Przyczyna: checkbox bez kontroli szerokości
   był rozpychany przez globalne resety inputów → opis uciekał na prawą
   krawędź. Poniższe reguły to NAPRAWA — checkbox ma stały rozmiar i nie
   rozpycha wiersza, opis stoi tuż obok. NIE upraszczać, NIE usuwać reguły
   na input[type=checkbox]. Inaczej bubel wraca.
   ───────────────────────────────────────────────────────────────────────── */
.vpx-dict-flag-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--vpx-text-secondary);
  width: 100%;
  cursor: pointer;
}
.vpx-dict-flag-row input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  -webkit-appearance: auto;
  appearance: auto;
}
.vpx-dict-flags { margin-top: 6px; }
.vpx-dict-color-input {
  width: 56px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--vpx-border-input);
  border-radius: var(--vpx-radius-sm);
  cursor: pointer;
  background: var(--vpx-bg-input);
}
.vpx-dict-row-dragging { background: var(--vpx-bg-table-header); }
.vpx-dict-usage-warn {
  margin: 0;
  font-size: 13px;
  color: var(--vpx-text-secondary);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .vpx-dict-form-grid { grid-template-columns: 1fr; }
}

/* ── UŻYTKOWNICY 2.3 — lista ostrzeżeń ról + ujawnione hasło ───────────────── */
.vpx-role-health-list {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--vpx-text-secondary);
  line-height: 1.7;
}
.vpx-pw-reveal {
  text-align: center;
  margin: 12px 0;
}
.vpx-pw-reveal code {
  font-size: 16px;
  padding: 8px 14px;
  background: var(--vpx-bg-table-header);
  border: 1px solid var(--vpx-border);
  border-radius: var(--vpx-radius-sm);
  letter-spacing: 1px;
}

/* ── KALKULATORY 2.5 — back-link + zakładki szczegółu ─────────────────────── */
.vpx-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--vpx-text-secondary);
  margin-bottom: 16px;
  text-decoration: none !important;
}
.vpx-back-link:hover { color: var(--vpx-text-primary); }
.vpx-tab-pane { display: none; }
.vpx-tab-pane.is-active { display: block; }

/* ── Kalkulator #014: symulator (decyzja Sebastian 2026-05-19) ──────────────
   Jedno źródło CSS — przy podpinaniu kalkulatorów do leada (E8) wygląd
   zaciąga się stąd. Klasy scoped vpx-c2-* — NIE dotykają klas bazowych.
   Breakpoint 1024px spójny z resztą (#001 @media 1024/768). */
.vpx-c2-simgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.vpx-c2-simright {
  position: sticky;
  top: calc(var(--vpx-topbar-height) + 16px);
}
.vpx-c2-summary {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--vpx-border);
  border-radius: var(--vpx-radius);
  background: #ffffff;
  padding: 16px;
}
@media (max-width: 1024px) {
  .vpx-c2-simgrid { grid-template-columns: 1fr; }
  .vpx-c2-simright { position: static; }
}
 
/* ── Kalkulator #014: symulator (decyzja Sebastian 2026-05-19) ──────────────
   Jedno źródło CSS — przy podpinaniu kalkulatorów do leada (E8) wygląd
   zaciąga się stąd. Klasy scoped vpx-c2-* — NIE dotykają klas bazowych.
   Breakpoint 1024px spójny z resztą (#001 @media 1024/768). */
.vpx-c2-simgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.vpx-c2-simright {
  position: sticky;
  top: calc(var(--vpx-topbar-height) + 16px);
}
.vpx-c2-summary {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--vpx-border);
  border-radius: var(--vpx-radius);
  background: #ffffff;
  padding: 16px;
}
@media (max-width: 1024px) {
  .vpx-c2-simgrid { grid-template-columns: 1fr; }
  .vpx-c2-simright { position: static; }
}
 
/* ── Kalkulator #014: symulator (decyzja Sebastian 2026-05-19) ──────────────
   Jedno źródło CSS — przy podpinaniu kalkulatorów do leada (E8) wygląd
   zaciąga się stąd. Klasy scoped vpx-c2-* — NIE dotykają klas bazowych.
   Breakpoint 1024px spójny z resztą (#001 @media 1024/768). */
.vpx-c2-simgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.vpx-c2-simright {
  position: sticky;
  top: calc(var(--vpx-topbar-height) + 16px);
}
.vpx-c2-summary {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--vpx-border);
  border-radius: var(--vpx-radius);
  background: #ffffff;
  padding: 16px;
}
@media (max-width: 1024px) {
  .vpx-c2-simgrid { grid-template-columns: 1fr; }
  .vpx-c2-simright { position: static; }
}
 

/* ── vpx-accordion (Pakiet P4, Sebastian 2026-05-27) ───────────────────────
   Globalny akordeon. Używany w generatorze (vpx-sim-my-commission, drabina)
   oraz na karcie kalkulacji (Twoja prowizja, Rozliczenie prowizji admin).
   max-height/opacity — NIE display:none, element zawsze w DOM.
   ───────────────────────────────────────────────────────────────────────── */
.vpx-accordion {}
.vpx-accordion-head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 10px 14px; border-radius: 8px;
  user-select: none;
}
.vpx-accordion-head:hover { background: rgba(0,0,0,.04); }
.vpx-accordion-body {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease;
}
.vpx-accordion[data-open="1"] .vpx-accordion-body {
  max-height: 9999px; opacity: 1;
}
.vpx-accordion-chevron { transition: transform .3s ease; }
.vpx-accordion[data-open="1"] .vpx-accordion-chevron { transform: rotate(180deg); }

/* ── vpx-lead-card-addr-edit (Sebastian 2026-05-27) ─────────────────────── */
.vpx-lead-card-addr-edit {
  cursor: pointer;
  color: var(--vpx-text-muted, #737373);
  opacity: 0.5;
  margin-left: 8px;
  transition: opacity .2s ease, color .2s ease;
  vertical-align: middle;
}
.vpx-lead-card-addr-edit:hover {
  opacity: 1;
  color: var(--vpx-primary, #1c3d77);
}

/* ── Timeline: task_cancelled (red) + task_edit (amber) ─────────────────── */
.vpx-lead-card-timeline-item[data-action="task_cancelled"] .vpx-lead-card-timeline-icon { background: #dc2626; }
.vpx-lead-card-timeline-item[data-action="task_edit"]      .vpx-lead-card-timeline-icon { background: #f59e0b; }
.vpx-lead-card-timeline-item[data-action="change_lead_address"] .vpx-lead-card-timeline-icon { background: #0ea5e9; }
/* EOF — WOLTANIC THEME OVERRIDES */

/* ═══════════════════════════════════════════════════════════════════════════
   ── KONFIGURATOR OFERTY (#016 v3) — widoki + iframe + galeria + picker
   ── Namespace: .vpx-oe-*
   ── 2026-05-28 | Sebastian
   ═══════════════════════════════════════════════════════════════════════════ */

.vpx-oe-wrap { width: 100%; }
.vpx-oe-wrap .is-hidden { display: none !important; }

/* ── Przełącznik widoku ───────────────────────────────────────────────────── */
.vpx-oe-viewtabs {
  display: inline-flex;
  gap: 4px;
  background: var(--vpx-bg-table-header, #f5f5f5);
  border: 1px solid var(--vpx-border, #e5e5e5);
  border-radius: var(--vpx-radius-sm, 6px);
  padding: 4px;
  margin-bottom: 20px;
}
.vpx-oe-viewtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--vpx-text-secondary, #737373);
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 38px;
}
.vpx-oe-viewtab:hover { color: var(--vpx-text-primary, #0a0a0a); }
.vpx-oe-viewtab.is-active {
  background: #fff;
  color: var(--vpx-text-primary, #0a0a0a);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.vpx-oe-hint {
  font-size: 13px;
  color: var(--vpx-text-secondary, #737373);
  background: rgba(28,61,119,.05);
  border-left: 3px solid var(--vpx-primary, #1c3d77);
  border-radius: var(--vpx-radius-sm, 6px);
  padding: 10px 14px;
  margin: 0 0 16px;
  line-height: 1.5;
}
.vpx-oe-hint i { color: var(--vpx-primary, #1c3d77); margin-right: 4px; }

.vpx-oe-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--vpx-primary, #1c3d77);
  background: rgba(28,61,119,.08);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}
.vpx-oe-scope-badge i { font-size: 9px; }

/* ── KREATOR: strony w iframe ─────────────────────────────────────────────── */
.vpx-oe-kreator { width: 100%; max-width: 880px; }
.vpx-offer-page-num-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--vpx-text-muted, #737373);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.vpx-offer-page-outer {
  width: 100%;
  position: relative;
  margin-bottom: 16px;
  background: #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,.15);
  border-radius: 4px;
  overflow: hidden;
}
.vpx-oe-frame {
  border: 0;
  display: block;
  background: #fff;
}
.vpx-oe-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  color: #c4c4c4;
  font-size: 15px;
  gap: 14px;
  text-align: center;
  padding: 40px;
}
.vpx-oe-empty i { font-size: 44px; }

/* ── WIDOK HTML ───────────────────────────────────────────────────────────── */
.vpx-oe-html-pages { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.vpx-oe-html-pagebtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--vpx-border, #e5e5e5);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--vpx-text-secondary, #737373);
  border-radius: var(--vpx-radius-sm, 6px);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  min-height: 38px;
}
.vpx-oe-html-pagebtn:hover { border-color: var(--vpx-primary, #1c3d77); color: var(--vpx-text-primary, #0a0a0a); }
.vpx-oe-html-pagebtn.is-active { background: var(--vpx-primary, #1c3d77); border-color: var(--vpx-primary, #1c3d77); color: #fff; }
.vpx-oe-html-pagebtn i { font-size: 10px; opacity: .8; }
.vpx-oe-html-ta-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--vpx-text-secondary, #737373);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.vpx-oe-html-textarea {
  width: 100%;
  min-height: 420px;
  padding: 14px 16px;
  border: 1px solid var(--vpx-border, #e5e5e5);
  border-radius: var(--vpx-radius, 10px);
  font-family: var(--vpx-font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.6;
  color: var(--vpx-text-primary, #0a0a0a);
  background: #fafafa;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 16px;
  tab-size: 2;
}
.vpx-oe-html-textarea:focus { border-color: var(--vpx-primary, #1c3d77); outline: none; background: #fff; }

.vpx-oe-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: var(--vpx-primary, #1c3d77);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--vpx-radius-sm, 6px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  text-decoration: none !important;
  min-height: 40px;
}
.vpx-oe-save-btn:hover { box-shadow: 0 4px 12px rgba(28,61,119,.3); transform: translateY(-1px); color: #fff; text-decoration: none !important; }
.vpx-oe-save-btn:active { transform: translateY(0); }

/* ── Lista tokenów (details) ──────────────────────────────────────────────── */
.vpx-oe-tokens {
  margin-top: 18px;
  border: 1px solid var(--vpx-border, #e5e5e5);
  border-radius: var(--vpx-radius-sm, 6px);
  background: var(--vpx-bg-table-header, #f5f5f5);
}
.vpx-oe-tokens summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vpx-text-primary, #0a0a0a);
  user-select: none;
}
.vpx-oe-tokens summary i { color: var(--vpx-primary, #1c3d77); margin-right: 6px; }
.vpx-oe-tokens-body { padding: 0 16px 16px; font-size: 13px; color: var(--vpx-text-secondary, #737373); line-height: 1.6; }
.vpx-oe-tokens-body ul { margin: 8px 0; padding-left: 18px; }
.vpx-oe-tokens-body code {
  font-family: var(--vpx-font-mono, monospace);
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--vpx-border, #e5e5e5);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--vpx-primary, #1c3d77);
}
.vpx-oe-tokens-hint { margin-top: 10px; font-style: italic; }

/* ── MODAL ZDJĘCIA (upload / galeria) ─────────────────────────────────────── */
.vpx-oe-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  visibility: hidden;
  opacity: 0;
}
.vpx-oe-modal-overlay[aria-hidden="false"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.vpx-oe-modal {
  background: #fff;
  border-radius: var(--vpx-radius-lg, 14px);
  box-shadow: 0 20px 64px rgba(0,0,0,.3);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vpx-oe-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--vpx-border, #e5e5e5);
}
.vpx-oe-modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--vpx-text-primary, #0a0a0a); }
.vpx-oe-modal-x {
  width: 30px; height: 30px;
  border: none; background: transparent;
  border-radius: 8px; cursor: pointer;
  color: var(--vpx-text-muted, #737373); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.vpx-oe-modal-x:hover { background: var(--vpx-accent, #f8be3b); color: #0a0a0a; }
.vpx-oe-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 22px 0;
}
.vpx-oe-modal-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--vpx-text-secondary, #737373);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.vpx-oe-modal-tab:hover { color: var(--vpx-text-primary, #0a0a0a); }
.vpx-oe-modal-tab.is-active { color: var(--vpx-primary, #1c3d77); border-bottom-color: var(--vpx-primary, #1c3d77); }
.vpx-oe-modal-body { padding: 18px 22px 22px; overflow-y: auto; }
.vpx-oe-imgtab-pane.is-hidden { display: none; }

.vpx-oe-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.vpx-oe-gallery-item {
  border: 1px solid var(--vpx-border, #e5e5e5);
  border-radius: 8px;
  background: var(--vpx-bg-table-header, #f5f5f5);
  cursor: pointer;
  padding: 6px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.vpx-oe-gallery-item:hover { border-color: var(--vpx-accent, #f8be3b); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.vpx-oe-gallery-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vpx-oe-gallery-loading,
.vpx-oe-gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--vpx-text-muted, #737373);
  font-size: 13px;
  padding: 30px 10px;
}
.vpx-oe-upload-zone {
  width: 100%;
  border: 2px dashed var(--vpx-border, #e5e5e5);
  border-radius: var(--vpx-radius, 10px);
  background: var(--vpx-bg-table-header, #f5f5f5);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--vpx-text-secondary, #737373);
  transition: border-color .15s, background .15s;
}
.vpx-oe-upload-zone:hover { border-color: var(--vpx-primary, #1c3d77); background: rgba(28,61,119,.04); }
.vpx-oe-upload-zone i { font-size: 36px; color: var(--vpx-primary, #1c3d77); }
.vpx-oe-upload-zone span { font-size: 14px; font-weight: 600; color: var(--vpx-text-primary, #0a0a0a); }
.vpx-oe-upload-zone small { font-size: 12px; }

/* ── PICKER IKON ──────────────────────────────────────────────────────────── */
.vpx-oe-iconpicker {
  position: absolute;
  z-index: 9750;
  width: 320px;
  background: #fff;
  border: 1px solid var(--vpx-border, #e5e5e5);
  border-radius: var(--vpx-radius, 10px);
  box-shadow: 0 10px 32px rgba(0,0,0,.2);
  padding: 14px;
  display: none;
  visibility: hidden;
  opacity: 0;
}
.vpx-oe-iconpicker[aria-hidden="false"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.vpx-oe-iconpicker label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--vpx-text-muted, #737373);
  margin-bottom: 6px;
}
.vpx-oe-iconpicker-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--vpx-border, #e5e5e5);
  border-radius: var(--vpx-radius-sm, 6px);
  font-size: 13px;
  font-family: var(--vpx-font-mono, monospace);
  color: var(--vpx-text-primary, #0a0a0a);
  background: #fff;
  box-sizing: border-box;
  min-height: 40px;
}
.vpx-oe-iconpicker-input:focus { border-color: var(--vpx-primary, #1c3d77); outline: none; }
.vpx-oe-iconpicker-suggest {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin: 10px 0;
}
.vpx-oe-iconpicker-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--vpx-border, #e5e5e5);
  border-radius: 6px;
  background: var(--vpx-bg-table-header, #f5f5f5);
  color: var(--vpx-primary, #1c3d77);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.vpx-oe-iconpicker-chip:hover { background: var(--vpx-accent, #f8be3b); border-color: var(--vpx-accent, #f8be3b); color: #0a0a0a; }
.vpx-oe-iconpicker-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.vpx-oe-iconpicker-cancel,
.vpx-oe-iconpicker-apply {
  padding: 7px 16px;
  border-radius: var(--vpx-radius-sm, 6px);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, box-shadow .15s;
  min-height: 36px;
}
.vpx-oe-iconpicker-cancel { background: #fff; color: var(--vpx-text-primary, #0a0a0a); border-color: var(--vpx-border, #e5e5e5); }
.vpx-oe-iconpicker-cancel:hover { background: var(--vpx-bg-table-header, #f5f5f5); }
.vpx-oe-iconpicker-apply { background: var(--vpx-primary, #1c3d77); color: #fff; }
.vpx-oe-iconpicker-apply:hover { box-shadow: 0 4px 12px rgba(28,61,119,.3); color: #fff; }

/* ── Linki w edytorze: zero underline ─────────────────────────────────────── */
.vpx-oe-wrap a,
.vpx-oe-wrap a:hover,
.vpx-oe-wrap a:focus,
.vpx-oe-wrap a:active { text-decoration: none !important; }

/* ── Mobile / tablet ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vpx-oe-iconpicker { width: calc(100vw - 32px); max-width: 320px; }
}
@media (max-width: 600px) {
  .vpx-oe-iconpicker-suggest { grid-template-columns: repeat(6, 1fr); }
  .vpx-oe-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .vpx-oe-viewtab { padding: 8px 14px; }
}

/* ═══════════════ KONFIGURATOR UMÓW (#017) — strony dynamiczne ═══════════════ */
/* Reszta wyglądu = re-use klas .vpx-oe-* (ten sam edytor). Tu tylko pasek strony. */
.vpx-ce-noPages {
  border: 2px dashed var(--vpx-border, #e5e5e5);
  border-radius: var(--vpx-radius, 10px);
  padding: 32px 24px;
  text-align: center;
  color: var(--vpx-text-secondary, #737373);
  background: var(--vpx-bg-table-header, #f5f5f5);
}
.vpx-ce-noPages i { font-size: 32px; color: var(--vpx-primary, #1c3d77); display: block; margin-bottom: 10px; }
.vpx-ce-noPages p { font-size: 14px; margin: 0; }

.vpx-ce-pagebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.vpx-ce-pagebar-title { font-size: 14px; font-weight: 700; color: var(--vpx-primary, #1c3d77); }
.vpx-ce-pagebar-actions { display: flex; gap: 6px; }
.vpx-ce-pmove,
.vpx-ce-pdelete {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vpx-radius-sm, 6px);
  border: 1px solid var(--vpx-border, #e5e5e5);
  background: #fff;
  color: var(--vpx-text-primary, #0a0a0a);
  cursor: pointer;
  font-size: 13px;
  transition: background .15s, border-color .15s, color .15s;
}
/* hover na białym tle → akcent z ciemną treścią (zasada systemu) */
.vpx-ce-pmove:hover { background: var(--vpx-accent, #f8be3b); border-color: var(--vpx-accent, #f8be3b); color: #0a0a0a; }
.vpx-ce-pdelete:hover { background: #fde2e2; border-color: #f5b5b5; color: #b42318; }

.vpx-ce-addbar { margin-top: 20px; }
.vpx-ce-addpage { display: inline-flex; align-items: center; gap: 8px; }

/* linki w edytorze umów — zero underline (jak oferta) */
.vpx-oe-wrap#vpx-ce-wrap a,
.vpx-oe-wrap#vpx-ce-wrap a:hover,
.vpx-oe-wrap#vpx-ce-wrap a:focus,
.vpx-oe-wrap#vpx-ce-wrap a:active { text-decoration: none !important; }
	
	/* ═══════════════════════════════════════════════════════════════════════════
   #018 KONFIGURATOR WYMAGAŃ AUDYTU — style (scoped .vpx-aud-*)
   Dodać na końcu sekcji komponentów w #001. Zmienne --vpx-*. 2026-06-02.
   ═══════════════════════════════════════════════════════════════════════════ */
 
/* Podstrony POLA / ZDJĘCIA */
.vpx-aud-subtabs{
  display:flex;gap:8px;margin-bottom:20px;
  border-bottom:1px solid var(--vpx-border);
}
.vpx-aud-subtab{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:var(--vpx-text-muted,#64748b);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s;
}
.vpx-aud-subtab:hover{ color:var(--vpx-primary); }
.vpx-aud-subtab.is-active{ color:var(--vpx-primary);border-bottom-color:var(--vpx-primary); }
 
/* Panele */
.vpx-aud-pane{ display:none; }
.vpx-aud-pane.is-active{ display:block; }
.vpx-aud-paneHead{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:16px;
}
.vpx-aud-paneTitle{ margin:0 0 4px;font-size:16px;font-weight:700;color:var(--vpx-text); }
.vpx-aud-paneDesc{ margin:0;font-size:13px;color:var(--vpx-text-muted,#64748b);line-height:1.4; }
 
/* Pusty stan */
.vpx-aud-empty{
  text-align:center;padding:32px 16px;color:var(--vpx-text-muted,#94a3b8);
  border:1px dashed var(--vpx-border);border-radius:var(--vpx-radius,10px);
  background:var(--vpx-bg-subtle,#f8fafc);
}
.vpx-aud-empty i{ font-size:28px;display:block;margin-bottom:10px;opacity:.6; }
.vpx-aud-empty p{ margin:0;font-size:14px; }
 
/* Lista pól */
.vpx-aud-list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px; }
.vpx-aud-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;background:#fff;
  border:1px solid var(--vpx-border);border-radius:var(--vpx-radius,10px);
  transition:box-shadow .15s,border-color .15s;
}
.vpx-aud-row:hover{ border-color:var(--vpx-primary);box-shadow:0 1px 6px rgba(28,61,119,.08); }
.vpx-aud-row.is-dragging{ opacity:.5;border-style:dashed; }
 
.vpx-aud-drag{
  cursor:grab;color:var(--vpx-text-muted,#94a3b8);font-size:14px;
  flex:0 0 auto;display:inline-flex;
}
.vpx-aud-drag:active{ cursor:grabbing; }
 
.vpx-aud-rowMain{ flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0; }
.vpx-aud-rowName{ font-size:14px;font-weight:600;color:var(--vpx-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.vpx-aud-rowMeta{ font-size:12px;color:var(--vpx-text-muted,#64748b); }
.vpx-aud-rowOpt{ font-size:12px;color:var(--vpx-text-muted,#94a3b8);font-style:italic;flex:0 0 auto; }
 
.vpx-aud-rowActions{ display:flex;gap:4px;flex:0 0 auto; }
.vpx-aud-iconBtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:0;background:transparent;cursor:pointer;
  border-radius:8px;color:var(--vpx-text-muted,#64748b);font-size:13px;
  transition:background .15s,color .15s;
}
.vpx-aud-iconBtn:hover{ background:var(--vpx-accent);color:var(--vpx-primary); }
 
/* Formularz w modalu (VPX.modal body) */
.vpx-aud-lbl{
  display:block;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--vpx-text);
}
.vpx-aud-input{
  display:block;width:100%;margin-top:6px;
  padding:9px 12px;font:inherit;font-size:14px;font-weight:400;color:var(--vpx-text);
  background:#fff;border:1px solid var(--vpx-border);border-radius:var(--vpx-radius,8px);
  box-sizing:border-box;transition:border-color .15s,box-shadow .15s;
}
.vpx-aud-input:focus{
  outline:0;border-color:var(--vpx-primary);
  box-shadow:0 0 0 3px rgba(28,61,119,.12);
}
.vpx-aud-check{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:13px;font-weight:500;color:var(--vpx-text);cursor:pointer;
}
.vpx-aud-check input[type=checkbox]{ width:16px;height:16px;accent-color:var(--vpx-primary);cursor:pointer; }
.vpx-aud-ftypes{
  display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 14px;
  padding:10px 12px;background:var(--vpx-bg-subtle,#f8fafc);
  border:1px solid var(--vpx-border);border-radius:var(--vpx-radius,8px);
}
.vpx-aud-ftypes .vpx-aud-check{ margin-bottom:0; }
								   
/* ═══════════════════════════════════════════════════════════════════════════
   #019 KARTA KLIENTA: AUDYT — style (scoped .vpx-audc-*)
   Dodać w #001 po stylach #018. Zmienne --vpx-*. 2026-06-02.
   ═══════════════════════════════════════════════════════════════════════════ */

.vpx-audc-wrap{ display:block; }

/* Podstrony */
.vpx-audc-subtabs{ display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--vpx-border); }
.vpx-audc-subtab{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;background:transparent;
  cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--vpx-text-muted,#64748b);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;
}
.vpx-audc-subtab:hover{ color:var(--vpx-primary); }
.vpx-audc-subtab.is-active{ color:var(--vpx-primary);border-bottom-color:var(--vpx-primary); }

.vpx-audc-pane{ display:none; }
.vpx-audc-pane.is-active{ display:block; }

/* Pusty stan */
.vpx-audc-empty{
  text-align:center;padding:28px 16px;color:var(--vpx-text-muted,#94a3b8);
  border:1px dashed var(--vpx-border);border-radius:var(--vpx-radius,10px);background:var(--vpx-bg-subtle,#f8fafc);
}
.vpx-audc-empty i{ font-size:26px;display:block;margin-bottom:8px;opacity:.6; }
.vpx-audc-empty p{ margin:0;font-size:14px; }
.vpx-audc-empty-meta{ font-size:12px;margin-top:6px !important;opacity:.8; }

/* Pola */
.vpx-audc-fields{ display:flex;flex-direction:column;gap:16px; }
.vpx-audc-field{ position:relative;padding:14px;border:1px solid var(--vpx-border);border-radius:var(--vpx-radius,10px);background:#fff;transition:border-color .15s,box-shadow .15s; }
.vpx-audc-field.is-missing{ border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.1); }
.vpx-audc-lbl{ display:block;font-size:13px;font-weight:600;color:var(--vpx-text);margin-bottom:8px; }
.vpx-audc-req{ color:#dc2626;font-weight:700;margin-left:2px; }

.vpx-audc-input{
  display:block;width:100%;padding:9px 12px;font:inherit;font-size:14px;color:var(--vpx-text);
  background:#fff;border:1px solid var(--vpx-border);border-radius:var(--vpx-radius,8px);box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;
}
.vpx-audc-input:focus{ outline:0;border-color:var(--vpx-primary);box-shadow:0 0 0 3px rgba(28,61,119,.12); }
textarea.vpx-audc-input{ resize:vertical;min-height:64px; }

.vpx-audc-numwrap{ position:relative;display:flex;align-items:center; }
.vpx-audc-numwrap .vpx-audc-input{ padding-right:54px; }
.vpx-audc-unit{ position:absolute;right:12px;font-size:13px;font-weight:600;color:var(--vpx-text-muted,#64748b);pointer-events:none; }

.vpx-audc-saved{ display:inline-block;margin-top:6px;font-size:12px;color:#16a34a;opacity:0;transition:opacity .2s;height:14px; }
.vpx-audc-saved.is-on{ opacity:1; }

/* Pliki */
.vpx-audc-files{ display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px; }
.vpx-audc-fileItem{ padding:14px;border:1px solid var(--vpx-border);border-radius:var(--vpx-radius,10px);background:#fff;transition:border-color .15s,box-shadow .15s; }
.vpx-audc-fileItem.is-missing{ border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.1); }
.vpx-audc-fileHead{ margin-bottom:10px; }
.vpx-audc-fileName{ display:block;font-size:14px;font-weight:600;color:var(--vpx-text); }
.vpx-audc-fileTypes{ display:block;font-size:11px;color:var(--vpx-text-muted,#94a3b8);margin-top:2px; }

.vpx-audc-fileAdd{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:18px;cursor:pointer;
  border:1px dashed var(--vpx-border);border-radius:var(--vpx-radius,8px);background:var(--vpx-bg-subtle,#f8fafc);
  font:inherit;font-size:13px;font-weight:600;color:var(--vpx-primary);transition:background .15s,border-color .15s;
}
.vpx-audc-fileAdd:hover{ border-color:var(--vpx-primary);background:#fff; }

.vpx-audc-thumb{ display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--vpx-border);border-radius:var(--vpx-radius,8px);background:var(--vpx-bg-subtle,#f8fafc); }
.vpx-audc-thumb img{ width:56px;height:56px;object-fit:cover;border-radius:6px;flex:0 0 auto;background:#fff; }
.vpx-audc-pdfIco{ width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#fee2e2;color:#dc2626;font-size:24px;flex:0 0 auto; }
.vpx-audc-thumbInfo{ flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px; }
.vpx-audc-thumbName{ font-size:13px;font-weight:600;color:var(--vpx-primary);text-decoration:none !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.vpx-audc-thumbName:hover,.vpx-audc-thumbName:focus,.vpx-audc-thumbName:active{ text-decoration:none !important;color:var(--vpx-primary); }
.vpx-audc-thumbSize{ font-size:11px;color:var(--vpx-text-muted,#94a3b8); }
.vpx-audc-fileDel{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:0;background:transparent;cursor:pointer;border-radius:8px;color:var(--vpx-text-muted,#64748b);font-size:13px;transition:background .15s,color .15s;
}
.vpx-audc-fileDel:hover{ background:#fee2e2;color:#dc2626; }

/* Modal upload */
.vpx-audc-modalHint{ font-size:13px;color:var(--vpx-text-muted,#64748b);margin:0 0 12px;line-height:1.4; }
.vpx-audc-fileInputEl{ display:block;width:100%;font:inherit;font-size:13px;margin-bottom:12px; }
.vpx-audc-preview{ min-height:20px; }
.vpx-audc-preview img{ max-width:100%;max-height:220px;border-radius:8px;display:block;margin-bottom:6px; }
.vpx-audc-prevName{ font-size:12px;color:var(--vpx-text-muted,#64748b); }
.vpx-audc-prevPdf{ display:flex;align-items:center;gap:10px;padding:14px;border-radius:8px;background:#fee2e2;color:#dc2626;font-size:14px;font-weight:600; }
.vpx-audc-prevPdf i{ font-size:22px; }

/* Footer + weryfikacja */
.vpx-audc-footer{ display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding-top:18px;border-top:1px solid var(--vpx-border);flex-wrap:wrap; }
.vpx-audc-status{ flex:1 1 auto;font-size:13px;color:var(--vpx-text-muted,#64748b);display:flex;align-items:center;gap:8px; }
.vpx-audc-status.is-ok{ color:#16a34a;font-weight:600; }
.vpx-audc-status.is-warn{ color:#d97706;font-weight:600; }
.vpx-audc-status i{ font-size:15px; }								   
 
						 
/* ═══════════════════════════════════════════════════════════════════════════
   SNIPPET #032 — SPOTKANIA (Kalendarz + Tabela)  | Sebastian 2026-06-02
   Wszystkie style modułu w #001 (zasada: CSS w jednym miejscu). Scoped pod
   .vpx-meet-* oraz #vpxMeetCalendar (FullCalendar) — zero nadpisań klas bazowych.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nagłówek strony ── */
.vpx-meet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.vpx-meet-h1 { font-size:28px; font-weight:700; color:var(--vpx-text-primary,#0a0a0a); margin:0 0 4px; line-height:1.2; }
.vpx-meet-sub { font-size:14px; color:var(--vpx-text-secondary,#6b7280); margin:0; }
.vpx-meet-head-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ── Przełącznik Tabela / Kalendarz ── */
.vpx-meet-toggle { display:inline-flex; background:#f4f4f5; border:1px solid var(--vpx-border,#e4e4e7); border-radius:10px; padding:3px; gap:2px; }
.vpx-meet-toggle-btn { display:inline-flex; align-items:center; gap:7px; border:none; background:transparent; color:var(--vpx-text-secondary,#52525b); font-size:13px; font-weight:600; padding:7px 14px; border-radius:8px; cursor:pointer; transition:all .15s; }
.vpx-meet-toggle-btn:hover { color:var(--vpx-text-primary,#0a0a0a); }
.vpx-meet-toggle-btn.is-active { background:var(--vpx-primary,#1c3d77); color:#fff; box-shadow:0 1px 3px rgba(28,61,119,.3); }

/* ── 4 kafle statystyk ── */
.vpx-meet-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.vpx-meet-stat { background:#fff; border:1px solid var(--vpx-border,#e4e4e7); border-radius:14px; padding:20px 22px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.vpx-meet-stat-top { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:var(--vpx-text-secondary,#6b7280); font-weight:500; }
.vpx-meet-stat-top i { font-size:16px; color:var(--vpx-text-muted,#a1a1aa); }
.vpx-meet-stat-num { font-size:34px; font-weight:700; color:var(--vpx-text-primary,#0a0a0a); line-height:1.1; margin:14px 0 4px; }
.vpx-meet-stat-sub { font-size:12px; color:var(--vpx-text-muted,#a1a1aa); }

/* ── Panel (karta) ── */
.vpx-meet-panel { background:#fff; border:1px solid var(--vpx-border,#e4e4e7); border-radius:14px; padding:22px; box-shadow:0 1px 2px rgba(0,0,0,.04); }

/* ── Pasek narzędzi tabeli ── */
.vpx-meet-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vpx-meet-search-wrap { position:relative; flex:1 1 320px; min-width:200px; }
.vpx-meet-search-wrap > i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--vpx-text-muted,#a1a1aa); font-size:14px; pointer-events:none; }
.vpx-meet-search-input { width:100%; box-sizing:border-box; padding:10px 14px 10px 38px; border:1px solid var(--vpx-border,#e4e4e7); border-radius:10px; font-size:14px; color:var(--vpx-text-primary,#0a0a0a); background:#fff; transition:border-color .15s, box-shadow .15s; }
.vpx-meet-search-input:focus { outline:none; border-color:var(--vpx-primary,#1c3d77); box-shadow:0 0 0 3px rgba(28,61,119,.12); }
.vpx-meet-search-wrap--inline { flex:1 1 auto; }
.vpx-meet-search-hint { font-size:12px; color:var(--vpx-text-muted,#a1a1aa); margin:8px 0 0; }

/* ── Filtry zaawansowane ── */
.vpx-meet-filters { margin-top:16px; padding:16px; background:#f9fafb; border:1px solid var(--vpx-border,#e4e4e7); border-radius:12px; }
.vpx-meet-filters-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; font-size:13px; font-weight:600; color:var(--vpx-text-primary,#0a0a0a); }
.vpx-meet-filters-clear { font-size:12px; color:var(--vpx-text-secondary,#52525b); text-decoration:none !important; display:inline-flex; align-items:center; gap:5px; }
.vpx-meet-filters-clear:hover, .vpx-meet-filters-clear:focus, .vpx-meet-filters-clear:active { color:var(--vpx-primary,#1c3d77); text-decoration:none !important; }
.vpx-meet-filters-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.vpx-meet-filters-grid > label, .vpx-meet-field { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; color:var(--vpx-text-secondary,#52525b); }
.vpx-meet-filters-dates { display:flex; flex-direction:column; gap:8px; }
.vpx-meet-filters-dates .vpx-meet-filters-dates-to { margin-top:0; }

/* ── Tabela spotkań ── */
.vpx-meet-table-wrap { margin-top:16px; overflow-x:auto; border:1px solid var(--vpx-border,#e4e4e7); border-radius:12px; }
.vpx-meet-table { width:100%; border-collapse:collapse; font-size:13px; min-width:980px; }
.vpx-meet-table thead th { text-align:left; padding:12px 14px; background:#f9fafb; color:var(--vpx-text-secondary,#52525b); font-weight:600; font-size:12px; border-bottom:1px solid var(--vpx-border,#e4e4e7); white-space:nowrap; }
.vpx-meet-table tbody td { padding:12px 14px; border-bottom:1px solid #f1f1f3; color:var(--vpx-text-primary,#0a0a0a); vertical-align:middle; }
.vpx-meet-table tbody tr:last-child td { border-bottom:none; }
.vpx-meet-table tbody tr:hover { background:#fafafa; }
.vpx-meet-table tbody tr.vpx-meet-row { cursor:pointer; }
.vpx-meet-row-done td { color:var(--vpx-text-muted,#a1a1aa); }
.vpx-meet-td-clip { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vpx-meet-td-wide { min-width:280px; max-width:440px; white-space:normal; line-height:1.4; }
.vpx-meet-empty { text-align:center; padding:40px 16px; color:var(--vpx-text-muted,#a1a1aa); font-size:14px; }
.vpx-meet-empty--sm { padding:16px; font-size:13px; }
.vpx-meet-rowactions { display:flex; gap:6px; }
.vpx-meet-rowbtn { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--vpx-border,#e4e4e7); background:#fff; color:var(--vpx-text-secondary,#52525b); border-radius:8px; cursor:pointer; font-size:13px; transition:all .15s; }
.vpx-meet-rowbtn:hover { border-color:var(--vpx-accent,#f8be3b); background:var(--vpx-accent,#f8be3b); color:#0a0a0a; transform:translateY(-1px); }
.vpx-meet-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid; white-space:nowrap; }

/* ── Pasek kalendarza (własny, headerToolbar:false) ── */
.vpx-meet-cal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.vpx-meet-cal-nav { display:flex; align-items:center; gap:8px; }
.vpx-meet-cal-arrow { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--vpx-border,#e4e4e7); background:#fff; color:var(--vpx-text-secondary,#52525b); border-radius:9px; cursor:pointer; transition:all .15s; }
.vpx-meet-cal-arrow:hover { border-color:var(--vpx-accent,#f8be3b); background:var(--vpx-accent,#f8be3b); color:#0a0a0a; }
.vpx-meet-cal-title { font-size:18px; font-weight:700; color:var(--vpx-text-primary,#0a0a0a); text-transform:capitalize; flex:1 1 auto; text-align:center; }
.vpx-meet-cal-viewpick { position:relative; }
.vpx-meet-cal-viewmenu { position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid var(--vpx-border,#e4e4e7); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:5px; z-index:50; min-width:150px; }
.vpx-meet-cal-viewmenu button { display:flex; width:100%; align-items:center; gap:9px; border:none; background:transparent; text-align:left; padding:8px 12px; border-radius:7px; font-size:13px; color:var(--vpx-text-primary,#0a0a0a); cursor:pointer; }
.vpx-meet-cal-viewmenu button:hover { background:#f4f4f5; }
.vpx-meet-cal-viewmenu button.is-active { background:var(--vpx-accent-light,#fef3c7); color:#0a0a0a; font-weight:600; }
.vpx-meet-cal-viewmenu button i { width:16px; text-align:center; color:var(--vpx-text-muted,#a1a1aa); }

/* ── FullCalendar — skin (scoped) ── */
#vpxMeetCalendar { --fc-border-color:#ececed; --fc-today-bg-color:#eef4ff; --fc-now-indicator-color:#ef4444; --fc-page-bg-color:#fff; font-size:13px; }
#vpxMeetCalendar .fc-col-header-cell { background:#f9fafb; padding:10px 0; }
#vpxMeetCalendar .fc-col-header-cell-cushion { color:var(--vpx-text-secondary,#52525b); font-weight:600; font-size:12px; text-decoration:none; text-transform:lowercase; }
#vpxMeetCalendar .fc-daygrid-day-number { color:var(--vpx-text-secondary,#52525b); font-size:13px; text-decoration:none; padding:6px 8px; }
#vpxMeetCalendar .fc-day-other .fc-daygrid-day-number { color:var(--vpx-text-muted,#c4c4cc); }
#vpxMeetCalendar .fc-day-today .fc-daygrid-day-number { color:var(--vpx-primary,#1c3d77); font-weight:700; }
#vpxMeetCalendar .fc-daygrid-event, #vpxMeetCalendar .fc-timegrid-event { border:none; border-radius:5px; padding:1px 5px; margin:1px 2px; box-shadow:none; }
#vpxMeetCalendar .fc-event { cursor:pointer; }
#vpxMeetCalendar .fc-more-link { color:var(--vpx-primary,#1c3d77); font-weight:600; font-size:11px; padding:1px 5px; }
#vpxMeetCalendar .fc-more-link:hover { background:var(--vpx-accent-light,#fef3c7); border-radius:4px; }
#vpxMeetCalendar .fc-timegrid-slot-label-cushion, #vpxMeetCalendar .fc-list-day-text, #vpxMeetCalendar .fc-list-day-side-text { color:var(--vpx-text-secondary,#52525b); text-decoration:none; }
#vpxMeetCalendar .fc-list-event:hover td { background:#fafafa; }
#vpxMeetCalendar .fc-scrollgrid { border-radius:10px; overflow:hidden; }

/* ── Treść bloczka spotkania ── */
.vpx-meet-ev { display:flex; align-items:center; gap:5px; overflow:hidden; color:#fff; }
.vpx-meet-ev-time { font-weight:700; font-size:11px; opacity:.95; flex:none; }
.vpx-meet-ev-client { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vpx-meet-ev-chip { margin-left:auto; flex:none; width:17px; height:17px; border-radius:50%; background:rgba(255,255,255,.28); color:#fff; font-size:9px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

/* ── Modale Spotkań (tło=nic, Escape, X/Anuluj) — zasada 02.06 ── */
.vpx-meet-modal { position:fixed; inset:0; z-index:9000; align-items:center; justify-content:center; padding:20px; }
.vpx-meet-modal[data-open="0"] { display:none !important; visibility:hidden !important; opacity:0 !important; }
.vpx-meet-modal[data-open="1"] { display:flex !important; visibility:visible !important; opacity:1 !important; }
.vpx-meet-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
.vpx-meet-modal-window { position:relative; background:#fff; border-radius:16px; width:100%; max-width:640px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; }
.vpx-meet-modal-window--sm { max-width:460px; }
.vpx-meet-modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--vpx-border,#e4e4e7); }
.vpx-meet-modal-header h2 { font-size:18px; font-weight:700; color:var(--vpx-text-primary,#0a0a0a); margin:0; }
.vpx-meet-modal-close { width:34px; height:34px; border:none; background:#f4f4f5; color:var(--vpx-text-secondary,#52525b); border-radius:9px; cursor:pointer; font-size:15px; display:inline-flex; align-items:center; justify-content:center; transition:all .15s; }
.vpx-meet-modal-close:hover { background:var(--vpx-accent,#f8be3b); color:#0a0a0a; }
.vpx-meet-modal-body { padding:22px; overflow-y:auto; }
.vpx-meet-modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--vpx-border,#e4e4e7); background:#fafafa; }

/* ── Zakładki w modalu dodawania ── */
.vpx-meet-tabs { display:flex; gap:6px; background:#f4f4f5; border-radius:10px; padding:4px; margin-bottom:18px; }
.vpx-meet-tab { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:none; background:transparent; color:var(--vpx-text-secondary,#52525b); font-size:13px; font-weight:600; padding:9px 12px; border-radius:8px; cursor:pointer; transition:all .15s; }
.vpx-meet-tab.is-active { background:#fff; color:var(--vpx-primary,#1c3d77); box-shadow:0 1px 3px rgba(0,0,0,.1); }

/* ── Pola formularza w modalu ── */
.vpx-meet-field { margin-bottom:14px; }
.vpx-meet-field > input, .vpx-meet-field > textarea, .vpx-meet-field > select { margin-top:2px; }
.vpx-meet-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ── Wyniki wyszukiwania klientów ── */
.vpx-meet-client-results { display:flex; flex-direction:column; gap:6px; margin:10px 0; max-height:240px; overflow-y:auto; }
.vpx-meet-client-row { display:flex; flex-direction:column; gap:3px; text-align:left; border:1px solid var(--vpx-border,#e4e4e7); background:#fff; border-radius:10px; padding:10px 14px; cursor:pointer; transition:all .15s; }
.vpx-meet-client-row:hover { border-color:var(--vpx-primary,#1c3d77); background:#f9fbff; }
.vpx-meet-client-row-name { font-size:14px; font-weight:600; color:var(--vpx-text-primary,#0a0a0a); }
.vpx-meet-client-row-meta { font-size:12px; color:var(--vpx-text-muted,#a1a1aa); }
.vpx-meet-client-row-h { font-size:11px; color:var(--vpx-primary,#1c3d77); font-weight:600; }
.vpx-meet-client-row-h--none { color:#c2410c; }
.vpx-meet-client-selected { display:flex; align-items:center; gap:10px; background:var(--vpx-accent-light,#fef3c7); border:1px solid #fcd34d; border-radius:10px; padding:12px 14px; font-size:14px; color:var(--vpx-text-primary,#0a0a0a); margin:6px 0 16px; }
.vpx-meet-client-selected > span { flex:1; font-weight:600; }
.vpx-meet-btn-sm { padding:5px 12px !important; font-size:12px !important; }

/* ── Adres spotkania ── */
.vpx-meet-addr { margin:6px 0 14px; padding:14px; background:#f9fafb; border:1px solid var(--vpx-border,#e4e4e7); border-radius:10px; }
.vpx-meet-addr-label { display:block; font-size:13px; font-weight:600; color:var(--vpx-text-primary,#0a0a0a); margin-bottom:8px; }
.vpx-meet-radio { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--vpx-text-secondary,#52525b); cursor:pointer; padding:4px 0; }
.vpx-meet-osm { margin-top:10px; }
.vpx-meet-osm-results { display:flex; flex-direction:column; gap:4px; margin-top:6px; max-height:200px; overflow-y:auto; }
.vpx-meet-osm-row { text-align:left; border:1px solid var(--vpx-border,#e4e4e7); background:#fff; border-radius:8px; padding:8px 12px; font-size:12px; color:var(--vpx-text-primary,#0a0a0a); cursor:pointer; }
.vpx-meet-osm-row:hover { border-color:var(--vpx-primary,#1c3d77); background:#f9fbff; }
.vpx-meet-osm-selected { margin-top:8px; font-size:13px; color:var(--vpx-text-primary,#0a0a0a); background:#fff; border:1px solid var(--vpx-border,#e4e4e7); border-radius:8px; padding:8px 12px; }
.vpx-meet-osm-selected i { color:var(--vpx-primary,#1c3d77); margin-right:6px; }

/* ── Kafle „+N więcej" ── */
.vpx-meet-more-body { display:flex; flex-direction:column; gap:8px; }
.vpx-meet-tile { display:flex; align-items:center; gap:10px; text-align:left; border:1px solid var(--vpx-border,#e4e4e7); background:#fff; border-radius:10px; padding:10px 14px; cursor:pointer; transition:all .15s; }
.vpx-meet-tile:hover { border-color:var(--vpx-primary,#1c3d77); background:#f9fbff; }
.vpx-meet-tile-time { font-weight:700; font-size:13px; color:var(--vpx-primary,#1c3d77); flex:none; min-width:42px; }
.vpx-meet-tile-client { font-size:14px; color:var(--vpx-text-primary,#0a0a0a); flex:1; }
.vpx-meet-tile-h { font-size:12px; color:var(--vpx-text-muted,#a1a1aa); }

/* ── Szczegóły spotkania ── */
.vpx-meet-detail-status { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; font-weight:600; font-size:13px; border-radius:9px; padding:9px 14px; margin-bottom:14px; }
.vpx-meet-dl { display:grid; grid-template-columns:130px 1fr; gap:8px 14px; margin:0; font-size:13px; }
.vpx-meet-dl dt { color:var(--vpx-text-secondary,#52525b); font-weight:600; }
.vpx-meet-dl dd { margin:0; color:var(--vpx-text-primary,#0a0a0a); word-break:break-word; }

/* ── Nowy klient — placeholder „w przygotowaniu" ── */
.vpx-meet-soon { display:flex; align-items:flex-start; gap:14px; background:#f9fafb; border:1px dashed var(--vpx-border,#d4d4d8); border-radius:12px; padding:20px; }
.vpx-meet-soon i { font-size:22px; color:var(--vpx-text-muted,#a1a1aa); margin-top:2px; }
.vpx-meet-soon strong { font-size:14px; color:var(--vpx-text-primary,#0a0a0a); }
.vpx-meet-soon p { font-size:13px; color:var(--vpx-text-secondary,#52525b); margin:6px 0 0; }

/* ── Responsywność ── */
@media (max-width:1024px){
  .vpx-meet-stats { grid-template-columns:repeat(2,1fr); }
  .vpx-meet-filters-grid { grid-template-columns:1fr; }
}
@media (max-width:640px){
  .vpx-meet-head { flex-direction:column; align-items:stretch; }
  .vpx-meet-head-actions { justify-content:space-between; }
  .vpx-meet-stats { grid-template-columns:1fr 1fr; gap:12px; }
  .vpx-meet-stat { padding:16px; }
  .vpx-meet-stat-num { font-size:28px; }
  .vpx-meet-h1 { font-size:23px; }
  .vpx-meet-cal-title { order:-1; flex-basis:100%; text-align:left; }
  .vpx-meet-grid2 { grid-template-columns:1fr; }
  .vpx-meet-modal { padding:0; align-items:flex-end; }
  .vpx-meet-modal-window { max-width:100%; max-height:94vh; border-radius:16px 16px 0 0; }
}


/* ── #032 v2 (Sebastian 2026-06-02): typ zadania ze słownika — etykiety + kafle ── */
.vpx-meet-typebadge { display:inline-block; padding:2px 9px; border-radius:6px; font-size:11px; font-weight:600; background:#eef2f7; color:var(--vpx-primary,#1c3d77); border:1px solid #dbe3ee; white-space:nowrap; }
.vpx-meet-morelink { font-size:11px; font-weight:600; color:var(--vpx-primary,#1c3d77); }

/* kafel „+N więcej" — typ + tytuł w jednej kolumnie */
.vpx-meet-tile-main { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.vpx-meet-tile-type { font-size:12px; color:var(--vpx-text-secondary,#52525b); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* bloczek kalendarza — gdy doklejamy „· Typ", nie łam wysokości */
.vpx-meet-ev-client { min-width:0; }

/* ── #032 v3 (Sebastian 2026-06-02): kolor typu zadania ze słownika na kalendarzu ── */
/* Kropka koloru typu przy kaflu „+N więcej" */
.vpx-meet-tile-dot { flex:none; width:10px; height:10px; border-radius:50%; margin-top:5px; }
/* Agenda (listWeek): kropka FullCalendar = kolor typu — powiększ dla czytelności */
#vpxMeetCalendar .fc-list-event-dot { border-width:6px; }
#vpxMeetCalendar .fc-list-event-title { color:var(--vpx-text-primary,#0a0a0a); font-weight:500; }
/* Bloczek miesiąca/tygodnia — pełne (nieprzezroczyste) tło z koloru typu, by tekst był czytelny */
#vpxMeetCalendar .fc-daygrid-event, #vpxMeetCalendar .fc-timegrid-event { opacity:1; }
/* Miesiąc: event jako kolorowy blok (eventDisplay:block w JS). Tło = kolor typu z event.color. */
#vpxMeetCalendar .fc-daygrid-block-event { background:var(--fc-event-bg-color); border-radius:5px; }
#vpxMeetCalendar .fc-daygrid-block-event .fc-event-main { padding:1px 5px; }
#vpxMeetCalendar .fc-daygrid-event .vpx-meet-ev { width:100%; }


/* ── #032 stany zadań (Sebastian 2026-06-02): zakończone/wycofane = siwe, ale czytelne ── */
/* Wiersz zakończony — przygaszony, ale widoczny */
.vpx-meet-table tbody tr.vpx-meet-row-done td { color:#6b7280; }
/* Wiersz wycofany — szary + przekreślony tytuł dla rozróżnienia */
.vpx-meet-table tbody tr.vpx-meet-row-cancelled td { color:#9ca3af; }
.vpx-meet-table tbody tr.vpx-meet-row-cancelled td.vpx-meet-col-title { text-decoration:line-through; }
/* Przyciski/akcje danger (wycofaj) */
.vpx-meet-rowbtn--danger:hover { border-color:#dc2626 !important; background:#fee2e2 !important; color:#b91c1c !important; }
.vpx-meet-btn-danger { color:#b91c1c; }
.vpx-meet-btn-danger:hover { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
/* Bloczek kalendarza — wycofany przekreślony, zakończony półprzezroczysty (ale czytelny) */
#vpxMeetCalendar .fc-event.vpx-meet-ev-cancelled .vpx-meet-ev-client { text-decoration:line-through; }
#vpxMeetCalendar .fc-event.vpx-meet-ev-cancelled,
#vpxMeetCalendar .fc-event.vpx-meet-ev-done { opacity:.92; }
/* Nagłówek stanu „wycofane" w szczegółach */
.vpx-meet-detail-status--cancelled { background:#f3f4f6; border-color:#d1d5db; color:#6b7280; }
.vpx-meet-detail-status i { margin-right:6px; }
/* ── #032 stany zadań (Sebastian 2026-06-02): zakończone/wycofane = siwe, ale czytelne ── */
/* Wiersz zakończony — przygaszony, ale widoczny */
.vpx-meet-table tbody tr.vpx-meet-row-done td { color:#6b7280; }
/* Wiersz wycofany — szary + przekreślony tytuł dla rozróżnienia */
.vpx-meet-table tbody tr.vpx-meet-row-cancelled td { color:#9ca3af; }
.vpx-meet-table tbody tr.vpx-meet-row-cancelled td.vpx-meet-col-title { text-decoration:line-through; }
/* Przyciski/akcje danger (wycofaj) */
.vpx-meet-rowbtn--danger:hover { border-color:#dc2626 !important; background:#fee2e2 !important; color:#b91c1c !important; }
.vpx-meet-btn-danger { color:#b91c1c; }
.vpx-meet-btn-danger:hover { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
/* Bloczek kalendarza — wycofany przekreślony, zakończony półprzezroczysty (ale czytelny) */
#vpxMeetCalendar .fc-event.vpx-meet-ev-cancelled .vpx-meet-ev-client { text-decoration:line-through; }
#vpxMeetCalendar .fc-event.vpx-meet-ev-cancelled,
#vpxMeetCalendar .fc-event.vpx-meet-ev-done { opacity:.92; }
/* Nagłówek stanu „wycofane" w szczegółach */
.vpx-meet-detail-status--cancelled { background:#f3f4f6; border-color:#d1d5db; color:#6b7280; }
.vpx-meet-detail-status i { margin-right:6px; }		 
						 
/* ═══════════════════════════════════════════════════════════════════════════
   #020 GENERATOR PDF — przycisk „Pobierz PDF" w nagłówku sekcji (Oferta/Umowa)
   Dodać w #001. 2026-06-02.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nagłówek sekcji w karcie: tytuł + hint po lewej, przycisk PDF po prawej */
.vpx-calc-card-section-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 16px;
}
.vpx-calc-card-section-head h2{ margin:0;flex:0 0 auto; }
.vpx-calc-card-section-head .vpx-calc-card-section-hint{
  margin:0;
  flex:1 1 auto;
  font-size:13px;
  color:var(--vpx-text-muted,#64748b);
}
.vpx-calc-card-pdf-btn{
  flex:0 0 auto;
  margin-left:auto;
}

		/* Panel cofnięć FSM na karcie kalkulacji */
.vpx-fsm-corr-panel {
    border: 1px solid #fca5a5; border-left: 4px solid #dc2626; border-radius: .625rem;
    background: #fef2f2; padding: 14px 16px; margin: 0 0 18px;
}
.vpx-fsm-corr-head { font-weight: 700; color: #b91c1c; font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.vpx-fsm-corr-item { background: #fff; border: 1px solid #fecaca; border-radius: .5rem; padding: 10px 12px; margin-bottom: 8px; }
.vpx-fsm-corr-item:last-child { margin-bottom: 0; }
.vpx-fsm-corr-item.is-done { background: #f0fdf4; border-color: #bbf7d0; opacity: .85; }
.vpx-fsm-corr-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.vpx-fsm-corr-dept { font-size: 11px; font-weight: 700; color: #dc2626; text-transform: uppercase; }
.vpx-fsm-corr-item.is-done .vpx-fsm-corr-dept { color: #047857; }
.vpx-fsm-corr-deadline { font-size: 11px; color: #6b7280; }
.vpx-fsm-corr-msg { font-size: 13px; color: #111827; white-space: pre-wrap; margin-bottom: 4px; }
.vpx-fsm-corr-meta { font-size: 11px; color: #6b7280; margin-bottom: 8px; }
.vpx-fsm-corr-status { font-size: 12px; font-weight: 600; color: #047857; }
.vpx-fsm-corr-done-btn { font-size: 13px; padding: 6px 12px; }	
			
					  
					  
					  /* ════════ KONFIGURATOR: Lista dokumentów (cdoc) — globalne, używane przez #017 umowa + #022 protokół ════════
   Przeniesione do #001 z lokalnego <style> #017 (Sebastian 2026-06-15) — jedno źródło klas, nowe snippety bez <style>. */
.vpx-cdoc-wrap { margin: 0 0 18px; }
.vpx-cdoc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.vpx-cdoc-head h3 { margin: 0; font-size: 16px; color: var(--vpx-primary, #1c3d77); }
.vpx-cdoc-head p { margin: 2px 0 0; font-size: 12px; color: var(--vpx-text-secondary, #6b7280); }
.vpx-cdoc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vpx-cdoc-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--vpx-border, #e5e7eb); border-radius: .5rem; background: var(--vpx-bg-card, #fff); }
.vpx-cdoc-row-main { flex: 1 1 auto; min-width: 0; }
.vpx-cdoc-row-name { font-weight: 600; color: var(--vpx-text-primary, #111827); }
.vpx-cdoc-row-meta { display: block; font-size: 12px; color: var(--vpx-text-secondary, #6b7280); }
.vpx-cdoc-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--vpx-primary, #1c3d77); color: #fff; }
.vpx-cdoc-opt { font-size: 12px; color: var(--vpx-text-secondary, #6b7280); }
.vpx-cdoc-acts { display: flex; gap: 6px; }
.vpx-cdoc-ic { border: 1px solid var(--vpx-border, #e5e7eb); background: var(--vpx-bg-card, #fff); border-radius: .4rem; width: 32px; height: 32px; cursor: pointer; color: #374151; }
.vpx-cdoc-ic:hover { border-color: var(--vpx-primary, #1c3d77); color: var(--vpx-primary, #1c3d77); }
.vpx-cdoc-empty { padding: 16px; border: 1px dashed #d1d5db; border-radius: .5rem; color: var(--vpx-text-secondary, #6b7280); text-align: center; font-size: 13px; }
.vpx-cdoc-modal-row { margin-bottom: 12px; }
.vpx-cdoc-modal-row > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #374151; }
.vpx-cdoc-types { display: flex; gap: 14px; flex-wrap: wrap; }
.vpx-cdoc-types label, .vpx-cdoc-chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }

/* ════════ KONFIGURATOR PROTOKOŁU (#022) — pod-zakładki + sekcje ════════
   Własne klasy (izolacja od JS #018, który steruje vpx-aud-subtab/pane). Sebastian 2026-06-16. */
.vpx-proto-wrap { margin: 0; }
.vpx-proto-subtabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--vpx-border, #e5e7eb); }
.vpx-proto-subtab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; background: transparent; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--vpx-text-secondary, #6b7280); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vpx-proto-subtab:hover { color: var(--vpx-primary, #1c3d77); }
.vpx-proto-subtab.is-active { color: var(--vpx-primary, #1c3d77); border-bottom-color: var(--vpx-primary, #1c3d77); }
.vpx-proto-pane { display: none; }
.vpx-proto-pane.is-active { display: block; }
			
										 
	/* ─── READ-ONLY UCZESTNIKA ROZLICZENIA (Sebastian 2026-06-16) ───────────────
   Karty #030 dostają data-ro="1" gdy zalogowany NIE może edytować (uczestnik
   zamrożonej drabiny = tylko podgląd). Backend i tak blokuje mutacje
   (can_edit_lead / guard_dept_action); to wyłącznie ukrycie afordancji edycji. */
.vpx-calc-card-page[data-ro="1"]::before,
.vpx-lead-card-page[data-ro="1"]::before {
    content: "Podgląd tylko do odczytu — jesteś uczestnikiem rozliczenia (bez edycji).";
    display: block; margin: 0 0 16px; padding: 10px 14px; border-radius: 8px;
    background: #fef3c7; border: 1px solid #fde68a; color: #92400e;
    font-size: 13px; font-weight: 600;
}
.vpx-calc-card-page[data-ro="1"] #vpxCalcCardBtnOpenSim,
.vpx-calc-card-page[data-ro="1"] #vpxCalcCardBtnDeleteOffer,
.vpx-calc-card-page[data-ro="1"] #vpxCalcCardBtnSendRealization,
.vpx-calc-card-page[data-ro="1"] #vpxCalcCardOsmSave,
.vpx-calc-card-page[data-ro="1"] #vpxCalcCardOsmReset,
.vpx-calc-card-page[data-ro="1"] #vpxContractSaveBtn,
.vpx-calc-card-page[data-ro="1"] #vpxContractScanEmpty,
.vpx-calc-card-page[data-ro="1"] #vpxContractScanUploadBtn,
.vpx-calc-card-page[data-ro="1"] #vpxContractScanDelBtn,
.vpx-calc-card-page[data-ro="1"] #vpxContractAnnexAddBtn,
.vpx-calc-card-page[data-ro="1"] #vpxOfferSendBtn,
.vpx-calc-card-page[data-ro="1"] #vpxOfferConfirmBtn,
.vpx-calc-card-page[data-ro="1"] .vpx-contract-actions,
.vpx-calc-card-page[data-ro="1"] .vpx-contract-scan-del,
.vpx-calc-card-page[data-ro="1"] .vpx-contract-annex-head button {
    display: none !important;
}
/* Pola wyłączone przez JS (disabled) — jednolity wygląd read-only we wszystkich zakładkach */
.vpx-calc-card-page[data-ro="1"] input:disabled,
.vpx-calc-card-page[data-ro="1"] select:disabled,
.vpx-calc-card-page[data-ro="1"] textarea:disabled {
    background: #f3f4f6 !important; color: #6b7280 !important;
    cursor: not-allowed !important; opacity: 1 !important;
}
.vpx-lead-card-page[data-ro="1"] #vpxLeadCardActivityAdd,
.vpx-lead-card-page[data-ro="1"] #vpxLeadCardBtnReassign,
.vpx-lead-card-page[data-ro="1"] #vpxLeadCardBtnAddCalc,
.vpx-lead-card-page[data-ro="1"] #vpxLeadCardStatusSelect {
    display: none !important;
}									 
										 
/* ════════════════════════════════════════════════════════════════════════════
   MODUŁ REALIZACJE (#034) — lista, kalendarz, karta (Koordynacja/Ekipa). 2026-06-16
   ════════════════════════════════════════════════════════════════════════════ */
.vpx-realiz-wrap { /* Sebastian 2026-06-17: pełna szerokość jak UMOWY (zdjęty max-width 1400px) */ }
.vpx-realiz-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.vpx-realiz-h1 { margin:0; font-size:26px; color:var(--vpx-primary,#1c3d77); }
.vpx-realiz-sub { margin:4px 0 0; color:var(--vpx-text-secondary,#6b7280); font-size:14px; }
.vpx-realiz-viewtabs { display:flex; gap:6px; }
.vpx-realiz-vtab { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--vpx-border,#e5e7eb); background:#fff; border-radius:.5rem; cursor:pointer; font-weight:600; font-size:13px; color:#374151; }
.vpx-realiz-vtab:hover { background:var(--vpx-accent,#f8be3b); color:#1f2937; border-color:var(--vpx-accent,#f8be3b); }
.vpx-realiz-vtab.is-active { background:var(--vpx-primary,#1c3d77); color:#fff; border-color:var(--vpx-primary,#1c3d77); }

/* Kafle */
.vpx-realiz-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.vpx-realiz-stat { background:#fff; border:1px solid var(--vpx-border,#e5e7eb); border-radius:.6rem; padding:16px; display:flex; flex-direction:column; gap:4px; }
.vpx-realiz-statNum { font-size:28px; font-weight:700; color:var(--vpx-primary,#1c3d77); }
.vpx-realiz-statLbl { font-size:13px; color:var(--vpx-text-secondary,#6b7280); }

.vpx-realiz-pane { display:none; }
.vpx-realiz-pane.is-active { display:block; }

/* Toolbar */
.vpx-realiz-toolbar { display:flex; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.vpx-realiz-searchbox { flex:1 1 280px; position:relative; display:flex; align-items:center; }
.vpx-realiz-searchbox i { position:absolute; left:12px; color:#9ca3af; }
.vpx-realiz-searchbox input { width:100%; padding:10px 12px 10px 36px; border:1px solid var(--vpx-border,#e5e7eb); border-radius:.5rem; font-size:14px; }
.vpx-realiz-select { padding:10px 12px; border:1px solid var(--vpx-border,#e5e7eb); border-radius:.5rem; font-size:14px; background:#fff; }
.vpx-realiz-silosnote { font-size:12px; color:var(--vpx-text-secondary,#6b7280); margin:0 0 12px; }

/* ── Tabela list (vpx-clients-table) — WSPÓLNY wygląd KLIENCI / UMOWY / REALIZACJE.
   Promowane z #030/#033 (były tylko inline = page-scoped → Realizacje ich nie widziały).
   Sebastian 2026-06-17: jednorodność tabel. Dropdown akcji NIE promowany (zostaje w #030/#033). ── */
.vpx-clients-table-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    overflow: hidden;
}
.vpx-clients-table-wrap { overflow-x: auto; }
.vpx-clients-table {
    width: 100%; border-collapse: collapse;
    font-size: 14px; min-width: 980px;
}
.vpx-clients-table thead tr { border-bottom: 1px solid #e5e7eb; }
.vpx-clients-table thead th {
    height: 40px; padding: 8px;
    text-align: left; vertical-align: middle;
    font-weight: 500; font-size: 14px; color: #0a0a0a;
    white-space: nowrap;
    background: #fff;
}
.vpx-clients-table thead th:first-child { padding-left: 16px; }
.vpx-clients-table thead th:last-child  { padding-right: 16px; }
.vpx-clients-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color .12s ease;
}
.vpx-clients-table tbody tr:hover { background: rgba(244,244,245,.5); }
.vpx-clients-table tbody tr:last-child { border-bottom: 0; }
.vpx-clients-table tbody tr[data-oid] { cursor: pointer; }
.vpx-clients-table tbody td {
    padding: 8px; vertical-align: middle;
    white-space: nowrap; color: #0a0a0a; line-height: 1.4;
}
.vpx-clients-table tbody td:first-child { padding-left: 16px; }
.vpx-clients-table tbody td:last-child  { padding-right: 16px; }
.vpx-clients-col-actions { width: 80px; min-width: 80px; }
.vpx-clients-col-code { min-width: 130px; }
.vpx-clients-code-cell {
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
    font-size: 13px; color: #0a0a0a;
}
.vpx-clients-tel-link {
    color: #1c3d77 !important; text-decoration: none !important;
    font-weight: 500;
}
.vpx-clients-tel-link:hover { text-decoration: underline !important; }
.vpx-clients-tel-link:focus,
.vpx-clients-tel-link:active { text-decoration: none !important; }
.vpx-clients-table-footer {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 14px; color: #737373;
    background: #fafafa;
}
.vpx-clients-pagination { display: flex; gap: 8px; align-items: center; }
.vpx-clients-pag-btn {
    height: 32px; padding: 0 12px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
    font-size: 13px; color: #0a0a0a; cursor: pointer;
    transition: background .12s ease;
}
.vpx-clients-pag-btn:hover:not(:disabled) { background: #f4f4f5; }
.vpx-clients-pag-btn:disabled { opacity: .5; cursor: not-allowed; }
.vpx-clients-page-info { font-size: 13px; color: #737373; }
.vpx-clients-loading-cell {
    text-align: center; padding: 40px 16px;
    color: #737373; font-style: italic;
}
.vpx-clients-empty-row td {
    text-align: center; padding: 60px 16px;
    color: #737373;
}
.vpx-clients-empty-row td i {
    font-size: 32px; opacity: .3;
    display: block; margin-bottom: 12px;
}
.vpx-clients-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .04em;
    background: #f4f4f5; color: #0a0a0a;
    border: 1px solid #e5e7eb;
}
.vpx-clients-status-badge[data-color] {
    background: var(--badge-color);
    color: #fff; border-color: transparent;
}
.vpx-clients-status-cell {
    text-align: center;
    transition: background-color 0.2s;
}
.vpx-clients-pipeline-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    color: #fff;
    background: #6b7280;
    white-space: nowrap;
}
.vpx-clients-pipeline-pill--empty {
    color: #a1a1aa;
    background: #f4f4f5;
    border: 1px dashed #d4d4d8;
}
.vpx-clients-source-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px; font-weight: 500;
    background: transparent; color: #525252;
    border: 1px solid #e5e7eb;
}

/* ── REALIZACJE: na desktopie zawijanie tekstu w kolumnach zamiast poziomego
   scrolla (Sebastian 2026-06-17). Scoped pod #vpx-realiz-list-root → KLIENCI/UMOWY
   nietknięte (mają własny inline CSS z min-width). Mobile (≤768px): scroll OK. ── */
#vpx-realiz-list-root .vpx-clients-table { min-width: 0; }
#vpx-realiz-list-root .vpx-meet-panel { margin-bottom: 16px; }
#vpx-realiz-list-root .vpx-clients-table thead th,
#vpx-realiz-list-root .vpx-clients-table tbody td { white-space: normal; }
#vpx-realiz-list-root .vpx-clients-table .vpx-clients-tel-link,
#vpx-realiz-list-root .vpx-clients-table .vpx-clients-status-badge { white-space: nowrap; }
@media (max-width: 768px) {
  #vpx-realiz-list-root .vpx-clients-table { min-width: 760px; }
  #vpx-realiz-list-root .vpx-clients-table thead th,
  #vpx-realiz-list-root .vpx-clients-table tbody td { white-space: nowrap; }
}
.vpx-realiz-redtag { display:inline-block; padding:2px 8px; border-radius:999px; background:#dc2626; color:#fff; font-size:10px; font-weight:700; }

/* Kalendarz */
.vpx-realiz-calhead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.vpx-realiz-calnav { display:flex; gap:6px; }
.vpx-realiz-calbtn { width:36px; height:36px; border:1px solid var(--vpx-border,#e5e7eb); background:#fff; border-radius:.5rem; cursor:pointer; color:#374151; }
.vpx-realiz-calbtn:hover { background:var(--vpx-accent,#f8be3b); border-color:var(--vpx-accent,#f8be3b); }
.vpx-realiz-caltoday { width:auto; padding:0 14px; font-weight:600; }
.vpx-realiz-caltitle { margin:0; font-size:18px; color:var(--vpx-primary,#1c3d77); }
.vpx-realiz-calviews { display:flex; gap:4px; }
.vpx-realiz-calview { padding:7px 12px; border:1px solid var(--vpx-border,#e5e7eb); background:#fff; border-radius:.4rem; cursor:pointer; font-size:13px; color:#374151; }
.vpx-realiz-calview.is-active { background:var(--vpx-primary,#1c3d77); color:#fff; border-color:var(--vpx-primary,#1c3d77); }
.vpx-realiz-callegend { display:flex; gap:18px; margin-bottom:12px; font-size:12px; color:#374151; }
.vpx-realiz-leg { display:inline-flex; align-items:center; gap:6px; }
.vpx-realiz-dot { display:inline-block; width:12px; height:12px; border-radius:3px; }
.vpx-realiz-evt--red { background:#dc2626; }
.vpx-realiz-evt--green { background:#16a34a; }
.vpx-realiz-empty { color:#9ca3af; font-size:13px; padding:14px; text-align:center; }
.vpx-realiz-calendar { background:#fff; border:1px solid var(--vpx-border,#e5e7eb); border-radius:.6rem; padding:12px; }
.vpx-realiz-calendar .fc { font-size:13px; }
.vpx-realiz-calendar .fc .fc-col-header-cell-cushion { color:#6b7280; font-weight:600; text-decoration:none; }
.vpx-realiz-calendar .fc .fc-daygrid-day-number { color:#6b7280; text-decoration:none; }
.vpx-realiz-calendar .fc-event { cursor:pointer; border:0; }

/* ── KARTA REALIZACJI — język wizualny karty umowy #033 (Sebastian 2026-06-16, re-skin) ── */
.vpx-realiz-page { display:flex; flex-direction:column; gap:16px; }

/* Topbar (jak karta umowy: kod + klient + status) */
.vpx-realiz-topbar { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; box-shadow:0 1px 2px 0 rgba(0,0,0,.05); }
.vpx-realiz-topbar-left { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.vpx-realiz-topbar-left > i { font-size:28px; color:#1c3d77; }
.vpx-realiz-topbar-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vpx-realiz-code { font-family:ui-monospace,"SF Mono",Menlo,Monaco,monospace; font-size:13px; background:#f4f4f5; color:#525252; padding:4px 10px; border-radius:6px; }
.vpx-realiz-name { font-size:20px; font-weight:600; color:#0a0a0a; letter-spacing:-0.25px; }
.vpx-realiz-statuspill { color:#fff; font-size:12px; font-weight:700; padding:6px 14px; border-radius:999px; white-space:nowrap; }

/* Grid 2 kolumny (jak umowa 5fr/7fr) */
.vpx-realiz-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:16px; align-items:start; }
.vpx-realiz-left { display:flex; flex-direction:column; gap:14px; }
.vpx-realiz-right { display:flex; flex-direction:column; gap:14px; }
.vpx-realiz-coord, .vpx-realiz-crew { display:flex; flex-direction:column; gap:14px; }

/* Sekcja = biała karta (jak umowa) */
.vpx-realiz-sec { background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; box-shadow:0 1px 2px 0 rgba(0,0,0,.05); }
.vpx-realiz-secH { padding:14px 18px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vpx-realiz-secH h3 { margin:0; font-size:14px; font-weight:600; color:#525252; text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:8px; }
.vpx-realiz-secH h3 i { color:#1c3d77; }
.vpx-realiz-secB { padding:18px; }
.vpx-realiz-secHbtn { width:30px; height:30px; border:1px solid #e5e7eb; background:#fff; border-radius:6px; cursor:pointer; color:#1c3d77; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.vpx-realiz-secHbtn:hover { background:#f8be3b; border-color:#f8be3b; color:#1f2937; }
.vpx-realiz-secSub { margin:0 0 10px; font-size:13px; font-weight:600; color:#374151; }

/* Pola klienta (jak field-row umowy) */
.vpx-realiz-fields { display:flex; flex-direction:column; gap:10px; }
.vpx-realiz-field { display:grid; grid-template-columns:90px 1fr; gap:12px; align-items:start; }
.vpx-realiz-fieldL { color:#737373; font-size:13px; font-weight:500; padding-top:1px; }
.vpx-realiz-fieldV { color:#0a0a0a; font-size:14px; word-break:break-word; }

/* Notatki (kafle — kolor border-left ustawia JS inline) */
.vpx-realiz-notes { display:flex; flex-direction:column; gap:10px; }
.vpx-realiz-note { border:1px solid #e5e7eb; border-left:4px solid #1c3d77; background:#f9fafb; border-radius:8px; padding:10px 12px; }
.vpx-realiz-noteBody { font-size:13px; color:#1f2937; white-space:pre-wrap; }
.vpx-realiz-noteMeta { display:flex; align-items:center; gap:8px; font-size:11px; color:#9ca3af; margin-top:6px; }
.vpx-realiz-noteActs { margin-left:auto; display:flex; gap:4px; }
.vpx-realiz-noteIc { width:24px; height:24px; border:0; background:transparent; cursor:pointer; color:#6b7280; border-radius:4px; }
.vpx-realiz-noteIc:hover { background:#eef0f2; color:#1c3d77; }
.vpx-realiz-noteInput { width:100%; border:1px solid #e5e7eb; border-radius:8px; padding:10px; font-size:14px; resize:vertical; }
.vpx-realiz-colorRow { display:flex; gap:10px; margin-top:12px; }
.vpx-realiz-colorpick { cursor:pointer; }
.vpx-realiz-colorpick input { display:none; }
.vpx-realiz-colorpick span { display:inline-block; width:26px; height:26px; border-radius:50%; border:3px solid transparent; }
.vpx-realiz-colorpick input:checked + span { border-color:#1f2937; }

/* BOM */
.vpx-realiz-bomtable { width:100%; border-collapse:collapse; font-size:12px; }
.vpx-realiz-bomtable th { text-align:left; padding:7px 8px; background:#f9fafb; color:#6b7280; font-weight:600; border-bottom:1px solid #e5e7eb; }
.vpx-realiz-bomtable td { padding:7px 8px; border-bottom:1px solid #f1f3f5; color:#1f2937; }
.vpx-realiz-bomtable tr:last-child td { border-bottom:0; }

/* Zakładki KOORD/EKIPA (segment) */
.vpx-realiz-tabs { display:flex; gap:6px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:6px; box-shadow:0 1px 2px 0 rgba(0,0,0,.05); }
.vpx-realiz-tab { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; background:transparent; border-radius:8px; cursor:pointer; font-weight:600; font-size:14px; color:#6b7280; }
.vpx-realiz-tab:hover { background:#f8be3b; color:#1f2937; }
.vpx-realiz-tab.is-active, .vpx-realiz-tab.is-active:hover { background:#1c3d77; color:#fff; }
.vpx-realiz-tabpane { display:none; flex-direction:column; gap:14px; }
.vpx-realiz-tabpane.is-active { display:flex; }

/* Zawartość zakładek */
.vpx-realiz-alert-red { display:flex; align-items:center; gap:8px; background:#fef2f2; border:1px solid #fecaca; color:#dc2626; font-weight:700; padding:10px 12px; border-radius:8px; font-size:13px; }
.vpx-realiz-assigned { display:flex; align-items:center; gap:8px; color:#16a34a; font-weight:600; font-size:14px; }
.vpx-realiz-assigned i { color:#16a34a; }
.vpx-realiz-row { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.vpx-realiz-select { padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; background:#fff; flex:1 1 200px; }
.vpx-realiz-hint { display:flex; align-items:center; gap:6px; font-size:12px; color:#9ca3af; margin:10px 0 0; }
.vpx-realiz-hint i { color:#f8be3b; }
.vpx-realiz-termbox { padding:12px 14px; border-radius:8px; font-size:14px; }
.vpx-realiz-termbox b { color:#0a0a0a; }
.vpx-realiz-termbox span { color:#6b7280; font-size:13px; }
.vpx-realiz-termRed { background:#fef2f2; border:1px solid #fecaca; }
.vpx-realiz-termGreen { background:#f0fdf4; border:1px solid #bbf7d0; }
.vpx-realiz-muted { color:#9ca3af; }
.vpx-realiz-placeholder { display:flex; align-items:flex-start; gap:10px; color:#9ca3af; font-size:13px; background:#f9fafb; border:1px dashed #d1d5db; border-radius:8px; padding:12px; }
.vpx-realiz-placeholder i { color:#cbd5e1; font-size:18px; flex:0 0 auto; }
.vpx-realiz-placeholder p { margin:0; }
.vpx-realiz-anchor { color:#1c3d77; text-decoration:none; font-weight:600; }
.vpx-realiz-anchor:hover { text-decoration:underline; }
.vpx-realiz-empty { color:#9ca3af; font-size:13px; padding:14px; text-align:center; }

/* Hero ekipy */
.vpx-realiz-hero { background:#f0fdf4; border:1px solid #bbf7d0; border-left:4px solid #16a34a; color:#14532d; border-radius:12px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; box-shadow:0 1px 2px 0 rgba(0,0,0,.05); }
.vpx-realiz-heroH { margin:0; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; color:#14532d; }
.vpx-realiz-heroTerm { margin:6px 0 0; font-size:14px; color:#166534; }
.vpx-realiz-heroTerm b { color:#14532d; }
.vpx-realiz-heroTerm.vpx-realiz-muted { color:#15803d; opacity:.9; }
.vpx-realiz-heroActions { display:flex; gap:10px; flex-wrap:wrap; }
.vpx-realiz-hero .vpx-btn--secondary { background:#fff; border-color:#bbf7d0; color:#166534; }
.vpx-realiz-hero .vpx-btn--secondary:hover { background:#f0fdf4; border-color:#86efac; }
.vpx-realiz-crewTerm { margin:0; font-size:22px; font-weight:600; color:#0a0a0a; letter-spacing:-0.25px; }

/* Audyt techniczny read-only */
.vpx-realiz-audit { margin-top:14px; }
.vpx-realiz-auditList { display:flex; flex-direction:column; gap:8px; }
.vpx-realiz-auditRow { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:7px 0; border-bottom:1px solid #f5f6f7; }
.vpx-realiz-auditRow:last-child { border-bottom:0; }
.vpx-realiz-auditName { color:#737373; font-size:13px; }
.vpx-realiz-auditFile { color:#1c3d77; text-decoration:none; font-size:13px; font-weight:600; }
.vpx-realiz-auditFile:hover { text-decoration:underline; }

/* Uploady */
.vpx-realiz-uploadGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.vpx-realiz-uploadList { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.vpx-realiz-uploadItem { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
.vpx-realiz-uploadItem.is-done { border-color:#bbf7d0; background:#f0fdf4; }
.vpx-realiz-uploadName { font-size:13px; color:#1f2937; }
.vpx-realiz-reqstar { color:#dc2626; font-weight:700; }
.vpx-realiz-uploadBtn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #1c3d77; background:#fff; color:#1c3d77; border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; }
.vpx-realiz-uploadBtn:hover { background:#1c3d77; color:#fff; }
.vpx-realiz-uploadView { display:inline-flex; align-items:center; gap:6px; color:#16a34a; text-decoration:none; font-size:12px; font-weight:600; }

/* Światła zakończenia */
.vpx-realiz-lights { display:flex; flex-direction:column; gap:8px; }
.vpx-realiz-light { display:flex; align-items:center; gap:8px; font-size:13px; color:#9ca3af; }
.vpx-realiz-light i { font-size:10px; color:#d1d5db; }
.vpx-realiz-light.is-on { color:#16a34a; font-weight:600; }
.vpx-realiz-light.is-on i { color:#16a34a; }
.vpx-realiz-finishBtns { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.vpx-realiz-approveBox { margin-top:14px; padding:12px 14px; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; }
.vpx-realiz-approveBox p { margin:0 0 10px; font-size:13px; color:#92400e; display:flex; align-items:center; gap:8px; }
.vpx-realiz-approved { display:flex; align-items:center; gap:8px; margin-top:14px; padding:12px 14px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; color:#16a34a; font-weight:600; }

/* 404 */
.vpx-realiz-404 { text-align:center; padding:60px 20px; color:#9ca3af; }
.vpx-realiz-404 i { font-size:40px; display:block; margin-bottom:16px; color:#cbd5e1; }
.vpx-realiz-404 p { margin:0 0 20px; }

/* Responsywność karty + kafle listy */
@media (max-width:1024px){
  .vpx-realiz-grid { grid-template-columns:1fr; }
  .vpx-realiz-stats { grid-template-columns:repeat(2,1fr); }
}
										 
	/* ── Realizacje #034 (Sebastian 2026-06-17): przycisk powiadomienia (granat → zielony+✓) + Historia (timeline) ── */
.vpx-realiz-notify { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:10px 0; }
.vpx-realiz-notify-btn { display:inline-flex; align-items:center; gap:6px; }
.vpx-realiz-notify-btn.is-sent,
.vpx-realiz-notify-btn.is-sent:hover { background:#1f9d57 !important; border-color:#1f9d57 !important; color:#fff !important; }

.vpx-realiz-tl { list-style:none; margin:0; padding:0; }
.vpx-realiz-tl-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid #eef1f6; }
.vpx-realiz-tl-item:last-child { border-bottom:0; }
.vpx-realiz-tl-icon { flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:#1c3d77; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; }
.vpx-realiz-tl-item[data-action="crew_assigned"]          .vpx-realiz-tl-icon { background:#8b5cf6; }
.vpx-realiz-tl-item[data-action="date_set"]               .vpx-realiz-tl-icon { background:#1c3d77; }
.vpx-realiz-tl-item[data-action="notify_crew"]            .vpx-realiz-tl-icon,
.vpx-realiz-tl-item[data-action="notify_date"]            .vpx-realiz-tl-icon { background:#0ea5e9; }
.vpx-realiz-tl-item[data-action="montage_done"]           .vpx-realiz-tl-icon { background:#f59e0b; }
.vpx-realiz-tl-item[data-action="realization_submitted"]  .vpx-realiz-tl-icon { background:#06b6d4; }
.vpx-realiz-tl-item[data-action="realization_approved"]   .vpx-realiz-tl-icon { background:#16a34a; }
.vpx-realiz-tl-body { flex:1 1 auto; min-width:0; }
.vpx-realiz-tl-text { font-size:13px; color:#1f2937; line-height:1.4; }
.vpx-realiz-tl-meta { font-size:11px; color:#8a93a3; margin-top:2px; }									 
										 
/* ════════════════════════════════════════════════════════════════════════════
   MODUL MAGAZYN #035 — uklad karty 30/70 + lista pozycji BOM Wydanie + statusy.
   REUSE: vpx-realiz-* (sekcje/notatki/timeline/topbar/pill/select) + vpx-meet-*, vpx-clients-* (lista).
   Tu TYLKO czego nie bylo. Selekty/daty pozycji = vpx-realiz-select. Sebastian 2026-06-24.
   ════════════════════════════════════════════════════════════════════════════ */
.vpx-wh-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:16px; align-items:start; }
@media (max-width:1024px){ .vpx-wh-grid { grid-template-columns:1fr; } }
.vpx-wh-orderstatus { display:flex; flex-wrap:wrap; gap:8px; }
.vpx-wh-osbtn { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--vpx-border); border-radius:8px; background:#fff; color:var(--vpx-text-primary); font-size:13px; font-weight:600; cursor:pointer; transition:var(--vpx-transition); }
.vpx-wh-osbtn:hover { border-color:var(--vpx-primary); box-shadow:0 0 0 3px rgba(28,61,119,.10); }
.vpx-wh-osbtn .vpx-wh-sdot { width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.vpx-wh-osbtn.is-active { color:#fff; border-color:transparent; }
.vpx-wh-osbtn.is-active.vpx-wh-os--brak { background:#9ca3af; }
.vpx-wh-osbtn.is-active.vpx-wh-os--ordered { background:#6366f1; }
.vpx-wh-osbtn.is-active.vpx-wh-os--planned { background:#f59e0b; }
.vpx-wh-osbtn.is-active.vpx-wh-os--completed { background:#0ea5e9; }
.vpx-wh-osbtn.is-active.vpx-wh-os--released { background:#16a34a; }
.vpx-wh-bom { width:100%; border-collapse:collapse; font-size:13px; }
.vpx-wh-bom thead th { text-align:left; padding:10px 12px; background:var(--vpx-bg-table-header); color:var(--vpx-text-secondary); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--vpx-border); }
.vpx-wh-bom tbody td { padding:9px 12px; border-bottom:1px solid #f1f5f9; vertical-align:middle; color:var(--vpx-text-primary); }
.vpx-wh-bom tbody tr:last-child td { border-bottom:none; }
.vpx-wh-bom-qty { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.vpx-wh-bom-locked td { background:#fffbeb; }
.vpx-wh-sicon { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-size:11px; color:#fff; flex:0 0 auto; }
.vpx-wh-sicon--brak { background:#9ca3af; }
.vpx-wh-sicon--ordered { background:#6366f1; }
.vpx-wh-sicon--planned { background:#f59e0b; }
.vpx-wh-sicon--completed { background:#0ea5e9; }
.vpx-wh-sicon--released { background:#16a34a; }
.vpx-wh-statuscell { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vpx-wh-sdate { font-size:11px; color:var(--vpx-text-secondary); white-space:nowrap; }
.vpx-wh-poswrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Timeline statusu zlecenia (#035) — etapy z ikona + opcjonalna data per etap. Ikony reuse .vpx-wh-sicon--*. */
.vpx-wh-tl { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.vpx-wh-tl-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--vpx-border); border-radius:10px; background:#fff; transition:var(--vpx-transition); position:relative; }
.vpx-wh-tl-item.is-clickable { cursor:pointer; }
.vpx-wh-tl-item.is-clickable:hover { border-color:var(--vpx-primary); box-shadow:0 0 0 3px rgba(28,61,119,.08); }
.vpx-wh-tl-item.is-current { border-color:var(--vpx-primary); background:#f5f8ff; }
.vpx-wh-tl-item.is-disabled { opacity:.55; cursor:default; }
.vpx-wh-tl-main { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; }
.vpx-wh-tl-label { font-size:13px; font-weight:600; color:var(--vpx-text-primary); }
.vpx-wh-tl-cur { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--vpx-primary); background:rgba(28,61,119,.08); padding:2px 8px; border-radius:20px; white-space:nowrap; }
.vpx-wh-tl-date { flex:0 0 auto; }
.vpx-wh-tl-date input[type="date"] { padding:6px 9px; border:1px solid var(--vpx-border); border-radius:8px; font-size:12px; color:var(--vpx-text-primary); background:#fff; font-family:inherit; }
.vpx-wh-tl-date input[type="date"]:focus { outline:none; border-color:var(--vpx-primary); box-shadow:0 0 0 3px rgba(28,61,119,.10); }
.vpx-wh-tl-date input[type="date"]:disabled { background:var(--vpx-bg-table-header,#f8fafc); opacity:.7; }
/* BOM read-only na karcie umowy (#033) — pozycja + status etapu (reuse .vpx-wh-sicon--*). */
.vpx-fsm-bom-item { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #f1f5f9; font-size:13px; }
.vpx-fsm-bom-item:last-child { border-bottom:0; }
.vpx-fsm-bom-item-name { flex:1 1 auto; min-width:0; color:var(--vpx-text-primary); }
.vpx-fsm-bom-item-status { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; color:var(--vpx-text-secondary); font-size:12px; white-space:nowrap; }
.vpx-fsm-bom-item-qty { flex:0 0 auto; color:var(--vpx-text-secondary); white-space:nowrap; font-variant-numeric:tabular-nums; min-width:64px; text-align:right; }
.vpx-wh-lock { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; border:1px solid var(--vpx-border); background:#fff; color:#9ca3af; cursor:pointer; transition:var(--vpx-transition); }
.vpx-wh-lock:hover { border-color:var(--vpx-accent); color:var(--vpx-primary); }
.vpx-wh-lock.is-on { background:var(--vpx-accent); border-color:var(--vpx-accent); color:#0a0a0a; }
.vpx-wh-locknote { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; color:#9a3412; font-size:13px; }