/* === Reset i podstawowe ustawienia === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    background-color: #D4D9DB;
}

/* === Header (nagłówek górny) === */
.header {
    height: 50px;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.logo-index {
    font-family: 'DM Sans', sans-serif;
    font-size: 30px;
    font-weight: 400;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
    outline: none;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.03);
    color: #fff;
}
.logo-index:active,
.logo-index:focus {
    outline: none;
}
.user-info {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
}
.user-icon {
    width: 20px;
    margin-left: 4px;
}
.user-login {
    user-select: none;
}

/* === Sidebar (panel boczny) === */
.sidebar {
    width: 215px;
    background: #444;
    color: #fff;
    padding: 20px;
    padding-top: 15px;
    position: fixed;
    top: 48px;
    bottom: 0;
    overflow-y: auto;
}
.menu .maincategory {
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 18px;
    user-select: none;
}
.submenu {
    padding-left: 15px;
}
.submenu a {
  color: #fff;
  font-size: 16px;
  display: block;
  text-decoration: none;
}
.expand-button {
    display: block;
    width: 140px;
    padding: 8px;
    margin: 0 auto 15px;
    background: #666;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
}

/* === Content (główna zawartość) === */
.content {
    margin: 68px 20px 20px 230px;
}

/* === Dashboard (ekran główny) === */
.dashboard-bg h1,
.dashboard-bg p {
    user-select: none;
}

/* === Logo na stronie logowania/odzyskiwania hasła === */
.logo-logowanie {
    position: absolute;
    top: 0px;
    left: 16px;
    font-size: 30px;
    font-weight: 400;
    color: #1C2228;
    user-select: none;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.03);
    text-decoration: none;
    cursor: pointer;
}

/* === Wiersz z checkboxem "Pokaż hasło" === */
.show-password-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    width: 100%;
}
.show-password-label {
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 14px;
    color: #222;
    cursor: pointer;
    user-select: none;
}

/* === Kontener logowania/odzyskiwania hasła === */
.login-bg {
    min-height: 100vh;
    min-width: 100vw;
    background-color: #D4D9DB;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
}
.login-container {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    padding: 36px 28px 28px 28px;
    min-width: 320px;
    max-width: 350px;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-container h2 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 600;
    color: #222;
    letter-spacing: 0.5px;
}

/* === Pola input na logowaniu i odzyskiwaniu hasła === */
.logowanie-input-field {
    width: 100%;
    font-size: 16px;
    border-radius: 12px;
    border: 1px solid #ccc;
    padding: 9px 12px;
    margin-bottom: 12px;
    font-family: 'DM Sans', sans-serif;
    background: #F7F7F7;
    transition: border 0.2s;
}
.logowanie-input-field:focus {
    border: 1.5px solid #007BFF;
    outline: none;
    background: #fff;
}

/* === Przycisk logowania/odzyskiwania hasła === */
input[type="submit"], .btn-primary {
    background: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 8px 0;
    width: 100%;
    border-radius: 12px;
    transition: background 0.3s;
    font-weight: 600;
    margin-top: 6px;
}
input[type="submit"]:hover, .btn-primary:hover {
    background: #0056b3;
}

/* === Komunikaty i walidacja === */
.alert-success {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #e6f7e6;
    color: #1c6c1c;
    padding: 10px;
    text-align: center;
    font-size: 15px;
}

.alert-error {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #fde2e2;
    color: #742a2a;
    padding: 10px;
    text-align: center;
    font-size: 15px;
}
.invalid-feedback {
    color: #dc3545;
    font-size: 13px;
    margin-bottom: 8px;
}

