[x-cloak] { display: none !important; }
body { background: #f4f6f8; }
.nav-link { cursor: pointer; }
.navbar-nav .nav-link.active { font-weight: 600; }

/* ── Bottom navigation (mobile) ─────────────────────── */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 60px; z-index: 1031;
    background: #212529;
    display: flex; align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 10px rgba(0,0,0,.3);
}
.bn-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,.5); cursor: pointer;
    font-size: 10px; font-weight: 500; line-height: 1.3;
    border: none; background: none; padding: 4px 2px;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
}
.bn-item.active { color: #ffffff; }
.bn-item .bn-icon { font-size: 21px; line-height: 1; margin-bottom: 1px; }

/* More drawer */
.more-drawer {
    position: fixed; bottom: 60px; left: 0; right: 0;
    background: #2c3034; z-index: 1030;
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -4px 16px rgba(0,0,0,.4);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mdi-btn {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; color: rgba(255,255,255,.85);
    cursor: pointer; border: none; background: none; width: 100%;
    text-align: left; font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    -webkit-tap-highlight-color: transparent;
}
.mdi-btn:active { background: rgba(255,255,255,.08); }
.mdi-btn.text-danger-soft { color: #f07070 !important; }

/* ── Mobile layout ───────────────────────────────────── */
@media (max-width: 767.98px) {
    .main-content {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 4px);
    }
    /* Prevent iOS zoom on focus */
    input, select, textarea {
        font-size: 16px !important;
    }
    .container-lg {
        padding-left: 12px;
        padding-right: 12px;
    }
    .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .card { border-radius: 12px; margin-bottom: .75rem; }
    .btn { min-height: 40px; }
    /* Wider tap area for small buttons */
    .btn-sm { min-height: 34px; padding: .3rem .6rem; }
    .table > :not(caption) > * > * { padding: .45rem .35rem; font-size: .85rem; }
}

@media (min-width: 768px) {
    .bottom-nav, .more-drawer { display: none !important; }
}

/* ── General polish ──────────────────────────────────── */
.card { box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.navbar { box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.modal-body { overscroll-behavior: contain; }

/* Alpine x-show compatible flex (Bootstrap d-flex uses !important which beats Alpine's display:none) */
.af-flex { display: flex; }
.af-flex-col { display: flex; flex-direction: column; }

/* ── Pełny ekran podglądu obrazów / PDF (Fullscreen API) ───────────────────
   .fs-target = element wchodzący w fullscreen; .fs-media = obraz/iframe/wideo
   które ma wypełnić ekran; .fs-media-wrap = kontener obrazu (zdejmujemy limit
   wysokości aby zdjęcie urosło do pełnego ekranu). */
.fs-target:fullscreen,
.fs-target:-webkit-full-screen {
    width: 100vw; height: 100vh; max-width: none; max-height: none;
    border-radius: 0; margin: 0; background: #1a1a1a;
}
.fs-target:fullscreen .modal-body,
.fs-target:-webkit-full-screen .modal-body {
    max-height: none !important; height: auto; flex: 1 1 auto; background: #1a1a1a !important;
}
.fs-target:fullscreen .fs-media-wrap,
.fs-target:-webkit-full-screen .fs-media-wrap {
    max-height: none !important; height: 100%;
}
.fs-target:fullscreen img.fs-media,
.fs-target:-webkit-full-screen img.fs-media,
.fs-target:fullscreen video.fs-media,
.fs-target:-webkit-full-screen video.fs-media {
    max-height: calc(100vh - 120px) !important; max-width: 100vw !important;
}
.fs-target:fullscreen iframe.fs-media,
.fs-target:-webkit-full-screen iframe.fs-media {
    width: 100% !important; height: calc(100vh - 52px) !important; max-height: none !important;
}