/* ReadyPłatności — wspólne tokeny wizualne i bazowe style, ładowane przez wszystkie strony panelu. */

:root {
    --brand: #4f46e5;
    --brand-dark: #4338ca;
    --brand-light: #eef2ff;
    --success: #1e8449;
    --success-bg: #eafaf1;
    --success-border: #b7e4c7;
    --danger: #c0392b;
    --danger-bg: #fdecea;
    --danger-border: #f3c6c0;
    --warning: #a04000;
    --warning-bg: #fdf2e9;
    --info: #1a56db;
    --info-bg: #e8f0fe;
    --ink: #1c1c1e;
    --ink-soft: #52525b;
    --muted: #8b8b93;
    --border: #e6e6ea;
    --surface: #ffffff;
    --bg: #f6f6f9;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 4px 12px rgba(16, 24, 40, .04);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);
    --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    margin: 0;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Zabezpieczenie: żaden element (np. za długi e-mail/nazwa bez spacji w kartach na mobile)
       nie powinien nigdy poszerzyć strony poza viewport i wywołać poziomego przewijania. */
    overflow-x: hidden;
}

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--brand-light); color: var(--brand-dark); }

/* Webkit scrollbar — subtelny, spójny z resztą UI (bez wpływu na Firefox, tam zostaje domyślny). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d9; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b8b8c0; }

/* Odznaka oceny wiarygodności płatniczej kontrahenta (kontrahenci.php, index.php). */
.ocena-badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; position: relative; cursor: help; }
.ocena-dobra { background: #e6f7ec; color: #1a7f42; }
.ocena-srednia { background: #fff4e0; color: #9a6400; }
.ocena-zla { background: #fde8e8; color: #b42318; }
.ocena-brak { background: #f0f0f2; color: var(--ink-soft); font-weight: 500; }

/* Dymek z rozbiciem oceny na liczby (X z Y faktur w terminie) — pokazuje się na hover/focus. */
.ocena-badge::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    white-space: normal;
    text-align: left;
    background: var(--ink);
    color: #fff;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s var(--ease);
    z-index: 30;
}
.ocena-badge::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ink);
    margin-bottom: -2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s var(--ease);
    z-index: 30;
}
.ocena-badge:hover::after, .ocena-badge:hover::before,
.ocena-badge:focus-visible::after, .ocena-badge:focus-visible::before {
    opacity: 1;
    visibility: visible;
}