[hidden]{display:none !important;}

    body { font-family: Arial, sans-serif; margin: 10px; }
    h2 { font-size: 20px; }
    input, button { font-size: 16px; padding: 2px; margin: 6px 0; width: 100%; box-sizing: border-box; border: 2px solid #ccc; }
    table { width: 100%; border-collapse: collapse; margin-top: 0px; font-size: 14px; }
    th, td { border: 1px solid #ccc; padding: 6px; text-align: center; }
    th { background: #f0f0f0; }

    tr.ok { background: #d4edda; }
    tr.brak { background: #fff3cd; }
    tr.nadwyzka { background: #f8d7da; }
    tr.nie { background: #e2e3e5; }

    td.photoCell.photoHas {
  background: #e7f1ff;
  cursor: pointer;
  font-weight: bold;
}
td.photoCell.photoHas:active {
  filter: brightness(0.97);
}

.modalBox {
  background:#fff;
  margin:0% auto;
  padding: 3px 10px 0px 10px;
  width:95%;
  max-width:420px;
  border-radius:10px;

  max-height: calc(95vh - 10mm);   /* niżej o ok. 1 cm */
  margin-bottom: 20mm;             /* odstęp od dołu o ok. 2 cm */

  overflow-y:auto;
}

.searchWrap{
  flex:1;
  display:flex;
  gap:6px;
  align-items:center;
}


#nameFilter{
  width:auto; 
  height:24px;
  padding:8px 10px;
  border:2px solid #ccc;
  box-sizing:border-box;
}

/* C: stała szerokość */
#clearNameFilterBtn,
.clearBtn{
  flex:0 0 38px;
  width:38px !important;
  height:24px;
  padding:0;
  border:2px solid #ccc;
  background:#f0f0f0;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
}

.clearBtn:active{ transform:scale(0.98); }

.filtersBar{
  display:flex;
  align-items:center;
  gap:0px;
  margin:0;
  padding:0;
}

/* usuń globalne marginesy dla input/button tylko w pasku filtrów */
.filtersBar input,
.filtersBar button{
  margin:0 !important;
}
/* usuń globalne marginesy dla input/button tylko w pasku filtrów */
.filtersBar input,
.filtersBar button{
  margin:0 !important;
}


#btnDiscrep{
  flex:0 0 80px;      /* <- ustaw na sztywno (zmień jeśli chcesz) */
  height:24px;
  width:130px;
  white-space:nowrap;
  font-weight:bold;
}

#damagePhotosGrid { justify-content: flex-start; }
#damagePhotosWrap { width: 100%; }

     
    .modalHeader { display:flex; justify-content:space-between; align-items:center; }
    .modalHeader h3 {margin: 0;}
    .closeBtn { width:auto; padding:6px 12px; font-size:20px; background:#ccc; border-radius:50%; }

    .keypad { display:grid; grid-template-columns: repeat(3, 1fr); column-gap:4px; row-gap:1px; margin-top:6px; }
    .keypad .span3 { grid-column: span 3; }
    .keypad .plus { background:#28a745; color:#fff; }
    .keypad button { font-size:14px; padding:3px 1px; }

      /* Pasek akcji w modalu */
  .modalTopActions{
    display:flex;
    gap:6px;
    align-items:center;
    margin:0px 0 0px 0;
  }

  /* Małe przyciski obok siebie */
  .miniBtn{
    width:auto !important;
    flex: 0 0 auto;
    padding:8px 10px;
    font-size:14px;
    border-radius:10px;
    border:2px solid #ccc;
    background:#6c757d;
    color:#fff;
    line-height:1;
    white-space:nowrap;
  }

  .miniBtn:active{
    transform: scale(0.98);
  }
#modal, #summaryModal, #unknownModal, #manualCodeModal, #infoModal, #damageModal, #photoViewerModal, #clearConfirmModal, #removeDocConfirmModal {
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.6);
  z-index:1000;
}

#filePickerStatus{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-left:2px;
  padding-left:2px;
}

#clearAllBtn{
  flex:0 0 125px;     /* stała szerokość przycisku */
  width:170px;
  height:38px;
  margin:0;
  padding:8px 10px;
  border-radius:10px;
  font-weight:bold;
  white-space:nowrap;
  background:#dc3545;
  border:2px solid #bd2130;
  color:#fff;
}
#clearAllBtn:active{ transform:scale(0.98); }



   @media (max-width: 768px) {
  #dataTable tr { cursor: pointer; }
  #dataTable td { pointer-events: none; }
  #dataTable td button { pointer-events: auto; }

  #dataTable, #dataTable thead, #dataTable tbody, #dataTable th, #dataTable td, #dataTable tr { display: block; }
  #dataTable thead { display: none; }
  #dataTable tr { margin-bottom: 12px; border: 2px solid #ccc; border-radius: 0px; padding: 8px; }
  #dataTable td { border: none; text-align: left; padding: 4px 0; font-size: 14px; }
  #dataTable td::before { font-weight: bold; display: inline-block; width: 110px; }

  /* Uwaga: tu wpisz etykiety wg Twoich kolumn w #dataTable */
  #dataTable td:nth-of-type(1)::before { content: 'LP: '; }
  #dataTable td:nth-of-type(2)::before { content: 'Kod: '; }
  #dataTable td:nth-of-type(3)::before { content: 'Nazwa: '; }
  #dataTable td:nth-of-type(4)::before { content: 'Dostawa: '; }
  #dataTable td:nth-of-type(5)::before { content: 'Zeskan.: '; }
  #dataTable td:nth-of-type(6)::before { content: 'Brak: '; }
  #dataTable td:nth-of-type(7)::before { content: 'Nadw.: '; }
  #dataTable td:nth-of-type(8)::before { content: 'Uszk.: '; }
  #dataTable td:nth-of-type(9)::before { content: '📷: '; }
  #dataTable td:nth-of-type(10)::before { content: 'Status: '; }
  #dataTable td.photoCell { pointer-events: auto; }


}

/* OSTATNIE SKANY – stałe kolumny identyczne dla (3) i (wszystkie) */
#lastScansTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;        /* <- klucz */
  font-size:12px;
}

#lastScansTable th,
#lastScansTable td{
  box-sizing:border-box;
}

/* szerokości kolumn (dopasuj jeśli chcesz) */
#lastScansTable th:nth-child(1),
#lastScansTable td:nth-child(1){ width:54px; }   /* Czas */

#lastScansTable th:nth-child(2),
#lastScansTable td:nth-child(2){ width:100px; }  /* Kod */

#lastScansTable th:nth-child(4),
#lastScansTable td:nth-child(4){ width:25px; }   /* Dok. */

#lastScansTable th:nth-child(5),
#lastScansTable td:nth-child(5){ width:25px; }   /* Ost. + */

/* Nazwa ma się zawijać i zajmuje resztę */
#lastScansTable th:nth-child(3),
#lastScansTable td:nth-child(3){
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}
#lastScansTable th,
#lastScansTable td{
  padding:1px !important;
  font-size:8px;
  line-height:1;
}

.filePickerRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 6px 0;
  flex-wrap:nowrap; 
 }


.filePickerRow input[type="file"]{
  display:none; /* ukrywamy natywny "Nie wybrano pliku" */
}

.fileBtn{
  display:inline-block;
  width:115px;
  padding:8px 12px;
  box-sizing:border-box;   /* ✅ KLUCZ: padding wlicza się w 95px */
  border-radius:10px;
  border:2px solid #0b5ed7;
  background:#e7f1ff;
  color:#0b5ed7;
  font-weight:bold;
  cursor:pointer;
  user-select:none;
}

.fileBtn:active{
  transform: scale(0.98);
}

.fileStatus{
  font-size:14px;
  font-weight:bold;
  color:#6c757d;
  white-space:nowrap;
}

.fileStatus.hasFiles{
  color:#dc3545; /* czerwony gdy są już dokumenty */
}
.topBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}


.topActions{
  display:flex;
  align-items:center;
  gap:8px;                 /* działa w nowych przeglądarkach */
  flex-wrap:nowrap;
}
.topActions .mailMiniBtn{
  margin-left:8px;
}

/* małe maile */
.mailMiniBtn{
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #bbb;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.mailMiniBtn:hover{ filter: brightness(0.97); }

[hidden]{display:none !important;}

.authMiniBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:88px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid #bbb;
  background:#fff;
  cursor:pointer;
  line-height:1.1;
  gap:4px;
}
.authMiniBtn:hover{filter:brightness(.97);}
.authMiniBtn__email{
  font-size:8px;
  color:#667085;
  font-weight:500;
  white-space:nowrap;
  max-width:112px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.authMiniBtn__logout{
  font-size:15px;
  font-weight:700;
  color:#111827;
}

/* +1 */
.scanBtn{
  width:auto !important;
  min-width:10mm;
  min-height:10mm;
  padding:8px 12px;
  font-size:14px;
  font-weight:bold;
  border-radius:8px;
  border:2px solid #1e7e34;
  background:#28a745;
  color:#fff;
  white-space:nowrap;
}
.scanBtn:active{ transform:scale(0.98); }



/* Overlay/pasek nad polem skanowania - tylko tryb +1 */
.plusOneOverlayWrap{
  position: relative;
  min-height: 0;
}
.plusOneOverlay{
  display:none;
  width:100%;
  box-sizing:border-box;
  margin:6px 0 0 0;
  padding:10px 12px;
  border:2px solid transparent;
  border-radius:10px;
  color:#fff;
  font-weight:700;
  line-height:1.2;
  box-shadow:0 4px 12px rgba(0,0,0,0.14);
  transition:background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.plusOneOverlay.is-visible{
  display:block;
}
.plusOneOverlayTitle{
  font-size:16px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.plusOneOverlaySub{
  font-size:12px;
  font-weight:600;
  opacity:0.96;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.plusOneOverlay.okA{ background:#28a745; border-color:#1e7e34; }
.plusOneOverlay.okB{ background:#0d6efd; border-color:#0b5ed7; }
.plusOneOverlay.overA{ background:#dc3545; border-color:#bd2130; }
.plusOneOverlay.overB{ background:#ffc107; border-color:#d39e00; color:#212529; }
.plusOneOverlay.overB .plusOneOverlaySub{ opacity:1; }
@media (max-width: 640px){
  .plusOneOverlay{
    padding:9px 10px;
    border-radius:8px;
  }
  .plusOneOverlayTitle{ font-size:15px; }
  .plusOneOverlaySub{ font-size:11px; }
}

/* Wiersz skanowania: +1, input, ⌨️, 🔍 w jednej linii */
.scanRow{
  display:flex;
  gap:6px;
  align-items:center;
}

/* Input w tym wierszu */
.scanRowInput{
  flex:1;
  width:100%;
  height:38px;           
  padding:2px 8px;
  margin:6px 0;
  font-size:16px;
  border:2px solid #ccc;
  border-radius:0;       
  box-sizing:border-box;
}

/* Wspólne przyciski w tym wierszu */
.scanRowBtn{
  width:auto !important;
  height:38px;           
  padding:0 10px;
  margin:6px 0;
  font-size:16px;
  border:2px solid #ccc;
  border-radius:0;       
  background:#f0f0f0;
  box-sizing:border-box;
  white-space:nowrap;
}

/* +1 ma zielony wygląd */
.scanPlusBtn{
  border-color:#1e7e34;
  background:#28a745;
  color:#fff;
  font-weight:bold;
}

.scanPlusBtn:active,
.scanRowBtn:active{
  transform:scale(0.98);
}
/* Podsumuj = identyczna szerokość jak "Wczytaj plik" */
#closeDocBtn.topBtn{
  width:115px !important;
  padding:8px 12px;        /* ✅ takie samo jak .fileBtn */
  box-sizing:border-box;   /* ✅ */
  height:38px;                /* wspólna wysokość w topBar */
  display:flex;
  align-items:center;
  justify-content:center;

  /* możesz zostawić wygląd "niebieski" */
  background:#0d6efd;
  border:2px solid #0b5ed7;
  color:#fff;
  border-radius:10px;         /* jak reszta przycisków */
  font-weight:bold;
  white-space:nowrap;
}
#closeDocBtn.topBtn:active{ transform:scale(0.98); }

#closeDocBtn:active{
  transform:scale(0.98);
}

/* ✅ TYLKO klawiatura w modalu (cyfry 1-9, 0, ⌫, C, +) */
#modal .keypad button{
  margin: 0 !important;       /* usuwa 6px góra/dół z globalnego button */
  width: 100% !important;     /* zostaje szerokość w kratce */
  padding: 12px 6px;          /* większy przycisk */
  font-size: 20px;            /* większe cyfry */
  height: 52px;               /* stała wysokość */
  border-radius: 10px;
}

/* ✅ odstępy w samej siatce klawiatury (modalu produktu) */
#modal .keypad{
  column-gap: 4px;
  row-gap: 4px;
}

/* ✅ większy przycisk "+" na całą szerokość */
#modal .keypad .plus{
  font-size: 26px;
  height: 56px;
}

/* Fill-missing przyciski dokumentów: 5 w wierszu na mobile */
#fillMissingWrap.fm-grid{
  display:grid;
  gap:4px;
  margin: 6px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
@media (max-width: 520px){
  #fillMissingWrap.fm-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
#fillMissingWrap.fm-grid .fmBtn{
  width:100%;
  border-radius:6px;
  border: 1px solid rgba(255,255,255,.25);
  padding:6px 4px;
  min-height:54px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  line-height:1.05;
  cursor:pointer;
}
#fillMissingWrap.fm-grid .fmDocName{
  font-size: clamp(5px, 1.6vw, 9px);
  text-align:center;
  white-space:normal;
  word-break:break-word;
}
#fillMissingWrap.fm-grid .fmQty{
  font-size:20px; /* jak klawiatura w modalu */
  font-weight:800;
}

#fillMissingWrap.fm-grid .fmBtn.fmBtnSingle{
  grid-column: 1 / -1;
}
#fillMissingWrap.fm-grid .fmBtn.fmDisabled{
  opacity:.55;
  cursor:not-allowed;
}