/* === Tabela użytkowników === */
.users-table-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
    padding: 18px 12px;
    margin-top: 16px;
    margin-bottom: 16px;
    max-width: 1710px;
    width: 100%;           /* <-- dodaj tę linię */
    box-sizing: border-box;
}
.users-table-container h1 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 18px;
    color: #222;
}
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 0.97rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.users-table thead tr {
    background: #333;
    color: #fff;
    height: 38px;
}
.users-table th, .users-table td {
    padding: 7px 10px;
    border: 1px solid #E3E6E8;
    text-align: left;
}
.users-table th {
    font-weight: 700;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #D4D9DB;
    font-size: 0.98rem;
}
.users-table tbody tr {
    border-bottom: 1px solid #E3E6E8;
    transition: background 0.12s;
    height: 34px;
}
.users-table tbody tr:hover {
    background: #F6F7F8;
}
.users-table td {
    color: #222;
    font-size: 0.97rem;
}
.kraje-table input {
    width: 100%;
    box-sizing: border-box;
}
.kraje-table button {
    padding: 4px 12px;
}
.input-kraj {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid #D4D9DB;
    border-radius: 7px;
    font-size: 0.97rem;
    font-family: 'DM Sans', Arial, sans-serif;
    background: #F7F7F7;
    transition: border 0.2s, background 0.2s;
    outline: none;
    margin: 0;
}
.input-kraj:focus {
    border: 1.5px solid #007BFF;
    background: #fff;
}
.btn-kraj {
    background: #007BFF;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 7px 18px;
    font-size: 0.97rem;
    font-family: 'DM Sans', Arial, sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    margin: 0;
}
.btn-kraj:hover, .btn-kraj:focus {
    background: #0056b3;
}
.input-podkategoria {
    max-width: 170px;
    width: 150.6px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 4px;
    border: 1.5px solid #D4D9DB;
    border-radius: 7px;
    font-size: 0.97rem;
    font-family: 'DM Sans', Arial, sans-serif;
    background: #F7F7F7;
    transition: border 0.2s, background 0.2s;
    outline: none;
    margin: 0;
}
.input-podkategoria:focus {
    border: 1.5px solid #007BFF;
    background: #fff;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 370px;
}

.input-kraj,
.input-kraj:not(textarea) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.notatka-textarea {
    min-height: 68px;
    height: 80px;
    max-height: 180px;
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 0.97rem;
    line-height: 1.5;
    padding-right: 60px;
}

.notatka-counter {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 12px;
    color: #888;
    background: #fff;
    padding: 0 6px;
    pointer-events: none;
}
.tabs-container {
    width: 100%;
    margin-bottom: 24px;
}

.tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    /*background: #f5f5f5;*/
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    justify-content: flex-start; /* zakładki zawsze zaczynają po lewej */
    width: 100%;
}

.tab-link {
    flex: 0 0 25%;
    max-width: 20%;
    min-width: 110px;
    background: #eee;
    border: none;
    outline: none;
    font-size: 16px;
    padding-top: 7px;
    padding-bottom: 3px;
    cursor: pointer;
    font-family: 'DM Sans', Arial, sans-serif;
    color: #222;
    font-weight: 600;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    border-right: 1px solid #e0e0e0;
    border-top: 2.5px solid transparent;
    border-left: 2.5px solid transparent;
    border-bottom: none;
    position: relative;
    border-radius: 8px 8px 0 0;
}
.tab-link:last-child {
    border-right: none;
}
.tab-link.active {
    background: #fff;
    color: #0066ff;
    border-top: 2px solid #0066ff;
    border-left: 2px solid #0066ff;
    border-right: 2px solid #0066ff;
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.06);
    z-index: 2;
}
.tab-link:not(.active):hover {
    background: #f0f4fa;
    color: #007bff;
}
.tab-content {
    display: none;
    padding: 24px 0 0 0;
}
.tab-content.active {
    display: block;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 370px;
}
.dane-ogolne-flex {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.dane-ogolne-left, .dane-ogolne-right {
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 400px;
}
.liczbowy-row {
    align-items: center;
}
.liczbowy-input {
    display: flex;
    align-items: center;
    gap: 2px;
}
.liczbowy-input input[type="number"], .liczbowy-input input[readonly] {
    width: 100px;
    text-align: right;
}
.arrow-btn {
    background: #e0e0e0;
    border: none;
    border-radius: 5px;
    color: #007BFF;
    font-size: 15px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}
.arrow-btn:hover {
    background: #cfe2ff;
}
.liczbowy-row-flex {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}
.liczbowy-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 90px;
    max-width: 150px;
}
.liczbowy-col label {
    margin-bottom: 3px;
    font-size: 0.97rem;
}
.liczbowy-col input {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.97rem;
    padding: 6px 8px;
    height: 32px;
}
.input-kraj, select.input-kraj, textarea.input-kraj {
    max-width: 260px;
    font-size: 0.97rem;
    padding: 6px 8px;
    height: 35px;
}
.dane-ogolne-right {
    min-width: 320px;
    max-width: 400px;
}
.liczby-grid-row {
    display: flex;
    margin-bottom: 15px;
}
.liczby-grid-row > div {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 90px;
    max-width: 150px;
}
.liczby-grid-row label {
    margin-bottom: 3px;
    font-size: 14.4px;
}
.small-input {
    width: 100%;
    max-width: 120px;
    font-size: 0.97rem;
    padding: 6px 8px;
    height: 35px;
    box-sizing: border-box;
}
.form-row.notatka-row {
    position: relative;
}
.notatka-textarea {
    min-height: 68px;
    height: 80px;
    max-height: 180px;
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 0.97rem;
    line-height: 1.5;
    padding-right: 60px;
    box-sizing: border-box;
}
.notatka-counter {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 12px;
    color: #888;
    background: #fff;
    padding: 0 6px;
    pointer-events: none;
}
.dane-ogolne-left .input-kraj,
.dane-ogolne-left select.input-kraj,
.dane-ogolne-left textarea.input-kraj {
    max-width: 360px;
    width: 100%;
    min-width: 180px;
    font-size: 1rem;
    height: 35px;
}
.dane-ogolne-left textarea.input-kraj {
    min-height: 70px;
    height: 90px;
}
.magazynmobilny-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0; /* usuwamy padding */
}

