/* =============================================================
   Eveilo — base.css
   Zmienne, reset, typografia oraz wspólne komponenty
   (przyciski, formularze, karty, znaczniki). Bez Tailwinda.
   ============================================================= */

:root {
    /* Motyw interfejsu: pastelowy fiolet (paleta wg mockupu ChromaCV).
       Szablony CV NIE korzystają z tych zmiennych — mają własne w cv.css. */
    --c-primary:        #7c3aed;   /* fiolet */
    --c-primary-dark:   #6d28d9;
    --c-primary-50:     #f5f3ff;
    --c-primary-100:    #ede9fe;

    --c-text:           #1e293b;
    --c-muted:          #64748b;
    --c-faint:          #94a3b8;

    --c-border:         #e8e5f0;   /* pastelowy lawendowo-szary */
    --c-border-light:   #f1eff7;
    --c-bg:             #f4f3f8;
    --c-white:          #ffffff;

    /* gradient CTA (przyciski primary / belka) */
    --grad-primary:     linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);

    /* pastelowe akcenty (chipy/badge interfejsu) */
    --c-lavender:       #ece7fe;
    --c-peach:          #ffedd5;  --c-peach-text: #c2410c;
    --c-mint:           #d1fae5;  --c-mint-text:  #047857;
    --c-sky:            #e0f2fe;  --c-sky-text:   #0369a1;
    --c-rose:           #ffe4e6;  --c-rose-text:  #be123c;

    /* miękkie, fioletowe cienie */
    --shadow-sm:        0 1px 2px rgba(124, 58, 237, 0.06);
    --shadow-md:        0 6px 18px -4px rgba(124, 58, 237, 0.18);
    --shadow-lg:        0 20px 30px -10px rgba(124, 58, 237, 0.12), 0 4px 12px rgba(0, 0, 0, 0.03);

    --c-ok:             #16a34a;
    --c-ok-bg:          #f0fdf4;
    --c-ok-border:      #bbf7d0;
    --c-warn:           #b45309;
    --c-warn-bg:        #fffbeb;
    --c-warn-border:    #fde68a;
    --c-bad:            #dc2626;
    --c-bad-bg:         #fef2f2;
    --c-bad-border:     #fecaca;

    --radius:           0.875rem;
    --radius-sm:        0.625rem;
    --radius-pill:      999px;

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 Helvetica, Arial, "Figtree", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--c-text);
    background: var(--c-bg);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

/* ---------- Paski przewijania (mockup ChromaCV) ----------
   Cienkie 6px, przezroczysty tor, okrągły kciuk — JEDEN wygląd w każdym
   przewijanym obszarze: okno, środek .content, sidebar, panel wyglądu.
   Ciemniejszy stan :hover ZDJĘTY (prośba Marcina 26.07): przy dwóch
   widocznych paskach naraz jeden bywał szary, drugi jasny i wyglądało to
   jak dwa różne style. `color-scheme: light` pilnuje, żeby przeglądarka
   nie podrzuciła ciemnego wariantu systemowego tam, gdzie nasze reguły
   nie sięgają (np. pasek okna przy motywie ciemnym systemu). */
:root { color-scheme: light; }
/* STANDARDOWE właściwości mają pierwszeństwo przed ::-webkit-scrollbar i —
   w odróżnieniu od pseudo-elementów — obejmują KAŻDY sposób rysowania paska
   (także nakładkowy i pasek okna). To one gwarantują jeden odcień #cbd5e1
   wszędzie; wcześniejsza wersja na samych pseudo-elementach zostawiała
   miejscami jaśniejszy/ciemniejszy pasek. */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
/* Silniki bez standardowych właściwości (starsze Safari/WebKit) */
@supports not (scrollbar-color: #cbd5e1 transparent) {
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
}

/* Ikony (Bootstrap Icons): pogrubiona kreska glifów — spójnie z obrysową
   ikoną „Pobierz PDF" (decyzja Marcina: grubsze = ładniejsze). */
