/* Vehero v4.5 – wspólna warstwa spójności dla stron spoza redesignu (v2).
   Wytyczne: docs/UI_GUIDELINES.md. Ładowany w listings/base.html po bazowych stylach.
   Strony wzorcowe (home-v2, search-v2, listing-detail-v2) mają własne reguły o
   równej lub wyższej specyficzności i pozostają bez zmian. */

/* ---- Tokeny: jeden zestaw promieni i cieni (sekcja 2.3) ---- */
:root {
    --accent-strong: #0369a1;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 12px;
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .10);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, .14);
    --shadow-xl: 0 6px 20px rgba(0, 0, 0, .14);
    --shadow-2xl: 0 8px 28px rgba(0, 0, 0, .14);
    --shadow-glow: none;
}

/* ---- Ruch: spokój zamiast efektów (sekcja 5) ---- */
html body .container,
html body header,
html body .content {
    animation: none;
}

html body .btn {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
    border-radius: var(--radius-md);
}

html body .btn::before {
    display: none;
}

html body .btn:hover {
    transform: none;
    box-shadow: var(--shadow-lg);
}

html body .btn:active {
    transform: none;
    box-shadow: none;
}

html body .logo:hover {
    transform: none;
    filter: none;
}

/* ---- Pola formularzy: ten sam promień i focus co na stronach wzorcowych (sekcja 4) ---- */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
html body select,
html body textarea {
    border-radius: var(--radius-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}

html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
html body select:focus,
html body textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .2);
    outline: none;
}

/* ---- Dostępność: widoczny focus klawiatury (sekcja 5) ---- */
html body a:focus-visible,
html body button:focus-visible,
html body summary:focus-visible,
html body [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Stare inline-style: gradientowy tekst i grube obramowania (sekcja 9, pkt 2) ---- */
html body [style*="background-clip: text"],
html body [style*="background-clip:text"],
html body [style*="-webkit-background-clip"] {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--text);
}

html body [style*="border: 2px solid"],
html body [style*="border:2px solid"] {
    border-width: 1px !important;
}