#modal p{
  margin: 2px 0;   /* zamiast domyślnych ~16px */
}

#modal #modalInput{
  margin: 2px 0;   /* możesz dać np. 4px 0 */
}

#modalInfo{
  font-size: 12px;
}
#modalTitle .modalKod{
  font-size: 12px;      /* zmniejsza tylko kod */
  font-weight: normal;
  color: #666;
}
/* input + klawiatura w sekcji "Inny kod" */
#altCodeSection .altCodeRow{
  display:flex;
  gap:6px;
  align-items:center;
}

#altCodeInput{
  flex:1;
  width:100%;
  height:38px;
  padding:2px 8px;
  font-size:16px;
  border:2px solid #ccc;
  box-sizing:border-box;
}

.altKbdBtn{
  width:auto !important;
  height:38px;
  padding:0 10px;
  border:2px solid #ccc;
  background:#f0f0f0;
  box-sizing:border-box;
}
.altKbdBtn:active{ transform:scale(0.98); }

/* ===== TYLKO MODAL PRODUKTU: ciaśniej między tytułem a guzikami ===== */

/* usuń luz w headerze (między tytułem a następną linią) */
#modal .modalHeader{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* tytuł bez marginesów + mniejsza wysokość linii */
#modal #modalTitle{
    font-size: 12px;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.05 !important;
}

