:root {
    --kolor-tlo: #f7f5f2;
    --kolor-karta: #ffffff;
    --kolor-tekst: #2b2420;
    --kolor-tekst-slaby: #756a60;
    --kolor-ramka: #e3ddd5;
    --kolor-akcent: #b5651d;
    --kolor-akcent-ciemny: #8f4e15;
    --kolor-sukces-tlo: #e5f4e6;
    --kolor-sukces-tekst: #1f6b2c;
    --kolor-blad-tlo: #fbe6e4;
    --kolor-blad-tekst: #9c2b21;
    --kolor-alert-tlo: #fde9d0;
    --kolor-alert-tekst: #8a4b06;
    --promien: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--kolor-tlo);
    color: var(--kolor-tekst);
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--kolor-akcent-ciemny); }

.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--kolor-karta);
    border-bottom: 1px solid var(--kolor-ramka);
    padding: 0.75rem 1.5rem;
    flex-wrap: wrap;
}

.topbar-brand { font-weight: 700; font-size: 1.2rem; color: var(--kolor-akcent-ciemny); display: flex; align-items: center; }
.topbar-logo { height: 40px; width: 40px; border-radius: 6px; display: block; }

.topbar-nav { display: flex; gap: 1rem; flex: 1; }
.topbar-nav a { text-decoration: none; color: var(--kolor-tekst); padding: 0.4rem 0.6rem; border-radius: var(--promien); }
.topbar-nav a.active, .topbar-nav a:hover { background: var(--kolor-tlo); color: var(--kolor-akcent-ciemny); }

.topbar-user { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; color: var(--kolor-tekst-slaby); }
.topbar-user a { color: var(--kolor-akcent-ciemny); text-decoration: none; }

.content { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

.card {
    background: var(--kolor-karta);
    border: 1px solid var(--kolor-ramka);
    border-radius: var(--promien);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.15rem; }

.flash { padding: 0.7rem 1rem; border-radius: var(--promien); margin-bottom: 1rem; }
.flash-sukces { background: var(--kolor-sukces-tlo); color: var(--kolor-sukces-tekst); }
.flash-blad { background: var(--kolor-blad-tlo); color: var(--kolor-blad-tekst); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--kolor-ramka); vertical-align: middle; }
th { color: var(--kolor-tekst-slaby); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; }
tr:hover td { background: #fbfaf8; }

.toolbar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar form { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; row-gap: 0.75rem; }
.search-form { position: relative; }

.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tabs a { text-decoration: none; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--kolor-ramka); color: var(--kolor-tekst); font-size: 0.9rem; }
.tabs a.active { background: var(--kolor-akcent); border-color: var(--kolor-akcent); color: #fff; }

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge-alert { background: var(--kolor-alert-tlo); color: var(--kolor-alert-tekst); }
.badge-ok { background: var(--kolor-sukces-tlo); color: var(--kolor-sukces-tekst); }

label { display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.9rem; }
.field { margin-bottom: 0.9rem; }
.field-hint { color: var(--kolor-tekst-slaby); font-size: 0.82rem; margin-top: 0.25rem; }
.field-error { color: var(--kolor-blad-tekst); font-size: 0.82rem; margin-top: 0.25rem; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=file], select, textarea {
    width: 100%;
    /* min-width:0 przełamuje domyślne "min-width:auto" pól formularza w gridzie/flexie -
       bez tego pole z długim tekstem (np. nazwa opcji w select) odmawia skurczenia się
       poniżej swojej naturalnej szerokości i rozpycha/rozjeżdża kolumny obok siebie. */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.6rem;
    border: 1px solid var(--kolor-ramka);
    border-radius: var(--promien);
    /* 16px (1rem) zapobiega automatycznemu przybliżeniu strony przez Safari na iOS przy fokusie na polu */
    font-size: 1rem;
    background: #fff;
    color: var(--kolor-tekst);
    font-family: inherit;
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 640px; }

.checkbox-line { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; margin-bottom: 0.4rem; }
.checkbox-line input[type=checkbox] { width: auto; margin: 0; }

.filtr-kategorie { position: relative; }
.filtr-kategorie summary { cursor: pointer; list-style: none; }
.filtr-kategorie summary::-webkit-details-marker { display: none; }
.filtr-kategorie-panel {
    position: absolute; top: 100%; left: 0; z-index: 10; margin-top: 0.25rem;
    background: var(--kolor-karta); border: 1px solid var(--kolor-ramka); border-radius: var(--promien);
    padding: 0.75rem; min-width: 220px; max-height: 260px; overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.filtr-fc-grupa {
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; flex: 0 0 auto;
    padding: 0.45rem 0.9rem; border: 1px solid var(--kolor-ramka); border-radius: 999px; background: #fff;
}
.filtr-fc { display: flex; align-items: center; gap: 0.35rem; font-weight: 400; white-space: nowrap; flex: 0 0 auto; }
.filtr-fc span { flex-shrink: 0; }
.filtr-fc input[type=number] { padding: 0.4rem; flex-shrink: 0; min-width: 4rem; }

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.5rem; }
.form-grid > .field { min-width: 0; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--promien);
    border: 1px solid var(--kolor-akcent);
    background: var(--kolor-akcent);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--kolor-akcent-ciemny); border-color: var(--kolor-akcent-ciemny); }
.btn-secondary { background: transparent; color: var(--kolor-tekst); border-color: var(--kolor-ramka); }
.btn-secondary:hover { background: var(--kolor-tlo); }
.btn-danger { background: var(--kolor-blad-tekst); border-color: var(--kolor-blad-tekst); }
.btn-danger:hover { background: #7a201a; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.82rem; }

.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.login-wrap { max-width: 380px; margin: 4rem auto; }
.login-wrap .card { padding: 2rem; text-align: center; }
.login-logo { width: 120px; height: 120px; border-radius: 12px; margin: 0 auto 1rem; display: block; }
.login-wrap form { text-align: left; }

.muted { color: var(--kolor-tekst-slaby); }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }

/* Tablet (np. iPad w pionie) */
@media (max-width: 1024px) {
    .content { padding: 1.25rem; }
}

/* Telefon */
@media (max-width: 640px) {
    .content { padding: 0.85rem; }
    .card { padding: 1rem; }

    .topbar { padding: 0.6rem 0.85rem; gap: 0.6rem; }
    .topbar-nav { gap: 0.4rem; flex: 1 1 100%; order: 3; }
    .topbar-nav a { padding: 0.45rem 0.55rem; font-size: 0.9rem; }
    .topbar-user { flex: 1 1 auto; justify-content: space-between; font-size: 0.85rem; }

    h1 { font-size: 1.3rem; }

    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar form { flex-direction: column; align-items: stretch; }
    .toolbar a.btn, .toolbar a.btn-secondary, .toolbar button { width: 100%; text-align: center; }

    .form-grid { gap: 0; }

    .btn, .btn-secondary, .btn-danger { width: 100%; text-align: center; }
    .actions { flex-direction: column; }
    .actions .btn, .actions form { width: 100%; }
    .actions form button { width: 100%; }

    /* Przyciski akcji przy produkcie/składniku wracają do naturalnej szerokości w wierszu tabeli,
       żeby nie rozciągać kolumny na całą szerokość przewijanej tabeli */
    .table-scroll .actions { flex-direction: row; }
    .table-scroll .actions .btn, .table-scroll .actions form, .table-scroll .actions form button { width: auto; }

    .login-wrap { margin: 1.5rem auto; }
    .login-wrap .card { padding: 1.5rem; }
}