/* Panel opinie natto.pl. Duża czcionka (18px+), custom CSS, bez zależności. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --ziel: #2d3e2f;
    --ziel-jasny: #eef3ee;
    --krem: #fdfaf5;
    --czerw: #a33c2f;
    --szary: #6b7264;
    --ramka: #d9ddd4;
}
body {
    font: 18px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--krem);
    color: var(--ziel);
}

/* logowanie */
body.logowanie { display: grid; place-items: center; min-height: 100dvh; }
.login-box {
    background: #fff; border: 1px solid var(--ramka); border-radius: 8px;
    padding: 40px; width: min(400px, 92vw); display: grid; gap: 16px;
}
.login-box h1 { font-size: 24px; }
.login-box input {
    font-size: 20px; padding: 12px; border: 1px solid var(--ramka); border-radius: 6px;
}
.login-box .blad { color: var(--czerw); font-weight: 600; }

button {
    font-size: 17px; padding: 10px 18px; cursor: pointer;
    background: var(--ziel); color: #fff; border: 0; border-radius: 6px;
}
button:hover { opacity: .9; }
button:disabled { opacity: .5; cursor: default; }
.btn-maly { font-size: 15px; padding: 5px 10px; background: #fff; color: var(--ziel); border: 1px solid var(--ramka); }
.btn-zielony { background: #2e7d32; color: #fff; border: 0; }
.btn-czerwony { background: var(--czerw); color: #fff; border: 0; }

/* nagłówek */
.pasek {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    background: var(--ziel); color: #fff; padding: 14px 24px;
}
.pasek h1 { font-size: 22px; }
.pasek-info { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
    background: rgba(255,255,255,.14); border-radius: 999px; padding: 4px 14px; font-size: 15px;
}
.chip-ok { background: #2e7d32; }
.chip-stop { background: var(--czerw); }
.chip-szary { background: rgba(255,255,255,.14); }
.chip-link { color: #fff; text-decoration: none; }
.chip-link:hover { background: rgba(255,255,255,.3); }

.import-pas {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    background: var(--ziel-jasny); border-bottom: 1px solid var(--ramka); padding: 10px 24px; font-size: 16px;
}
.import-akcje { display: flex; gap: 8px; }
.import-akcje form { display: inline; }

/* zakładki */
.zakladki { display: flex; gap: 4px; padding: 16px 24px 0; border-bottom: 2px solid var(--ziel); flex-wrap: wrap; }
.zakladki a {
    padding: 10px 20px; text-decoration: none; color: var(--ziel);
    border: 1px solid var(--ramka); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fff;
}
.zakladki a.aktywna { background: var(--ziel); color: #fff; font-weight: 600; }
.zakladki small { font-size: 14px; opacity: .8; }
.uwaga { color: var(--czerw); font-weight: 600; font-size: 15px; }

main { padding: 20px 24px 60px; max-width: 1400px; }
main h2 { font-size: 21px; margin-bottom: 14px; }
main p { margin-bottom: 12px; }

/* tabele */
table.klienci { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--ramka); border-radius: 8px; overflow: hidden; }
table.klienci th {
    text-align: left; font-size: 15px; text-transform: uppercase; letter-spacing: .03em;
    background: var(--ziel-jasny); padding: 10px 12px; border-bottom: 2px solid var(--ramka);
}
table.klienci td { padding: 10px 12px; border-bottom: 1px solid var(--ramka); vertical-align: top; }
table.klienci tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
.szary { color: var(--szary); font-size: 15px; }
tr.st-wykluczony { opacity: .55; }
tr.st-wyslany { background: #f4faf4; }

/* statusy */
.status { display: inline-block; border-radius: 999px; padding: 2px 12px; font-size: 14px; font-weight: 600; background: var(--ziel-jasny); }
.status-czeka { background: #fff4d6; color: #7a5b00; }
.status-wyslany { background: #dcefdc; color: #1d5b21; }
.status-wykluczony { background: #f3dcd8; color: var(--czerw); }
.status-recznie { background: #dde7f5; color: #2b4a77; }
.status-poza { background: #eee; color: var(--szary); }

/* szczegóły klienta: rozwijany wiersz na pełną szerokość tabeli */
button.rozwin {
    background: none; border: 0; color: inherit; font: inherit;
    text-align: left; padding: 0; cursor: pointer; width: 100%;
}
button.rozwin:hover { opacity: 1; text-decoration: underline; }
.strzalka { display: inline-block; transition: transform .15s; color: var(--szary); }
tr.otwarty .strzalka { transform: rotate(90deg); }
tr.detal > td { background: var(--ziel-jasny); padding: 14px 18px; }
.szczegoly-kolumny { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.2fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .szczegoly-kolumny { grid-template-columns: 1fr; } }
.prod-lista { width: 100%; margin: 8px 0; font-size: 16px; background: #fff; border-radius: 6px; border: 1px solid var(--ramka); }
.prod-lista td { padding: 5px 10px; border-bottom: 1px dotted var(--ramka); }
.prod-lista tr:last-child td { border-bottom: 0; }
.prod-lista tr.ulubiony td { font-weight: 700; background: var(--krem); }
.podglad-mail p { margin-bottom: 4px; }
.podglad-mail pre {
    white-space: pre-wrap; background: #fff; border: 1px solid var(--ramka);
    border-radius: 6px; padding: 16px; font: 16px/1.55 ui-monospace, Consolas, monospace;
    margin-top: 6px; width: 100%;
}

.forma-inline { display: flex; gap: 6px; align-items: center; }
.forma-inline input[type=text] { font-size: 16px; padding: 6px 8px; border: 1px solid var(--ramka); border-radius: 6px; }
td.akcje { white-space: nowrap; }
td.akcje form { display: inline-block; margin: 2px 0; }

/* mobile: tabela przewijana w swoim kontenerze */
@media (max-width: 900px) {
    main { padding: 14px 10px 60px; overflow-x: auto; }
    table.klienci { min-width: 900px; }
    .pasek, .import-pas { padding: 10px 12px; }
    .zakladki { padding: 12px 10px 0; }
}