.bi { -webkit-text-stroke: 0.45px currentColor; }

/* ---------- Przyciski ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    /* JEDNA wysokość niezależnie od znacznika: <button> dostaje od przeglądarki
       line-height:normal, a <a>/<label> dziedziczą 1.5 z body — bez tej linii
       „przyciski" obok siebie różniły się o 4-5px (zgłoszenie Marcina 26.07). */
    line-height: 1.25;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
    text-align: center;
}
.btn:disabled { opacity: .55; cursor: default; }

.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-md); transition: filter .15s, box-shadow .15s; }
.btn-primary:hover { filter: brightness(1.07); }

.btn-secondary { background: #fff; color: #475569; border-color: var(--c-border); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--c-primary-50); border-color: var(--c-primary-100); }

.btn-soft { background: var(--c-lavender); color: var(--c-primary-dark); }
.btn-soft:hover { background: #e0d8fd; }

.btn-danger { background: linear-gradient(135deg, #f43f5e, #dc2626); color: #fff; box-shadow: 0 6px 18px -4px rgba(220, 38, 38, 0.4); transition: filter .15s; }
.btn-danger:hover { filter: brightness(1.07); }

.btn-block { width: 100%; }
.btn-lg { padding: 0.75rem 1.25rem; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }

/* ---------- Pola formularza ---------- */
.field { margin-bottom: 1rem; }
.field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.3rem;
}
.field-hint { font-size: 0.75rem; color: var(--c-faint); margin: 0 0 0.4rem; }

.input, .textarea, .select {
    width: 100%;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--c-text);
    background: #fff;
}
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px var(--c-primary-100);
}
.textarea { resize: vertical; }
.input-mono { font-family: var(--font-mono); }

.field-error { color: var(--c-bad); font-size: 0.75rem; margin: 0.25rem 0 0; }

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--c-muted);
    cursor: pointer;
}

/* ---------- Checkbox: JEDEN wygląd w całej aplikacji (26.07) ----------
   Wcześniej „Zapamiętaj mnie" na logowaniu był surowym natywnym kwadratem,
   a checkboxy w panelu/adminie tylko przebarwione `accent-color` — stąd
   wrażenie różnych stylów. Teraz wszystkie to zaokrąglone pola z gradientem
   marki po zaznaczeniu; rozmiary lokalne (17px w panelu, 16px w macierzy
   admina) dalej działają, bo nadpisują tylko width/height. */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
input[type="checkbox"]:hover { border-color: var(--c-primary-100); }
/* „ptaszek" to WARSTWA TŁA, nie pseudo-element: ::after w kontenerze grid
   dostawał rozmiar 0 (procenty liczone od ścieżki, którą sam wyznacza),
   a tło skaluje się poprawnie przy każdym rozmiarze pola (16/17/18px). */
input[type="checkbox"]:checked {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 64% no-repeat,
        var(--grad-primary);
    border-color: transparent;
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Karty ---------- */
.card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.card-sm { padding: 1rem; }
.card + .card { margin-top: 1rem; }

.card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

/* ---------- Znaczniki / badge ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
}
.badge-ok   { background: var(--c-ok-bg);   color: var(--c-ok);   }
.badge-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.badge-bad  { background: var(--c-bad-bg);  color: var(--c-bad);  }

/* ---------- Komunikaty ---------- */
.alert { padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; }
.alert-success { background: var(--c-ok-bg);  border: 1px solid var(--c-ok-border);  color: #166534; }
.alert-error   { background: var(--c-bad-bg); border: 1px solid var(--c-bad-border); color: #991b1b; }

/* ---------- Pomocnicze ---------- */
.muted { color: var(--c-faint); }
.mono  { font-family: var(--font-mono); }
.text-center { text-align: center; }
.mb-lg { margin-bottom: 1.5rem; }
.mt-md { margin-top: 1rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }

@media (max-width: 640px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}