/* guziki bliżej tytułu */
#modal .modalTopActions{
  margin-top: 0 !important;     /* było 2px, dajemy 0 */
  padding-top: 0 !important;
}

/* jeśli dalej jest luz – to jest margines pierwszego <p> po guzikach */
#modal .modalTopActions + p{
  margin-top: 2px !important;   /* zmień np. na 0 */
}

/* ===== FIX: usuń przerwę między tytułem a przyciskami w MODALU PRODUKTU ===== */

/* żeby można było pozycjonować X w prawym górnym rogu */
#modal .modalBox{
  position: relative;
}

/* header niech nie “robi” wysokości pod X */
#modal .modalHeader{
  align-items: flex-start;      /* zamiast center */
  padding: 0 !important;
  margin: 0 !important;
}

/* tytuł bez luzów, z miejscem na X po prawej */
#modal #modalTitle{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.05 !important;
  padding-right: 46px;          /* miejsce na X */
}

/* X absolutnie -> nie powiększa wysokości nagłówka */
#modal .closeBtn{
  position: absolute;
  top: 6px;
  right: 6px;
  width: auto !important;
  height: 32px;
  padding: 0 10px;
  line-height: 32px;
  font-size: 18px;
  border-radius: 999px;
}

/* przyciski bliżej tytułu */
#modal .modalTopActions{
  margin-top: 2px !important;
  padding-top: 0 !important;
}

#modal .modalTopActions .miniBtn{
  height: 24px !important;     /* było ~38 */
  padding: 2px 8px !important; /* mniejsze */
  font-size: 12px !important;  /* mniejszy tekst */
  border-radius: 8px !important;
  line-height: 1 !important;
}
#altCodesList{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.altChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid #ccc;
  border-radius:999px;
  background:#f7f7f7;
  font-size:12px;
}

.altChip button{
  width:auto !important;
  padding:0 6px;
  margin:0 !important;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:14px;
}
#dataTable{
  margin-top:0 !important;
}
/* czerwone liczby w modalu (gdy warunek spełniony) */
.modalNumAlert{
  color:#dc3545;
  font-weight:bold;
}
/* ===== WGRANE DOKUMENTY: tabela bez scrolla poziomego ===== */
#docsWrap{
  overflow-x:hidden;          /* żadnego poziomego scrolla */
}