.magazynmobilny-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 8px 0 8px; /* 8px padding po bokach */
    box-sizing: border-box;
}
.tiles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding-top: 8px;
    box-sizing: border-box;
}

.tile {
    aspect-ratio: 1/1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f8fa;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    text-decoration: none;
    color: #222;
    transition: background 0.18s, box-shadow 0.18s, color 0.18s;
    font-size: 1rem;
    position: relative;
    cursor: pointer;
    user-select: none;
    margin: 0;
    border: 1.5px solid #ccc; /* delikatna, jasnoszara ramka */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* lekki cień */
    background: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.tile:hover:not(.tile-disabled),
.tile:focus:not(.tile-disabled) {
    background: #e3f0ff;
    color: #007bff;
    box-shadow: 0 4px 16px rgba(0,123,255,0.10);
}
.tile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tile-icon {
    font-size: 1.7em;
    margin-bottom: 8px;
}
.tile-label {
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.2px;
    line-height: 1.2;
    color: #666;
}

/* Na bardzo wąskich ekranach kafelki jeden pod drugim */
@media (max-width: 359px) {
    .tiles-grid {
        grid-template-columns: 1fr;
        max-width: 170px;
        gap: 8px;
    }
}

@media (max-width: 600px) {
    .magazynmobilny-container h1 {
        font-size: 1.2rem;
        margin-bottom: 14px;
    }
}

/* Margin na stronach magazynmobilny */
body.magazynmobilny-page main.content {
    margin-left: 0px !important;
    margin-right: 0px !important;
}


.zmiana-lokalizacji-buttons {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 8px;
}

.zmiana-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    text-decoration: none;
    color: #666;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    position: relative;
    cursor: pointer;
    user-select: none;
    margin: 0;
    border: 1.5px solid #ccc;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.18s, color 0.18s;
}
.zmiana-btn:hover,
.zmiana-btn:focus {
    background: #e3f0ff;
    color: #007bff;
    border-color: #007bff;
    box-shadow: 0 4px 16px rgba(0,123,255,0.10);
}
.zmiana-btn-label {
    text-align: center;
    width: 100%;
    font-size: 1.13em;
}
.zmiana-lokalizacji-buttons {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 8px;
}
@media (max-width: 600px) {
    .zmiana-lokalizacji-buttons {
        gap: 12px;
        padding: 8px 4px;
    }
    .zmiana-btn {
        height: 54px;
        font-size: 1em;
        border-radius: 13px;
    }
}
.zmiana-input-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 6px;
}

.zmiana-input-label {
    font-size: 18px;
    color: #333;
    margin-bottom: 3px;
    margin-left: 2px;
    font-weight: 500;
    text-align: left;
    font-weight: bold;
}

.zmiana-input {
    width: 100%;
    height: 45px !important;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    font-size: 18px;
    color: #222;
    padding: 0 18px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.zmiana-input:focus {
    border-color: #007bff;
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.10);
}

@media (max-width: 600px) {
    .zmiana-input-group {
        margin-top: 4px;
    }
    .zmiana-input {
        height: 54px;
        font-size: 18px;
        border-radius: 13px;
        padding: 0 12px;
    }
}
select.input-kraj {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #F7F7F7 url("data:image/svg+xml;utf8,<svg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M2 4L8 10L14 4' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center/18px 18px;
    padding-right: 34px !important;  /* miejsce na strzałkę */
    cursor: pointer;
    border: 1.5px solid #D4D9DB;
    border-radius: 7px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: border 0.2s, background 0.2s;
}

