/* Nic nie wystaje poza szerokosc ekranu telefonu */
    html, body { max-width: 100%; overflow-x: hidden; }

/* ===== Wyglad jak w LAB (paleta GitHub dark, karty, przyciski) ===== */
:root, [data-bs-theme=dark] {
    --bs-body-bg: #0d1117; --bs-body-color: #c9d1d9; --bs-border-color: #30363d;
    --bs-secondary-color: #8b949e; --bs-tertiary-bg: #161b22; --bs-emphasis-color: #fff;
    --bs-primary: #1f6feb; --bs-primary-rgb: 31,111,235;
    --bs-success: #238636; --bs-success-rgb: 35,134,54;
    --bs-warning: #d29922; --bs-warning-rgb: 210,153,34;
    --bs-danger: #da3633;  --bs-danger-rgb: 218,54,51;
    --bs-info: #58a6ff;    --bs-info-rgb: 88,166,255;
    --bs-link-color: #58a6ff; --bs-link-color-rgb: 88,166,255;
    --bs-border-radius: 8px;
}
body { font-family: system-ui, -apple-system, sans-serif; background: #0d1117; color: #c9d1d9;
       padding-bottom: 90px; }
.container-app { max-width: 900px; margin: 0 auto; padding: 0 12px; }
h5, h6 { color: #fff; }
.card, .karta { background: #161b22 !important; border: 1px solid #30363d !important; border-radius: 10px; }
.btn { font-weight: 600; border-radius: 8px; }
.btn-primary { --bs-btn-bg: #1f6feb; --bs-btn-border-color: #1f6feb; --bs-btn-hover-bg: #388bfd; --bs-btn-hover-border-color: #388bfd; }
.btn-success { --bs-btn-bg: #238636; --bs-btn-border-color: #238636; --bs-btn-hover-bg: #2ea043; --bs-btn-hover-border-color: #2ea043; }
.btn-danger  { --bs-btn-bg: #da3633; --bs-btn-border-color: #da3633; --bs-btn-hover-bg: #f85149; --bs-btn-hover-border-color: #f85149; }
.btn-secondary, .btn-outline-secondary { --bs-btn-bg: #21262d; --bs-btn-border-color: #30363d; --bs-btn-color: #c9d1d9;
                                         --bs-btn-hover-bg: #30363d; --bs-btn-hover-border-color: #30363d; --bs-btn-hover-color: #fff; }
/* Telefon: staly prefiks z flaga Polski i +48 (jak w LAB) */
.prefiks-tel { display: flex; align-items: center; gap: 6px; font-weight: 600; background: #161b22;
               color: #c9d1d9; border-color: #30363d; }
.flaga-pl { display: inline-block; width: 21px; height: 14px; border-radius: 2px;
            background: linear-gradient(to bottom, #fff 50%, #dc143c 50%); border: 1px solid rgba(128,128,128,.7); }
.form-label-sm { font-size: 12px; color: #8b949e; display: block; margin-bottom: 2px; }
.table-dark { --bs-table-bg: #161b22; --bs-table-border-color: #21262d; }

/* Pasek konta na gorze (cala szerokosc) + rozwijane Ustawienia - jak w LAB */
.naglowek { position: sticky; top: 0; z-index: 1030; background: #0d1117; }
.user-bar { position: relative; display: flex; align-items: center;
            gap: 8px; min-height: 40px; padding: 4px 12px; background: #161b22; border-bottom: 1px solid #30363d;
            font-size: 13px; }
/* Jedna linia: dlugie imie/firma skracane wielokropkiem zamiast zawijania */
.user-bar .who { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.user-bar .who b, .user-bar .firma { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.user-bar .who b { color: #fff; flex-shrink: 0; max-width: 45%; }
.user-bar .firma { color: #8b949e; }
.user-bar .role-badge { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 480px) { .user-bar .firma { display: none; } .settings-btn .napis { display: none; } }
.role-badge { display: inline-block; background: #1f6feb; color: #fff; border-radius: 20px; padding: 2px 10px;
              font-size: 12px; font-weight: 600; }
.role-badge:empty { display: none; }
.idle-timer { margin-left: auto; color: #8b949e; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.settings-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600;
                border: 1px solid #30363d; border-radius: 8px; background: #21262d; color: #c9d1d9; cursor: pointer;
                white-space: nowrap; }
.settings-btn:hover { background: #30363d; }
.settings-btn .gear { font-size: 16px; line-height: 1; }
.settings-menu { position: absolute; top: 100%; right: 12px; width: 300px; max-width: calc(100vw - 24px);
                 margin-top: 4px; padding: 14px; background: #161b22; border: 1px solid #30363d; border-radius: 10px;
                 box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.tab-bar { background: #0d1117; border-bottom: 1px solid #30363d; padding: 0 8px; max-width: 900px; margin: 0 auto; }
.nav-link.nav-admin { color: #fff !important; background: #da3633; border-radius: 8px 8px 0 0; font-weight: 700;
                      letter-spacing: 1px; }
.nav-link.nav-admin.active { background: #f85149; border-bottom-color: #f85149 !important; }

    /* Pasek zakladek przewija sie sam, nie ciagnie za soba calej strony */
    .tab-strip {
        display: flex; gap: 2px; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; width: 100%;
    }
    .tab-strip::-webkit-scrollbar { display: none; }
    .tab-strip .nav-link { white-space: nowrap; flex: 0 0 auto; }
    .nav-link { color: #8b949e !important; font-size: 0.9rem; padding: 6px 10px !important; }
    .nav-link.active { color: #58a6ff !important; border-bottom: 2px solid #58a6ff; }
    .modal-content { background: #161b22 !important; }
    .form-control, .form-select { background: #0d1117; border-color: #30363d; color: #e6edf3; }
    .form-control:focus, .form-select:focus { background: #0d1117; border-color: #58a6ff; color: #e6edf3; box-shadow: none; }
    .form-control::placeholder { color: #484f58; }

    /* Kolorowe odznaki stanu magazynu */
    .badge-0    { background: #ef4444 !important; color: #fff !important; }
    .badge-1    { background: #f97316 !important; color: #fff !important; }
    .badge-2    { background: #eab308 !important; color: #000 !important; }
    .badge-3    { background: #22c55e !important; color: #000 !important; }
    .badge-4    { background: #15803d !important; color: #fff !important; }

    .product-row { cursor: pointer; border-bottom: 1px solid #30363d; transition: background 0.1s; }
    .product-row:hover { background: #1c2128; }
    .tag-row { font-size: 0.82rem; border-bottom: 1px solid #21262d; }
    .tag-removed { text-decoration: line-through; opacity: 0.45; }
    .uid-text { font-family: monospace; font-size: 0.78rem; color: #6e7681; }

    .fab {
        position: fixed; bottom: 20px; right: 20px; z-index: 1050;
        width: 58px; height: 58px; border-radius: 50%; font-size: 1.6rem;
        box-shadow: 0 4px 16px rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center;
    }

    #cameraFeed { width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; }

    .session-tag-row { font-size: 0.83rem; padding: 7px 0; border-bottom: 1px solid #21262d; }
    .expiry-input { width: 110px !important; font-size: 0.78rem !important; }

    .alert-banner { background: #1f2a1f; border-left: 4px solid #238636; padding: 8px 12px; }
    .expiry-warn  { color: #f97316; }
    .expiry-ok    { color: #22c55e; }
    .expiry-over  { color: #ef4444; }

    .step3-counter {
        font-size: 2.5rem; font-weight: 700; color: #22c55e;
        line-height: 1;
    }

    /* ===== Liczniki ostrzezen przy grupach ===== */
    .warn-pill {
        display:inline-flex; align-items:center; gap:.2rem;
        font-size:.72rem; font-weight:600; line-height:1;
        padding:.2rem .4rem; border-radius:.35rem; margin-left:.25rem;
    }
    .warn-yellow  { background:#facc15; color:#1a1a1a; }
    .warn-orange  { background:#fb923c; color:#1a1a1a; }
    .warn-red     { background:#ef4444; color:#fff; }
    .warn-expired { background:#dc2626; color:#fff; animation: blink 1s steps(2, start) infinite; }
    .warn-low     { background:#ef4444; color:#fff; }
    .warn-half    { background:#fb923c; color:#1a1a1a; }

    /* Migajacy alert dla pozycji po terminie */
    @keyframes blink { to { visibility: hidden; } }

    /* ===== Smietnik / zuzycie: wynik skanu ===== */
    .wydaj-wynik {
        border-radius:.75rem; padding:1rem; margin-bottom:.75rem; text-align:center;
        border:2px solid transparent;
    }
    .wydaj-wynik.ok    { background:#14532d; border-color:#22c55e; color:#fff; }
    .wydaj-wynik.blad  { background:#7f1d1d; border-color:#ef4444; color:#fff; }
    .wydaj-wynik.czeka { background:#1f2937; border-color:#475569; color:#cbd5e1; }
    .wydaj-wynik-ikona { font-size:2.5rem; line-height:1; }
    .wydaj-wynik-tytul { font-size:1.25rem; font-weight:700; margin-top:.25rem; }
    .wydaj-wynik-opis  { margin-top:.25rem; }

    /* ===== Stan czytnikow / kalibracja ===== */
    .czyt-wiersz { border-bottom:1px solid #334155; padding:.4rem 0; }
    .bat-pasek { position:relative; height:14px; background:#1f2937; border:1px solid #475569;
                 border-radius:4px; overflow:hidden; min-width:120px; }
    .bat-pasek > .wyp { height:100%; }
    .bat-pasek > .txt { position:absolute; inset:0; font-size:.7rem; line-height:12px; text-align:center;
                        color:#fff; text-shadow:0 0 2px #000; }
    .bat-napiecie { font-weight:700; font-variant-numeric:tabular-nums; }
    .czyt-usypia { color:#fbbf24; font-weight:700; }
    .czyt-spi    { color:#60a5fa; font-weight:700; }
    .kal-wykres { width:100%; height:auto; background:#0f172a; border:1px solid #334155; border-radius:.5rem; }
    .kal-leg { display:inline-block; width:14px; height:3px; vertical-align:middle; }
    .kal-leg-mv { background:#22c55e; }
    .kal-leg-proc { background:#f59e0b; }
    .kal-leg-off { background:#ef4444; }

    /* ===== Drzewo magazynu ===== */
    .group-head {
        cursor:pointer; user-select:none;
        background:#1f2937; border-radius:.5rem;
    }
    .group-head:hover { background:#273449; }
    .subgroup-head {
        cursor:pointer; user-select:none;
        background:#182030; border-radius:.4rem;
    }
    .subgroup-head:hover { background:#1f2a3d; }
    .chev { transition: transform .15s; }
    .chev.open { transform: rotate(90deg); }

    /* Poziom zapelnienia opakowania */
    .level-full { color:#22c55e; }
    .level-half { color:#fb923c; }
    .level-low  { color:#ef4444; }

    /* Wiersz reguly wlasnej w panelu admina */
    .custom-rule { border-left:3px solid #0ea5e9; }
    .change-reverted { opacity:.5; text-decoration: line-through; }

/* Ekran logowania (etykieta klucza) */
.ekran-logowania { position: fixed; inset: 0; z-index: 2000; background: #0d1117;
                   display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 2rem 1rem; }
.karta-logowania { width: 100%; max-width: 480px; background: #161b22; border: 1px solid #30363d;
                   border-radius: 12px; padding: 1.25rem; }
/* Czerwone migajace powiadomienie (wiele rozbieznosci w krotkim czasie) */
@keyframes miganie { 50% { opacity: .45; } }
.miganie { animation: miganie 1.2s ease-in-out infinite; }
#rozbBanner { cursor: pointer; }