/* Core bundle: importy wydzielonych modułów CSS */
@import url('css/tokens.css');
@import url('css/ui-kit.css');
@import url('css/pages/offer-editor.css');
@import url('css/components/offers-list.css');
@import url('css/components/list-filters.css');
@import url('css/pages/legacy-shell.css');

:root {
  /* Wartosci bez odpowiednika 1:1 w skali platformy, powtarzajace sie w tym
     pliku wielokrotnie. Zmienne kasuja duplikaty — nie sa kandydatami do
     tokens.css (stad prefiks legacy/cta). */
  --radius-legacy-6: 6px;
  --radius-legacy-10: 10px;
  --shadow-cta: 0 4px 12px rgba(31, 42, 68, 0.25);
  --shadow-cta-hover: 0 6px 20px rgba(31, 42, 68, 0.3);
  --shadow-cta-danger: 0 4px 12px rgba(239, 68, 68, 0.25);
  --shadow-cta-danger-hover: 0 6px 20px rgba(239, 68, 68, 0.3);
}

*{ box-sizing:border-box }
html,body{ 
  height:100%; 
  width: 100%;
  max-width: none;
  overflow-x: hidden;
}
body{ 
  margin:0; 
  font-family:var(--font-sans, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial); 
  color:var(--text, #1d1d1f); 
  background:var(--bg-app, #F7F5F1);
  width: 100%;
  max-width: none;
}

/* Кнопки */
.btn-primary{ background:var(--accent-text); color:var(--text-inverse); border:0; border-radius:var(--radius-pill); padding:8px 14px; cursor:pointer }
.btn-primary:hover{ background:var(--accent-text-hover) }
.btn-secondary{ background:#fff; color:var(--text, #1e293b); border:1px solid var(--border-warm, #e8dccd); border-radius:var(--radius-pill); padding:8px 12px; cursor:pointer }
.btn-secondary:hover{ border-color:var(--accent, #1F2A44) }
.btn-danger{ background:var(--danger-hover, #9a2a2a); color:var(--text-inverse); border:0; border-radius:var(--radius-pill); padding:8px 12px; cursor:pointer }
.btn-danger:hover{ background:var(--danger-hover, #9a2a2a) }

.hidden{ display:none!important }
.wrap{ max-width:1200px; margin:0 auto; padding:12px 16px }

.header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:2px solid var(--accent, #1F2A44);background:#fff}
.header .brand{display:flex;gap:10px;align-items:center}
.header .brand img{height:22px}
.header .user-actions{display:flex;gap:8px;align-items:center}
.header #userEmail{opacity:.8}



/* Оферта — шапка/формы */
.oferta-input{ width:100%; padding:8px 10px; border:1px solid var(--border-warm, #e8dccd); border-radius:var(--radius-legacy-10); background:var(--surface-muted, #faf9f5) }

.table-block{ background:#fff; border:1px solid var(--border-warm, #e8dccd); border-radius:var(--radius-md); overflow:auto }
.table-block table{ width:100%; border-collapse:collapse }
.table-block th{ position:sticky; top:0; background:var(--accent, #1F2A44); color:var(--text-inverse); text-align:left; padding:8px 10px }
.table-block td{ padding:8px 10px; border-top:1px solid var(--surface-muted, #faf9f5) }


.icon.pdf   { background: url('icons/pdf.svg') center/contain no-repeat; }

/* --- login card --- */
.login-card{max-width:520px;margin:64px auto;padding:22px;border:1px solid var(--border-warm, #e8dccd);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-md)}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.login-logo img{height:auto;max-height:80px;width:auto;object-fit:contain}
.login-title{margin:6px 0 10px;font-size:var(--fs-lg)}
.login-input{width:100%;padding:12px 14px;border:1px solid #e6d6c5;border-radius:var(--radius-legacy-10);background:var(--surface-muted, #faf9f5);margin:6px 0}
.login-actions{display:flex;gap:8px;margin-top:8px}

/* --- topbar / toolbar --- */
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#fff;border-bottom:2px solid var(--accent, #1F2A44)}

/* Currency selector in form */
.currency-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-legacy-10);
  padding: 8px 10px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text, #1e293b);
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  position: relative;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 35px;
}

.currency-select:hover {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--shadow-sm);
}

.currency-select:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

/* VAT selector in form */
.vat-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-legacy-10);
  padding: 8px 10px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text, #1e293b);
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  position: relative;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 35px;
}

.vat-select:hover {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--shadow-sm);
}

.vat-select:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

/* --- Deliveries Calendar --- */
.deliveries-page {
  padding: 20px;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* (dawne .deliveries-tab* usunięte — style żyją w apps/deliveries/globals.css,
   duplikat tutaj wymuszał wojny specyficzności w aplikacji) */

#viewCalendar {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 24px;
  align-items: start;
}

.calendar-section {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

@media (max-width: 1024px) {
  #viewCalendar {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 4px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.calendar-nav button {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-muted, #475569);
  font-size: var(--fs-md);
  font-weight: bold;
}


.calendar-nav button:hover {
  border-color: var(--accent, #1F2A44);
  color: var(--accent, #1F2A44);
  transform: scale(1.05);
}

.calendar-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text, #1e293b);
  text-transform: capitalize;
}

.btn-add-delivery {
  background: linear-gradient(135deg, var(--accent, #1F2A44), #34456B);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-cta);
  font-size: var(--fs-base);
}


.btn-add-delivery span:first-child {
  font-size: var(--fs-lg);
  font-weight: bold;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-md);
}

#calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.calendar-weekday {
  text-align: center;
  font-weight: 600;
  color: var(--text-muted, #475569);
  font-size: var(--fs-base);
  padding: 8px;
  background: #f9fafb;
  border-radius: var(--radius-legacy-6);
  margin-bottom: 4px;
}

.calendar-cell {
  aspect-ratio: 1;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-legacy-6);
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100px;
  min-width: 100px;
}


.calendar-cell:hover {
  border-color: var(--accent, #1F2A44);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.calendar-cell.empty {
  background: #f9fafb;
  border-color: var(--border);
  cursor: default;
  opacity: 0.6;
}

.calendar-cell.empty:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

.calendar-cell.active {
  background: linear-gradient(135deg, var(--accent, #1F2A44), #34456B);
  border-color: var(--accent, #1F2A44);
  color: var(--text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}

.calendar-cell.active .calendar-daynum {
  color: var(--text-inverse);
}

.calendar-cell.active .calendar-preview {
  color: rgba(255, 255, 255, 0.9);
}

.calendar-cell.active .delivery-icon {
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- cien na KOLOROWEJ pastylce lezacej na teal gradiencie aktywnej komorki; tokeny --shadow-* maja alfe .06-.12 skalibrowana pod biale powierzchnie, wiec podmiana skasowalaby obwodke ikon dostaw */
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.calendar-cell.active .delivery-more {
  background: rgba(255, 255, 255, 0.3);
  color: var(--text-inverse);
}

.calendar-cell.active .badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-inverse);
}

.calendar-daynum {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text, #1e293b);
  margin-bottom: 2px;
  margin-top: 2px;
  text-align: center;
}

.delivery-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 4px;
  justify-content: center;
}

.delivery-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- glif w kolku 16x16 z tej samej reguly; skala --icon-* zaczyna sie od 18px, a podloga tekstu to --fs-xs 12px — kazdy token przepelnilby pastylke. Wlasciwa naprawa to skasowanie legacy geometrii na rzecz clamp() z apps/deliveries/globals.css, nie podmiana wartosci */
  font-size: 8px;
  color: var(--text-inverse);
  cursor: pointer;
  transition: all 0.2s ease;
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- cien na kolorowej pastylce (tlo z JS: getCalendarDeliveryPillBackgroundColor); alfa .2 robi obwodke, tokeny --shadow-* maja .06-.12 pod biale tla */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.delivery-icon:hover {
  transform: scale(1.2);
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- hover pastylki dostawy: cien na kolorowym tle, alfa .3 poza zakresem tokenow (.06-.12) */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.delivery-more {
  background: var(--text-muted, #475569);
  color: var(--text-inverse);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- glif '+N' w kolku 16x16; --fs-xs 12px przepelnilby pastylke, --icon-sm to 18px */
  font-size: 8px;
  font-weight: bold;
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- cien na kolorowej pastylce '+N'; alfa .2 poza zakresem tokenow */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.calendar-preview {
  font-size: var(--fs-xs);
  color: var(--text-muted, #475569);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  margin-top: 4px;
}

.calendar-preview div {
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-preview .more {
  color: var(--text-muted, #475569);
  font-style: italic;
}

.delivery-form {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  height: fit-content;
  position: sticky;
  top: 20px;
}

.delivery-form h3 {
  margin: 0 0 20px 0;
  color: var(--text, #1e293b);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.delivery-list {
  margin-top: 16px;
}

.delivery-item {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}


.delivery-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.delivery-status-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--text-inverse);
  flex-shrink: 0;
}

.delivery-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.delivery-details.hidden {
  display: none;
}


.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text, #1e293b);
  font-size: var(--fs-base);
}

.form-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-sm);
  background: #faf9f5;
  font-size: var(--fs-base);
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  background: #fff;
  box-shadow: var(--focus-ring);
}

.form-input::placeholder {
  color: var(--text-muted, #475569);
}

.form-select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-sm);
  background: #faf9f5;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-select:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  background: #fff;
  box-shadow: var(--focus-ring);
}

.form-textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-sm);
  background: #faf9f5;
  font-size: var(--fs-base);
  min-height: 60px;
  resize: vertical;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  background: #fff;
  box-shadow: var(--focus-ring);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn-save {
  background: linear-gradient(135deg, var(--accent, #1F2A44), #34456B);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.btn-save:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}

.btn-cancel {
  background: #fff;
  color: var(--text-muted, #475569);
  border: 2px solid #f0f0f0;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.btn-cancel:hover {
  border-color: var(--accent, #1F2A44);
  color: var(--accent, #1F2A44);
  transform: translateY(-2px);
}

.delivery-list {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.delivery-item {
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.delivery-item:hover {
  border-color: var(--accent, #1F2A44);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.delivery-item h4 {
  margin: 0 0 8px 0;
  color: var(--text, #1e293b);
  font-size: var(--fs-md);
  font-weight: 600;
}

.delivery-meta {
  color: var(--text-muted, #475569);
  font-size: var(--fs-base);
  line-height: 1.4;
  margin-bottom: 12px;
}

.delivery-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.delivery-actions .btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.delivery-actions .btn:hover {
  transform: translateY(-1px);
}

.btn-add-delivery {
  background: linear-gradient(135deg, var(--accent, #1F2A44), #34456B);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.btn-add-delivery:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}

@media (max-width: 768px) {
  .deliveries-page {
    padding: 12px;
  }
  
  .calendar-grid {
    padding: 12px;
    gap: 4px;
  }
  
  .calendar-cell {
    padding: 6px;
  }
  
  .calendar-daynum {
    font-size: var(--fs-base);
  }
  
  .delivery-form {
    padding: 16px;
  }
  
  .form-actions {
    flex-direction: column;
  }
}
.topbar .brand{display:flex;gap:10px;align-items:center}
.toolbar{display:flex;gap:8px;margin:12px 0}

/* --- buttons --- */
.btn-primary{background:var(--accent-text);color:var(--text-inverse);border:0;border-radius:var(--radius-pill);padding:8px 12px;cursor:pointer}
.btn-primary:hover{background:var(--accent-text-hover)}
.btn-secondary{background:#fff;border:1px solid #e4d5c4;border-radius:var(--radius-legacy-10);padding:10px 14px;cursor:pointer}
.btn-danger{background:#9a2c2c;color:var(--text-inverse);border:0;border-radius:var(--radius-legacy-10);padding:10px 14px}

/* --- tables --- */
.table-block{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0 10px}
table thead th{background:var(--accent-text);color:var(--text-inverse);padding:10px;border-radius:0}


/* Стили для строк заказов - более мягкие и прозрачные цвета */
table tbody tr.order-row[data-status="do_zamowienia"] td{background:rgba(254, 243, 199, 0.6) !important; color:var(--status-text-warn) !important}
table tbody tr.order-row[data-status="zamowione"] td{background:#ffffff !important; color:var(--text-muted) !important}
/* diacritic fallback */
table tbody tr.order-row[data-status="zamówione"] td{background:#ffffff !important; color:var(--text-muted) !important}
table tbody tr.order-row[data-status="zafakturowane"] td{background:rgba(219, 234, 254, 0.6) !important; color:var(--status-text-info) !important}
table tbody tr.order-row[data-status="rozliczone"] td{background:rgba(220, 252, 231, 0.6) !important; color:var(--status-text-ok) !important}

/* Дополнительные селекторы для надежности */

/* Кликабельные строки заказов */
.order-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.order-row:hover {
  opacity: 0.9;
}

/* Стили для кнопки удаления заказа */
.btn-delete-order {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-md);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.btn-delete-order:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

.actions-cell {
  text-align: center;
  width: 60px;
}


/* Улучшенные стили для таблицы - УДАЛЕНО ДУБЛИРОВАНИЕ */

/* Улучшенные стили для селектов статусов */
.status-select {
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.status-select:hover {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--shadow-md);
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  min-width: 80px;
}

/* --- row actions (ikonki) --- */
.row-actions{display:flex;gap:8px;justify-content:flex-end}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid #e3d3c2;border-radius:var(--radius-sm);background:#fff;cursor:pointer}
.icon-btn:hover{border-color:var(--accent, #1F2A44);box-shadow:var(--shadow-md)}
.icon-btn img{width:18px;height:18px;display:block}



.only-mine{display:inline-flex;gap:6px;align-items:center;user-select:none}

/* Сообщения об ошибках и пустых результатах */
.error-message, .empty-message {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, #475569);
}

.error-message .error-icon, .empty-message .empty-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 16px;
  display: block;
}

.error-message {
  color: var(--danger-hover, #9a2a2a);
}

.empty-message {
  color: var(--text-muted, #475569);
}

.error-message small, .empty-message small {
  display: block;
  margin-top: 8px;
  opacity: 0.7;
  font-size: var(--fs-xs);
}

/* LOGIN — центрируем и увеличиваем логотип */

.login-logo.only-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.login-logo.only-logo img{
  width: 220px;          /* увеличенный размер логотипа */
  max-width: 80%;
  height: auto;
  display: block;
}


/* мелкие улучшения полей */
.login-input{
  width: 100%;
  height: 44px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-input, #d6d3cd);
  border-radius: var(--radius-sm);
  background: var(--surface-input, #fff);
  outline: none;
}
.login-input:focus{ border-color: var(--accent, #1F2A44); box-shadow: var(--focus-ring); }

.login-actions{
  display:flex; gap:10px; margin-top: 8px; justify-content: center;
}


/* ——— Login: большой логотип по центру, над полями ——— */
.login-card{
  max-width: 520px;
  margin: 72px auto;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}

#authBox .login-logo{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;   /* центрируем по горизонтали */
  margin: 6px 0 22px;        /* отступ над полями */
}

/* Сделать логотип на логин-форме некликабельным даже если это ссылка */
#authBox .login-logo a{
  pointer-events: none;
  cursor: default;
}

#authBox .login-logo img{
  width: 260px;              /* крупный логотип */
  max-width: 86%;
  height: auto;
  display: block;
}

@media (min-width: 768px){
  #authBox .login-logo img{ width: 400px; }
}

/* ukrywamy teksty marki и "Logowanie", если где-то остались */
.login-logo b,
.login-title{ display: none !important; }


/* ====== PANEL (menu page) ====== */
.panel-body{ 
  background: #fbf7f2; 
  width: 100%;
  max-width: none;
  overflow-x: hidden;
}

.panel-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

.menu-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.menu-card{
  display: block;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  border-top: 6px solid var(--accent, #1F2A44);
  text-decoration: none;
  color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.menu-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.menu-ico{
  font-size: var(--icon-md);
  line-height: 1;
  margin-bottom: 10px;
}
.menu-title{
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: 6px;
}
.menu-desc{
  font-size: var(--fs-sm);
  color: var(--text-muted);
}


/* Auth extras */
.pw-wrap{ position: relative; }
.pw-wrap .login-input{
  padding-right: 2.75rem;
  box-sizing: border-box;
}
.pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  z-index: 2;
  border:0; background:transparent; cursor:pointer; font-size:var(--fs-md); line-height:1;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  opacity:.7;
  pointer-events: auto;
}
.pw-toggle:hover,
.pw-toggle:focus-visible{ opacity:1; }
.pw-toggle:focus-visible{ outline: 2px solid var(--accent-text); outline-offset: 2px; }
.pw-toggle[aria-pressed="true"]{ opacity: 1; }

.login-row{
  display:flex; justify-content:space-between; align-items:center;
  margin: 4px 0 10px;
}
.remember{ font-size: var(--fs-sm); color:var(--text-muted); }
.linklike{
  background:none; border:0; color: var(--accent, #1F2A44); cursor:pointer; font-size:var(--fs-sm); text-decoration:underline;
}

.auth-error{
  background:#fff1f0; color:var(--danger); border:1px solid #ffc9c4;
  padding:8px 10px; border-radius:var(--radius-sm); font-size:var(--fs-sm); margin-bottom:10px;
}
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- blada rozowa OBWODKA pola z bledem walidacji; :invalid zapala sie na KAZDYM pustym polu required, wiec --danger (#b3261e, dystans RGB 221) pomalowalby cala forme logowania na jaskrawa czerwien */
.login-input:invalid{ border-color:#e07a7a; }

/* ===== Search bar ===== */
.search-bar{ display:flex; gap:8px; align-items:center; margin: 0; }
.search-bar .ctrl{ flex:1; }


/* THEME */
:root{
  --brand:#d86f1f;
  --brand-d:var(--accent-hover, #34456B);
  --bg:#f6f2ed;
  --card:#ffffff;
  --text:#2b221c;
  --muted:#6b625a;
}

/* Global header polish */
.topbar{ background:#fff; }
.topbar .brand img{ height:40px; width:auto; max-width:140px; margin-right:10px; object-fit:contain; }
.topbar .user .btn{ margin-left:8px; }

.user-profile-link {
  color: var(--text, #1e293b);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s;
}

.user-profile-link:hover {
  background-color: var(--surface-subtle);
  text-decoration: none;
}

/* ===== PROFILE PAGE STYLES ===== */
.profile-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.profile-wrap {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.profile-card {
  padding: 30px;
}

.profile-card h2 {
  margin: 0 0 30px 0;
  color: var(--text, #1e293b);
  font-size: var(--fs-2xl);
  font-weight: 600;
}

.profile-section {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--surface-muted, #faf9f5);
}

.profile-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.profile-section h3 {
  margin: 0 0 20px 0;
  color: var(--text, #1e293b);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.profile-info {
  display: grid;
  gap: 15px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.info-row label {
  min-width: 120px;
  font-weight: 600;
  color: var(--text-muted);
}

.info-row span {
  color: var(--text, #1e293b);
}

.password-form {
  display: grid;
  gap: 20px;
  max-width: 400px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: var(--text-muted);
}

.form-input {
  padding: 12px 14px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: var(--surface-muted, #faf9f5);
  font-size: var(--fs-base);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

/* (dawny system .message-* usunięty — profil używa wspólnego toasta) */

/* Breadcrumbs */
.breadcrumbs {
  margin-bottom: 20px;
  padding: 10px 0;
  font-size: var(--fs-base);
}

.breadcrumb-link {
  color: var(--accent, #1F2A44);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--accent-hover, #34456B);
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: var(--text-subtle);
}

.breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}

/* Cards / layout */
.card{ background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.toolbar.gap{ padding:12px 16px; display:flex; gap:8px; }

/* Buttons — единый стиль (обновлено) */
.btn{ 
  appearance:none; 
  border:0; 
  border-radius: var(--radius-md); 
  padding:8px 14px; 
  font-weight:600; 
  cursor:pointer; 
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary{ 
  background: linear-gradient(135deg, var(--accent-text) 0%, var(--accent-text-hover) 100%);
  color:var(--text-inverse); 
  box-shadow:var(--shadow-cta); 
  /* Убираем лишние отступы */
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover{ 
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}
.btn-secondary{ 
  background:#fff; 
  color:var(--text); 
  border:1px solid var(--border-warm, #e8dccd); 
}
.btn-secondary:hover:not(:disabled){ 
  border-color: var(--accent, #1F2A44);
  color: var(--accent, #1F2A44);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-danger{ 
  background: linear-gradient(135deg, var(--danger, #b3261e) 0%, #dc2626 100%);
  color:var(--text-inverse); 
  box-shadow: var(--shadow-cta-danger);
}
.btn-danger:hover{ 
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-danger-hover);
}
.btn:disabled{ 
  opacity:0.5; 
  cursor:not-allowed; 
  transform: none !important;
  box-shadow: none !important;
}

/* Search bar — фирменный */
.search-wrap{ margin: 4px 16px 10px; padding:10px; display:flex; gap:10px; align-items:center; }
.search-icon{ font-size:var(--icon-sm); margin:0 6px 0 4px; }
.search-input{ flex:1; height:30px; border-radius:var(--radius-pill); border:1px solid #efd6c5; background:#fff; padding:0 8px; font-size: var(--fs-sm); }
.search-input:focus{ outline:2px solid #ffd7bf; }

/* Tables — «WOW» */
.tbl{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.tbl thead th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-d) 100%);
  color:var(--text-inverse); padding:10px 10px; text-align:left; font-weight:800; letter-spacing:.2px;
  border-radius: var(--radius-md);
}
.tbl tbody td{ background:#fff; padding:10px 10px; border-top:1px solid var(--surface-muted, #faf9f5); border-bottom:1px solid var(--surface-muted, #faf9f5); }
.tbl tbody tr td:first-child{ border-left:1px solid var(--surface-muted, #faf9f5); border-top-left-radius:12px; border-bottom-left-radius:12px; }
.tbl tbody tr td:last-child{ border-right:1px solid var(--surface-muted, #faf9f5); border-top-right-radius:12px; border-bottom-right-radius:12px; }
.tbl tbody tr:hover td{ background:var(--accent-soft, rgba(31, 42, 68, 0.08)); }
.tbl tbody tr.selected td{ outline:2px dashed var(--brand); }


/* Small polish */



/* Чуть скруглим углы у липкой шапки для красоты */
.tbl thead th:first-child{ border-top-left-radius:12px; }
.tbl thead th:last-child { border-top-right-radius:12px; }


/* Убрать «пилюли» на заголовках выбранных таблиц */
.tbl--flat thead th{
  border-radius: 0 !important;
}
.tbl--flat thead th:first-child,
.tbl--flat thead th:last-child{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}






/* Sticky totals: один общий контейнер без фона у внутренних обёрток */


/* Row scroll offset so last row isn't hidden under sticky totals */

/* на всякий — если где-то остался selected */
table.tbl tbody tr.selected td{
  outline:none !important;
  box-shadow:none !important;
  border-color:var(--surface-muted, #faf9f5) !important;
}

/* Убираем чёрные разделители при фокусе в таблице результатов */


/* Designers: убрать чёрные бордеры/аутлайны у строк при фокусе */
#designersBody tr:focus,
#designersBody tr:focus-within,
#designersBody td:focus,
#designersBody td:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
#designersBody tr:focus-within > td {
  border-style: inherit !important;  /* отмена принудительного solid */
  border-image: none !important;
}
#designersBody tr:focus::before,
#designersBody tr:focus-within::before {
  content: none !important;
}


/* Autocomplete dropdown for designers */
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #eee;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); max-height:240px; overflow:auto; z-index:10}
.suggest.hidden{display:none}
.suggest-item{padding:8px 10px; cursor:pointer}
.suggest-item:hover{background:#fff7ef}





/* Модальное окно удаления */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  box-sizing: border-box;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: modalSlideIn 0.3s ease;
  /* Dluga tresc (np. karta pracownika z uprawnieniami) byla wyzsza niz ekran,
     a przy `align-items: center` na .modal gora okna uciekala poza widok
     i nie dalo sie do niej doscrollowac (klasyczny problem flex + overflow).
     margin:auto centruje bez ucinania, a wlasny scroll trzyma okno w ekranie.
     Ten sam uklad dziala od dawna w .modal-large (reklamacje). */
  margin: auto;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 0;
}

.modal-header h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f3f4f6;
  border-radius: 50%;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #e5e7eb;
  color: var(--text);
}

.modal-body {
  padding: 20px 24px;
}

.modal-body p {
  margin: 0 0 8px;
  color: var(--text);
  font-size: var(--fs-md);
}

.modal-details {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: 0;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 0 24px 20px;
}

/* Powiadomienia (toast) — jedyny kanoniczny blok (scalone dwa dawne duplikaty).
   Biała karta + kolorowy pasek z lewej wg typu; klasy renderują też aplikacje Next. */
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10000;
  align-items: flex-end;
}

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  /* Na telefonie (375px) 400px wychodziło za ekran */
  max-width: min(400px, calc(100vw - 32px));
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(15, 23, 42, 0.08));
  border-left: 4px solid var(--accent, #1F2A44);
  z-index: 10000;
  animation: slideInRight 0.3s ease;
}

.notification-container .notification {
  position: relative;
  top: 0;
  right: 0;
}

.notification-success {
  border-left-color: var(--success, #16a34a);
}

.notification-error {
  border-left-color: var(--danger, #b3261e);
}

.notification-warning {
  border-left-color: var(--warning, #d97706);
}

.notification-info {
  border-left-color: var(--info, #2563eb);
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  min-width: min(300px, 100%);
}

.notification-close {
  /* Kompaktowy wizualnie; hit-area 36px, żeby toast nie puchł do 44 */
  min-width: 36px;
  min-height: 36px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted, #475569);
  cursor: pointer;
  font-size: var(--fs-xl);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-left: auto;
}

.notification-close:hover {
  background: var(--surface-subtle, #f9fafb);
  color: var(--text, #1e293b);
}


/* Кнопка редактирования */
.action-btn.action-edit:hover {
  background: #f0f9ff;
  border-color: var(--info);
  color: var(--info);
}

.action-btn.action-excel:hover {
  background: #f0fdf4;
  border-color: var(--success, #16a34a);
  color: var(--success, #16a34a);
}

/* Форма проектировщиков */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

/* Убираем растягивание третьего элемента */
/* .form-group:nth-child(3) {
  grid-column: 1 / -1;
} */

.form-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.form-input {
  height: 52px;
  padding: 0 20px;
  border: 2px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: var(--fs-base);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.form-input:hover {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--shadow-md);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

.form-input.error {
  border-color: var(--danger, #b3261e);
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pierscien bledu pola; guard nie rozbija box-shadow, a tokenu typu --ring-danger nie ma. --focus-ring jest teal (przemalowalby blad na kolor marki), a rgba(239,68,68) to nie jest --danger (#b3261e) — mapowanie byloby przemalowaniem, nie normalizacja. */
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

.form-input.success {
  border-color: var(--success, #16a34a);
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pierscien poprawnego pola; rgba(22,163,74) to DOKLADNIE --success (#16a34a), ale guard przepuszcza w box-shadow tylko pojedynczy var() na cala wartosc, wiec tokenu nie da sie tu wpiac bez zmiany wygladu. */
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}

.validation-message {
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-top: 4px;
  min-height: 16px;
  transition: all 0.3s ease;
}

.validation-message.error {
  color: var(--danger, #b3261e);
}

.validation-message.success {
  color: var(--success, #16a34a);
}

.validation-message.info {
}


/* Стили .autocomplete-dropdown перенесены в offer-form-clean.css */

/* Стили для выпадающего списка проектантов перенесены в offer-form-clean.css */

.autocomplete-item {
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f3f4f6;
  border-radius: var(--radius-sm);
  margin: 4px 8px;
}

.autocomplete-item:last-child {
  border-bottom: none;
  margin-bottom: 8px;
}

.autocomplete-item:first-child {
  margin-top: 8px;
}

.autocomplete-item:hover {
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.autocomplete-item:active {
  background: #f1f5f9;
  transform: translateY(0);
}





/* Анимации для строк таблицы */

/* ===== ИНДИКАТОРЫ ЗАГРУЗКИ И УВЕДОМЛЕНИЯ ===== */

/* Глобальный индикатор загрузки */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(4px);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-top: 4px solid var(--accent, #1F2A44);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Индикатор загрузки для кнопок */
.btn-loading {
  position: relative;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* (dawny drugi blok .notification* scalony z kanonicznym powyżej) */

/* Анимации */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* ===== МАССОВЫЕ ОПЕРАЦИИ ===== */
.bulk-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid var(--warning, #d97706);
  border-radius: var(--radius-sm);
  margin: 0 20px 16px;
  animation: slideInUp 0.3s ease;
}

.bulk-actions.hidden {
  display: none;
}

/* ===== SZYBKIE FILTRY ===== */

/* Przycisk czyszczenia filtrow */
.filter-clear-btn {
  padding: 6px 12px !important;
  border: 1px solid var(--border-warm, #e8dccd) !important;
  border-radius: var(--radius-sm) !important;
  background: #ffffff !important;
  color: var(--text-muted) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.filter-clear-btn:hover {
  background: #f9fafb !important;
  border-color: var(--accent, #1F2A44) !important;
  color: var(--accent-text) !important;
  box-shadow: var(--shadow-md) !important;
}

.filter-clear-btn:active {
  background: #f3f4f6;
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}


/* ===== УЛУЧШЕННАЯ МОБИЛЬНАЯ ВЕРСИЯ ===== */

/* ===== УЛУЧШЕННАЯ ДОСТУПНОСТЬ ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Фокус для клавиатурной навигации */
.btn:focus,
.filter-input:focus,
.filter-select:focus,
.search-input:focus {
  outline: 2px solid var(--accent, #1F2A44);
  outline-offset: 2px;
}

/* ===== АВТОДОПОЛНЕНИЕ ===== */
/* Стили .autocomplete-dropdown перенесены в offer-form-clean.css */

.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.autocomplete-item:hover {
  background: #f3f4f6;
}

.autocomplete-item.selected {
  background: var(--accent, #1F2A44);
}

/* ===== ВАЛИДАЦИЯ В РЕАЛЬНОМ ВРЕМЕНИ ===== */
.form-input.valid {
  border-color: var(--success, #16a34a);
}

.form-input.invalid {
  border-color: var(--danger, #b3261e);
}

.validation-message {
  font-size: var(--fs-xs);
  margin-top: 4px;
  min-height: 16px;
}

.validation-message.error {
  color: var(--danger, #b3261e);
}

.validation-message.success {
  color: var(--success, #16a34a);
}

/* ===== АВТОСОХРАНЕНИЕ ===== */
.auto-save-indicator {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: var(--text-inverse);
  font-size: var(--fs-base);
  z-index: 1000;
  box-shadow: var(--shadow-md);
  transition: opacity 0.25s ease, transform 0.2s ease;
}

.auto-save-indicator.saving { background: var(--warning, #d97706); }
.auto-save-indicator.error { background: var(--danger, #b3261e); }
.auto-save-indicator.success { background: var(--success, #16a34a); }

/* ===== УЛУЧШЕННАЯ ОБРАБОТКА ОШИБОК ===== */
.error-boundary {
  padding: 20px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  margin: 20px;
}

.error-boundary h3 {
  margin: 0 0 12px 0;
}

.error-boundary p {
  margin: 0;
}

/* ===== ГЛОБАЛЬНАЯ АДАПТИВНОСТЬ ХЕДЕРА ===== */
/* Унифицированный хедер для всех страниц */
.topbar, .header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 2px solid var(--accent, #1F2A44);
  box-shadow: var(--shadow-sm);
}

.topbar .brand, .header .brand {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.topbar .brand img, .header .brand img {
  height: 32px;
  width: auto;
  max-width: 120px;
}

.topbar .brand strong, .header .brand strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text, #1e293b);
  white-space: nowrap;
}

.topbar .user, .header .user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.topbar .user span, .header .user-actions span {
  font-size: var(--fs-base);
  color: var(--text-muted, #475569);
  white-space: nowrap;
}

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
  .topbar, .header {
    padding: 10px 16px;
  }
  
  .topbar .brand img, .header .brand img {
    height: 28px;
  }
  
  .topbar .brand strong, .header .brand strong {
    font-size: var(--fs-md);
  }
  
  .topbar .user, .header .user-actions {
    gap: 8px;
  }
  
  .topbar .user .btn, .header .user-actions .btn {
    padding: 8px 12px;
    font-size: var(--fs-base);
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .topbar, .header {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .topbar .brand, .header .brand {
    flex: 1;
    min-width: 0;
  }
  
  .topbar .brand img, .header .brand img {
    height: 24px;
  }
  
  .topbar .brand strong, .header .brand strong {
    font-size: var(--fs-base);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .topbar .user, .header .user-actions {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
  }
  
  .topbar .user .btn, .header .user-actions .btn {
    padding: 6px 10px;
    font-size: var(--fs-xs);
    min-width: auto;
  }
  
  .topbar .user span, .header .user-actions span {
    font-size: var(--fs-xs);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  .topbar, .header {
    padding: 6px 8px;
  }
  
  .topbar .brand, .header .brand {
    gap: 8px;
  }
  
  .topbar .brand img, .header .brand img {
    height: 20px;
  }
  
  .topbar .brand strong, .header .brand strong {
    font-size: var(--fs-sm);
  }
  
  .topbar .user, .header .user-actions {
    gap: 4px;
  }
  
  .topbar .user .btn, .header .user-actions .btn {
    padding: 5px 8px;
    font-size: var(--fs-xs);
  }
  
  .topbar .user span, .header .user-actions span {
    display: none; /* Скрываем email на очень маленьких экранах */
  }
}




/* Стили .autocomplete-dropdown перенесены в offer-form-clean.css */

/* Стили .autocomplete-dropdown.hidden перенесены в offer-form-clean.css */

.autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.autocomplete-item:hover {
  background: #f8f9fa;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }
  
  .form-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .form-input, .form-select {
    font-size: var(--fs-md); /* Предотвращает зум на iOS */
    padding: 12px 14px;
  }
  
  .form-label {
    font-size: var(--fs-xs);
  }
}

@media (max-width: 480px) {
  .form-grid {
    gap: 10px;
  }
  
  .form-row {
    gap: 6px;
  }
  
  .form-input, .form-select {
    padding: 10px 12px;
    font-size: var(--fs-md);
  }
  
  .form-label {
    font-size: var(--fs-xs);
  }
}

/* ===== АДАПТИВНОСТЬ КАРТОЧЕК ===== */
.card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: #fff;
  overflow: hidden;
}

@media (max-width: 768px) {
  .card {
    border-radius: var(--radius-sm);
    margin: 8px 0;
  }
}

/* ===== УЛУЧШЕННАЯ НАВИГАЦИЯ ===== */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: var(--fs-base);
  color: var(--text-muted, #475569);
  /* Убираем лишние отступы */
  padding: 2px;
  width: 100%;
  box-sizing: border-box;
}

.breadcrumb-item {
  color: var(--accent-text);
  text-decoration: none;
}

.breadcrumb-item:hover {
  color: var(--accent-text-hover);
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--border-strong);
}

.breadcrumb-current {
  color: var(--text, #1e293b);
  font-weight: 600;
}

@media (max-width: 768px) {
  .breadcrumbs {
    font-size: var(--fs-xs);
    margin-bottom: 12px;
    padding: 3px;
  }
}

/* ===== АДАПТИВНОСТЬ ПАНЕЛИ ===== */
.panel-wrap {
  padding: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  text-align: center;
}

.menu-card:hover {
  border-color: var(--accent, #1F2A44);
  transform: translateY(-2px);
}

.menu-ico {
  font-size: var(--fs-4xl);
  margin-bottom: 16px;
}

.menu-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text, #1e293b);
  margin-bottom: 8px;
}

.menu-desc {
  font-size: var(--fs-base);
  color: var(--text-muted, #475569);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .panel-wrap {
    padding: 16px;
  }
  
  .menu-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .menu-card {
    padding: 20px;
  }
  
  .menu-ico {
  }
  
  .menu-title {
    font-size: var(--fs-md);
  }
}

@media (max-width: 768px) {
  .panel-wrap {
    padding: 12px;
  }
  
  .menu-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
  
  .menu-card {
    padding: 16px;
  }
  
  .menu-ico {
    font-size: var(--fs-3xl);
    margin-bottom: 12px;
  }
  
  .menu-title {
    font-size: var(--fs-base);
  }
  
  .menu-desc {
    font-size: var(--fs-xs);
  }
}

@media (max-width: 480px) {
  .panel-wrap {
    padding: 8px;
  }
  
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .menu-card {
    padding: 12px;
    flex-direction: row;
    text-align: left;
    gap: 12px;
  }
  
  .menu-ico {
    font-size: var(--fs-2xl);
    margin-bottom: 0;
    flex-shrink: 0;
  }
  
  .menu-title {
    font-size: var(--fs-sm);
    margin-bottom: 4px;
  }
  
  .menu-desc {
    font-size: var(--fs-xs);
  }
}

/* ===== АДАПТИВНОСТЬ ПОИСКА И ФИЛЬТРОВ ===== */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.2s ease;
  min-height: 36px;
}

.search-input-wrapper:focus-within {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

.search-icon {
  padding: 0 12px;
  color: var(--text-muted, #475569);
  font-size: var(--fs-md);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  padding: 0;
  font-size: var(--fs-base);
  background: transparent;
  outline: none;
  min-height: 36px;
  line-height: 1.4;
}

.search-input::placeholder {
  color: var(--text-muted, #475569);
}

/* Удален дублирующий блок стилей для .search-clear */

/* ===== СТРАНИЦА ПРОДУКТОВ ===== */
.filter-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.pagination {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin: 20px;
  padding: 16px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-warm, #e8dccd);
}

.pagination-info {
  font-size: var(--fs-base);
  color: var(--text-muted, #475569);
  min-width: 120px;
  text-align: center;
}

.pagination .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text, #1e293b);
  text-decoration: none;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination .btn:hover:not(:disabled) {
  background: #f8f6f3;
  border-color: var(--accent, #1F2A44);
}

.pagination .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Numery stron (listy ofert i zamówień) ------------------------------
   Przy 155 stronach same strzałki znaczyły 88 kliknięć do strony 90.
   Kontener siedzi MIĘDZY „Poprzednia" a „Następna" i zwija się na wąskich
   ekranach — strzałki zostają zawsze. */
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-number {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text, #1e293b);
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.page-number:hover:not(:disabled) {
  background: #f8f6f3;
  border-color: var(--accent, #1F2A44);
}

.page-number.is-current {
  background: var(--accent, #1F2A44);
  border-color: var(--accent, #1F2A44);
  color: var(--text-inverse, #ffffff);
  font-weight: 600;
  cursor: default;
  opacity: 1;
}

.page-gap {
  padding: 0 2px;
  color: var(--text-muted, #475569);
  user-select: none;
}

.page-jump {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-jump__label {
  font-size: var(--fs-sm, 13px);
  color: var(--text-muted, #475569);
}

.page-jump__input {
  width: 72px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- iOS
     przybliża stronę przy wejściu w pole o foncie < 16px; to próg przeglądarki,
     nie decyzja typograficzna, więc nie ma dla niego tokenu (tak samo robią
     pozostałe pola formularzy od Fali 1) */
  font-size: 16px;
  text-align: center;
}

.page-jump__input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

.page-jump__btn {
  min-height: 44px;
}

/* Na telefonie numery zajmowałyby całą szerokość — zostają strzałki,
   skok do strony i informacja „Strona X z Y". Sam pasek musi się przy tym
   zawijać, inaczej strzałki wychodzą poza ekran. */
@media (max-width: 640px) {
  .page-numbers {
    display: none;
  }

  .pagination,
  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.product-row {
  transition: background-color 0.2s ease;
}

.product-row:hover {
  background-color: var(--surface-muted);
}

.error-message {
  text-align: center;
  padding: 40px 20px;
}

.error-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 16px;
  display: block;
}

/* ===== ИСПРАВЛЕНИЕ ФИЛЬТРОВ - ВОЗВРАТ К ГОРИЗОНТАЛЬНОМУ РАСПОЛОЖЕНИЮ ===== */
.filters-card {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 20px;
  box-shadow: var(--shadow-sm);
  width: calc(100% - 40px);
  box-sizing: border-box;
}

.filters-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr auto auto auto auto;
  gap: 16px;
  align-items: start;
}

/* Адаптивность для фильтров */
@media (max-width: 1400px) {
  .filters-grid {
    grid-template-columns: 1fr 1.5fr 1.5fr auto auto auto auto;
  }
}

@media (max-width: 1200px) {
  .filters-grid {
    grid-template-columns: 1fr 1fr auto auto auto auto;
  }
}

@media (max-width: 1000px) {
  .filters-grid {
    grid-template-columns: 1fr 1fr auto auto auto;
  }
}

@media (max-width: 800px) {
  .filters-grid {
    grid-template-columns: 1fr 1fr auto auto;
  }
}

@media (max-width: 600px) {
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.filter-select {
  padding: 12px 16px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  background: #fff;
  transition: all 0.2s ease;
  min-height: 36px;
  line-height: 1.4;
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

.filter-input {
  padding: 12px 16px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  background: #fff;
  transition: all 0.2s ease;
  min-height: 36px;
  line-height: 1.4;
}

.filter-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

/* Улучшение отображения плейсхолдеров в селектах */
.filter-select option {
  font-size: var(--fs-base);
  padding: 8px;
}

.filter-select option:first-child {
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 1024px) {
  .filters-card {
    padding: 16px;
    margin: 16px 0;
  }
}

@media (max-width: 768px) {
  .filters-card {
    padding: 12px;
    margin: 12px 0;
  }
  
  .search-input-wrapper {
    margin-bottom: 12px;
  }
  
  .search-input {
    font-size: var(--fs-md);
    padding: 8px 12px !important;
    min-height: var(--touch-min);
  }
  
  .filter-select {
    font-size: var(--fs-md);
    padding: 12px 14px;
  }
  
  .filter-label {
    font-size: var(--fs-xs);
  }
}

@media (max-width: 480px) {
  .filters-card {
    padding: 10px;
    margin: 10px 0;
  }
  
  .filters-grid {
    gap: 10px;
  }
  
  .search-input {
    padding: 8px 12px !important;
    min-height: 36px;
  }
  
  .filter-select {
    padding: 10px 12px;
  }
  
  .filter-label {
    font-size: var(--fs-xs);
  }
}

/* Дополнительные стили для кнопок действий на очень маленьких экранах */
@media (max-width: 400px) {
  .action-buttons {
    min-width: 70px !important;
    padding-right: 4px !important;
  }
  
  /* USUNIETE (fala 1): w tabelach martwe (przegrywa specyficznoscia z
     offers-list.css), a poza nimi tylko scinalo bazowe 44x44 do 28px. */
}

/* Стили для очень узких экранов (консоль разработчика) */

/* ===== УЛУЧШЕННАЯ АДАПТИВНОСТЬ ДЛЯ ВСЕГО ПРОЕКТА ===== */

/* Общие адаптивные стили для всех страниц */
@media (max-width: 1024px) {
  .panel-body {
    padding: 10px;
  }
  
  .card {
    margin: 8px 0;
    padding: 16px;
  }
  
  .btn {
    padding: 10px 16px;
    font-size: var(--fs-base);
  }
  
  .form-input,
  .search-input,
  .filter-input {
    padding: 10px 12px;
    font-size: var(--fs-base);
  }
}

@media (max-width: 768px) {
  .panel-body {
    padding: 8px;
  }
  
  .card {
    margin: 6px 0;
    padding: 12px;
  }
  
  .btn {
    padding: 12px 16px;
    font-size: var(--fs-base);
    min-height: 44px;
  }
  
  .form-input,
  .search-input,
  .filter-input {
    padding: 8px 12px;
    font-size: var(--fs-md);
    min-height: var(--touch-min);
  }
  
  /* Улучшенная навигация */
  .topbar {
    padding: 8px 12px;
  }
  
  .breadcrumbs {
    padding: 8px 12px;
    font-size: var(--fs-xs);
  }
  
  /* Адаптивные сетки */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* Адаптивные таблицы */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table-responsive table {
    min-width: 600px;
  }
}

/* ===== СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ ГЛАВНОЙ ПАНЕЛИ ===== */
@media (max-width: 1024px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .menu-card {
    padding: 20px;
  }
  
  .menu-ico {
    font-size: var(--fs-3xl);
    margin-bottom: 12px;
  }
  
  .menu-title {
    font-size: var(--fs-md);
    margin-bottom: 8px;
  }
  
  .menu-desc {
    font-size: var(--fs-sm);
  }
}

@media (max-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .menu-card {
    padding: 16px;
  }
  
  .menu-ico {
    font-size: var(--icon-md);
    margin-bottom: 10px;
  }
  
  .menu-title {
    font-size: var(--fs-base);
    margin-bottom: 6px;
  }
  
  .menu-desc {
    font-size: var(--fs-xs);
  }
}

@media (max-width: 480px) {
  .panel-body {
    padding: 4px;
  }
  
  .card {
    margin: 4px 0;
    padding: 8px;
  }
  
  .btn {
    padding: 10px 12px;
    font-size: var(--fs-base);
    min-height: var(--touch-min);
  }
  
  .form-input,
  .search-input,
  .filter-input {
    padding: 10px 12px;
    font-size: var(--fs-md);
    min-height: var(--touch-min);
  }
  
  .topbar {
    padding: 6px 8px;
  }
  
  .breadcrumbs {
    padding: 6px 8px;
    font-size: var(--fs-xs);
  }
}

/* Очень маленькие экраны */

/* ===== ROLE BADGES ===== */
.role-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-admin {
    background-color: var(--danger, #b3261e);
    color: var(--text-inverse);
}

.role-seller {
    background-color: var(--info, #2563eb);
    color: var(--text-inverse);
}

.role-warehouse {
    background-color: var(--success, #16a34a);
    color: var(--text-inverse);
}

.role-logistyka {
    background-color: var(--accent);
    color: var(--text-inverse);
}

.role-reklamacja {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- fiolet roli "reklamacja": paleta 5 rol musi zostac rozroznialna, a w tokenach nie ma zadnego fioletu */
    background-color: #6f42c1;
    color: var(--text-inverse);
}

/* ===== STATUS BADGES ===== */
.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.status-active {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pastelowe tlo tworzy pare z border:1px solid #c3e6cb w linii nizej, ktorego guard NIE lapie (shorthand border); podmiana samego tla rozjechalaby zestaw */
    background-color: #d4edda;
    color: var(--status-text-ok);
    border: 1px solid #c3e6cb;
}

.status-inactive {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- jak wyzej: para z border:1px solid #f5c6cb, ktorego guard nie lapie */
    background-color: #f8d7da;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- brak tokenu ciemnej czerwieni tekstu; --danger (#b3261e) rozjasnia o 65 pkt w kanale R i zbija kontrast 8,25 -> 4,89 */
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ===== PREVIEW TABLE ===== */
.preview-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: var(--fs-base);
}

.preview-table th,
.preview-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.preview-table th {
    background-color: var(--surface-subtle);
    font-weight: 600;
    color: var(--text-muted);
}

.preview-table tr:hover {
    background-color: var(--surface-subtle);
}

/* ===== ALERT STYLES ===== */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.alert-info {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pastelowa rodzina alertu info (tlo + obramowanie + tekst) nie ma odpowiednikow w tokenach; podmiana pojedynczej warstwy rozjechalaby komplet */
    background-color: #d1ecf1;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- obramowanie z tej samej rodziny co tlo powyzej */
    border-color: #bee5eb;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- --status-text-info (#1d4ed8) przeskakuje z cyjanu na blekit krolewski (kanal B 96 -> 216) i rozjezdza sie z ramka */
    color: #0c5460;
}

.alert code {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 2px 4px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- mikro-promien chipa inline <code> (padding 2px 4px, wysokosc ~18px); --radius-sm (8px) zamienilby go w pigulke */
    border-radius: 3px;
    font-family: monospace;
}

/* ===== CHECKBOX STYLES ===== */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Горизонтальная прокрутка для таблиц */
.table-container {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-app);
  /* Улучшенная прокрутка */
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  /* Предотвращение переполнения */
  max-width: 100%;
  margin: 8px 0;
}

.table-container::-webkit-scrollbar {
  height: 6px;
}

.table-container::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: var(--radius-pill);
}

.table-container::-webkit-scrollbar-thumb {
  background: var(--accent, #1F2A44);
  border-radius: var(--radius-pill);
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: var(--warning, #d97706);
}

/* Улучшенные стили для drag & drop */

/* Улучшенные стили для сепараторов */



/* ===== ACCESS DENIED ===== */
.access-denied {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.access-denied-content {
    text-align: center;
    max-width: 500px;
    background: white;
    padding: 40px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid #e5e7eb;
}

.access-denied-icon {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- emoji blokady jako plakat pustego stanu; --icon-lg (48px) scialoby je o 25% */
    font-size: 64px;
    margin-bottom: 20px;
}

.access-denied h2 {
    color: var(--danger);
    font-size: var(--fs-2xl);
    font-weight: 600;
    margin-bottom: 16px;
}

.access-denied p {
    color: var(--text-muted);
    font-size: var(--fs-md);
    line-height: 1.5;
    margin-bottom: 12px;
}

.access-denied p strong {
    color: var(--text);
}

.access-denied-actions {
    margin-top: 24px;
}

.form-label {
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  margin: 0;
}

.form-input, .form-select {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  padding: 8px 10px;
}

/* ===== Prezenty module ===== */
.gift-controls {
  margin-bottom: 24px;
}

.gift-summary-card {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}

.gift-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.gift-summary-header h2 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text, #1e293b);
}

.gift-summary-table-wrapper {
  position: relative;
}

.gift-summary-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--surface-muted, #faf9f5);
}

.gift-summary-table th,
.gift-summary-table td {
  padding: 12px 16px;
  text-align: center;
  font-weight: 600;
}

.gift-summary-table th {
  background: var(--accent, #1F2A44);
  color: var(--text-inverse);
  font-size: var(--fs-base);
  letter-spacing: 0.03em;
}

.gift-summary-table td {
  background: var(--surface-muted, #faf9f5);
  font-size: var(--fs-md);
}

.gift-summary-empty {
  padding: 12px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-base);
}

.gift-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 80px;
}

.gift-group-card {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.gift-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 20px;
  border-bottom: 1px solid var(--surface-muted, #faf9f5);
  background: linear-gradient(135deg, #fff8f1 0%, #fff 70%);
}

.gift-group-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text, #1e293b);
}

.gift-group-count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.gift-table {
  width: 100%;
  border-collapse: collapse;
}

.gift-table th {
  text-align: left;
  padding: 12px 18px;
  background: #fffaf3;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--surface-muted, #faf9f5);
}

.gift-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #f6ecdf;
  vertical-align: top;
  background: #fff;
}

.gift-table tr:last-child td {
  border-bottom: none;
}

.gift-designer-name {
  font-weight: 600;
  font-size: var(--fs-md);
  margin-bottom: 6px;
}

.gift-designer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.gift-designer-header .gift-row-indicator {
  min-width: 20px;
}

.gift-table tr.gift-row--poinformowany td {
  background: #fff4e0;
  transition: background-color 0.2s ease;
}

.gift-table tr.gift-row--odebrany td {
  background: #e8f6ec;
  transition: background-color 0.2s ease;
}

.gift-designer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.gift-input {
  width: 100%;
  max-width: 90px;
  padding: 8px 10px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: var(--surface-muted, #faf9f5);
  font-size: var(--fs-base);
}

.gift-input:focus {
  outline: 2px solid rgba(31, 42, 68, 0.2);
}

.gift-col {
  min-width: 120px;
}

.gift-col-remaining {
  min-width: 110px;
  font-weight: 600;
  color: var(--accent, #1F2A44);
}

.gift-col-notes {
  min-width: 220px;
}

.gift-remaining {
  font-weight: 600;
  color: var(--accent-hover, #34456B);
}

.gift-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.gift-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text);
}

.gift-status-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #1F2A44);
}

.gift-status-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.gift-notes {
  width: 100%;
  min-width: 180px;
  min-height: 70px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-warm, #e8dccd);
  background: var(--surface-muted, #faf9f5);
  font-family: inherit;
  resize: vertical;
  font-size: var(--fs-sm);
}

.gift-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 130px;
}

.gift-row-indicator {
  font-size: var(--fs-lg);
  line-height: 1;
  min-width: 20px;
  text-align: center;
  color: var(--accent-hover, #34456B);
}

.gift-placeholder,
.gift-empty {
  padding: 40px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--border-warm, #e8dccd);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.gift-empty-icon {
  font-size: var(--icon-lg);
  margin-bottom: 12px;
}

.gift-error {
  padding: 20px;
  background: #fff2f0;
  border: 1px solid #ffb3a6;
  border-radius: var(--radius-md);
  color: var(--danger);
  text-align: center;
}

.gift-loading {
  position: fixed;
  inset: 0;
  background: rgba(250, 249, 245, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  z-index: 999;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.gift-loading-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid var(--surface-muted, #faf9f5);
  border-top-color: var(--accent, #1F2A44);
  animation: gift-spin 1s linear infinite;
}

@keyframes gift-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
  .gift-table th,
  .gift-table td {
    padding: 12px;
  }

  .gift-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .gift-row-indicator {
    align-self: flex-end;
  }
}

@media (max-width: 768px) {
  .gift-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .gift-status {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .gift-notes {
    min-height: 56px;
  }
}


/* ===== СТИЛИ ДЛЯ МОДУЛЯ РЕКЛАМАЦИЙ ===== */
.modal-large {
  max-width: min(900px, 100%);
  width: min(95vw, 900px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
}

.modal-large .modal-header {
  flex-shrink: 0;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e8e0d5;
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-large .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px;
}

.modal-large .modal-footer {
  flex-shrink: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid #e8e0d5;
  background: #fff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.btn-icon {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
}

.btn-icon:hover {
  background: var(--surface-muted, #faf9f5);
  color: var(--accent, #1F2A44);
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

.action-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Listing ofert: checkbox merge + POWIEL + Usuń w JEDNEJ linii.
   Kolumna była ściśnięta przez auto-layout tabeli (~92px), więc trzy
   elementy się zawijały i podwajały wysokość wiersza. Szerokość ustawiamy
   na th ORAZ td (auto-layout bierze maksimum z kolumny), a kontener akcji
   wymuszamy w jednym rzędzie bez zawijania i bez ściskania dzieci. */
.offers-table--list th.col-actions,
.offers-table--list td.offer-actions {
  /* table-layout: fixed → szerokość kolumny bierze się z nagłówka; !important,
     bo istnieje reguła o wyższym priorytecie ściskająca kolumnę do ~92px. */
  width: 140px !important;
  min-width: 140px !important;
  white-space: nowrap;
}
.offers-table--list td.offer-actions .action-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end;
}
.offers-table--list td.offer-actions .action-buttons > * {
  flex: 0 0 auto;
}

.urgent-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: var(--fs-base);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.empty-message,
.error-message {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-message span,
.error-message span {
  display: block;
  margin-top: 10px;
}


/* Стили для формы рекламаций */
#reklamacjaForm .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

#reklamacjaForm .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#reklamacjaForm .form-group--wide {
  grid-column: 1 / -1;
}

#reklamacjaForm .form-group label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
}

#reklamacjaForm .form-input {
  padding: 8px 10px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: var(--surface-muted, #faf9f5);
  font-size: var(--fs-base);
  font-family: inherit;
}

#reklamacjaForm textarea.form-input {
  min-height: 120px;
  line-height: 1.45;
  resize: vertical;
  padding: 10px 12px;
}

#reklamacjaForm .form-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

#reklamacjaForm .form-input[readonly] {
  background: #f5f5f5;
  cursor: not-allowed;
}

/* Panel dashboard */
.panel-dashboard-host {
  margin-bottom: 20px;
}

.panel-dashboard {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.panel-dashboard__title {
  margin: 0 0 16px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text, #1e293b);
}

.panel-dashboard__loading {
  color: var(--text-muted, #475569);
  font-size: var(--fs-base);
  padding: 8px 0;
}


.panel-dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-dash-action {
  font-size: var(--fs-base);
}

/* Nagłówek dashboardu: tytuł + chipy akcji (styl jak skróty w topbarze) */
.panel-dashboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.panel-dashboard__head .panel-dashboard__title {
  margin: 0;
}

.panel-dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-warm, #e8dccd);
  background: #fff;
  color: var(--text, #1e293b);
  font: 600 13px/1 inherit;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-height: var(--touch-min, 44px);
}

.panel-dash-chip:hover,
.panel-dash-chip:focus-visible {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--shadow-md);
  background: #EDF0F7;
}

.panel-dash-chip__ico {
  font-size: var(--fs-md);
}

/* Personalizacja chipów: przycisk „＋" + menu z gwiazdkami (jak skróty topbara) */
.panel-dash-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-dash-actions__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-dash-actions__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text, #1e293b);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
}

.panel-dash-actions__more:hover,
.panel-dash-actions__more:focus-visible {
  background: #EDF0F7;
  border-color: var(--accent, #1F2A44);
}

.panel-dash-actions__more:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.panel-dash-actions__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1200;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-shadow: var(--shadow-lg);
}

.panel-dash-actions__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text, #1e293b);
  font: inherit;
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
}

.panel-dash-actions__row:hover,
.panel-dash-actions__row:focus-visible {
  background: #EDF0F7;
}

.panel-dash-actions__row:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
}

.panel-dash-actions__star {
  width: 20px;
  text-align: center;
  color: var(--accent, #1F2A44);
  font-size: var(--fs-md);
}

/* Osobista lista zadań */
.panel-dash-todo {
  margin-bottom: 16px;
}

.panel-dash-todo__form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.panel-dash-todo__input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #f8f6f3;
}

.panel-dash-todo__input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  background: #fff;
}

.panel-dash-todo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}

.panel-dash-todo__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}

.panel-dash-todo__item:hover {
  background: #f8f6f3;
}

.panel-dash-todo__label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.panel-dash-todo__check {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #1F2A44);
  flex: none;
  cursor: pointer;
}

.panel-dash-todo__text {
  font-size: var(--fs-base);
  overflow-wrap: anywhere;
}

.panel-dash-todo__item--done .panel-dash-todo__text {
  text-decoration: line-through;
  color: var(--text-muted, #475569);
}

.panel-dash-todo__del {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--danger);
  font-size: var(--icon-sm);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}

.panel-dash-todo__item:hover .panel-dash-todo__del,
.panel-dash-todo__del:focus-visible {
  opacity: 1;
}

.panel-dash-todo__del:hover {
  background: #fee2e2;
}

.panel-dash-todo__empty {
  color: var(--text-muted, #475569);
  font-size: var(--fs-sm);
  padding: 6px 2px;
  list-style: none;
}

.panel-dash-todo__clear {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--text-muted, #475569);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
}

.panel-dash-todo__clear:hover {
  color: var(--accent, #1F2A44);
}

@media (max-width: 768px) {
  .panel-dash-todo__del {
    opacity: 1; /* na dotyku brak hovera */
  }
}

/* Polski format dat w filtrach */
input[type="date"][lang="pl"] {
  font-family: inherit;
}

/* Reklamacje — pełny tekst statusu */
.offers-table .reklamacja-row td:nth-child(7) {
  min-width: 11rem;
  max-width: none;
}

.reklamacja-status-badge {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
}

/* ===== Mobile card layout dla tabel list ===== */
@media (max-width: 768px) {
  .mobile-cards-container {
    overflow-x: visible;
    border: none;
    background: transparent;
  }

  .mobile-cards-table {
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 12px;
  }

  .mobile-cards-table thead {
    display: none;
  }

  .mobile-cards-table tbody {
    display: block;
  }

  .mobile-cards-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #e8e0d8;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .mobile-cards-table tbody tr.reklamacja-row,
  .mobile-cards-table tbody tr.offer-row,
  .mobile-cards-table tbody tr.order-row {
    cursor: pointer;
  }

  .mobile-cards-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid #f3ede6 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    background: transparent !important;
    color: inherit !important;
  }

  .mobile-cards-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    flex: 0 0 42%;
    padding-right: 8px;
  }

  .mobile-cards-table tbody td:last-child {
    border-bottom: none !important;
  }

  .mobile-cards-table tbody td.loading-message,
  .mobile-cards-table tbody td.empty-message,
  .mobile-cards-table tbody td.error-message,
  .mobile-cards-table tbody td.no-data {
    display: block;
    text-align: center;
    padding: 24px 16px !important;
  }

  .mobile-cards-table tbody td.loading-message::before,
  .mobile-cards-table tbody td.empty-message::before,
  .mobile-cards-table tbody td.error-message::before,
  .mobile-cards-table tbody td.no-data::before {
    content: none;
  }

  .mobile-cards-table tbody td.col-actions,
  .mobile-cards-table tbody td.actions-cell,
  .mobile-cards-table tbody td.offer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-cards-table tbody td.col-actions .action-buttons,
  .mobile-cards-table tbody td.actions-cell .action-buttons,
  .mobile-cards-table tbody td.offer-actions .action-buttons {
    justify-content: flex-end;
    width: 100%;
  }

  .mobile-cards-table tbody td .status-select {
    max-width: 100%;
    width: 100%;
  }

  /* Na mobile: numer oferty zamiast daty jako pierwszy wiersz karty */
  .mobile-cards-table tbody td.offer-date,
  .mobile-cards-table tbody td.col-date {
    display: none !important;
  }

  .mobile-cards-table tbody td.offer-number,
  .mobile-cards-table tbody td.col-number {
    font-weight: 700;
    font-size: var(--fs-md);
    border-bottom: 1px solid #e8e0d8 !important;
    background: #faf9f7 !important;
  }

  .mobile-cards-table tbody td.offer-number::before,
  .mobile-cards-table tbody td.col-number::before {
    color: var(--text-muted);
  }

  /* Próbki: kolumny ukrywane na węższych desktopach (nth-child w <head> probki.html)
     wracają w widoku kart — tam pionowe miejsce jest tanie */
  .probki-page .mobile-cards-table tbody td:not(.loading-message):not(.no-data) {
    display: flex !important;
  }

  /* Próbki: kolumna akcji jako pełnowymiarowe przyciski jeden pod drugim */
  .mobile-cards-table tbody td.probki-actions-cell {
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-cards-table tbody td.probki-actions-cell .btn {
    min-height: var(--touch-min, 44px);
  }

  /* Próbki: wrapper .probki-table ma overflow:hidden — nie przycinamy cieni kart */
  .probki-page .probki-table.mobile-cards-container {
    overflow: visible;
  }
}

/* ===== Cross-links między modułami ===== */
.entity-cross-link {
  color: var(--accent, #1F2A44);
  font-weight: 600;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.entity-cross-link:hover {
  color: var(--accent-hover, #34456B);
  text-decoration: underline;
}

.entity-cross-link--btn {
  display: inline;
}

.entity-cross-link-sep {
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- cieply
     separator "·" miedzy linkami; najblizszy token lezy 65 jednostek RGB dalej,
     a element jest dekoracyjny, wiec token bylby przemalowaniem */
  color: #c4b5a8;
  margin: 0 6px;
  user-select: none;
}

.offer-related-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.offer-related-links.hidden {
  display: none;
}

.offer-related-links__label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
}

.offer-related-links__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* === A11y (fala 1): zbiorczy widoczny fokus klawiatury =====================
   Kontrolkom nizej zdejmowano outline zostawiajac cien rgba .1-.2 (~1,1:1,
   niewidoczny). Ta regula jest OSTATNIA w bundlu (css/* sa @import, wiec
   hoistowane na poczatek), ma te same specyficznosci co wycinacze i wygrywa
   pozycja. Klik myszka bez zmian — dziala tylko :focus-visible. */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.login-input:focus-visible,
.filter-input:focus-visible,
.filter-select:focus-visible,
.currency-select:focus-visible,
.vat-select:focus-visible,
.panel-dash-todo__input:focus-visible,
.panel-dash-chip:focus-visible,
.icon-btn:focus-visible,
.linklike:focus-visible,
#reklamacjaForm .form-input:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
}

/* === Fala 1 (mobile): blokada auto-zoomu iOS + cele dotykowe ===============
   Safari na iOS powieksza cala strone przy fokusie pola o font-size < 16px.
   Stary fix (Предотвращает зум) byl martwy — nadpisywala go pozniejsza regula
   o tej samej specyficznosci. Jedno miejsce zamiast poprawek w 8 blokach @media;
   koniec pliku = wygrana pozycja przy remisie. !important konieczne, bo
   konkurenci tez go maja. Lancuch :not() wyklucza kontrolki, ktorych nie wolno
   rozciagac do 44px, i podnosi specyficznosc <input> ponad (0,5,0)
   z offer-form-clean.css. Pola maja height ORAZ max-height 24-36px — bez
   height:auto/max-height:none tekst 16px bylby przyciety; min-height wygrywa
   z max-height, wiec --touch-min domyka konwencje 44px. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  .form-input,
  .form-select,
  .search-input,
  .filter-input,
  .filter-select,
  .oferta-input,
  .login-input,
  .status-select {
    font-size: var(--fs-md) !important;
    line-height: var(--lh-tight) !important;
    height: auto !important;
    max-height: none !important;
    min-height: var(--touch-min) !important;
  }

  /* Textarea dostaje TYLKO rozmiar tekstu — min-height 44px SKROCILOBY pole
     (bazowe min-height to 100px). */
  textarea,
  .form-textarea {
    font-size: var(--fs-md) !important;
    line-height: var(--lh-base) !important;
  }
}

/* ===== Scalony ekran ofert/zamowien: przelacznik widoku ===== */
.list-view-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  background: var(--surface-muted, #faf9f5);
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-pill);
}

.list-view-toggle__btn {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 44px;
}

.list-view-toggle__btn.is-active {
  background: var(--card, #fff);
  color: var(--text, #2b221c);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
}