/* Plik: style.css (wersja z poprawionym wyglądem tabeli) */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}
.container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px
    10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
}
.wide-container {
    max-width: 900px;
}
h1 { text-align: center; color: #333; margin-bottom: 20px; }
h2 { color: #555; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-top: 30px; }
.user-panel {
    display: flex; justify-content: space-between; align-items: center;
    background-color: #e9f5ff; padding: 10px 15px; border-radius: 5px;
    margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.user-panel p { margin: 0; color: #333; }
.admin-panel {
    background-color: #fffbe6; border: 1px solid #ffe58f; padding: 15px;
    border-radius: 5px; margin-bottom: 25px;
}
.admin-panel h3 { margin-top: 0; }
.form-container, .form-wrapper { margin-top: 20px; }
.auth-container .login-wrapper { width: 100%; max-width: 400px; margin: 0 auto; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: #666; font-weight: bold; }
.form-group input[type="text"],
.form-group input[type="password"],
.form-group select {
    width: 100%; padding: 10px; border: 1px solid #ccc;
    border-radius: 4px; box-sizing: border-box;
}
.form-group input:focus, .form-group select:focus { border-color: #007bff; outline: none; }
.btn {
    display: inline-block; width: 100%; padding: 12px; background-color: #007bff;
    color: white; border: none; border-radius: 4px; cursor: pointer;
    font-size: 16px; text-align: center; text-decoration: none; transition: background-color 0.2s;
}
.btn:hover { background-color: #0056b3; }
.btn-logout { width: auto; padding: 8px 15px; background-color: #dc3545; }
.btn-logout:hover { background-color: #c82333; }
.btn-secondary { background-color: #6c757d; width: auto; padding: 8px 15px; }
.btn-secondary:hover { background-color: #5a6268; }
.btn-admin { background-color: #ffc107; color: #212529; width: 95%; }
.btn-admin:hover { background-color: #e0a800; }
.message { padding: 10px; margin-bottom: 15px; border-radius: 4px; text-align: center; }
.message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* === NOWE, POPRAWIONE STYLE DLA ZARZĄDZANIA UŻYTKOWNIKAMI === */
.user-list-container {
    margin-top: 40px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 15px; /* Delikatne zmniejszenie czcionki dla lepszej czytelności */
}
th, td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0; /* Subtelniejsza linia oddzielająca */
    text-align: left;
    vertical-align: middle; /* KLUCZOWE DLA WYRÓWNANIA W PIONIE */
}
th {
    background-color: #f8f9fa; /* Jaśniejszy nagłówek */
    font-weight: 600;
    color: #495057;
}
/* Usunięcie obramowania dolnego dla ostatniego wiersza */
tr:last-child td {
    border-bottom: 0;
}
tr:hover {
    background-color: #f1f3f5; /* Efekt najechania myszką */
}

/* Ustawienie szerokości kolumn akcji */
.actions-column-password {
    width: 280px;
}
.actions-column-delete {
    width: 120px;
    text-align: center;
}
.cell-center {
    text-align: center;
}

/* Stylowanie formularza wewnątrz tabeli */
.inline-form {
    display: flex;
    gap: 8px; /* Odstęp między polem a przyciskiem */
    align-items: center; /* Wyrównanie elementów w formularzu */
}
.inline-form input[type="password"] {
    flex-grow: 1; /* Pole rozciągnie się */
    max-width: 160px; /* Ale nie będzie za szerokie */
    padding: 8px;
    font-size: 14px;
}
.btn-small {
    padding: 8px 12px;
    font-size: 14px;
    width: auto;
    flex-shrink: 0; /* Przycisk nie będzie się kurczył */
}
.btn-danger {
    background-color: #dc3545;
}
.btn-danger:hover {
    background-color: #c82333;
}

/* Stylowanie wskaźnika "(Ty)" */
.self-indicator {
    font-style: italic;
    color: #6c757d;
    font-weight: 500;
}

/* === NOWE STYLE DLA NAGŁÓWKA I RESPONSYWNEGO LOGO === */

.header-section {
    text-align: center; /* Wycentruje logo i nagłówek h1 */
    margin-bottom: 25px; /* Doda trochę przestrzeni pod nagłówkiem */
}

.logo {
    max-width: 100%; /* KLUCZOWA WŁAŚCIWOŚĆ: Logo nigdy nie będzie szersze niż jego kontener */
    height: auto;    /* Zachowuje prawidłowe proporcje obrazka podczas skalowania */
    max-height: 150px; /* Opcjonalnie: Ustawia maksymalną wysokość, żeby logo nie było za duże na desktopie */
}

h1 {
    font-size: 24px; /* Poprawka rozmiaru czcionki dla lepszej czytelności na mobilnych */
    margin-top: 10px; /* Odstęp między logo a tytułem */
}

/* === STYLE DLA STRONY Z PODGLĄDEM DANYCH === */

.navigation-panel {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 5px;
    text-align: center;
}

.btn-info {
    background-color: #17a2b8; /* Taki sam jak przycisk eksportu */
    width: 95%;
    padding: 10px 12px;
}
.btn-info:hover {
    background-color: #138496;
}

/* Kontener dla tabeli danych, zapewniający przewijanie na małych ekranach */
.data-table-container {
    width: 100%;
    overflow-x: auto; /* To jest kluczowe dla responsywności! */
    margin-top: 20px;
}

/* Poprawka, aby ogólne style tabeli działały też tutaj */
.data-table-container table {
    min-width: 600px; /* Zapobiega "zgnieceniu" tabeli na małych ekranach */
}