/* ========================================
   FRATER ERP/CRM — Style Guide
   custom.css — Tokeny designu i nadpisania
   ======================================== */

/* ─── Design Tokens (CSS Variables) ─────── */
:root {
  /* Brand */
  --color-primary:       #8d1118;
  --color-primary-dark:  #6d0d12;
  --color-primary-light: #b5262f;
  --color-primary-50:    #fef2f2;
  --color-primary-100:   #fde8e9;

  --color-accent:        #ffd100;
  --color-accent-dark:   #e6bc00;
  --color-accent-light:  #ffe55c;

  /* Tła */
  --color-bg:            #ffffff;
  --color-bg-secondary:  #f8f9fa;
  --color-bg-tertiary:   #f1f3f5;

  /* Tekst */
  --color-text-primary:   #000000;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #9ca3af;
  --color-text-inverse:   #ffffff;

  /* Obramowania */
  --color-border:        #e5e7eb;
  --color-border-medium: #d1d5db;

  /* Statusy */
  --color-success:    #16a34a;
  --color-success-bg: #f0fdf4;
  --color-warning:    #d97706;
  --color-warning-bg: #fffbeb;
  --color-danger:     #dc2626;
  --color-danger-bg:  #fef2f2;
  --color-info:       #2563eb;
  --color-info-bg:    #eff6ff;

  /* Cienie */
  --shadow-card:       0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-modal:      0 20px 60px rgba(0,0,0,0.18);
  --shadow-dropdown:   0 4px 16px rgba(0,0,0,0.12);
  --shadow-glow-red:   0 0 0 3px rgba(141,17,24,0.2);
  --shadow-glow-gold:  0 0 0 3px rgba(255,209,0,0.3);

  /* Promienie */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Przejścia */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ─── Base ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  display: block;
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ─── Strona logowania ───────────────────── */
.login-page {
  min-height: 100vh;
  background-image: url('/assets/img/default/bckg_splash.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--color-border-medium); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ─── Sidebar ────────────────────────────── */
#sidebar { }
#sidebar .nav-group-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: 18px 16px 5px;
}
#sidebar .nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; font-size: 13px; font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  margin: 1px 8px;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer; user-select: none; text-decoration: none;
}
#sidebar .nav-link:hover { background: var(--color-primary-100); color: var(--color-primary); }
#sidebar .nav-link.active { background: var(--color-primary); color: #fff; font-weight: 600; }
#sidebar .nav-link.active .nav-icon-wrap { background: rgba(255,255,255,0.15); }
#sidebar .nav-link-logout { color: var(--color-text-muted); }
#sidebar .nav-link-logout:hover { background: #fef2f2; color: #dc2626; }
#sidebar .nav-link-logout:hover .nav-icon-wrap { background: #fee2e2; }

/* Wrapper ikony — position:relative umożliwia przypięcie badge'a */
.nav-icon-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--color-bg-tertiary);
  transition: background var(--transition-fast);
}
#sidebar .nav-link:hover .nav-icon-wrap { background: var(--color-primary-100); }
#sidebar .nav-link.active .nav-icon-wrap { background: rgba(255,255,255,0.18); }

/* Badge — do późniejszego użycia: <span class="nav-badge">3</span> */
.nav-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--color-primary); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 16px;
  border-radius: var(--radius-full); text-align: center;
  border: 2px solid #fff; white-space: nowrap;
}

/* ─── Sekcje style guide ─────────────────── */
.sg-section { padding: 52px 0; border-bottom: 1px solid var(--color-border); }
.sg-section:last-child { border-bottom: none; }
.sg-section-title {
  font-size: 22px; font-weight: 700; color: var(--color-text-primary);
  margin-bottom: 4px; display: flex; align-items: center; gap: 10px;
}
.sg-section-title .sec-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: var(--color-primary);
  color: #fff; font-size: 12px; font-weight: 700;
  border-radius: var(--radius-full); flex-shrink: 0;
}
.sg-section-desc {
  font-size: 14px; color: var(--color-text-secondary);
  margin-bottom: 32px; margin-top: 6px; line-height: 1.6;
}
.sg-sub {
  font-size: 11px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 12px; margin-top: 28px;
}
.sg-preview {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 24px; margin-bottom: 4px;
}
.sg-preview-gray {
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 24px;
}

/* ─── Card ───────────────────────────────── */
.card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-card-hover); }
.card-hoverable:hover { transform: translateY(-2px); }

/* ─── Buttons ────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; font-size: 14px; font-weight: 500;
  border-radius: var(--radius-md); padding: 9px 18px;
  cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  border: 1px solid transparent; white-space: nowrap;
  line-height: 1.4; text-decoration: none; font-family: inherit;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.btn-primary  { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-primary:focus { box-shadow: var(--shadow-glow-red); }

.btn-secondary { background: #fff; color: var(--color-text-primary); border-color: var(--color-border-medium); }
.btn-secondary:hover { background: var(--color-bg-secondary); }

.btn-ghost { background: transparent; color: var(--color-primary); border-color: transparent; }
.btn-ghost:hover { background: var(--color-primary-50); }

.btn-accent { background: var(--color-accent); color: var(--color-text-primary); border-color: var(--color-accent); }
.btn-accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }

.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover { background: #b91c1c; }

.btn-outline-primary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background: var(--color-primary-50); }

.btn-xs  { font-size: 11px; padding: 4px 10px; border-radius: var(--radius-sm); gap: 4px; }
.btn-sm  { font-size: 12px; padding: 6px 12px; border-radius: var(--radius-sm); }
.btn-lg  { font-size: 16px; padding: 12px 24px; border-radius: var(--radius-lg); }
.btn-xl  { font-size: 17px; padding: 14px 30px; border-radius: var(--radius-lg); }
.btn-icon { padding: 9px; }
.btn-icon.btn-sm { padding: 6px; }

.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin-top: -8px; margin-left: -8px;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.btn-loading.btn-secondary::after,
.btn-loading.btn-ghost::after,
.btn-loading.btn-outline-primary::after {
  border-color: rgba(0,0,0,0.15); border-top-color: var(--color-primary);
}

/* ─── Badges ─────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 11px; font-weight: 600;
  border-radius: var(--radius-full); white-space: nowrap; line-height: 1.4;
}
.badge-primary { background: var(--color-primary-100); color: var(--color-primary); }
.badge-accent  { background: #fffbeb; color: #92400e; }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge-gray    { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.badge-dark    { background: var(--color-text-primary); color: #fff; }
.badge-sm      { font-size: 10px; padding: 1px 7px; }
.badge-lg      { font-size: 12px; padding: 4px 12px; font-weight: 600; }

/* ─── Formularze ─────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 6px; }
.form-label .req { color: var(--color-danger); margin-left: 2px; }
.form-input {
  display: block; width: 100%; padding: 9px 12px;
  font-size: 14px; color: var(--color-text-primary);
  background: #fff; border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none; font-family: inherit;
}
.form-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(141,17,24,0.12); }
.form-input.is-success { border-color: var(--color-success); }
.form-input.is-success:focus { box-shadow: 0 0 0 3px rgba(22,163,74,0.12); }
.form-input.is-warning { border-color: var(--color-warning); }
.form-input.is-error   { border-color: var(--color-danger); }
.form-input.is-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.form-input:disabled { background: var(--color-bg-tertiary); color: var(--color-text-muted); cursor: not-allowed; }
.form-helper { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.form-hint   { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.4; }
.form-error { font-size: 12px; color: var(--color-danger); margin-top: 4px; display: none; align-items: center; gap: 4px; }
.form-error.visible { display: flex; }
.form-success-msg { font-size: 12px; color: var(--color-success); margin-top: 4px; display: none; align-items: center; gap: 4px; }
.form-success-msg.visible { display: flex; }

.input-wrap { position: relative; }
.input-icon-l, .input-icon-r {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); display: flex; align-items: center;
}
.input-icon-l { left: 10px; pointer-events: none; }
.input-icon-r {
  right: 10px; cursor: pointer; z-index: 10;
  /* Reset browser default button styles — działa i dla <span> i dla <button> */
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; line-height: 0; color: var(--color-text-muted);
}
.input-wrap.has-l .form-input { padding-left: 36px; }
.input-wrap.has-r .form-input { padding-right: 36px; }