select.input-kraj:focus {
    border: 1.5px solid #007BFF;
    background: #fff url("data:image/svg+xml;utf8,<svg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M2 4L8 10L14 4' stroke='%23007BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center/18px 18px;
}

select.input-kraj option {
    background: #fff;
    color: #222;
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 0.97rem;
}

/* Ukryj linię przy zwiniętym sidebarze */
.sidebar.sidebar--collapsed .maincategory[style*="border-top"] {
    border-top: none !important;
}

/* ========== Sidebar: toggle i animacja zwijania ========== */
:root {
  --sidebar-width: 210px;
  --sidebar-collapsed-width: 56px;
  --header-height: 48px;
}

/* Pasek u góry sidebara (przycisk ◀ i tytuł) */
.sidebar-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.sidebar-toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: #666;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: background 0.2s;
}
.sidebar-toggle-btn:hover,
.sidebar-toggle-btn:focus {
  background: #5a5a5a;
}
.sidebar-toggle-btn .chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  line-height: 1;
  font-size: 14px;
}
.sidebar-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #fff;
  opacity: 0.9;
}

/* Animacje i stan zwinięty sidebara */
.sidebar {
  transition: width 0.22s ease, padding 0.22s ease, opacity 0.25s ease, transform 0.25s ease;
  opacity: 1;
  transform: translateX(0);
}

/* Blokowanie animacji przy pierwszym wczytaniu (preload) */
.sidebar.sidebar--preload {
  transition: none;
}

.sidebar.sidebar--collapsed {
  width: var(--sidebar-collapsed-width) !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  opacity: 0.95; /* lekkie przyciemnienie przy zwinięciu */
  transform: translateX(-2px); /* subtelne przesunięcie */
}
.sidebar.sidebar--collapsed .sidebar-title { 
  display: none; 
}
.sidebar.sidebar--collapsed .expand-button { 
  display: none; 
}
/* W stanie zwiniętym chowamy submenu i spłaszczamy nagłówki */
.sidebar.sidebar--collapsed .submenu { 
  display: none !important; 
}
.sidebar.sidebar--collapsed .maincategory {
  font-size: 0;
  line-height: 0;
  height: 12px;
  margin: 10px 0;
}

/* Ułatwienie UX: wskazanie że maincategory jest klikalne */
.maincategory[role="button"] {
  cursor: pointer;
  user-select: none;
}

/* Submenu – animowane rozwijanie */
.menu .submenu {
  max-height: 0;
  overflow: hidden;
  padding-left: 15px;
  transition: max-height 0.25s ease, padding 0.2s ease;
}

/* Widoczne submenu */
.menu .submenu.open {
  max-height: 500px; /* wystarczająco duża wartość, żeby zmieściła wszystkie linki */
  padding-bottom: 8px;
}

/* Rozszerzenie treści przy zwiniętym panelu */
main.content {
  transition: margin-left 0.22s ease;
}
main.content.content--expanded {
  /* 56px (sidebar) + 20px (odstęp lewy w .content) */
  margin-left: 76px !important;
}

/* Responsywność – na wąskich ekranach używaj pełnej szerokości */
@media (max-width: 800px) {
  main.content,
  main.content.content--expanded {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* Sekcja stanów magazynowych */
#stan-magazynowy { 
  margin-top: 5px; 
  padding: 8px 0 24px; 
}
#stan-magazynowy .section-title { 
  margin: 0 0 5px; 
  font-size: 1.05rem; 
  font-weight: 600; 
  color: #1C2228; 
}

/* Grid dla kart */
.stock-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.stock-card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stock-card .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.stock-card .head .warehouse {
  font-weight: 700;
  font-size: 0.95rem;
  color: #333;
}
.stock-card .head .warehouse span {
  font-weight: 600;
  color: #666;
  font-size: 0.85rem;
}
.stock-card .head .location {
  font-size: 0.85rem;
  color: #777;
}

