/* Minimalne, jasne UI dla header/footer + logowanie. Dopasowane do Twojej palety ze style.css */
:root {
    --text: #1a1a1a;
    --muted: #4b5563;
    --primary: #007acc;
    --border: #ddd;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --accent-2: #3b82f6;
    --danger: #e53935;
    /* offsety */
    --app-header-h: 56px;
    --footer-safe: 72px;
}

/* Bezpieczny dolny padding, by sticky footer nie nachodził na treść */
body { padding-bottom: calc(var(--footer-safe) + 8px); }

/* Bannery */
.banner {
    padding: .6rem .8rem;
    border-radius: 8px;
    margin-bottom: .75rem;
    font-size: .95rem;
}
.banner.info { background: #e3f2fd; color: #0f2940; border: 1px solid #b6dcff; }
.banner.error { background: #ffecec; color: #7a0b0b; border: 1px solid #ffb3b3; }
.banner.success { background: #eaffea; color: #0a5228; border: 1px solid #b5f0c8; }

/* Header (jasny, lepki) */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
    color: var(--text);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    min-height: var(--app-header-h);
}
.app-header .logo-btn {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    border: 1px solid #e6eefc;
    cursor: pointer;
    box-shadow: var(--shadow);
}
.app-header .logo-btn:hover { background: #f5faff; transform: scale(1.05) !important; }
.app-title { font-size: 1.05rem; margin: 0; line-height: 1; }
.user-area { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.user-chip {
    background: #f3f7ff; border: 1px solid #dbe7ff;
    border-radius: 999px; padding: .25rem .6rem; font-size: .85rem; color: #0f2940;
    max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logout-btn {
    display: inline-flex; gap: .4rem; align-items: center;
    background: #fff; color: var(--text); text-decoration: none;
    border: 1px solid #dbe7ff; padding: .35rem .6rem; border-radius: 8px;
    box-shadow: var(--shadow);
}
.logout-btn:hover { background: #f5faff; }
.logout-text { display: none; }
@media (min-width: 480px) { .logout-text { display: inline; } }
@media (max-width: 420px) {
    .user-chip { display: none; }
    .logout-text { display: none; }
}

/* Footer tabbar */
.app-footer {
    position: sticky;
    bottom: 0; z-index: 50;
    background: rgba(255,255,255,0.95);
    border-top: 1px solid rgba(0,0,0,0.06);
    backdrop-filter: blur(6px);
}
.tabbar {
    display: grid;
    gap: .25rem;
    padding: .25rem .25rem .5rem;
}
.tabbar--5 { grid-template-columns: repeat(5, 1fr); }
.tabbar--4 { grid-template-columns: repeat(4, 1fr); }

.tabbar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .2rem;
    background: #ffffff;
    color: #333;
    border: 1px solid #e6eefc;
    border-radius: 10px; padding: .35rem .2rem;
    font-size: .7rem; cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: var(--shadow);
}
.tabbar-item i { font-size: 1rem; color: var(--primary); }
.tabbar-item:hover { background: #f5faff; border-color: #dbe7ff; transform: translateY(-1px); }
.tabbar-item.active { outline: 2px solid #b6dcff; transform: translateY(-2px); }
.tabbar-item:focus-visible { outline: 2px solid #b6dcff; outline-offset: 2px; }

/* Logowanie */
.auth-body {
    min-height: 100vh;
    background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);
    color: var(--text);
}
.auth-wrapper { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card {
    width: 100%; max-width: 380px;
    background: #fff;
    border: 1px solid #e6eefc;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    padding: 1.25rem;
}
.login-logo { display: block; margin: .25rem auto .5rem; opacity: .95; }
.login-title { text-align: center; margin: .25rem 0 1rem; font-size: 1.1rem; }
.login-form { display: grid; gap: .75rem; }
.login-form .label { font-size: .85rem; color: var(--muted); }
.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%; border: 1px solid #dbe7ff; border-radius: 10px;
    padding: .6rem .75rem; background: #fff; color: var(--text);
}
.btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    background: linear-gradient(90deg, #38bdf8, #3b82f6);
    border: none; color: #fff; padding: .6rem .9rem; border-radius: 10px;
    cursor: pointer; justify-content: center;
}
.btn-primary:hover { opacity: .95; }
.login-hint { color: var(--muted); font-size: .8rem; text-align: center; margin-top: .75rem; }

/* Sticky header tabeli tuż pod nagłówkiem (desktop) */
#table-container thead th { top: var(--app-header-h) !important; }

/* Przycisk przewiń do góry – nie nachodzi na footer */
#scroll-to-top {
    right: 16px !important;
    left: auto !important;
    bottom: var(--footer-safe) !important;
}

/* Panel administracyjny — tytuły z ikonką + delikatne animacje kart */
.tab[data-tab-id="admin-panel"] h3 {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; margin-bottom: 8px;
}
.tab[data-tab-id="admin-panel"] h3 i { color: var(--primary); }

.admin-card { transition: transform .2s ease, box-shadow .2s ease; }
.admin-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }

.log-actions {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 10px;
}
.log-actions form { margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; display: inline-flex; }
.log-actions button {
    padding: 8px 12px; font-size: .9rem; border-radius: 8px;
}

/* OKIENKO LOGÓW: przewijanie wewnątrz, stała (responsywna) wysokość */
.log-view {
    background: #fff;
    border: 1px solid #e6eefc;
    border-radius: 8px;
    padding: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.35;
    height: min(50vh, 480px);
    max-height: none;
    overflow: auto;
    white-space: pre-wrap;
    margin-bottom: 12px;
    overscroll-behavior: contain;
}

/* Usuń limit wysokości tylko w zakładce panelu admina, aby logi nie były „ucięte” */
.tab[data-tab-id="admin-panel"] .tab-content { overflow: visible !important; }
.tab[data-tab-id="admin-panel"] .tab-content.open { max-height: none !important; }

/* Bardzo wąskie ekrany <320px */
@media (max-width: 320px) {
    .app-header, .app-footer { padding-left: .35rem; padding-right: .35rem; }
    .tabbar-item span { font-size: .65rem; }
    .tabbar-item i { font-size: .95rem; }
    :root { --app-header-h: 54px; --footer-safe: 76px; }
    .log-view { height: 44vh; }
}

/* Preferencje ruchu */
@media (prefers-reduced-motion: reduce) {
    .tabbar-item, .admin-card { transition: none; }
}