/* Ukryj natywny przycisk ujawniania hasła w przeglądarkach */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

/* Siła hasła */
.password-strength { display: block; min-height: 20px; }
.pw-bars { display: flex; gap: 4px; margin-bottom: 4px; }
.pw-bar { height: 4px; flex: 1; background: var(--color-border); border-radius: var(--radius-full); transition: background var(--transition-base); }
.pw-bar.weak   { background: var(--color-danger); }
.pw-bar.fair   { background: var(--color-warning); }
.pw-bar.good   { background: #84cc16; }
.pw-bar.strong { background: var(--color-success); }

/* Custom Checkbox/Radio */
.custom-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; }
.custom-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box {
  flex-shrink: 0; width: 18px; height: 18px;
  border: 2px solid var(--color-border-medium); border-radius: 4px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: background-color var(--transition-fast), border-color var(--transition-fast); margin-top: 1px;
}
.check-svg { display: block; opacity: 0; transition: opacity var(--transition-fast); }
.check-svg polyline, .check-svg path { stroke: #fff; }
/* Stan aktywny zarządzany przez JS (klasa .is-checked) */
.custom-check.is-checked .check-box { background: var(--color-primary); border-color: var(--color-primary); }
.custom-check.is-checked .check-box .check-svg { opacity: 1; }
.custom-check:hover .check-box { border-color: var(--color-primary); }
/* Radio */
.custom-check input[type="radio"] ~ .check-box { border-radius: 50%; }
.custom-check.is-checked input[type="radio"] ~ .check-box { border-color: var(--color-primary); background: #fff; }
.custom-check.is-checked input[type="radio"] ~ .check-box::after { content: ''; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; }
.check-label { font-size: 14px; color: var(--color-text-primary); line-height: 1.5; }

/* Toggle Switch — pełna definicja w sekcji reservation poniżej (linia ~903) */
.toggle-label { font-size: 14px; color: var(--color-text-primary); }

/* Segmented */
.segmented {
  display: inline-flex; position: relative;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 3px; gap: 2px;
}
/* Sliding white pill — moved by JS */
.seg-indicator {
  position: absolute;
  top: 3px; left: 3px;
  height: calc(100% - 6px);
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  pointer-events: none;
  z-index: 0;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              width    220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.seg-btn {
  position: relative; z-index: 1;
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: 6px; cursor: pointer; user-select: none; white-space: nowrap;
  background: transparent;
  transition: color 160ms ease;
}
.seg-btn:hover { color: var(--color-text-primary); }
.seg-btn.active { color: var(--color-primary); }

/* Tag Input */
.tag-input-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px 10px; border: 1px solid var(--color-border-medium); border-radius: var(--radius-md); background: #fff; cursor: text; min-height: 42px; align-items: center; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tag-input-wrap:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(141,17,24,0.12); }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--color-primary-100); color: var(--color-primary); padding: 3px 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; }
.tag-chip-rm { cursor: pointer; opacity: 0.6; display: flex; align-items: center; }
.tag-chip-rm:hover { opacity: 1; }
.tag-input-field { border: none; outline: none; font-size: 14px; min-width: 120px; flex: 1; color: var(--color-text-primary); background: transparent; font-family: inherit; }

/* Custom Select */
.select-wrap { position: relative; }
.select-wrap::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--color-text-muted); pointer-events: none; }
.select-wrap select { appearance: none; -webkit-appearance: none; }

/* File Upload */
.file-zone { border: 2px dashed var(--color-border-medium); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; cursor: pointer; transition: all var(--transition-fast); background: var(--color-bg-secondary); }
.file-zone-photo { min-width: 200px; }
.file-zone:hover, .file-zone.dragover { border-color: var(--color-primary); background: var(--color-primary-50); }
.file-zone input[type="file"] { display: none; }

/* Photo Preview (aktualne zdjęcie obok file-zone, side-by-side) */
.photo-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 16px; flex-shrink: 0; min-width: 160px; }
.photo-preview-img { width: 160px; height: 120px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); display: block; }
.photo-preview-label { font-size: 11px; font-weight: 500; color: var(--color-text-muted); text-align: center; }

/* Przełącznik trybu (mode switcher) — np. "Wpisz ręcznie / Wybierz przedstawiciela" */
.individual-mode-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--color-text-secondary); background: transparent; border: none; cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; }
.individual-mode-btn:hover { color: var(--color-text-primary); }
.individual-mode-btn.active { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-card); }

/* File Button (stylowy przycisk do wyboru pliku) */
.file-btn { display: flex; align-items: center; gap: 6px; padding: 9px 12px; line-height: 1.5; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border-medium); color: var(--color-text-secondary); font-size: 14px; font-weight: 400; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); width: 100%; font-family: inherit; }
.file-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.file-btn input[type="file"] { display: none; }