@media (prefers-reduced-motion: reduce) {
    html body *,
    html body *::before,
    html body *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---- Baner cookies na telefonie: zwarty, przyciski w siatce (nie wychodzą poza ekran) ---- */
@media (max-width: 640px) {
    html body .cookie-banner { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
    html body .cookie-content { gap: 10px; }
    html body .cookie-text { min-width: 0; }
    html body .cookie-text p { font-size: 13px; line-height: 1.45; margin-bottom: 6px; }
    html body .cookie-options { margin-top: 8px; gap: 6px; }
    html body .cookie-option { font-size: 13px; }
    html body .cookie-option:has(input:disabled) { display: none; }
    html body .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    html body .cookie-actions .btn { padding: 11px 8px; font-size: 13px; text-align: center; }
    html body .cookie-actions #acceptAll { order: 1; }
    html body .cookie-actions #rejectAll { order: 2; }
    html body .cookie-actions #acceptCookies { order: 3; grid-column: 1 / -1; }
}

/* ---- Nagłówek na telefonie: nie przypięty (zabierał ~130 px ekranu), węższy, przyciski w jednym rzędzie ---- */
@media (max-width: 640px) {
    html body header { position: relative; margin-top: var(--space-sm); margin-bottom: var(--space-lg); }
    html body .topbar { padding: 10px 12px; gap: var(--space-sm); flex-wrap: wrap; }
    html body .auth { width: 100%; gap: var(--space-sm); flex-wrap: nowrap; }
    html body .auth .btn { flex: 1; min-width: 0; padding: 9px 10px; font-size: 14px; }
}

/* ---- Toasty: kontener nie może przechwytywać kliknięć ----
   Na telefonie (<=480px) reguła bazowa z base.html (top: 16px) nadpisywała `top: auto` z media query,
   więc pusty, przypięty kontener rozciągał się na cały ekran i blokował każde kliknięcie. */
html body .toast-container { pointer-events: none; }
html body .toast-container > * { pointer-events: auto; }
@media (max-width: 480px) {
    html body .toast-container { top: auto; }
}

/* ---- Audyt responsywności / dostępności (2026-10) ---- */

/* Link „Przejdź do treści” – na każdej stronie, widoczny po sfokusowaniu */
html body .skip-link {
    position: absolute; left: 8px; top: -64px; z-index: 100001;
    padding: 10px 16px; border-radius: 0 0 8px 8px;
    background: var(--accent-strong); color: #fff; font-weight: 600; text-decoration: none;
    transition: top .15s ease;
}
html body .skip-link:focus { top: 0; }

/* Nagłówek: dawne „sticky” działało tylko w obrębie rodzica (de facto statyczny) – mówimy to wprost */
html body header { position: relative; top: auto; }

/* Cele dotykowe: WCAG 2.2 (2.5.8) min. 24 px, na ekranach dotykowych 44 px */
html body .sf-col a { display: inline-block; padding: 5px 0; }
html body .breadcrumbs a, html body .home-link { display: inline-flex; align-items: center; min-height: 28px; }
html body .toast-close { min-width: 32px; min-height: 32px; }
html body .link-btn { min-height: 28px; padding: 4px 2px; }
@media (pointer: coarse) {
    html body .sf-col a { padding: 11px 0; }
    html body .breadcrumbs a, html body .home-link { min-height: 44px; }
    html body .link-btn { min-height: 44px; padding: 10px 4px; }
    html body .toast-close { min-width: 44px; min-height: 44px; }
}

/* Długość linii tekstu ciągłego (~75 znaków) */
html body .legal-content p, html body .legal-content li,
html body .listing-description, html body .message-body { max-width: 75ch; }

/* ---- Efekty hover dawniej robione inline przez onmouseover/onmouseout (działają tylko myszą, na dotyku „kleją się”) ---- */
@media (hover: hover) {
    html body .tier-card { transition: box-shadow .15s ease; }
    html body .tier-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .14); }
    html body .hv-dim:hover { filter: brightness(.9); }
    html body .hv-danger:hover { filter: brightness(.88); }
    html body .hv-drop:hover { border-color: var(--accent) !important; background: rgba(14, 165, 233, .05) !important; }
    html body .hv-accent:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
    html body .hv-row:hover { background: var(--hover); }
}

/* Drobne cele dotykowe: bieżący okruszek, link do strony sprzedawcy, tytuły kart */
html body .breadcrumbs a { min-width: 24px; justify-content: center; }
html body .detail-v2 .sc-links a { display: inline-block; padding: 6px 0; }
html body .cards-container-wrapper .card h3 a { display: inline-block; padding: 2px 0; min-height: 26px; }

/* ---- Menu użytkownika: sekcje i spójny „Wyloguj się” ---- */
html body .dropdown .dd-heading {
    padding: var(--space-sm) var(--space-md) 4px; margin-top: var(--space-xs);
    font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
    border-top: 1px solid var(--border);
}
html body .dropdown .dd-heading--user { margin-top: 0; border-top: 0; font-size: 0.75rem; letter-spacing: .05em; }
html body .dropdown { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; }
html body .dropdown .dd-logout { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--border); }
html body .dropdown .dd-logout button {
    width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
}

/* ---- Wspólny nagłówek stron panelu (konto, firma, pracownicy, statystyki, ustawienia…) ---- */
html body .panel-title {
    margin: 0 0 6px; font-size: 1.75rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em;
    color: var(--text); background: none; -webkit-text-fill-color: currentColor;
}
html body .panel-subtitle { margin: 0 0 20px; font-size: .9375rem; color: var(--muted); }
@media (max-width: 640px) { html body .panel-title { font-size: 1.5rem; } }

/* ---- Telefon: większe cele dotykowe w panelu (ikony akcji, pokaż/ukryj hasło, linki w tabelach i wątku) ---- */
@media (max-width: 768px) {
    html body .password-toggle { min-width: 40px; min-height: 40px; }
    html body .action-buttons a, html body .action-buttons button { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    html body .thread-listing a, html body .thread-meta-item a { display: inline-block; padding: 8px 0; }
    html body .breakdown-table td a { display: inline-block; padding: 8px 0; }
    html body .empty-state a.btn, html body .empty-state a[class*="btn"] { min-height: 44px; display: inline-flex; align-items: center; }
}