/* Statystyki */
.stock-card .stats {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.stat {
  flex: 1 1 0;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
}
.stat .label { 
  display: block; 
  font-size: 0.75rem; 
  color: #666; 
  margin-bottom: 6px; 
}
.stat .value { 
  font-size: 1.05rem; 
  font-weight: 700; 
  color: #222; 
}
.stat.total { background: linear-gradient(180deg,#f6fbf8,#ffffff); border-color:#e8f0ea; }
.stat.available { background: #fffaf6; border-color:#fff1dd; }
.stat.reserved { background: #fff6fb; border-color:#f8eaf0; }

/* Akcje w kartach */
.stock-card .actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

/* Przycisk ogólny */
.btn-small {
  background:#1C2228;
  color: #fff;
  border:none;
  padding:6px 10px;
  border-radius:6px;
  font-size:0.9rem;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.btn-small.secondary {
  background:transparent;
  color:#333;
  border:1px solid #ddd;
}

/* Przycisk kodów kreskowych */
.btn-barcode {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:7px;
  background: #eeeeee;
  color: #0f1220;
  font-weight: 600;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1),
              box-shadow 140ms cubic-bezier(.2,.8,.2,1),
              background-color 140ms linear,
              color 140ms linear;
  text-decoration: none;
}
.btn-barcode .icon {
  width:18px;
  height:18px;
  flex: 0 0 18px;
  opacity: 0.92;
  transition: transform 140ms, opacity 140ms;
}
.btn-barcode:hover,
.btn-barcode:focus:not(:active) {
  background: linear-gradient(180deg, #f9f9f9 0%, #ececec 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.btn-barcode:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}
.btn-barcode:hover .icon { transform: translateY(-1px); opacity: 1; }
.btn-barcode:focus-visible {
  outline: 3px solid rgba(28,34,40,0.12);
  outline-offset: 3px;
}
.btn-barcode.small { padding:6px 10px; border-radius:8px; font-size:0.88rem; }
@media (prefers-reduced-motion: reduce) {
  .btn-barcode, .btn-barcode .icon { transition: none; }
}

/* Manualna korekta */
.manual-adjust-wrapper { margin:18px 0; }
.manual-adjust {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  flex-wrap: wrap;
}
.manual-adjust .col {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width: 180px;
}
.manual-adjust label {
  font-size: 0.86rem;
  color: #222;
  font-weight: 600;
  margin-bottom: 4px;
}
.manual-adjust select,
.manual-adjust input[type="number"],
.manual-adjust textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #dcdcdc;
  background: #fafafa;
  font-size: 0.95rem;
  color: #222;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.manual-adjust textarea { resize: vertical; height: 42px; }

/* Operacja (radiobuttons) */
.ma-operation {
  display:flex;
  gap:10px;
  align-items:center;
  padding:6px;
}
.ma-operation label {
  font-weight:600;
  font-size:0.9rem;
  color:#333;
  display:flex;
  gap:8px;
  align-items:center;
}
.ma-operation input[type="radio"] {
  width:16px;
  height:16px;
}

/* Akcje */
.ma-actions {
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
}
.ma-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
  font-size:0.95rem;
  cursor:pointer;
  text-decoration:none;
  border: none;
}
.ma-note { font-size:0.85rem; color:#666; margin-left:8px; }

/* Historia ruchów */
.history-wrapper {
  margin-top: 5px;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:8px;
  padding:12px;
}
.history-controls {
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.history-table {
  width:100%;
  border-collapse:collapse;
}
.history-table th, .history-table td {
  padding:8px 10px;
  border-bottom:1px solid #f1f1f1;
  font-size:0.95rem;
  text-align:left;
}
.history-table th { font-weight:700; color:#333; }
.badge-type {
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:600;
  color:#fff;
}
.badge-type.przyjecie { background:#2e7d32; }
.badge-type.wydanie { background:#c62828; }
.badge-type.transfer { background:#1565c0; }

/* Responsywność */
@media (max-width:520px) {
  .stock-card .stats { flex-direction: column; gap:6px; }
  .stock-card .actions { justify-content:flex-start; }
}
@media (max-width:720px) {
  .manual-adjust { flex-direction:column; align-items:stretch; }
  .ma-actions { margin-left:0; justify-content:flex-end; width:100%; }
  .manual-adjust .col { width:100%; }
}

/* Dwie kolumny zawsze (desktop) */
.stock-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Opcjonalnie: na małych ekranach 1 kolumna */
@media (max-width: 640px) {
  .stock-cards {
    grid-template-columns: 1fr;
  }
}
/* Rozwijany panel: domyślnie ukryty */
.collapse-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 260ms ease, opacity 220ms ease;
}

/* Widoczny stan panelu */
.collapse-panel.is-open {
  /* ustaw max-height większy niż maksymalna wysokość tabeli, np. 1200px */
  max-height: 1200px;
  opacity: 1;
}

/* Obrót strzałki przy otwarciu */
#palety-chevron {
  transition: transform 220ms ease;
}

#toggle-palety[aria-expanded="true"] #palety-chevron {
  transform: rotate(180deg);
}
/* ==========================
   Artykuł: układ Dane/Wymiary vs Komentarze (poprawki)
   Wklej NA KOŃCU style.css
   ========================== */

/* 0) Kontener trzech kolumn w zakładce "Dane ogólne" */
.dane-ogolne-flex {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  /* domyślnie pozwól zawijać na węższych ekranach */
  flex-wrap: wrap !important;
  box-sizing: border-box !important;
}

/* 1) Desktop ≥ 1248px: jedna linia, Komentarze min. 700px, lewy formularz węższy */
@media (min-width: 1248px) {
  .dane-ogolne-flex { flex-wrap: nowrap !important; }

  /* Lewy formularz (Dane podstawowe + Wymiary) – węższy */
  .dane-ogolne-flex > form {
    /* nadpisywanie inline: flex: 1 1 520px; min-width:420px; max-width:720px */
    flex: 1 1 auto !important;
    max-width: calc(100% - 714px) !important; /* 700px panel + 24px gap */
    min-width: 430px !important;
  }

  /* Prawy panel z komentarzami – min. 700px szerokości */
  .dane-ogolne-right {
    /* nadpisywanie inline: flex: 1 1 420px; min-width:360px; max-width:520px */
    flex: 0 0 700px !important;
    min-width: 700px !important;
    max-width: none !important;
  }
}

/* 2) Mobile/średnie < 1248px: karty pod sobą, pełna szerokość */
@media (max-width: 1247.98px) {
  .dane-ogolne-flex > form {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .dane-ogolne-right {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* 3) Karta Komentarze: pełna szerokość w swojej kolumnie, elastyczna wysokość */
.komentarze-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 700px !important;  /* jeśli minimalna wysokość ma pozostać */
  max-height: none !important;   /* usunięcie inline max-height: 720px */
  box-sizing: border-box !important;
}

.komentarze-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

/* 4) Usunięcie błędnych wymuszeń szerokości samych pól komentarza */
textarea#komentarz,
textarea.komentarz,
textarea.komentaz,
#komentarz,
#komentaz {
  min-width: 0 !important;   /* odblokuj zawężanie wraz z kolumną */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 5) Wymiary: 14px na etykietach i polach + równe odstępy etykieta–pole
   Uwaga: selektor zawężony do pudełka .section-box (to jest karta "Wymiary" w HTML) */
.dane-ogolne-flex form .section-box label {
  font-size: 14px !important;
  color: #222 !important;
  display: inline-block !important;
}

.dane-ogolne-flex form .section-box input,
.dane-ogolne-flex form .section-box select {
  font-size: 14px !important;
  height: 35px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  background: white;
}

/* Wiersze liczbowe i ich spójne odstępy */
.dane-ogolne-flex form .section-box .liczby-grid-row {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
}

.dane-ogolne-flex form .section-box .liczby-grid-row > div {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

/* 6) Dodatkowo: karta "Dane podstawowe" pozostaje spójna szerokościowo */
.card-dane {
  width: 100% !important;
  box-sizing: border-box !important;
}

.card-dane .form-row {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.card-dane label,
.card-dane .form-row label,
.card-dane .row-flex label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #222 !important;
  display: inline-block !important;
  box-sizing: border-box !important;
}

.card-dane .row-flex {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.card-dane .row-flex > div {
  flex: 0 0 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

@media (min-width: 700px) {
  .card-dane .row-flex > div {
    flex: 0 0 calc(50% - 6px) !important;
    min-width: 0 !important;
  }
}

/* Notatka z licznikiem */
.card-dane .form-row.notatka-row { position: relative !important; display: flex !important; flex-direction: column !important; }
.card-dane .notatka-textarea {
  padding: 8px 56px 8px 8px !important;
  box-sizing: border-box !important;
  min-height: 72px !important;
  max-height: 180px !important;
  resize: vertical !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.card-dane .notatka-counter {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  font-size: 14px !important;
  color: #666 !important;
  pointer-events: none !important;
  background: rgba(255,255,255,0) !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
}
/* Komentarze: pionowe separatory kolumn + cienka ramka tabeli */
.komentarze-list .komentarze-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid #e5e7eb;           /* cienka ramka wokół całej tabeli */
  box-sizing: border-box;
}

/* Jasne, cienkie linie oddzielające kolumny */
.komentarze-list .komentarze-table thead th,
.komentarze-list .komentarze-table tbody td {
  border-right: 1px solid #eceff3;      /* pionowe separatory kolumn */
}

/* Brak separatora na ostatniej kolumnie, żeby nie dublować ramki zewnętrznej */
.komentarze-list .komentarze-table thead th:last-child,
.komentarze-list .komentarze-table tbody td:last-child {
  border-right: 0;
}
/* Na końcu style.css */
#nazwa,
#notatka,
#dostawca_id{
  max-width: 100% !important;
  width: 100% !important;
}
/* Na końcu style.css */
.komentarze-card {
  min-height: auto !important;   /* usuń sztywną wysokość karty */
}

.komentarze-list {
  flex: 0 0 auto !important;     /* nie rozpychaj listy na wysokość */
  max-height: none !important;    /* pozwól rosnąć naturalnie */
  overflow: visible !important;   /* nie odcinaj przepływu pod spodem */
}
/* highlight fade for newly added comment (put at end of style.css) */
.komentarz-row td {
  background-color: #ffffff;
  transition: background-color 0.25s ease;
}

/* Komentarze: wyrównanie do góry i naturalne wysokości */
.komentarze-list .komentarze-table {
  table-layout: auto !important;               /* pozwól kolumnom dopasować się do treści */
}

.komentarze-list .komentarze-table tbody tr {
  height: auto !important;                      /* brak sztywnej wysokości wierszy */
}

.komentarze-list .komentarze-table th,
.komentarze-list .komentarze-table td {
  vertical-align: top !important;               /* treść zawsze od góry komórki */
  display: table-cell !important;               /* wyłącz ewentualne flex-y w komórkach */
}

/* Kolumna 2: Użytkownik — możliwie wąska, bez zawijania */
.komentarze-list .komentarze-table thead th:nth-child(2),
.komentarze-list .komentarze-table tbody td:nth-child(2) {
  white-space: nowrap !important;               /* nie zawijaj loginu/nagłówka */
  width: 1% !important;                         /* pozwól kolumnie ścisnąć się do minimum */
}

/* Kolumna 3: Komentarz — normalne zawijanie i łamanie długich słów */
.komentarze-list .komentarze-table tbody td:nth-child(3) {
  white-space: normal !important;
  word-break: break-word !important;            /* łam bardzo długie ciągi */
}
/* Komentarze: wyśrodkowanie pionowe przycisku Usuń (kolumna 4) */
.komentarze-list .komentarze-table tbody td:nth-child(4) {
  vertical-align: middle !important;
}
/* default row background + płynne przejście */
.komentarz-row {
  background-color: #fff;
  transition: background-color 0.18s;
}

/* hover: zmiana tła całego wiersza (kolumny td) */
.komentarz-row:hover td {
  background-color: #f8fafc;
}

.komentarz-row.just-added td {
  background-color: #e6ffe6;            /* startowy zielony */
  animation: fadeCommentBg 3s ease forwards;
}

@keyframes fadeCommentBg {
  0%   { background-color: #e6ffe6; }
  50%  { background-color: #e6ffe6; }
  100% { background-color: #ffffff; }    /* koniec: powrót do białego */
}
#komentarz:focus {
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  border: 1.5px solid #007BFF !important;
}
/* Kontener połączonego pola status + dropdown */
.status-select {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
}

/* Pole z napisem Status */
.status-select__label {
    width: 63px;
    text-align: center;
    border: 1.5px solid #D4D9DB;
    border-right: none;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: #F7F7F7;
    color: #444;
    font-family: 'DM Sans', Arial, sans-serif;
    padding: 7px 10px;
    height: 36px;
    outline: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* Dropdown */
.status-select__dropdown {
    width: 124px;
    padding: 7px 10px;
    padding-right: 34px; /* miejsce na strzałkę */
    border: 1.5px solid #D4D9DB;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    font-family: 'DM Sans', Arial, sans-serif;
    color: #111827;
    background-color: #F7F7F7;
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4L8 10L14 4" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: border 0.2s, background 0.2s;
    outline: none;
    height: 36px;
    cursor: pointer;
}

/* Efekt focus: niebieska ramka i niebieska strzałka */
.status-select__dropdown:focus {
    border: 1.5px solid #007BFF;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4L8 10L14 4" stroke="%23007BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
/* Status buttons – global */
.Status_active_button {
  background: forestgreen;
  color: #fff;
  border: 1px solid forestgreen;
  border-radius: 6px;
  padding: 3px 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}

.Status_inactive_button {
  background: indianred;
  color: #fff;
  border: 1px solid indianred;
  border-radius: 6px;
  padding: 3px 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}

/* Opcjonalnie mały hover dla UX (identyczny wygląd, delikatny cień) */
.Status_active_button:hover,
.Status_inactive_button:hover {
  filter: brightness(0.93);
}
/* Wózki widłowe: rozmiar czcionki w tabeli */
.users-table.forklifty-table,
.users-table.forklifty-table th,
.users-table.forklifty-table td {
  font-size: 14px !important;
}
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* ===== WYSZUKIWARKA ISSUE LOG – STYLOWANIE SPECYFICZNE ===== */

/* Nagłówek karty wyszukiwarki (obok przycisku "+ Nowy issue log") */
.issuelog-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.issuelog-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Karta filtrów */
.filter-card {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 14px 14px 12px 14px;
    margin-bottom: 16px;
}

.filter-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}

.filter-card-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.filter-badge {
    padding: 2px 6px;
    border-radius: 999px;
    background: #e5e7eb;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
    margin-bottom: 10px;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
}

.filter-field label {
    color: #4b5563;
    font-weight: bold;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* Meta wyników nad tabelą */
.issuelog-results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
}

.issuelog-results-meta span strong {
    color: #111827;
}

.issuelog-results-meta .meta-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Tabela wyników */
.results-table-wrapper {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background: #ffffff;
}

.issuelog-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* albo całkiem bez tej linii */
    font-size: 13px;
}

.issuelog-table thead {
    background: #f1f3f5;
}

.issuelog-table th,
.issuelog-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
}

/* cienkie, szare linie między kolumnami */
.issuelog-table th:not(:last-child),
.issuelog-table td:not(:last-child) {
    border-right: 1px solid #e5e7eb;
}

.issuelog-table th {
    font-weight: 600;
    color: #374151;
    font-size: 12px;
}

.issuelog-table tbody tr:hover {
    background: #f9fafb;
}

/* Kolumny – szerokości minimalne, zgodnie z ustaleniami */
.issuelog-table td.col-id {
    min-width: 36px;
    color: #1d4ed8;
    font-weight: 600;
    white-space: nowrap;
}

.issuelog-table td.col-status {
    min-width: 110px;
}

.issuelog-table td.col-title {
    font-weight: 500;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 150px;
}

.issuelog-table td.col-tags {
    max-width: 180px;
}

.issuelog-table td.col-priority,
.issuelog-table td.col-reporting,
.issuelog-table td.col-solver,
.issuelog-table td.col-created {
    width: 10%;
    white-space: nowrap;
}

/* Sortowalne nagłówki – link w <th> bez zmiany wyglądu tekstu */
.sortable-header a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sortable-header a:hover {
    text-decoration: underline;
}

/* Status w tabeli */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.status-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.status-open {
    background: #ecfdf5;
    color: #166534;
}

.status-open .status-pill-dot {
    background: #22c55e;
}

.status-closed {
    background: #fef2f2;
    color: #b91c1c;
}

.status-closed .status-pill-dot {
    background: #ef4444;
}

/* Tagi w tabeli (małe „bąbelki”) */
.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 12px;
    margin: 2px 3px 2px 0;
    color: #111827;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tag-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-chip.more {
    background: #e5e7eb;
    color: #4b5563;
}

/* Nazwy użytkowników / linki do issue loga */
.solver-name {
    color: #1d4ed8;
    font-weight: 500;
    white-space: nowrap;
}

.issuelog-link {
    color: #1d4ed8;
    text-decoration: none;
}

.issuelog-link:hover {
    text-decoration: underline;
}

/* Pusta tabela */
.empty-state {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* RWD dla filtrów i nagłówka */
@media (max-width: 1024px) {
    .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .issuelog-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .issuelog-results-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .issuelog-results-meta .meta-right {
        flex-wrap: wrap;
    }
}

.chip-container {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 4px 10px;
    background: #fafafa;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    cursor: text;
}

.chip {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 13px;
    color: #000;
}

.chip svg {
    width: 16px;
    height: 16px;
    margin-left: 4px;
    cursor: pointer;
    fill: currentColor;
}

.chip-input {
    border: none;
    outline: none;
    background: transparent;
    padding: 6px;
    font-size: 14px;
    min-width: 120px;
    flex-grow: 1;
}

/* Wyszukiwarka issue log – multiselect tagów: szerokość jak input-kraj */
.filter-card #search-tags-container {
    max-width: 260px;   /* tak jak select.input-kraj */
    width: 100%;
    box-sizing: border-box;
}