/* Gallery Thumbs (podgląd zdjęć galerii po wybraniu plików) */
.gallery-preview-grid { }
.gallery-thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb-rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(0,0,0,0.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition-fast); border: none; padding: 0; }
.gallery-thumb-rm:hover { background: var(--color-danger); }
.gallery-thumb-rm svg { display: block; }
.gallery-thumb-name { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.45); font-size: 10px; color: #fff; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Alerty ─────────────────────────────── */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid; font-size: 14px; line-height: 1.5; }
.alert-success { background: var(--color-success-bg); border-color: #86efac; color: #15803d; }
.alert-warning  { background: var(--color-warning-bg); border-color: #fcd34d; color: #92400e; }
.alert-danger   { background: var(--color-danger-bg);  border-color: #fca5a5; color: #991b1b; }
.alert-info     { background: var(--color-info-bg);    border-color: #93c5fd; color: #1e40af; }
.alert-icon     { flex-shrink: 0; margin-top: 1px; }
.alert-title    { font-weight: 600; margin-bottom: 2px; }
.alert-dismiss  { margin-left: auto; flex-shrink: 0; cursor: pointer; opacity: 0.6; transition: opacity var(--transition-fast); }
.alert-dismiss:hover { opacity: 1; }

/* ─── Toast ──────────────────────────────── */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 380px; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); border-left: 4px solid; font-size: 14px; pointer-events: all; animation: toast-slide-in 0.35s ease; transition: opacity 0.3s ease, transform 0.3s ease; max-width: 380px; }
.toast.hiding { opacity: 0; transform: translateX(100%); }
.toast-success { border-left-color: var(--color-success); }
.toast-warning { border-left-color: var(--color-warning); }
.toast-danger  { border-left-color: var(--color-danger); }
.toast-info    { border-left-color: var(--color-info); }
.toast-icon    { flex-shrink: 0; margin-top: 1px; }
.toast-icon.success { color: var(--color-success); }
.toast-icon.warning { color: var(--color-warning); }
.toast-icon.danger  { color: var(--color-danger); }
.toast-icon.info    { color: var(--color-info); }
.toast-title   { font-weight: 600; color: var(--color-text-primary); margin-bottom: 2px; }
.toast-msg     { color: var(--color-text-secondary); font-size: 13px; }
.toast-close   { margin-left: auto; flex-shrink: 0; cursor: pointer; color: var(--color-text-muted); transition: color var(--transition-fast); }
.toast-close:hover { color: var(--color-text-primary); }

/* ─── Modal ──────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.modal-opening { animation: fade-in 0.2s ease; }
.modal-overlay.hidden { display: none; }
.modal-box { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; animation: modal-in 0.25s ease; }
.modal-box.modal-lg { max-width: 760px; }
.modal-box.modal-sm { max-width: 400px; }
.modal-box.modal-xl { max-width: 960px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; margin-bottom: 16px; }
.modal-title  { font-size: 17px; font-weight: 700; color: var(--color-text-primary); }
.modal-close  { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); cursor: pointer; color: var(--color-text-muted); transition: all var(--transition-fast); }
.modal-close:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }
.modal-body   { padding: 0 24px 20px; font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--color-border); }

/* ─── Drawer ─────────────────────────────── */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; animation: fade-in 0.2s ease; }
.drawer-overlay.hidden { display: none; }
.drawer-panel { position: fixed; top: 0; right: 0; height: 100%; width: 460px; max-width: 95vw; background: #fff; box-shadow: -8px 0 40px rgba(0,0,0,0.15); z-index: 1001; display: flex; flex-direction: column; animation: drawer-in 0.3s ease; overflow: hidden; }
.drawer-panel.hidden { display: none; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.drawer-title  { font-size: 16px; font-weight: 700; color: var(--color-text-primary); }
.drawer-body   { flex: 1; overflow-y: auto; padding: 24px; }
.drawer-footer { padding: 16px 24px; border-top: 1px solid var(--color-border); flex-shrink: 0; display: flex; gap: 10px; justify-content: flex-end; }

/* ─── Tooltip ────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]::before { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: var(--radius-md); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast); z-index: 300; }
[data-tip]::after { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1f2937; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast); z-index: 300; }
[data-tip]:hover::before, [data-tip]:hover::after { opacity: 1; }

/* ─── Popover ────────────────────────────── */
.popover-wrap { position: relative; display: inline-block; }
.popover-panel { position: absolute; z-index: 200; top: calc(100% + 8px); left: 0; min-width: 200px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-dropdown); padding: 6px 0; animation: fade-in 0.15s ease; display: none; }
.popover-panel.right { left: auto; right: 0; }
.popover-panel.open  { display: block; }
.popover-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; color: var(--color-text-primary); cursor: pointer; transition: background var(--transition-fast); }
.popover-item:hover { background: var(--color-bg-secondary); }
.popover-item.danger { color: var(--color-danger); }
.popover-item.danger:hover { background: var(--color-danger-bg); }
.popover-sep { height: 1px; background: var(--color-border); margin: 6px 0; }

/* ─── Taby ───────────────────────────────── */
.tabs-nav { display: flex; border-bottom: 2px solid var(--color-border); gap: 2px; }
.tab-item { padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition-fast); white-space: nowrap; display: flex; align-items: center; gap: 6px; user-select: none; }
.tab-item:hover { color: var(--color-primary); }
.tab-item.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-content { display: none; padding: 4px 0; }
.tab-content.tab-animate { animation: fade-in 0.18s ease; }
.tab-content.active { display: block; }
.tabs-pills { display: flex; flex-wrap: wrap; gap: 2px; background: #f3f4f6; border-radius: var(--radius-lg); padding: 4px; margin-bottom: 20px; width: fit-content; max-width: 100%; }
.tab-pill { padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; user-select: none; background: transparent; transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease; display: flex; align-items: center; gap: 6px; }
.tab-pill:hover { color: var(--color-text-primary); }
.tab-pill.active { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-card); }

/* ─── Accordion ──────────────────────────── */
.accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 8px; }
.accordion-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--color-text-primary); background: #fff; transition: background var(--transition-fast); user-select: none; }
.accordion-hdr:hover { background: var(--color-bg-secondary); }
.accordion-icon { color: var(--color-text-muted); transition: transform var(--transition-fast); flex-shrink: 0; }
.accordion-item.open .accordion-icon { transform: rotate(180deg); }
.accordion-body { display: none; padding: 16px 18px; font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; border-top: 1px solid var(--color-border); }
.accordion-item.open .accordion-body { display: block; animation: fade-in 0.2s ease; }

/* ─── Tabela ─────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table thead th { background: var(--color-bg-secondary); padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.data-table thead th[data-sort] { cursor: pointer; user-select: none; }
.data-table thead th[data-sort]:hover { background: var(--color-bg-tertiary); }
.data-table thead th.asc::after  { content: ' ↑'; color: var(--color-primary); }
.data-table thead th.desc::after { content: ' ↓'; color: var(--color-primary); }
.data-table tbody tr { border-bottom: 1px solid var(--color-border); transition: background var(--transition-fast); }
.data-table tbody tr:hover { background: var(--color-bg-secondary); }
.data-table tbody td { padding: 12px 14px; color: var(--color-text-primary); vertical-align: middle; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr.is-last-visible { border-bottom: none; }
/* Stałe szerokości kolumn — zapobiega „skakaniu" kolumn przy filtrowaniu/sortowaniu.
   Stosuj z <colgroup> definiującym szerokości. */
.data-table.table-fixed { table-layout: fixed; }
.data-table.table-fixed td { overflow: hidden; text-overflow: ellipsis; }