#docsWrap table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;         /* klucz do wrapowania */
  font-size:8px;
  border: 2px solid #ccc;
  }

#docsWrap th, #docsWrap td{
  border:1px solid #ccc;
  padding:0px;
  text-align:left;
  vertical-align:top;
  white-space:normal;         /* pozwól zawijać */
  overflow-wrap:anywhere;     /* zawijaj nawet długie ciągi */
  word-break:break-word;
  margin:0px;
        /* fallback */
}

/* ✅ tylko komórka kosza jest klikalna jak "Nowa dost." */
.docsTrashCell{
  background:#dc3545;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  text-align:center;
  user-select:none;
}

.docsTrashCell:active{
  transform: scale(0.99);
  filter: brightness(0.95);
}

.docsTrashIcon{
  font-size:16px;
}
/* ✅ nagłówek kolumny kosza wyśrodkowany */
.docsTrashHead{
  text-align:center !important;
  vertical-align:middle !important;
}

/* ✅ komórka kosza (wiersze) - idealnie na środku */
.docsTrashCell{
  background:#dc3545;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  user-select:none;

  text-align:center !important;
  vertical-align:middle !important;

  /* centrowanie ikony w komórce */
  padding:0 !important;
}

.docsTrashCell{
  display:table-cell;   /* pewność że działa jak td */
}

/* ✅ ikonka kosza zawsze w środku */
.docsTrashIcon{
  font-size:16px;
  line-height:1;
  display:inline-block;
  width:100%;
  text-align:center;
}

/* klik efekt */
.docsTrashCell:active{
  transform: scale(0.99);
  filter: brightness(0.95);
}
/* === FILTR DOKUMENTU (WGRANE DOKUMENTY) === */
.docsRowActive td{
  background:#bcbfc2;
}

/* ===== STATUS WIERSZA DOKUMENTU (WGRANE DOKUMENTY) ===== */
.docsRowEmpty td:not(.docsTrashCell):not(.docsFilterCell){
  background:#fff;
}

.docsRowOk td:not(.docsTrashCell):not(.docsFilterCell){
  background:#4bd66c;   /* zielony */
}

.docsRowWarn td:not(.docsTrashCell):not(.docsFilterCell){
  background:#ddbd55;   /* pomarańczowy */
}

/* żeby filtr (aktywny dokument) nie zabijał kolorów tła */
.docsRowActive td{
  background: inherit !important;
}
.docsRowActive{
  outline:2px solid #0b5ed7;
  outline-offset:-2px;
}


.docsFilterHead{
  text-align:center !important;
  vertical-align:middle !important;
}

.docsFilterCell{
  background:#7799ce;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  user-select:none;
  text-align:center !important;
  vertical-align:middle !important;
  padding:0 !important;
}

.docsFilterCell.active{
  background:#28a745;
  border-color:#1e7e34;
}

.docsFilterIcon{
  font-size:16px;
  line-height:1;
  display:inline-block;
  width:100%;
  text-align:center;
}

.docsFilterCell:active{
  transform: scale(0.99);
  filter: brightness(0.95);
}
/* klikany wiersz (oprócz kosza) */
#docsWrap tbody tr { cursor: pointer; }

/* filtr: gdy nieaktywny i gdy brak sensu filtrowania (1 plik) */
.docsFilterCell.disabled{
  background:#e2e3e5;
  border-color:#ccc;
  color:#666;
}

/* kosz: wariant wyłączony (gdy 1 plik) */
.docsTrashCell.disabled{
  background:#e2e3e5;
  border-color:#ccc;
  color:#666;
  cursor:not-allowed;
}
.docsTrashCell.disabled .docsTrashIcon{
  opacity:0.6;
}

/* ===== OSTATNIE SKANY – stabilne kolumny (colgroup) ===== */
#lastScansTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;       /* klucz */
  font-size:8px;
}

/* Szerokości kolumn – możesz tu korygować */
#lastScansTable col.cTime{ width:40px; }
#lastScansTable col.cCode{ width:70px; }
#lastScansTable col.cDoc { width:100px; }
#lastScansTable th:nth-child(5),
#lastScansTable td:nth-child(5){
  white-space: normal !important;
  overflow-wrap: anywhere;
}
/* Nazwa (cName) bierze resztę */

/* Wspólne */
#lastScansTable th,
#lastScansTable td{
  box-sizing:border-box;
  border:1px solid #ccc;
  padding:1px !important;
  line-height:1;
  vertical-align:top;
}

