:root {
  --bg: #0f172a;
  --accent: #4da3ff;
  --primary: #1d4ed8;
  --primary-hover: #2563eb;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
}

/* Reset i ogólny wygląd */
html, body { overflow-x: hidden; }
body {
  background: var(--bg);
  color: #e2e8f0;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

h1 { font-size: 1.4em; margin-bottom: 10px; }
.muted { color: #94a3b8; font-size: 0.9em; }

/* --- Tabele --- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; text-align: left; }

/* Globalne linki */
a { color: #fff; text-decoration: none; transition: color .2s, text-decoration .2s; }
a:hover, a:focus { color: #fff; text-decoration: underline; }
a:visited { color: #fff; }

/* Wspólny styl dla nagłówków tabel */
.manage-scanners-table th,
.manage-batteries-table th,
.manage-employees-table th,
.scanners-table th,
.history-table th {
  background: #1e293b;
  color: #f9fafb;
  font-weight: 600;
}

tr:nth-child(even) { background: #1e1e2f; }
tr:nth-child(odd)  { background: #0f172a; }

/* Linki w tabeli */
.actions a { margin-right: 10px; text-decoration: none; color: #38bdf8; }
.actions a:hover { text-decoration: underline; }

/* --- Karty --- */
.card {
  background: #0b1426;
  border-radius: 12px;
  padding: 25px;
  margin: 20px auto;
  max-width: 100%;
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
}
.card h1 { margin-bottom: 20px; font-size: 1.4em; color: #e6ecf5; }

/* --- Układ kafelkowy --- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; width: 100%; box-sizing: border-box; }
.grid .card { margin: 0; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

.grid-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: flex-start; }

/* --- Status --- */
.status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
}
.status.available { background: rgba(46,204,113,.15); color: #7bed9f; }
.status.in_use    { background: rgba(77,163,255,.15); color: #4da3ff; }
.status.service   { background: rgba(241,196,15,.15); color: #ffe082; }
.status.damaged   { background: rgba(231,76,60,.15); color: #ff9aa2; }
.status.lost      { background: rgba(231,76,60,.25); color: #ff6b81; }
.status.retired   { background: rgba(126,138,160,.15); color: #cbd5e1; }

/* --- Topbar --- */
.topbar { background: #0f172a; border-bottom: 1px solid #1f2a44; padding: 12px 20px; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; }
.topbar .brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.2em; margin-right: 16px; }
.topbar .menu { display: flex; gap: 20px; position: relative; }
.topbar .menu a {
  position: relative; z-index: 1; color: #cbd5e1; text-decoration: none;
  font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: color .2s;
}
.topbar .menu a.active { color: #0f172a; }
.active-indicator { position: absolute; top: 0; height: 100%; border-radius: 8px; background: var(--accent); transition: all .3s; z-index: 0; }

/* --- Dropdown --- */
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
  position: absolute; background-color: #0b1426; min-width: 180px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3); border-radius: 6px; z-index: 1000;
  overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s, opacity .3s;
}
.dropdown-content.show { max-height: 500px; opacity: 1; }

/* --- Formularze --- */
form { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
label { font-weight: 600; margin-bottom: 4px; }

.input,
input[type="text"],
input[type="password"],
textarea,
select {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #23314f;
  background: #0b1426; color: #e6ecf5; font-size: 0.95em; box-sizing: border-box;
}
input::placeholder, textarea::placeholder { color: #7e8aa0; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(77,163,255,0.3); }

/* --- Guziki (global) --- */
button, input[type="submit"] {
  padding: 10px 14px; border: none; border-radius: 8px; background: var(--accent);
  color: #0b1220; font-weight: 600; cursor: pointer; transition: background .2s;
}
button:hover, input[type="submit"]:hover { background: #3390ff; }
button.full, input[type="submit"].full { width: 100%; margin-top: 10px; }

/* ========================= */
/*        HISTORY            */
/* ========================= */
.history-layout { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; gap: 20px; margin-bottom: 15px; }
.history-left { flex: 1; }
.history-right { flex: 1; text-align: right; }
.history-form { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

/* Pasek wyszukiwarki – input-group (jedna linia, spójne krawędzie) */
.history-top{
  display: flex;
  align-items: center;
  gap: 0;                      /* brak przerw – wygląda jak jeden kontrol */
  width: 100%;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.history-input{
  flex: 1 1 680px;            /* może się zwężać/rozszerzać */
  min-width: 0;               /* zapobiega łamaniu wiersza */
  height: 44px;
  padding: 0 14px;
  border: 1px solid #23314f;
  border-right: none;         /* łączymy z przyciskiem */
  border-radius: 10px 0 0 10px;
  background: #0b1426;
  color: #e6ecf5;
  font-size: 15px;
}
.history-input::placeholder { color: #7e8aa0; }

/* Szukaj */
.history-top .history-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 700;
  background: var(--accent);
  color: #0b1220;
  border: 1px solid #23314f;
  border-left: none;          /* brak „szwu” z inputem */
  border-radius: 0;           /* środkowy element grupy */
  white-space: nowrap;
  cursor: pointer;
}
.history-top .history-button:hover { background: #3390ff; }

/* Wyczyść */
.history-top .history-button-clear{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 700;
  background: #dc3545;
  color: #fff;
  border: 1px solid #23314f;
  border-left: none;
  border-radius: 0 10px 10px 0; /* prawa część grupy */
  white-space: nowrap;
  cursor: pointer;
}
.history-top .history-button-clear:hover{ background: #bb2d3b; }

/* Filtry dat */
.history-date-filters { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.history-date-filters label { font-weight: bold; color: #e2e8f0; }
.history-date { background: #111827; border: 1px solid #374151; color: #f9fafb; padding: 8px 12px; border-radius: 8px; }

/* Tabela historii — auto-layout, ciaśniej */
.history-table{
  width:100%;
  margin-top:20px;
  border-collapse:collapse;
  table-layout:auto;
  font-size:16px;
}
.history-table th,
.history-table td{
  padding:6px 8px;
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}
.history-table th:first-child,
.history-table td:first-child{ padding-left:4px; }

/* Kolumny 1..9: minimalne szerokości (zapas), reszta idzie w „Notatki” */
.history-table th:nth-child(-n+9),
.history-table td:nth-child(-n+9){ width:1%; }

.history-table th:nth-child(1),  .history-table td:nth-child(1)  { min-width: 6ch; }   /* Numer */
.history-table th:nth-child(2),  .history-table td:nth-child(2)  { min-width:16ch; }   /* Pracownik */
.history-table th:nth-child(3),  .history-table td:nth-child(3)  { min-width: 9ch; }   /* Zmiana */
.history-table th:nth-child(4),  .history-table td:nth-child(4)  { min-width:11ch; }   /* Skaner */
.history-table th:nth-child(5),  .history-table td:nth-child(5)  { min-width: 5ch; }   /* Bateria */
.history-table th:nth-child(6),  .history-table td:nth-child(6)  { min-width:18ch; }   /* Data wydania */
.history-table th:nth-child(7),  .history-table td:nth-child(7)  { min-width:16ch; }   /* Wydał */
.history-table th:nth-child(8),  .history-table td:nth-child(8)  { min-width:18ch; }   /* Data zwrotu */
.history-table th:nth-child(9),  .history-table td:nth-child(9)  { min-width:16ch; }   /* Przyjął zwrot */

/* Hover/kolory */
.history-table tr:nth-child(even){ background:#1e293b; }
.history-table tr:nth-child(odd) { background:#0f172a; }
.history-table tr:hover{ background:#1d4ed8; color:#fff; }

/* NOTATKI – mniejszy font */
.history-table td:last-child{
  width:auto;
  white-space:normal;
  overflow:visible;
}
.history-note{
  display:inline-block;
  margin:2px 6px 0 0;
  padding:4px 8px;
  border-radius:6px;
  font-size:0.85em;
  font-weight:600;
  line-height:1.1;
  white-space:nowrap;
  max-width:100%;
}
@media (max-width: 1400px){
  .history-table th:nth-child(2),  .history-table td:nth-child(2)  { min-width:14ch; }
  .history-table th:nth-child(6),  .history-table td:nth-child(6)  { min-width:17ch; }
  .history-table th:nth-child(7),  .history-table td:nth-child(7)  { min-width:14ch; }
  .history-table th:nth-child(8),  .history-table td:nth-child(8)  { min-width:17ch; }
  .history-table th:nth-child(9),  .history-table td:nth-child(9)  { min-width:14ch; }
  .history-note{ font-size:0.82em; padding:3px 7px; }
}

/* Kolory notatek */
.history-note.scanner{ color:#1e90ff; background:rgba(30,144,255,.15); }
.history-note.battery{ color:#22c55e; background:rgba(34,197,94,.15); }
.history-note.yellow { color:#facc15; background:rgba(250,204,21,.15); }
.history-note.red    { color:#ef4444; background:rgba(239,68,68,.15); }
.history-note.other  { color:#9ca3af; background:rgba(156,163,175,.15); }

/* === HISTORY: kompaktowy pasek wyszukiwarki === */
:root{
  --history-ctrl-h: 36px;      /* wysokość inputa i przycisków */
  --history-radius: 8px;       /* promień zaokrągleń */
  --history-gap: 12px;         /* odstęp między elementami */
  --history-font: 14px;        /* font-size dla inputa i buttonów */
}

.history-top{
  gap: var(--history-gap);
  align-items: center;
}

/* INPUT */
.history-top .history-input{
  height: var(--history-ctrl-h);
  padding: 0 12px;
  font-size: var(--history-font);
  border-radius: var(--history-radius) !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.history-top .history-input::placeholder{
  font-size: 0.9em;         /* mniejszy placeholder */
  color: #94a3b8;           /* delikatniejszy */
}

/* PRZYCISKI: równy rozmiar jak input */
.history-top .history-button,
.history-top .history-button-clear{
  height: var(--history-ctrl-h);
  line-height: var(--history-ctrl-h);
  padding: 0 18px;
  font-size: var(--history-font);
  border-radius: var(--history-radius) !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

/* delikatnie mniejsze odstępy pionowe niż wcześniej (opcjonalnie) */
.history-form{ gap: 8px; }

/* Tekst pod paskiem (podpowiedź) – trochę mniejszy */
.history-top + *{
  font-size: 0.95rem;   /* zmniejsz „trochę” */
  margin-top: 6px;
}


/* --- manage_* --- */
.manage-scanners-actions, .manage-batteries-actions { display: flex; flex-direction: column; gap: 6px; }
.btn-edit-scanner, .btn-edit-battery { background-color: #3399cc; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.btn-edit-scanner:hover, .btn-edit-battery:hover { background-color: #267399; }
.btn-delete-scanner, .btn-delete-battery { background-color: #cc3333; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.btn-delete-scanner:hover, .btn-delete-battery:hover { background-color: #990000; }

/* --- Popup – Wspólna baza --- */
.popup-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 2000;
}
.popup-content {
  background: #1f2937; padding: 20px; border-radius: 8px; text-align: center; color: #fff;
  max-width: 400px; box-shadow: 0 0 20px rgba(0,0,0,0.7);
}
.popup-buttons { margin-top: 15px; display: flex; justify-content: center; gap: 10px; }
.popup-buttons button { padding: 8px 14px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
.popup-buttons .btn-confirm { background-color: #cc3333; color: #fff; }
.popup-buttons .btn-confirm:hover { background-color: #990000; }
.popup-buttons .btn-cancel { background-color: #444; color: #fff; }
.popup-buttons .btn-cancel:hover { background-color: #666; }

/* --- manage_shifts --- */
.manage-shifts-card { background: #0b1426; border-radius: 12px; padding: 25px; margin: 20px auto; max-width: 100%; box-shadow: 0 0 15px rgba(0,0,0,0.4); }
.manage-shifts-card h1 { font-size: 1.4em; color: #e6ecf5; margin-bottom: 15px; }
.manage-shifts-card h2 { font-size: 1.2em; margin: 20px 0 10px; color: #cbd5e1; }
.manage-shifts-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.manage-shifts-table th { background-color: #1e293b; color: #f9fafb; font-weight: 600; padding: 10px 14px; text-align: left; }
.manage-shifts-table td { padding: 10px 14px; border-bottom: 1px solid #1e293b; }
.manage-shifts-table tr:nth-child(even) { background: #1e1e2f; }
.manage-shifts-table tr:nth-child(odd)  { background: #0f172a; }

.form-add-shift, .manage-shifts-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.form-add-shift input, .manage-shifts-actions input, .manage-shifts-actions select, .form-add-shift select {
  width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid #23314f; background: #0b1426; color: #e6ecf5;
}
.form-add-shift input:focus, .manage-shifts-actions input:focus, .manage-shifts-actions select:focus, .form-add-shift select:focus {
  border-color: #4da3ff; outline: none; box-shadow: 0 0 0 2px rgba(77,163,255,0.3);
}
.btn-edit-shift { background-color: #3399cc; color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-edit-shift:hover { background-color: #267399; }
.btn-delete-shift { background-color: #cc3333; color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-delete-shift:hover { background-color: #990000; }

button[type="submit"], .form-add-shift button { margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-weight: 600; }

/* --- Delete shift popup --- */
.delete-shift-popup {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 9999;
}
.delete-shift-popup-content {
  background: #0b1426; padding: 20px; border-radius: 10px; text-align: center; max-width: 400px; box-shadow: 0 0 15px rgba(0,0,0,0.4);
}
.delete-shift-popup-content p { margin-bottom: 15px; font-size: 1.1em; color: #e2e8f0; }
.delete-shift-popup .popup-buttons { display: flex; justify-content: space-between; gap: 10px; }

/* scanners.php */
.scanner-status-actions { display: flex; gap: 10px; align-items: center; }
.scanner-status-actions select { padding: 6px 10px; border-radius: 6px; border: 1px solid #23314f; background: #0b1426; color: #e6ecf5; }
.scanner-status-actions .scanner-btn { padding: 6px 12px; border: none; border-radius: 6px; background: var(--accent); color: #0b1220; font-weight: 600; cursor: pointer; transition: background .2s; }
.scanner-status-actions .scanner-btn:hover { background: #3390ff; }

/* Paginacja */
.pagination { margin-top: 15px; text-align: center; }
.pagination a {
  display: inline-block; margin: 0 5px; padding: 6px 12px; border-radius: 6px;
  background: #23314f; color: #fff; text-decoration: none; font-weight: 600; transition: background .2s;
}
.pagination a:hover { background: var(--accent); color: #0b1220; }
.pagination span { margin: 0 8px; color: #e6ecf5; font-weight: bold; }

/* Login */
.login-container {
  max-width: 400px; margin: 60px auto; padding: 30px; background: #1e1e2e;
  border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); text-align: center;
}
.login-container h2 { margin-bottom: 20px; font-size: 22px; color: #fff; }
.login-container form { display: flex; flex-direction: column; gap: 15px; }
.login-container .input {
  width: 100%; padding: 12px; border-radius: 6px; border: 1px solid #444; background: #2b2b3b; color: #fff; font-size: 14px; outline: none; transition: border .3s;
}
.login-container .input:focus { border-color: #4a90e2; }
.login-container button { padding: 12px; border: none; border-radius: 6px; background: #4a90e2; color: #fff; font-size: 16px;
  font-weight: bold; cursor: pointer; transition: background .3s; }
.login-container button:hover { background: #357ab8; }

/* Alerty */
.alert { background: #ff4d4d; color: #fff; padding: 10px; border-radius: 6px; margin-bottom: 10px; font-size: 14px; }
.alert.success { background: #4caf50; }

/* Manager login */
.manager-login { margin-top: 20px; text-align: center; }
.manager-btn { display: inline-block; padding: 10px 20px; background-color: #8B0000; color: #fff; text-decoration: none; border-radius: 6px; font-weight: bold; transition: background-color .3s; }
.manager-btn:hover { background: #e68900; }

/* Modal zwrotu niekompletnego */
.partial-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 9999;
}
.partial-modal-window {
  background: #1a1a2e; padding: 20px; border-radius: 10px; width: 350px; max-width: 90%; color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4); text-align: left;
}
.partial-modal-window h2 { margin-top: 0; margin-bottom: 15px; }
.partial-modal-window label { display: block; margin: 8px 0; font-weight: bold; }
.partial-modal-window button { margin-top: 10px; padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; }
.partial-modal-window button[type="submit"] { background: #3b82f6; color: #fff; }
.partial-modal-window button[type="button"] { background: #6b7280; color: #fff; margin-left: 5px; }

/* battery_docs */
.battery-docs-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.battery-docs-thumb { max-width: 100px; max-height: 100px; cursor: pointer; border: 1px solid #ccc; border-radius: 6px; transition: transform .2s; }
.battery-docs-thumb:hover { transform: scale(1.05); border-color: #666; }
.battery-docs-popup {
  display: none; position: fixed; z-index: 9999; padding-top: 60px; left: 0; top: 0;
  width: 100%; height: 100%; background: rgba(0,0,0,0.85); text-align: center;
}
.battery-docs-popup-content { max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.battery-docs-popup-close {
  position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; transition: color .2s;
}
.battery-docs-popup-close:hover { color: #aaa; }

/* Popup wyboru języka */
.lang-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 2000; }
.lang-popup-content {
  background: #0b1426; border-radius: 10px; padding: 20px 30px; text-align: center;
  max-width: 350px; width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.3); animation: langPopupFadeIn .3s ease;
}
.lang-popup-content h3 { margin-bottom: 15px; font-size: 18px; color: #fff; }
.lang-popup-buttons { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px; }
.lang-popup-buttons button {
  flex: 1; padding: 10px; min-width: 80px; border: none; border-radius: 6px; background: #007bff;
  color: #fff; font-weight: bold; cursor: pointer; transition: background .2s;
}
.lang-popup-buttons button:hover { background: #0056b3; }
.lang-popup-buttons .cancel-btn { background: #6c757d; }
.lang-popup-buttons .cancel-btn:hover { background: #5a6268; }
@keyframes langPopupFadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Scanner docs */
.scanner-docs-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.scanner-docs-thumb { width: 100px; height: 100px; object-fit: cover; cursor: pointer; border: 1px solid #ccc; border-radius: 6px; transition: transform .2s; }
.scanner-docs-thumb:hover { transform: scale(1.1); }
.scanner-docs-popup { display: none; position: fixed; z-index: 1000; padding-top: 60px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); }
.scanner-docs-popup-content { margin: auto; display: block; max-width: 90%; max-height: 90%; }
.scanner-docs-popup-close { position: absolute; top: 15px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; }

/* Pasek filtrów (index / zarządzanie) */
.filter-form { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.filter-item { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.filter-item select,
.filter-form .btn {
  height: 38px; padding: 0 12px; border-radius: 6px; font-size: 14px; line-height: normal; display: inline-flex; align-items: center; justify-content: center;
}
.filter-item select { border: 1px solid #444; background-color: #111827; color: #fff; }
.filter-item select:focus { outline: none; border-color: #3b82f6; }

/* Rotacje / małe formularze */
.form-add-rotation, .form-add-shift { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form-add-rotation select, .form-add-rotation input,
.form-add-shift input, .form-add-shift select {
  padding: 6px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; min-width: 120px; height: 36px; box-sizing: border-box;
}
.form-add-rotation button, .form-add-shift button { height: 36px; padding: 0 16px; font-size: 14px; cursor: pointer; }

/* --- index.php: wyszukiwarka --- */
.index-page .card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:15px; }
.index-page form.search-box { display:flex !important; flex-direction:row; align-items:center; gap:10px; flex-wrap:nowrap; margin:0; padding:0; }
.index-page form.search-box input[type="text"] {
  height:38px; padding:0 14px; border-radius:4px; border:1px solid #444; background:#0f172a; color:#fff;
  flex:0 0 320px; min-width:220px; max-width:420px;
}
.index-page form.search-box .btn-search,
.index-page form.search-box .btn-clear {
  display:inline-flex !important; align-items:center; justify-content:center;
  height:38px; padding:0 16px; border-radius:4px; border:none; width:auto !important; min-width:100px; margin:0 !important;
}
.index-page form.search-box .btn-search{ background:#1d4ed8; color:#fff; font-weight:700; cursor:pointer; transition:background .2s; }
.index-page form.search-box .btn-search:hover{ background:#2563eb; }
.index-page form.search-box .btn-clear{ background:#dc2626; color:#fff; font-weight:700; text-decoration:none; cursor:pointer; transition:background .2s; }
.index-page form.search-box .btn-clear:hover{ background:#b91c1c; }
@media (max-width: 640px){
  .index-page form.search-box{ flex-wrap:wrap; }
  .index-page form.search-box input[type="text"]{ flex:1 1 100%; max-width:100%; }
}

/* Layout dla assign.php */
.assign-layout { display: grid; grid-template-columns: 30% 70%; gap: 20px; min-height: calc(100vh - 120px); align-items: flex-start; }
.assign-layout .card { margin: 0; }
.assign-layout .card:first-child { align-self: start; }
.assign-page .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }

.assign-page .search-box { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.assign-page .search-box input[type="text"], .assign-page .btn-search, .assign-page .btn-clear {
  height: 38px; padding: 0 14px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.assign-page .search-box input[type="text"] { border: 1px solid #444; background: #0f172a; color: #fff; min-width: 250px; }
.assign-page .btn-search { background: #1d4ed8; color: #fff; font-weight: bold; border: none; cursor: pointer; transition: background 0.2s ease; }
.assign-page .btn-search:hover { background: #2563eb; }
.assign-page .btn-clear { background: #dc2626; color: #fff; font-weight: bold; border: none; cursor: pointer; transition: background 0.2s ease; }
.assign-page .btn-clear:hover { background: #b91c1c; }

/* Tabela aktywnych wydań */
.assign-page table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; white-space: nowrap; }
.assign-page table th, .assign-page table td { padding: 6px 6px; text-align: left; vertical-align: middle; color: #fff; box-sizing: border-box; }

/* Kolumny – 9 kolumn (ostatnia = Akcje) — zmniejszone szerokości między wskazanymi kolumnami */
.assign-page table th:nth-child(1), .assign-page table td:nth-child(1) { width: 6%; }   /* nr */
.assign-page table th:nth-child(2), .assign-page table td:nth-child(2) { width: 16%; }  /* pracownik (↓ z 18%) */
.assign-page table th:nth-child(3), .assign-page table td:nth-child(3) { width: 8%; }   /* zmiana (↓ z 9%) */
.assign-page table th:nth-child(4), .assign-page table td:nth-child(4) { width: 14%; }  /* skaner (↓ z 16%) */
.assign-page table th:nth-child(5), .assign-page table td:nth-child(5) { width: 9%; }   /* bateria (↓ z 10%) */
.assign-page table th:nth-child(6), .assign-page table td:nth-child(6) { width: 11%; }  /* EPT (↓ z 12%) */
.assign-page table th:nth-child(7), .assign-page table td:nth-child(7) { width: 13%; }  /* wydano (↓ z 14%) */
.assign-page table th:nth-child(8), .assign-page table td:nth-child(8) { width: 9%; }   /* wydał (↑ z 8% dla balansu) */
.assign-page table th:nth-child(9), .assign-page table td:nth-child(9) { width: 132px; }/* AKCJE – stała szerokość */

/* Akcje – pionowe przyciski */
.assign-page .actions { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 132px; }
.assign-page .btn-action {
  width: 100%; height: 24px; line-height: 24px; border-radius: 3px; font-size: 11px; font-weight: bold;
  text-decoration: none; color: #fff; text-align: center; transition: background .2s; overflow: hidden; white-space: nowrap; box-sizing: border-box; padding: 0;
}
.assign-page .btn-change { background: #2563eb; } .assign-page .btn-change:hover { background: #1d4ed8; }
.assign-page .btn-return { background: #dc2626; } .assign-page .btn-return:hover { background: #b91c1c; }
.assign-page .btn-partial { background: #ea580c; } .assign-page .btn-partial:hover { background: #c2410c; }

/* Linki sortujące w nagłówkach tabeli */
.assign-page .compact-table th a { color: #fff; text-decoration: none; font-weight: bold; }
.assign-page .compact-table th a:hover { color: #fff; text-decoration: underline; }
.assign-page .compact-table th a::after { margin-left: 4px; }



/* 📋 Tabela w index.php */
.compact-table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.6; }
.compact-table th, .compact-table td { padding: 10px 14px; text-align: left; white-space: nowrap; }
/* 🔹 Przyciski akcji */
.btn-action { display: inline-block; padding: 6px 14px; margin: 2px 4px; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: background .2s, transform .1s; color: #fff !important; }
.btn-action:hover { transform: scale(1.05); }
.btn-change { background: #3b82f6; } .btn-change:hover { background: #1d4ed8; }
.btn-return { background: #ef4444; } .btn-return:hover { background: #b91c1c; }
.btn-partial { background: #f97316; } .btn-partial:hover { background: #ea580c; }

/* SKANER STATUS - kontener akcji na środku, 2 równe kolumny */
.scanner-status-module .scanner-status-actions{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 540px;          /* 2 kolumny tej samej szerokości */
  margin: 16px auto 0;       /* wyśrodkowanie całego bloku */
}

/* oba przyciski wyglądają identycznie niezależnie czy to <a> czy <button> */
.scanner-status-module .scanner-status-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;               /* wypełnij kolumnę siatki */
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;     /* dla <a> */
  box-sizing: border-box;
  margin: 0;                 /* zero marginesów frameworka */
}

/* kolory – możesz mieć już zdefiniowane */
.scanner-status-module .scanner-status-primary{ /* niebieski */ }
.scanner-status-module .scanner-status-danger { background: #e03131 !important;
  border: 1px solid #b32626 !important;
  color: #fff !important; }

/* mobile – pod sobą */
@media (max-width: 560px){
  .scanner-status-module .scanner-status-actions{
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

/* === ACTIONS: dwa przyciski na środku, równe kolumny === */
.scanner-status-module .scanner-status-actions,
.battery-status-module  .battery-status-actions{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 540px;      /* szerokość całego bloku */
  margin: 16px auto 0;   /* wyśrodkowanie */
}

/* wspólna baza przycisków (dla <button>) */
.scanner-status-module .scanner-status-btn,
.battery-status-module  .battery-status-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0;
}

/* niebieski (Zapisz) */
.scanner-status-module .scanner-status-primary,
.battery-status-module  .battery-status-primary{
  background: #3b82f6;
  border-color: #2563eb;
  color: #fff;
}

/* czerwony (Wróć do listy …) */
.scanner-status-module .scanner-status-danger,
.battery-status-module  .battery-status-danger{
  background: #e03131;
  border-color: #b32626;
  color: #fff;
}

/* stany */
.scanner-status-module .scanner-status-btn:hover,
.battery-status-module  .battery-status-btn:hover{
  filter: brightness(0.95);
}
.scanner-status-module .scanner-status-btn:active,
.battery-status-module  .battery-status-btn:active{
  transform: translateY(1px);
}
.scanner-status-module .scanner-status-btn:focus-visible,
.battery-status-module  .battery-status-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.2);
  outline-offset: 2px;
}

/* mobile: układ jeden pod drugim */
@media (max-width: 560px){
  .scanner-status-module .scanner-status-actions,
  .battery-status-module  .battery-status-actions{
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

/* === GALERIE ZDJĘĆ (opcjonalnie, spójny wygląd) === */
.scanner-docs-gallery, .battery-docs-gallery{
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
}
.scanner-docs-item, .battery-docs-item{ text-align: center; }
.scanner-docs-thumb, .battery-docs-thumb{
  width: 160px; height: 120px; object-fit: cover;
  border-radius: 8px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.scanner-docs-delete, .battery-docs-delete{
  margin-top: 6px; padding: 6px 10px; border-radius: 8px;
  background: transparent; border: 1px solid #b32626; color: #e03131;
  cursor: pointer;
}
.scanner-docs-delete:hover, .battery-docs-delete:hover{
  background: #ffe3e3;
}

/* ---- Admins layout 30/70 ---- */
.admins-layout {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 20px;
  min-height: calc(100vh - 120px);
  align-items: flex-start;
}
.admins-layout .card { margin: 0; }
.admins-layout .card:first-child { align-self: start; }

/* Header z wyszukiwarką (osobne klasy) */
.admins-page .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

/* --- PASEK WYSZUKIWANIA: jedna linia + różne wysokości --- */
.admins-page .search-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;               /* trzymaj w jednym wierszu */
}
.admins-page .card-header form.search-box { display: flex !important; }

.admins-page .search-box > * {
  margin: 0 !important;
  width: auto;
  display: inline-flex;
  align-items: center;
}

/* input: największy */
.admins-page .search-box input[type="text"] {
  min-width: 280px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #444;
  background: #0f172a;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
}

/* Szukaj: średni */
.admins-page .search-box .btn-search {
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  background: #1d4ed8;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background .2s ease;
}
.admins-page .search-box .btn-search:hover { background: #2563eb; }

/* Wyczyść: najmniejszy (link jako button) */
.admins-page .search-box .btn-clear {
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background .2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.admins-page .search-box .btn-clear:hover { background: #b91c1c; }

/* Responsywność – pozwól zawinąć poniżej 520px */
@media (max-width: 520px) {
  .admins-page .search-box { flex-wrap: wrap; }
}

/* Tabela kierowników */
.admins-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  overflow-x: auto;
  white-space: nowrap;
}
.admins-page table th,
.admins-page table td {
  padding: 6px 8px;
  text-align: left;
  vertical-align: middle;
  color: #fff;
}
.admins-page .actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 220px; }
.admins-inline-form { display: inline-block; }

/* Przyciski w module admins (spójne) */
.admins-btn-primary {
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background .2s;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
}
.admins-btn-primary:hover { background: #1d4ed8; }

/* Widok edycji – pola i help */
.admins-page .card input.input,
.admins-page .card select.input {
  min-height: 36px;
  border: 1px solid #374151;
  background: #0f172a;
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
}
.admins-page .card .help-text { font-size: .9em; color: #cbd5e1; }

/* ===== Admin Edit (spójny, zwarty układ) ===== */
.admin-edit { padding: 0 8px; }
.admin-edit-card { max-width: 960px; margin: 0 auto; }
.admin-edit-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.admin-edit-back { text-decoration: none; }

/* siatka formularza */
.admin-edit-form { margin-top: 10px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.form-grid.form-grid-2 { grid-template-columns: 1fr; }

@media (min-width: 880px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid.form-grid-2 { grid-template-columns: 1fr 1fr; }
  .form-span-2 { grid-column: span 2; }
}

/* pola i etykiety */
.form-field .label {
  display: block;
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 6px;
}
.admin-edit .input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #374151;
  background: #0f172a;
  color: #fff;
  border-radius: 6px;
  padding: 8px 10px;
}

/* akcje i separatory */
.actions-row {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.btn-full { width: 100%; }
.section-divider {
  border-top: 1px solid #25314d;
  margin: 16px 0;
}

/* dopasowanie przycisków do reszty UI */
.btn-danger {
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background .2s;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
}
.btn-danger:hover { background: #b91c1c; }

.btn-clear {
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background .2s;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}
.btn-clear:hover { background: #b91c1c; }


/* ==========================================================
   EMPLOYEES MODULE (scoped) — safe to paste at the end
   ========================================================== */

/* --- Hard, local reset (only inside this page) ------------- */
.employees-page, .employees-page * { box-sizing: border-box; }
.employees-page form { margin: 0 !important; }

/* --- Layout 30/70 ----------------------------------------- */
.employees-page .employees-layout{
  display: grid !important;
  grid-template-columns: minmax(0,30%) minmax(0,70%) !important;
  gap: 24px !important;
  align-items: start !important;
}
.employees-page .employees-layout .card{ margin:0 !important; padding:16px !important; overflow:hidden; }
.employees-page .employees-left,
.employees-page .employees-right{ min-width:0; }

/* --- Left panel: add form --------------------------------- */
.employees-page .manage-employees-form label{ display:block; margin:0 0 12px 0; }
.employees-page .manage-employees-form .input,
.employees-page .manage-employees-form select{
  width:100% !important;
  min-height:38px !important;
  background:#0f172a !important;
  border:1px solid #374151 !important;
  color:#fff !important;
  border-radius:8px !important;
  padding:8px 12px !important;
  font-size:14px !important;
}
.employees-page .manage-employees-form .help-text{ color:#cbd5e1; font-size:.9em; }
.employees-page .manage-employees-form button{
  height:38px !important; padding:0 16px !important;
  border-radius:8px !important; font-weight:700 !important;
  background:#2563eb !important; color:#fff !important;
  border:none !important; cursor:pointer;
}
.employees-page .manage-employees-form button:hover{ background:#1d4ed8 !important; }

/* QR icon for inputs that use it */
.employees-page .input.qr-input{
  background: url('../../images/qr_icon.png') no-repeat right 10px center !important;
  background-size:18px 18px !important;
  padding-right:36px !important;
}

/* --- Right panel: header + search bar --------------------- */
.employees-page .card-header{
  display:block !important;
  margin-bottom:12px !important;
}

/* Grid: first row input (spans all), second row filter+buttons to the right */
.employees-page form.employees-search{
  display:grid !important;
  grid-template-columns: 1fr auto auto auto !important;
  gap:10px !important; align-items:center !important;
  width:100% !important;
}
.employees-page .employees-search input[type="text"]{
  grid-column: 1 / -1 !important;      /* pełna szerokość w 1. wierszu */
  height:40px !important; padding:0 14px !important;
  background:#0f172a !important; border:1px solid #444 !important;
  color:#fff !important; border-radius:8px !important; font-size:14px !important;
}
.employees-page .employees-search select,
.employees-page .employees-search .employees-btn-clear,
.employees-page .employees-search .employees-btn-search{
  height:34px !important; line-height:34px !important;
  padding:0 12px !important; font-size:14px !important;
  border-radius:8px !important; border:none !important;
  justify-self:end !important;           /* trzyma prawą stronę */
}

/* Filter (select) */
.employees-page .employees-search select{
  background:#0f172a !important; border:1px solid #374151 !important; color:#fff !important;
}

/* Buttons */
.employees-page .employees-search .employees-btn-search,
.employees-page .employees-actions .employees-btn-primary{
  background:#1d4ed8 !important; color:#fff !important; font-weight:700 !important;
  min-width:104px !important; text-align:center !important;
}
.employees-page .employees-search .employees-btn-search:hover,
.employees-page .employees-actions .employees-btn-primary:hover{ background:#2563eb !important; }

.employees-page .employees-search .employees-btn-clear,
.employees-page .employees-actions .employees-btn-danger{
  background:#dc2626 !important; color:#fff !important; font-weight:700 !important;
  min-width:104px !important; text-align:center !important;
}
.employees-page .employees-search .employees-btn-clear:hover,
.employees-page .employees-actions .employees-btn-danger:hover{ background:#b91c1c !important; }

/* --- Table ------------------------------------------------- */
.employees-page .employees-right .table-scroll{ max-width:100%; overflow-x:hidden !important; }
.employees-page .employees-right table{
  width:100%; border-collapse:collapse; table-layout:auto !important;
  white-space:nowrap; font-size:14px !important; line-height:1.45 !important;
  margin-top:12px !important;
}
.employees-page .employees-right table th,
.employees-page .employees-right table td{
  padding:8px 10px !important; vertical-align:middle !important; color:#fff !important;
}

/* Columns: tighten + ellipsis to kill horizontal scroll */
.employees-page .employees-right table th:nth-child(2),
.employees-page .employees-right table td:nth-child(2){ /* Pracownik */
  max-width:280px !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
.employees-page .employees-right table th:nth-child(5),
.employees-page .employees-right table td:nth-child(5){ /* RFID */
  max-width:200px !important; overflow:hidden !important; text-overflow:ellipsis !important;
}

/* Actions column: compact */
.employees-page .employees-right table th:nth-child(6),
.employees-page .employees-right table td:nth-child(6){
  width:160px !important;
}
.employees-page .employees-actions{
  display:flex !important; gap:6px !important; align-items:center !important;
  flex-wrap:wrap !important; white-space:normal !important;
}
.employees-page .employees-actions .employees-btn-primary,
.employees-page .employees-actions .employees-btn-danger{
  height:28px !important; min-width:80px !important; padding:0 10px !important;
  font-size:12.5px !important; line-height:28px !important; border-radius:6px !important;
  border:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 1100px){
  .employees-page .employees-layout{ grid-template-columns: 1fr !important; }
}

@media (max-width: 720px){
  /* Na wąsko — pasek szuka może też przejść w dwa rzędy */
  .employees-page form.employees-search{
    grid-template-columns: 1fr auto auto !important; /* input pełny, potem filtr + 2 przyciski */
  }
}

@media (max-width: 560px){
  .employees-page form.employees-search{
    grid-template-columns: 1fr !important;            /* wszystko w kolumnie */
  }
  .employees-page .employees-search select,
  .employees-page .employees-search .employees-btn-clear,
  .employees-page .employees-search .employees-btn-search{
    justify-self:stretch !important; width:100% !important;
  }
  .employees-page .employees-right table th:nth-child(6),
  .employees-page .employees-right table td:nth-child(6){
    width:140px !important;
  }
}



/* qr ikona w inputach */
.input.qr-input{
  background: url('../../images/qr_icon.png') no-repeat right 10px center;
  background-size: 18px 18px;
  padding-right: 35px;
}