/* ─── Avatar ─────────────────────────────── */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; color: #fff; flex-shrink: 0; background: var(--color-primary); position: relative; overflow: hidden; }
.av-xs  { width: 24px;  height: 24px;  font-size: 10px; }
.av-sm  { width: 32px;  height: 32px;  font-size: 12px; }
.av-md  { width: 40px;  height: 40px;  font-size: 14px; }
.av-lg  { width: 52px;  height: 52px;  font-size: 18px; }
.av-xl  { width: 64px;  height: 64px;  font-size: 22px; }
.av-2xl { width: 80px;  height: 80px;  font-size: 26px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.av-status { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; }
.av-status.online  { background: var(--color-success); }
.av-status.offline { background: var(--color-text-muted); }
.av-status.busy    { background: var(--color-danger); }
.av-status.away    { background: var(--color-warning); }
.avatar-group { display: flex; }
.avatar-group .avatar { border: 2px solid #fff; margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }
.av-grad-1 { background: linear-gradient(135deg, #8d1118, #b5262f); }
.av-grad-2 { background: linear-gradient(135deg, #ffd100, #e6bc00); color: #111; }
.av-grad-3 { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.av-grad-4 { background: linear-gradient(135deg, #16a34a, #22c55e); }
.av-grad-5 { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.av-grad-6 { background: linear-gradient(135deg, #0891b2, #06b6d4); }

/* ─── Skeleton ───────────────────────────── */
.skeleton { background: linear-gradient(90deg, #f1f3f5 25%, #e9ecef 50%, #f1f3f5 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; border-radius: var(--radius-md); }

/* ─── Spinner ────────────────────────────── */
.spinner { display: inline-block; border-radius: 50%; border: 2px solid var(--color-border); border-top-color: var(--color-primary); animation: spin 0.75s linear infinite; }
.sp-sm { width: 16px; height: 16px; }
.sp-md { width: 24px; height: 24px; border-width: 3px; }
.sp-lg { width: 36px; height: 36px; border-width: 3px; }
.sp-xl { width: 48px; height: 48px; border-width: 4px; }

/* ─── Progress Bar ───────────────────────── */
.progress-wrap { background: var(--color-bg-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-primary); transition: width 0.9s ease; }
.progress-fill.p-accent   { background: var(--color-accent); }
.progress-fill.p-success  { background: var(--color-success); }
.progress-fill.p-warning  { background: var(--color-warning); }
.progress-fill.p-danger   { background: var(--color-danger); }
.progress-fill.p-gradient { background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }

/* Stepper */
.stepper { display: flex; align-items: flex-start; }
.stepper-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; position: relative; }
.stepper-step:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--color-border); z-index: 0; }
.stepper-step.done:not(:last-child)::after { background: var(--color-primary); }
.step-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-border-medium); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--color-text-muted); position: relative; z-index: 1; transition: all var(--transition-base); }
.stepper-step.done   .step-dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.stepper-step.active .step-dot { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 0 4px rgba(141,17,24,0.12); }
.step-lbl { font-size: 11px; font-weight: 500; color: var(--color-text-muted); text-align: center; }
.stepper-step.active .step-lbl { color: var(--color-primary); font-weight: 600; }
.stepper-step.done   .step-lbl { color: var(--color-text-secondary); }

/* Circular Progress */
.circ-progress { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.circ-progress svg { transform: rotate(-90deg); }
.circ-value { position: absolute; font-size: 14px; font-weight: 700; color: var(--color-text-primary); }

/* ─── Pagination ─────────────────────────── */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; }
.breadcrumb a { color: var(--color-primary); transition: opacity var(--transition-fast); }
.breadcrumb a:hover { opacity: 0.75; }
.breadcrumb-sep { color: var(--color-text-muted); }
.breadcrumb-cur { color: var(--color-text-secondary); }
.pagination { display: flex; align-items: center; gap: 4px; }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; font-size: 13px; font-weight: 500; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.pg-btn:hover { background: var(--color-bg-secondary); border-color: var(--color-border-medium); }
.pg-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pg-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ─── Search Suggestions ─────────────────── */
.search-wrap { position: relative; }
.search-sug { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-dropdown); z-index: 100; overflow: hidden; display: none; }
.search-sug.open { display: block; }
.sug-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; cursor: pointer; transition: background var(--transition-fast); color: var(--color-text-primary); }
.sug-item:hover, .sug-item.sel { background: var(--color-bg-secondary); }
.sug-meta { font-size: 11px; color: var(--color-text-muted); margin-left: auto; }

/* Range Slider */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--color-bg-tertiary); border-radius: var(--radius-full); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: transform var(--transition-fast); }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* ─── Stat Card ──────────────────────────── */
.stat-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); }
.stat-val  { font-size: 30px; font-weight: 800; color: var(--color-text-primary); line-height: 1.1; }
.stat-lbl  { font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.stat-chg  { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; margin-top: 10px; }
.stat-chg.up   { color: var(--color-success); }
.stat-chg.down { color: var(--color-danger); }

/* ─── Empty State ────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.empty-icon  { width: 64px; height: 64px; background: var(--color-bg-secondary); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--color-text-muted); }
.empty-title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; }
.empty-desc  { font-size: 14px; color: var(--color-text-secondary); max-width: 300px; line-height: 1.6; margin-bottom: 20px; }

/* ─── Color Swatch ───────────────────────── */
.color-swatch { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.swatch-preview { height: 72px; }
.swatch-info    { padding: 10px 12px; background: #fff; }
.swatch-name    { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.swatch-hex     { font-size: 12px; color: var(--color-text-muted); font-family: monospace; }

/* ─── Drag & drop ────────────────────────── */
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }
.drop-zone { transition: all var(--transition-fast); }
.drop-zone.drag-over { box-shadow: 0 0 0 2px var(--color-primary); }

/* ─── Shadow tokens ──────────────────────── */
.shadow-token-sm     { box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.shadow-token-base   { box-shadow: var(--shadow-card); }
.shadow-token-md     { box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
.shadow-token-lg     { box-shadow: var(--shadow-card-hover); }
.shadow-token-xl     { box-shadow: var(--shadow-modal); }
.shadow-token-glow-r { box-shadow: 0 0 20px rgba(141,17,24,0.35); }
.shadow-token-glow-g { box-shadow: 0 0 20px rgba(255,209,0,0.5); }

/* ─── Animacje ───────────────────────────── */
@keyframes fade-in        { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-up     { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-in       { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes drawer-in      { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes toast-slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin           { to { transform: rotate(360deg); } }
@keyframes shimmer        { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulse-glow     { 0% { box-shadow: 0 0 0 0 rgba(141,17,24,0.4); } 70% { box-shadow: 0 0 0 10px rgba(141,17,24,0); } 100% { box-shadow: 0 0 0 0 rgba(141,17,24,0); } }
@keyframes bounce-in      { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }

.anim-fade-in   { animation: fade-in 0.4s ease; }
.anim-fade-up   { animation: fade-in-up 0.4s ease; }
.anim-pulse     { animation: pulse-glow 2s infinite; }
.anim-bounce-in { animation: bounce-in 0.4s ease; }

/* ─── Notification Badge (bombelek) ─────── */
.notif-wrap {
  position: relative;
  display: inline-block;
  padding-top: 6px; padding-right: 6px;
}

/* Icon container — iOS-style app icon */
.notif-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.10);
  flex-shrink: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.notif-icon-wrap:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.12); }

/* Badge bubble */
.notif-badge {
  position: absolute; top: 0; right: 0;
  min-width: 19px; height: 19px;
  background: var(--color-danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border: 2px solid #f8f9fa;
  box-shadow: 0 1px 5px rgba(0,0,0,0.22);
  white-space: nowrap; pointer-events: none; z-index: 10;
  letter-spacing: -0.3px;
}
.notif-badge.nb-accent  { background: var(--color-accent); color: #1a1a1a; border-color: #f8f9fa; }
.notif-badge.nb-success { background: var(--color-success); color: #fff; }
.notif-badge.nb-warning { background: var(--color-warning); color: #fff; }
.notif-badge.nb-info    { background: var(--color-info); color: #fff; }
.notif-badge.nb-primary { background: var(--color-primary); color: #fff; }
.notif-badge.nb-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -2px; right: -2px; font-size: 0; }
/* nb-inline — bombelek w menu bocznym (nie absolute, tylko inline) */
.nb-inline { position: static; border: none; border-radius: var(--radius-full); box-shadow: none; font-size: 11px; height: 18px; }


/* ─── Option Card (radio card selector) ─── */
.option-cards { display: flex; flex-direction: column; gap: 10px; }
.option-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  background: #fff;
  user-select: none;
}
.option-card:hover {
  border-color: var(--color-primary-light);
  background: var(--color-primary-50);
  box-shadow: 0 2px 8px rgba(141,17,24,0.06);
}
.option-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  box-shadow: 0 2px 10px rgba(141,17,24,0.10);
}
.option-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; left: 0; top: 0; }
.option-card-radio {
  flex-shrink: 0; width: 18px; height: 18px;
  border: 2px solid var(--color-border-medium); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 200ms ease;
}
.option-card:hover .option-card-radio { border-color: var(--color-primary-light); }
.option-card.selected .option-card-radio {
  border-color: var(--color-primary);
  background: #fff;
}
.option-card.selected .option-card-radio::after {
  content: ''; display: block;
  width: 8px; height: 8px;
  background: var(--color-primary); border-radius: 50%;
}
.option-card-body { flex: 1; min-width: 0; }
.option-card-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); line-height: 1.4; }
.option-card-desc  { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.5; }
.option-card-right {
  flex-shrink: 0; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.option-card-price { font-size: 16px; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.option-card-price.price-free { color: var(--color-success); }
.option-card-footer { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.option-card-pdf {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: var(--color-info);
  text-decoration: none;
  background: var(--color-info-bg); border: 1px solid #bfdbfe;
  padding: 3px 8px; border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.option-card-pdf:hover { background: #dbeafe; text-decoration: none; }

/* ─── Select2 (searchable dropdown) ─────── */
.sel2-wrap { position: relative; }
.sel2-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px;
  font-size: 14px; color: var(--color-text-primary);
  background: #fff; border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  cursor: pointer; user-select: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 42px;
}
.sel2-trigger:hover { border-color: var(--color-primary); }
.sel2-trigger.open { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(141,17,24,0.12); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.sel2-placeholder { color: var(--color-text-muted); }
.sel2-value-area { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sel2-arrow { flex-shrink: 0; color: var(--color-text-muted); transition: transform var(--transition-fast); }
.sel2-trigger.open .sel2-arrow { transform: rotate(180deg); }
.sel2-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--color-primary);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  z-index: 300; display: none; overflow: hidden;
}
.sel2-dropdown.open { display: block; animation: fade-in 0.15s ease; }
.sel2-search-box {
  padding: 8px 10px; border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 6px;
}
.sel2-search-box input {
  width: 100%; border: none; outline: none; font-size: 13px;
  color: var(--color-text-primary); background: transparent; font-family: inherit;
}
.sel2-list { max-height: 240px; overflow-y: auto; }
.sel2-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; font-size: 13px; cursor: pointer;
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast);
}
.sel2-item:hover { background: var(--color-bg-secondary); }
.sel2-item.sel2-selected { background: var(--color-primary-50); color: var(--color-primary); font-weight: 500; }
.sel2-check-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-primary); opacity: 0; }
.sel2-item.sel2-selected .sel2-check-icon { opacity: 1; }
.sel2-empty { padding: 14px 12px; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.sel2-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-primary-100); color: var(--color-primary);
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.sel2-tag-rm { cursor: pointer; opacity: 0.65; display: flex; align-items: center; line-height: 1; }
.sel2-tag-rm:hover { opacity: 1; }
.sel2-count { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.sel2-item-meta { font-size: 11px; color: var(--color-text-muted); margin-left: auto; }


/* ─── Alerty systemowe PHP → showToast() ──────────────────────
   alerts.php wyzwala showToast() zamiast renderować div-y.
   Klasy .success-message / .error-message nie są już używane.
   ──────────────────────────────────────────────────────────── */

/* ─── Fix: showhide() na elementach <div> — wymuś kolumnę ──── */
/* scripts.js zawsze ustawia display:flex. Dla div-kontenerów    */
/* (dodaj użytkownika) wymuszamy flex-col żeby dzieci            */
/* wypełniały pełną szerokość.                                   */
[class*="account_add_box"] {
  flex-direction: column;
  width: 100%;
}


/* ─── Page Header Icon ───────────────────── */
.page-header-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-xl);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}

/* ─── Responsywność sidebar ──────────────── */
@media (max-width: 1023px) {
  #sidebar { transform: translateX(-100%); transition: transform var(--transition-base); }
  #sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,0.15); }
  .main-content { margin-left: 0 !important; }
}


/* ═══════════════════════════════════════════════════════
   FORMULARZ REZERWACJI (standalone pages)
   Klasy stosowane wyłącznie w modules/reservations/
   ═══════════════════════════════════════════════════════ */

/* Font Inter na stronach rezerwacji (ładowany przez reservation-head.php) */
.reservation-body { font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; }

/* Linia paska kroków */
.res-step-line,
.step-line { height: 1px; background: #e5e7eb; flex: 1; }

/* ═══════════════════════════════════════════════════════
   FORMULARZE REZERWACJI – dedykowane klasy (step-1 … step-5)
   Strony klientów mają inny visual niż panel ERP.
   Użycie: res-label, res-input, res-input-wrap
   ═══════════════════════════════════════════════════════ */

/* Label – uppercase, tracking, semibold. Identycznie jak oryginał:
   text-xs font-semibold text-gray-700 uppercase tracking-widest */
.res-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #374151;
  margin-bottom: 6px;
}
.res-label .req { color: #dc2626; margin-left: 2px; }

/* Input – większy padding niż globalny form-input.
   Identycznie jak oryginał: px-4 py-3 (16px/12px) */
.res-input {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  color: #111;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.res-input::placeholder { color: #9ca3af; opacity: 1; }
.res-input:focus {
  border-color: #8D1118;
  box-shadow: 0 0 0 3px rgba(141,17,24,0.12);
}
.res-input.error {
  border-color: #dc2626 !important;
  background-color: #fef2f2;
}
.res-input:disabled { background: #f1f3f5; color: #9ca3af; cursor: not-allowed; }

/* Input z ikoną po lewej */
.res-input-wrap { position: relative; }
.res-input-wrap .res-input { padding-left: 44px; }
.res-input-wrap .res-icon {
  position: absolute;
  top: 50%; left: 14px;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  display: flex; align-items: center;
}

/* Input z ikoną po prawej (datepicker) */
.res-input-wrap.has-r .res-input { padding-right: 44px; padding-left: 16px; }
.res-input-wrap.has-r .res-icon { left: auto; right: 14px; }

/* ── Select kierunkowy (dial) – appearance: none + własna strzałka ── */
.dial-code-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 12px 32px 12px 12px; /* py-3, pl-3, pr zostawia miejsce na strzałkę */
  flex-shrink: 0;
  width: 100%; /* wypełnia wrapper o stałej szerokości (Tailwind w-[108px]) */
  font-size: 14px;
}

/* ── Focus ring dla inputów rezerwacji ── */
.reservation-body input:focus,
.reservation-body select:focus,
.reservation-body textarea:focus {
  outline: none;
  border-color: #8D1118 !important;
  box-shadow: 0 0 0 3px rgba(141,17,24,0.1);
}

/* ── Stan błędu ── */
.reservation-body input.error,
.reservation-body select.error,
.reservation-body textarea.error {
  border-color: #dc2626 !important;
  background-color: #fef2f2;
}

/* ── Komunikat błędu pod polem ── */
.error-msg { display: block; color: #dc2626; font-size: 11px; margin-top: 4px; line-height: 1.4; transition: all 0.2s ease; }

/* ── Toggle switch ─────────────────────────────────── */
.toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.toggle-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  background: #d1d5db;
  border-radius: 9999px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}
.toggle-track::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 9999px;
  margin: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}
.toggle-wrap input[type="checkbox"]:checked ~ .toggle-track { background: #8D1118; }
.toggle-wrap input[type="checkbox"]:checked ~ .toggle-track::after { transform: translateX(20px); }
/* Mały toggle (bezterminowy) */
.toggle-track-sm { width: 36px; height: 20px; }
.toggle-track-sm::after { width: 14px; height: 14px; }
.toggle-wrap input[type="checkbox"]:checked ~ .toggle-track-sm::after { transform: translateX(16px); }

/* ── Radio karty ─────────────────────────────────── */
.radio-card { display: block; cursor: pointer; }
.radio-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-face {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 12px 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}
.radio-face:hover { border-color: #d1d5db; }
.radio-dot {
  width: 16px; height: 16px;
  border-radius: 9999px;
  border: 2px solid #d1d5db;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.radio-card input[type="radio"]:checked + .radio-face { border-color: #8D1118; background-color: #fdf2f3; }
.radio-card input[type="radio"]:checked + .radio-face .radio-dot {
  border-color: #8D1118; background-color: #8D1118; box-shadow: inset 0 0 0 3px #fff;
}

/* ── Karty pokoi (krok 3) ────────────────────────── */
.room-card { display: block; cursor: pointer; position: relative; }
.room-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.room-face {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 14px 16px; height: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.room-face:hover { border-color: #d1d5db; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.room-dot {
  width: 16px; height: 16px;
  border-radius: 9999px; border: 2px solid #d1d5db; flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.room-card input[type="radio"]:checked + .room-face { border-color: #8D1118; background-color: #fdf2f3; }
.room-card input[type="radio"]:checked + .room-face .room-dot {
  border-color: #8D1118; background-color: #8D1118; box-shadow: inset 0 0 0 3px #fff;
}

/* ── Animacje kart uczestników ───────────────────── */
.participant-card { animation: p-slide-down 0.25s ease; }
@keyframes p-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.participant-room-block { animation: p-fade-in 0.2s ease; }
@keyframes p-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Alert ostrzegawczy ──────────────────────────── */
.alert-warning {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
}

/* ── Sekcje faktury (JS hook – show/hide przez .hidden) ── */
.invoice-section { /* grupowanie – widoczność sterowana klasą Tailwind .hidden */ }

/* ── Przełącznik faktura (krok 4) ────────────────── */
.invoice-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 8px;
  border: 1px solid #e5e7eb; font-size: 14px; font-weight: 500;
  color: #6b7280; background: #fff; cursor: pointer;
  transition: all 0.15s ease; flex: 1; justify-content: center;
}
.invoice-tab:hover { border-color: #d1d5db; color: #111; }
.invoice-tab.active { border-color: #8D1118; background-color: #fdf2f3; color: #8D1118; font-weight: 600; }
.invoice-tab .tab-dot {
  width: 14px; height: 14px; border-radius: 9999px;
  border: 2px solid currentColor; flex-shrink: 0; position: relative;
  transition: background-color 0.15s ease;
}
.invoice-tab.active .tab-dot::after {
  content: ''; position: absolute; inset: 2px;
  border-radius: 9999px; background: #8D1118;
}
@media (max-width: 639px) {
  .invoice-tab { width: 100%; justify-content: flex-start; }
}

/* ── Wiersz podsumowania (krok 5) ────────────────── */
.summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 8px 0;
  border-bottom: 1px solid #f3f4f6; font-size: 13px;
}
.summary-row:last-child { border-bottom: none; }
.summary-label { color: #374151; flex-shrink: 1; word-break: break-word; min-width: 0; }
.summary-value { color: #111; font-weight: 500; text-align: right; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) { .summary-value { white-space: normal; max-width: 55%; } }

/* ── Zgody (krok 5) ──────────────────────────────── */
/* .consent-individual – JS hook dla "zaznacz wszystkie", brak własnych styli */
.consent-individual { /* selector used by initStep5Form consent_all toggle */ }

.consent-wrap {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid #f3f4f6;
}
.consent-wrap:last-child { border-bottom: none; }
.consent-checkbox {
  width: 18px; height: 18px;
  border: 2px solid #d1d5db; border-radius: 4px;
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; cursor: pointer; margin-top: 2px;
  transition: border-color 0.15s, background-color 0.15s;
  position: relative;
}
.consent-checkbox:checked { background-color: #8D1118; border-color: #8D1118; }
.consent-checkbox:checked::after {
  content: ''; position: absolute;
  left: 3px; top: 0px; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg);
}
.consent-checkbox:focus { outline: none; box-shadow: 0 0 0 3px rgba(141,17,24,0.15); }
.consent-checkbox.error-check { border-color: #dc2626; background-color: #fef2f2; }

/* ── Blok płatności / przycisk rezerwacji ─────────── */
.payment-highlight {
  background: linear-gradient(135deg, #fdf2f3 0%, #fff 60%);
  border: 1px solid #e8c5c7; border-radius: 12px;
}
.btn-reserve { box-shadow: 0 4px 24px rgba(141,17,24,0.25); }

/* ── Flatpickr – motyw Frater (globalny – ERP + formularz rezerwacji) ──────── */
@media (max-width: 640px) {
  .flatpickr-calendar {
    position: fixed !important; bottom: 0 !important; left: 0 !important;
    right: 0 !important; top: auto !important; transform: none !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important; z-index: 9999 !important;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.18) !important;
  }
}
/* Globalny styl kalendarza – działa w ERP i na stronach rezerwacji */
.flatpickr-calendar {
  font-family: 'Inter', system-ui, sans-serif !important;
  background: #fff !important; border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; border-radius: 8px !important;
}
.flatpickr-day { color: #111 !important; border-radius: 4px !important; }
.flatpickr-day:hover { background: #8D1118 !important; color: #fff !important; border-color: #8D1118 !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: #8D1118 !important; border-color: #8D1118 !important; color: #fff !important; }
.flatpickr-day.today { border-color: #8D1118 !important; color: #8D1118 !important; font-weight: 600; }
.flatpickr-months { background: #f9fafb !important; border-radius: 8px 8px 0 0 !important; border-bottom: 1px solid #e5e7eb !important; }
.flatpickr-month,
.flatpickr-current-month { color: #111 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: #111 !important; background: transparent !important; }
.flatpickr-weekday { color: #6b7280 !important; font-weight: 600 !important; }
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: #111 !important; }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: #8D1118 !important; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: #d1d5db !important; }

.reservation-body .flatpickr-calendar {
  font-family: 'Inter', system-ui, sans-serif !important;
  background: #fff !important; border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; border-radius: 8px !important;
}
.reservation-body .flatpickr-day { color: #111 !important; border-radius: 4px !important; }
.reservation-body .flatpickr-day:hover { background: #8D1118 !important; color: #fff !important; border-color: #8D1118 !important; }
.reservation-body .flatpickr-day.selected { background: #8D1118 !important; border-color: #8D1118 !important; color: #fff !important; }
.reservation-body .flatpickr-day.today { border-color: #8D1118 !important; color: #8D1118 !important; font-weight: 600; }
.reservation-body .flatpickr-months { background: #f9fafb !important; border-radius: 8px 8px 0 0 !important; border-bottom: 1px solid #e5e7eb !important; }
.reservation-body .flatpickr-month,
.reservation-body .flatpickr-current-month { color: #111 !important; }
.reservation-body .flatpickr-current-month .flatpickr-monthDropdown-months,
.reservation-body .flatpickr-current-month input.cur-year { color: #111 !important; background: transparent !important; }
.reservation-body .flatpickr-weekday { color: #6b7280 !important; font-weight: 600 !important; }
.reservation-body .flatpickr-prev-month svg,
.reservation-body .flatpickr-next-month svg { fill: #111 !important; }
.reservation-body .flatpickr-prev-month:hover svg,
.reservation-body .flatpickr-next-month:hover svg { fill: #8D1118 !important; }
.reservation-body .flatpickr-day.flatpickr-disabled,
.reservation-body .flatpickr-day.flatpickr-disabled:hover { color: #d1d5db !important; }

/* Pola textarea w formularzach rezerwacji */
.reservation-body textarea { resize: vertical; min-height: 72px; }

/* Suppress transitions na init strony krok 4 */
body.no-res-transitions * { transition: none !important; animation: none !important; }


/* ═══════════════════════════════════════════════════════
   WYDRUK REZERWACJI — print.php
   Klasy stosowane wyłącznie w modules/reservations/print.php
   ═══════════════════════════════════════════════════════ */

/* Nadpisanie body – czcionka i tło dla dokumentu druku */
.print-body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  color: #1a1a1a;
  background: #e8e8e8;
}

/* ── Pasek akcji (tylko ekran) ── */
.action-bar {
  position: sticky; top: 0; z-index: 100;
  background: #1f1f1f; padding: 10px 20px;
  display: flex; align-items: center; gap: 12px;
}
.btn-pdf {
  background: #8D1118; color: #fff; border: none;
  padding: 9px 22px; border-radius: 6px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
}
.btn-back {
  color: #aaa; text-decoration: none; font-size: 12px;
  padding: 9px 14px; border: 1px solid #555; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-back:hover { color: #fff; border-color: #aaa; }
.action-tip { margin-left: auto; font-size: 11px; color: #777; }

/* ── Strona A4 ── */
.page { max-width: 210mm; margin: 8mm auto; background: #fff; padding: 14mm 14mm 10mm; }

/* ── Nagłówek dokumentu ── */
.doc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5mm; }
.doc-header img { height: 13mm; width: auto; }
.doc-header-right { text-align: right; }
.doc-header-right h1 { font-size: 15pt; font-weight: 700; color: #8D1118; margin-bottom: 2px; }
.doc-header-right p { font-size: 8pt; color: #666; }

.rule-accent { border: none; border-top: 2.5px solid #8D1118; margin: 0 0 5mm; }
.rule        { border: none; border-top: 1px solid #ddd; margin: 4mm 0; }

/* ── Baner potwierdzenia ── */
.success-banner {
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px;
  padding: 8px 14px; margin-bottom: 5mm;
  font-size: 9pt; color: #166534; line-height: 1.6;
}
.success-banner strong { font-weight: 700; }

/* ── Sekcje ── */
.section { margin-bottom: 5mm; page-break-inside: avoid; break-inside: avoid; }
.section-head {
  background: #8D1118; color: #fff; padding: 4px 10px;
  font-size: 7.5pt; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; page-break-after: avoid; break-after: avoid;
}
.section-body { border: 1px solid #ddd; border-top: none; padding: 6px 10px; page-break-before: avoid; break-before: avoid; }
.section-body-flush { padding: 0; }
.section-head-participants { margin-bottom: 3mm; }

/* ── Wiersze danych ── */
.row { display: flex; gap: 6px; padding: 2.5px 0; border-bottom: 1px solid #f2f2f2; font-size: 8.5pt; line-height: 1.4; }
.row:last-child { border-bottom: none; }
.lbl { width: 95px; flex-shrink: 0; color: #4b5563; }
.val { font-weight: 600; color: #111; word-break: break-word; min-width: 0; }

/* ── Układ 2-kolumnowy wewnątrz sekcji ── */
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8mm; padding: 6px 10px; }
.fields-col  { min-width: 0; }

/* ── Siatka uczestników (2 na wiersz) ── */
.participants-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; margin-bottom: 5mm; }
.p-card-full { grid-column: 1 / -1; }

/* ── Karta uczestnika ── */
.p-card  { border: 1px solid #ccc; page-break-inside: avoid; break-inside: avoid; }
.p-head  { background: #f7f7f7; border-bottom: 1px solid #ccc; padding: 4px 8px; display: flex; align-items: center; gap: 7px; }
.p-num   { width: 18px; height: 18px; border-radius: 50%; background: #8D1118; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 7pt; font-weight: 700; flex-shrink: 0; }
.p-name  { font-size: 9pt; font-weight: 700; }
.p-body  { padding: 5px 8px; }
.p-col-head { font-size: 7pt; text-transform: uppercase; letter-spacing: 0.07em; color: #4b5563; font-weight: 700; padding: 3px 0 2px; border-bottom: 1px solid #e5e7eb; margin-bottom: 2px; }
.p-birth     { font-size: 7.5pt; color: #888; margin-left: 5px; }
.p-col-head-gap { margin-top: 4px; }

/* ── Notatki faktury ── */
.inv-notes-wrap { border-top: 1px solid #f0f0f0; padding: 4px 10px; }

/* ── Tabela kosztów ── */
.cost-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.cost-table td { padding: 3px 6px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.cost-table tr:last-child td { border-bottom: none; }
.cost-table td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.cost-table .subtotal td { border-top: 1px solid #ddd; padding-top: 5px; font-size: 9pt; font-weight: 700; }
.cost-accent { color: #8D1118; }
.cost-table .cost-cat-hd { padding-top: 4px; padding-bottom: 2px; font-size: 7.5pt; color: #4b5563; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cost-sub  { color: #999; font-size: 7.5pt; }
.cost-table .cost-disc-val { color: #16a34a; }

/* ── Harmonogram płatności ── */
.pay-row-paid       { padding: 8px 10px; border-bottom: 1px solid #eee; background: #f0fdf4; }
.pay-row-remaining  { padding: 8px 10px; border-bottom: 1px solid #eee; }
.pay-row-total-wrap { padding: 7px 10px; border-bottom: 1px solid #eee; background: #fafafa; }
.pay-row-chf        { padding: 7px 10px; background: #fffbeb; }
.pay-row-hd   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.pay-label-paid      { display: flex; align-items: center; gap: 5px; font-size: 8pt; font-weight: 700; color: #166534; }
.pay-label-remaining { font-size: 8pt; font-weight: 700; color: #1a1a1a; }
.pay-label-total     { font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.pay-amount-paid      { font-size: 12pt; font-weight: 700; color: #8D1118; }
.pay-amount-remaining { font-size: 12pt; font-weight: 700; color: #1a1a1a; }
.pay-amount-total     { font-size: 13pt; font-weight: 700; color: #1a1a1a; }
.pay-desc        { font-size: 7.5pt; color: #6b7280; }
.pay-chf-inner   { display: flex; align-items: flex-start; gap: 6px; }
.pay-chf-icon    { flex-shrink: 0; margin-top: 1px; }
.pay-chf-text    { font-size: 7.5pt; color: #92400e; line-height: 1.4; }

/* ── Stopka dokumentu ── */
.doc-footer { margin-top: 6mm; padding-top: 3mm; border-top: 1px solid #eee; font-size: 7.5pt; color: #bbb; text-align: center; }

/* ── Nagłówek sekcji karty (potwierdzenie / druk) ── */
.section-header {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 20px;
}
.section-header p {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #111;
}

/* ── Wiersze danych (potwierdzenie / druk) ── */
.data-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
.data-row:last-child { border-bottom: none; }
.data-label { color: #374151; flex: 1; min-width: 0; word-break: break-word; }
.data-value { color: #111; font-weight: 500; text-align: right; flex-shrink: 0; max-width: 50%; word-break: break-word; }

/* ── Wiersze kosztów (potwierdzenie / druk) ── */
.cost-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 12px;
}
.cost-row:last-child { border-bottom: none; }
.cost-label { color: #374151; flex: 1; line-height: 1.4; }
.cost-value { color: #111; font-weight: 600; white-space: nowrap; flex-shrink: 0; text-align: right; }

/* ── Responsive – ekran (action bar mobile) ── */
@media (max-width: 639px) {
  .action-bar { flex-direction: column; align-items: stretch; padding: 12px 16px; gap: 8px; }
  .btn-pdf, .btn-back { width: 100%; justify-content: center; text-align: center; }
  .action-tip { margin-left: 0; margin-top: 4px; }
}
@media (max-width: 640px) {
  .page { margin: 2mm auto; padding: 6mm 4mm; }
  .fields-grid { grid-template-columns: 1fr; }
  .participants-grid { grid-template-columns: 1fr; }
}

/* ── Druk (@media print) ── */
@media print {
  @page { margin: 12mm; size: A4 portrait; }
  body         { background: #fff !important; }
  .print-body  { background: #fff; }
  .no-print    { display: none !important; }
  .action-bar  { display: none !important; }
  .sticky      { position: static !important; }
  .page        { margin: 0; padding: 0; max-width: none; }
  .p-card      { page-break-inside: avoid; break-inside: avoid; }
  .section     { page-break-inside: avoid; break-inside: avoid; }
  .print-break { page-break-before: always; }
}

/* ═══════════════════════════════════════════════════════════
   FORMULARZE REZERWACJI — klasy wspólne dla step1–step5
   i strony potwierdzenia
═══════════════════════════════════════════════════════════ */

/* Separator w formularzu rezerwacji */
.step-line { height: 1px; background: #e5e7eb; }

/* Dial/country select – usuń domyślną strzałkę przeglądarki */
.dial-code-select,
.dial-select { appearance: none; -webkit-appearance: none; background-image: none; }

/* Focus ring dla pól formularza rezerwacji */
.reservation-body input:focus,
.reservation-body select:focus,
.reservation-body textarea:focus {
  outline: none;
  border-color: #8D1118 !important;
  box-shadow: 0 0 0 3px rgba(141,17,24,0.1);
}

/* Error state dla pól rezerwacji */
.reservation-body input.error,
.reservation-body select.error,
.reservation-body textarea.error {
  border-color: #dc2626 !important;
  background-color: #fef2f2;
}

/* ── Wiersz danych w podsumowaniu (krok 5 + potwierdzenie) ── */
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
.summary-row:last-child { border-bottom: none; }
.summary-label {
  color: #374151;
  flex-shrink: 1;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}
.summary-value {
  color: #111;
  font-weight: 500;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .summary-value { white-space: normal; max-width: 55%; }
}

/* ── Wiersze danych w potwierdzeniu (data-row) ── */
.data-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
.data-row:last-child { border-bottom: none; }
.data-label { color: #374151; flex: 1; min-width: 0; word-break: break-word; }
.data-value { color: #111; font-weight: 500; text-align: right; flex-shrink: 0; max-width: 50%; word-break: break-word; }

/* ── Wiersze kosztów w potwierdzeniu ── */
.cost-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 12px;
}
.cost-row:last-child { border-bottom: none; }
.cost-label { color: #374151; flex: 1; line-height: 1.4; }
.cost-value { color: #111; font-weight: 600; white-space: nowrap; flex-shrink: 0; text-align: right; }

/* ── Nagłówek sekcji w potwierdzeniu ── */
.section-header {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 20px;
}
.section-header p {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #111;
}

/* ── Checkbox zgody (krok 5) ── */
.consent-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
}
.consent-wrap:last-child { border-bottom: none; }
.consent-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 2px;
  transition: border-color 0.15s, background-color 0.15s;
  position: relative;
}
.consent-checkbox:checked {
  background-color: #8D1118;
  border-color: #8D1118;
}
.consent-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.consent-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(141,17,24,0.15);
}
.consent-checkbox.error-check {
  border-color: #dc2626;
  background-color: #fef2f2;
}

/* ── Blok płatności ── */
.payment-highlight {
  background: linear-gradient(135deg, #fdf2f3 0%, #fff 60%);
  border: 1px solid #e8c5c7;
  border-radius: 12px;
}

/* ── Przycisk finalizacji rezerwacji ── */
.btn-reserve {
  box-shadow: 0 4px 24px rgba(141,17,24,0.25);
}

/* ── Zakładki faktury (krok 4) ── */
.invoice-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  justify-content: center;
}
.invoice-tab:hover { border-color: #d1d5db; color: #111; }
.invoice-tab.active {
  border-color: #8D1118;
  background-color: #fdf2f3;
  color: #8D1118;
  font-weight: 600;
}
.invoice-tab .tab-dot {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 2px solid currentColor;
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.15s ease;
}
.invoice-tab.active .tab-dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 9999px;
  background: #8D1118;
}
@media (max-width: 639px) {
  .invoice-tab { width: 100%; justify-content: flex-start; }
}

/* ── Animacja kart uczestników (krok 2) ── */
.participant-card { animation: slideDown 0.25s ease; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Animacja bloków zakwaterowania (krok 3) ── */
.participant-room-block { animation: fadeIn 0.2s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Alert żółty (formularz krok 2) ── */
.alert-warning {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
}

/* ── Suppress transitions during page init (krok 4) ── */
body.no-transitions * {
  transition: none !important;
  animation: none !important;
}

/* (Flatpickr theming zdefiniowany w sekcji FORMULARZ REZERWACJI powyżej – szukaj .reservation-body .flatpickr-calendar) */