/* Sztywne kolumny: nie rozpychają tabeli */
#lastScansTable th:not(:nth-child(3)),
#lastScansTable td:not(:nth-child(3)){
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Nazwa: może się zawijać i nie rozwala szerokości */
#lastScansTable th:nth-child(3),
#lastScansTable td:nth-child(3){
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* ===== FIX: pasek "Różnice + Szukaj (nazwa)" nie wyjeżdża poza ekran ===== */

.filtersBar{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
}

/* ważne w flex: pozwala elementom się zwężać zamiast wypychać poza ekran */
.searchWrap{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
}

/* input ma się ROZCIĄGAĆ do końca */
#nameFilter{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  height:38px;          /* dopasuj jeśli chcesz mniejsze */
  margin:0 !important;
}

/* przycisk C zawsze w ekranie */
#clearNameFilterBtn{
  flex:0 0 38px;
  width:38px !important;
  height:38px;          /* dopasuj jeśli chcesz mniejsze */
  margin:0 !important;
  padding:0;
}

/* opcjonalnie: żeby "Różnice" nie zabierało za dużo miejsca na wąskich ekranach */
#btnDiscrep{
  flex:0 0 110px;       /* było 80 + width 130 (mieszanka) */
  width:110px;
  height:38px;
}
@media (max-width:360px){
  #btnDiscrep{ flex-basis:95px; width:95px; }
}

  

body.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(180deg,#081224 0%,#0f172a 100%);}
.login-shell{width:min(100%,420px);padding:24px;}
.login-card{background:#0b1220;color:#e5eefc;border:1px solid rgba(148,163,184,.18);border-radius:24px;padding:28px;box-shadow:0 20px 50px rgba(2,6,23,.45)}
.login-card__brand{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 14px;border-radius:999px;background:#1d4ed8;color:#fff;font-weight:800;margin-bottom:18px}
.login-card h1{margin:0 0 8px;font-size:32px}
.login-card__lead{margin:0 0 18px;color:#a9b8d0}
.login-form{display:grid;gap:14px}
.login-form label{display:grid;gap:8px;font-weight:600}
.login-form input{height:48px;border-radius:14px;border:1px solid rgba(148,163,184,.24);background:#111a2c;color:#fff;padding:0 14px}
.login-form button,#logoutBtn{height:48px;border:none;border-radius:14px;background:#2563eb;color:#fff;font-weight:700;cursor:pointer;padding:0 18px}
.login-form button:disabled{opacity:.65;cursor:wait}
.login-error{margin-top:12px;color:#fecaca;background:#450a0a;border:1px solid #7f1d1d;padding:10px 12px;border-radius:12px}
.login-loading{margin-top:12px;color:#cbd5e1}
.auth-topbar{position:sticky;top:0;z-index:30;background:rgba(8,18,36,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(148,163,184,.16)}
.auth-topbar__inner{max-width:1600px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;color:#e5eefc}
.auth-brand{display:flex;gap:10px;align-items:baseline}.auth-brand span{color:#93a4bf;font-size:13px}
.auth-user-wrap{display:flex;align-items:center;gap:12px}#authUserEmail{color:#cbd5e1;font-size:14px}
#logoutBtn{height:40px;padding:0 14px;border-radius:12px}
.auth-loading{display:grid;place-items:center;min-height:100vh;color:#e5eefc;background:#081224;font-size:18px}


.mailMiniBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:72px;
  line-height:1.1;
}
.mailMiniBtn__label{
  font-size:8px;
  color:#667085;
  font-weight:500;
  white-space:nowrap;
  max-width:112px;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.1;
  letter-spacing:0;
  font-family:inherit;
}
.mailMiniBtn__action{
  font-size:15px;
  font-weight:700;
  color:#111827;
  line-height:1.1;
  letter-spacing:0;
  font-family:inherit;
}


/* v3 patch: górna i dolna linia przycisku Mail identyczne jak w Wyloguj */
.mailMiniBtn__label,
.authMiniBtn__email{
  font-size:8px;
  color:#667085;
  font-weight:500;
  white-space:nowrap;
  max-width:112px;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.1;
  letter-spacing:0;
  font-family:inherit;
}
.mailMiniBtn__action,
.authMiniBtn__logout{
  font-size:15px;
  font-weight:700;
  color:#111827;
  line-height:1.1;
  letter-spacing:0;
  font-family:inherit;
}