/* ========== BASE ========== */
:root {
    /* Mowi PRZEGLADARCE, w ktorym motywie jest strona. Bez tego natywne elementy, ktorych
       nasze tokeny nie obejmuja — pasek przewijania, pola formularzy, podpowiedzi
       autouzupelniania, wybor pliku i daty — zostaja JASNE takze w ciemnym motywie.
       Musi byc ustawiane w kazdym z trzech stanow, tak samo jak kolory. */
    color-scheme: light;

    --brand: #6366f1;
    --brand-hover: #4f46e5;
    --brand-light: #eef2ff;
    --brand-subtle: #c7d2fe;
    --surface: #ffffff;
    --surface-hover: #f8fafc;
    --surface-alt: #f1f5f9;
    --border: #e2e8f0;
    --border-hover: #cbd5e1;
    --text: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --success: #22c55e;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --warn: #b45309;
    --warn-bg: #fef3c7;
    --sidebar-bg: #0f172a;
    --sidebar-active: rgba(99, 102, 241, 0.25);
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--surface-alt);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* ========== LINKS & BUTTONS ========== */
a {
    color: var(--brand);
    transition: color 0.15s;
}
a:hover {
    color: var(--brand-hover);
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}
.btn-primary:hover, .btn-primary:active {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand-subtle);
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.btn-outline-primary:hover {
    background: var(--brand);
    border-color: var(--brand);
}

.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger-border);
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.btn-outline-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    border-color: var(--brand-subtle);
}

/* ========== FORMS ========== */
.form-control, .form-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.875rem;
    font-size: 0.925rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--surface);
}
.form-control:hover, .form-select:hover {
    border-color: var(--border-hover);
}
.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text);
    margin-bottom: 0.375rem;
}
textarea.form-control {
    font-size: 0.9rem;
    line-height: 1.7;
    font-family: 'Inter', sans-serif;
}

/* ========== LAYOUT ========== */
.content {
    padding-top: 1.5rem;
    max-width: 1200px;
}

h1 {
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -0.025em;
    color: var(--text);
}
h1:focus { outline: none; }

/* ========== PAGE HEADER ========== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
}
.page-header h1 { margin: 0; }

/* ========== FILTER PILLS ========== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.filter-pill:hover {
    background: var(--surface-alt);
    border-color: var(--border-hover);
    color: var(--text);
}
.filter-pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: white;
}
.filter-sub {
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.filter-pill-sub {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.filter-pill-sub:hover {
    background: var(--surface-alt);
    color: var(--text-secondary);
}
.filter-pill-sub.active {
    background: var(--text);
    border-color: var(--text);
    color: white;
}

/* ========== PROMPT CARDS ========== */
.prompt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}
@media (max-width: 640px) {
    .prompt-grid { grid-template-columns: 1fr; }
}

.prompt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: all 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.prompt-card:hover {
    border-color: var(--brand-subtle);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.prompt-card-template-action {
    margin-top: 0.75rem;
}
.prompt-card-template-action .btn {
    font-size: 0.8125rem;
}
.prompt-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.prompt-card-preview {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prompt-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ========== BADGES ========== */
.cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 100px;
    background: var(--brand-light);
    color: var(--brand);
}
.cat-badge-separator {
    opacity: 0.4;
}

/* ========== PROMPT DETAIL ========== */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.detail-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.detail-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.prompt-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    font-size: 0.925rem;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ========== BACK LINK ========== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: color 0.15s;
}
.back-link:hover {
    color: var(--brand);
}

/* ========== FORM PAGE ========== */
.form-page {
    max-width: 720px;
}
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}

/* ========== CATEGORIES PAGE ========== */
.cat-add-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.cat-tree {
    max-width: 700px;
}
.cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.375rem;
    transition: border-color 0.15s;
}
.cat-item:hover {
    border-color: var(--border-hover);
}
.cat-item-child {
    margin-left: 1.75rem;
    border-left: 3px solid var(--brand-subtle);
}
.cat-item-name {
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--text);
}
.cat-item-child .cat-item-name {
    font-weight: 500;
    color: var(--text-secondary);
}
.cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 100px;
    background: var(--surface-alt);
    color: var(--text-muted);
    margin-left: 0.5rem;
}

/* ========== EMPTY STATE ========== */
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
}
.empty-state-icon {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.4;
}
.empty-state h4 {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.empty-state p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ========== LOGIN PAGE ========== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sidebar-bg);
    padding: 1rem;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.login-header {
    text-align: center;
    margin-bottom: 2rem;
}
.login-header i {
    font-size: 2.5rem;
    color: var(--brand);
    margin-bottom: 0.75rem;
    display: block;
}
.login-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
}
.login-header p {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
}
.login-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* ========== TEMPLATE PAGE ========== */
.template-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.template-page-header h1 { margin: 0; }
.template-hint {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-top: 0.375rem;
    margin-bottom: 0;
}
.template-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.template-card-header {
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
}
.template-content {
    padding: 1.5rem;
    font-size: 0.925rem;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}
.t-var {
    background: var(--brand-light);
    border: 1.5px solid var(--brand-subtle);
    border-radius: 4px;
    padding: 0.125rem 0.5rem;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    color: var(--brand-hover);
    font-weight: 500;
    transition: all 0.15s;
    outline: none;
}
.t-var:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    background: white;
}
.t-var:hover {
    border-color: var(--brand);
}
.t-var-highlight {
    background: var(--brand-light);
    color: var(--brand-hover);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 500;
    border-bottom: 2px solid var(--brand-subtle);
}
.template-preview {
    padding: 1.5rem;
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    border: none;
    min-height: 3rem;
}
.template-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 100px;
    background: var(--warn-bg);
    color: var(--warn);
}

/* ========== BLAZOR ========== */
.blazor-error-boundary {
    background: var(--danger);
    padding: 1rem;
    color: white;
    border-radius: var(--radius-sm);
}
.blazor-error-boundary::after {
    content: "Wystapil blad."
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}
.invalid {
    outline: 1px solid var(--danger);
}
.validation-message {
    color: var(--danger);
    font-size: 0.8125rem;
}

/* ========== MOTYW CIEMNY ==========
   Redefiniujemy WYLACZNIE tokeny z :root — wszystkie reguly wyzej odwoluja sie do nich
   przez var(), wiec nie trzeba duplikowac ani jednej reguly komponentu.

   Trzy stany, nie dwa. Uzytkownik moze: (a) nie wybrac nic — wtedy o motywie decyduje
   system i lapie go @media; (b) wybrac ciemny — lapie [data-theme="dark"]; (c) wybrac
   jasny mimo ciemnego systemu — dlatego @media ma warunek :not([data-theme="light"]),
   inaczej wybor uzytkownika przegralby z ustawieniem systemu.                          */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --brand: #818cf8;
        --brand-hover: #a5b4fc;
        --brand-light: #1e1b4b;
        --brand-subtle: #3730a3;
        --surface: #0f172a;
        --surface-hover: #1e293b;
        --surface-alt: #020617;
        --border: #1e293b;
        --border-hover: #334155;
        --text: #e2e8f0;
        --text-secondary: #94a3b8;
        --text-muted: #64748b;
        --danger: #f87171;
        --danger-hover: #ef4444;
        --danger-bg: #2a1215;
        --danger-border: #7f1d1d;
        --warn: #fbbf24;
        --warn-bg: #37270a;
        --success: #4ade80;
        --sidebar-bg: #020617;
        --sidebar-active: rgba(129, 140, 248, 0.22);
        --sidebar-hover: rgba(255, 255, 255, 0.05);
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
        --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --brand: #818cf8;
    --brand-hover: #a5b4fc;
    --brand-light: #1e1b4b;
    --brand-subtle: #3730a3;
    --surface: #0f172a;
    --surface-hover: #1e293b;
    --surface-alt: #020617;
    --border: #1e293b;
    --border-hover: #334155;
    --text: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --danger: #f87171;
    --danger-hover: #ef4444;
    --danger-bg: #2a1215;
    --danger-border: #7f1d1d;
    --warn: #fbbf24;
    --warn-bg: #37270a;
    --success: #4ade80;
    --sidebar-bg: #020617;
    --sidebar-active: rgba(129, 140, 248, 0.22);
    --sidebar-hover: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5);
}

/* Pola formularzy z Bootstrapa maja wlasne, jasne tlo wpisane na sztywno w bibliotece —
   nie wyniknie z naszych tokenow, wiec trzeba je nadpisac jawnie w obu wariantach. */
.form-control, .form-select {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-light);
}
.form-control::placeholder { color: var(--text-muted); }

/* ========== PASEK NARZEDZI: SZUKANIE I SORTOWANIE ========== */
.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.search-field {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}
.search-field .form-control {
    padding-left: 38px;
    padding-right: 36px;
}
.search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 0.9rem;
}
.search-clear {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1;
    text-decoration: none;
}
.search-clear:hover { color: var(--danger); }
.sort-select { flex: 0 0 auto; width: auto; min-width: 180px; }

/* Pole typu search dostaje od przegladarki wlasny krzyzyk — mamy swoj, wiec go chowamy. */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.wynik-licznik {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: -4px 0 14px;
}

mark {
    background: var(--warn-bg);
    color: var(--text);
    padding: 0.05em 0.15em;
    border-radius: 3px;
}

/* ========== KARTA JAKO LINK ========== */
/* Kafelek jest klikalny w calosci, ale klikalnym elementem jest prawdziwe <a> wokol
   tytulu — rozciagniete przez ::after na powierzchnie karty. Dzieki temu dziala
   klawiatura, srodkowy przycisk myszy i Ctrl+klik. Zagniezdzanie <a> w <a> byloby
   niepoprawne, dlatego przyciski akcji stoja OBOK linku, a nie w nim, i maja wyzszy
   z-index, zeby zostac klikalne. */
.prompt-card { position: relative; }
.prompt-card .card-link {
    color: inherit;
    text-decoration: none;
}
.prompt-card .card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}
.prompt-card .card-link:hover { color: var(--brand); }
.prompt-card .card-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
}

.prompt-card-akcje {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.prompt-card-akcje .btn { flex: 1 1 auto; }

/* Stopka i tresc nie moga lapac klikniecia zamiast linku — link jest pod nimi. */
.prompt-card-preview, .prompt-card-footer, .cat-badge { position: relative; z-index: 0; }

/* ========== PRZELACZNIK MOTYWU ========== */
.btn-nav-motyw {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.75);
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.btn-nav-motyw:hover {
    background: var(--sidebar-hover);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}

/* ========== DOSTEPNOSC ========== */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ========== TAGI ========== */
.tag-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.tag-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 2px 9px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    /* Odznaka bierze kolor ze zmiennej ustawianej inline na elemencie — dzieki temu
       jedna regula obsluguje cala palete, a kolor tagu zostaje w bazie, nie w CSS. */
    color: var(--tag-kolor, var(--brand));
    background: color-mix(in srgb, var(--tag-kolor, var(--brand)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag-kolor, var(--brand)) 32%, transparent);
    transition: background 0.15s;
}
a.tag-badge:hover {
    background: color-mix(in srgb, var(--tag-kolor, var(--brand)) 26%, transparent);
    color: var(--tag-kolor, var(--brand));
}
.tag-badge.active {
    background: var(--tag-kolor, var(--brand));
    color: #fff;
    border-color: var(--tag-kolor, var(--brand));
}
.tag-badge.maly { font-size: 0.68rem; padding: 1px 7px; }
.filter-bar.tag-filtr { margin-top: -6px; }

/* ========== ULUBIONE ========== */
.ulubiony-znacznik {
    color: #f59e0b;
    margin-right: 6px;
    font-size: 0.85em;
}
.filter-pill-cichy { margin-left: auto; opacity: 0.75; }
.filter-pill-cichy:hover { opacity: 1; }

/* ========== POLE Z PODPOWIEDZIA ========== */
.form-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 5px;
}

/* ========== METADANE: LINK W PASKU ========== */
.meta-link {
    text-decoration: none;
    color: var(--text-secondary);
}
.meta-link:hover { color: var(--brand); }

/* ========== KOSZ ========== */
.kosz-termin {
    margin-left: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.kosz-termin.pilne { color: var(--danger); font-weight: 500; }

/* ========== HISTORIA WERSJI ========== */
.wersja-karta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.wersja-karta.biezaca {
    border-color: var(--brand-subtle);
    background: var(--brand-light);
}
.wersja-naglowek {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.wersja-etykieta {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wersja-data { font-size: 0.8rem; color: var(--text-muted); }
.wersja-tytul { font-weight: 600; margin-bottom: 6px; }
.wersja-tresc {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 0;
    color: var(--text);
}

/* ========== PLIKI ========== */
.plik-link {
    color: var(--text);
    text-decoration: none;
}
.plik-link:hover { color: var(--brand); text-decoration: underline; }
.plik-meta {
    margin-left: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.zalaczniki {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.zalaczniki-naglowek {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 14px;
}
input[type="file"].form-control { padding: 6px 10px; font-size: 0.85rem; }

/* ========== KOMUNIKATY ========== */
.komunikat {
    display: flex;
    align-items: center;
    padding: 11px 15px;
    border-radius: var(--radius);
    font-size: 0.88rem;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.komunikat.sukces {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--text);
}
.komunikat.blad {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger);
}

/* ========== EKRAN WYPELNIANIA SZABLONU ========== */
.szablon-uklad {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
@media (min-width: 980px) {
    .szablon-uklad { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
    /* Podglad zostaje w polu widzenia przy dlugiej liscie pol. */
    .szablon-podglad { position: sticky; top: 16px; }
}

.pola-lista { padding: 14px 16px; }
.pole { margin-bottom: 14px; }
.pole:last-child { margin-bottom: 0; }
.pole-etykieta {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.pole-wystapienia {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand);
    background: var(--brand-light);
    border-radius: 4px;
    padding: 0 5px;
}
.pole textarea.form-control { font-size: 0.85rem; line-height: 1.5; }

/* ========== ZAPISANE ZESTAWY ========== */
.zestawy-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.zestaw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.zestaw.aktywny {
    border-color: var(--brand-subtle);
    background: var(--brand-light);
}
.zestaw-nazwa {
    flex: 1;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zestaw-nazwa:hover { color: var(--brand); }
.zestaw-usun {
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 1;
    text-decoration: none;
}
.zestaw-usun:hover { color: var(--danger); }

.template-preview {
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 220px;
}

/* ========== SNIPPETY ========== */
.snippet-lista { display: flex; flex-direction: column; gap: 12px; }
.snippet-karta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.snippet-karta.edytowany { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.snippet-naglowek {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.snippet-tytul { font-weight: 600; min-width: 0; }
.snippet-jezyk {
    display: inline-block;
    margin-left: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
}
.snippet-akcje { display: flex; gap: 4px; flex-shrink: 0; }
.snippet-kod {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre;
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 0;
    color: var(--text);
}
textarea.kod-pole {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ========== LINKI ========== */
.link-wiersz { align-items: flex-start; }
.link-ikona { font-size: 0.7rem; color: var(--text-muted); margin-left: 6px; flex-shrink: 0; }
.link-adres {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.link-opis { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; }

/* ========== WYNIKI WYSZUKIWANIA GLOBALNEGO ========== */
.wynik-wiersz { align-items: flex-start; }
.wynik-rodzaj {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 7px;
    border-radius: 4px;
    margin-right: 9px;
    flex-shrink: 0;
    border: 1px solid transparent;
}
/* Kolor koduje RODZAJ zasobu — po to jest, zeby lista mieszana dawala sie skanowac
   wzrokiem bez czytania etykiet. */
.rodzaj-prompt  { color: #6366f1; background: color-mix(in srgb, #6366f1 12%, transparent); border-color: color-mix(in srgb, #6366f1 30%, transparent); }
.rodzaj-snippet { color: #0ea5e9; background: color-mix(in srgb, #0ea5e9 12%, transparent); border-color: color-mix(in srgb, #0ea5e9 30%, transparent); }
.rodzaj-notatka { color: #14b8a6; background: color-mix(in srgb, #14b8a6 12%, transparent); border-color: color-mix(in srgb, #14b8a6 30%, transparent); }
.rodzaj-link    { color: #f97316; background: color-mix(in srgb, #f97316 12%, transparent); border-color: color-mix(in srgb, #f97316 30%, transparent); }
.wynik-fragment {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ========== MARKDOWN ========== */
.markdown-tresc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 26px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.markdown-tresc h1, .markdown-tresc h2, .markdown-tresc h3 {
    margin-top: 1.4em;
    margin-bottom: 0.5em;
    line-height: 1.25;
}
.markdown-tresc h1:first-child, .markdown-tresc h2:first-child, .markdown-tresc h3:first-child { margin-top: 0; }
.markdown-tresc h1 { font-size: 1.5rem; }
.markdown-tresc h2 { font-size: 1.25rem; }
.markdown-tresc h3 { font-size: 1.08rem; }
.markdown-tresc p { margin-bottom: 0.9em; }
.markdown-tresc ul, .markdown-tresc ol { margin-bottom: 0.9em; padding-left: 1.4em; }
.markdown-tresc li { margin-bottom: 0.3em; }
.markdown-tresc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.08em 0.35em;
}
.markdown-tresc pre {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    overflow-x: auto;
    margin-bottom: 1em;
}
.markdown-tresc pre code { background: none; border: none; padding: 0; }
.markdown-tresc blockquote {
    border-left: 3px solid var(--brand-subtle);
    background: var(--brand-light);
    margin: 0 0 1em;
    padding: 8px 16px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.markdown-tresc table { border-collapse: collapse; margin-bottom: 1em; display: block; overflow-x: auto; }
.markdown-tresc th, .markdown-tresc td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.markdown-tresc th { background: var(--surface-alt); font-weight: 600; }
.markdown-tresc img { max-width: 100%; height: auto; }
.markdown-tresc hr { border: none; border-top: 1px solid var(--border); margin: 1.6em 0; }

/* ========== NAWIGACJA: SEPARATOR ========== */
.nav-separator {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ========== PASEK POLECEN (Ctrl+K) ========== */
.paleta-tlo {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1000;
    padding: 12vh 16px 16px;
}
.paleta-tlo.otwarta { display: block; }
.paleta-okno {
    max-width: 620px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.paleta-pole-otoczka {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}
.paleta-pole {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--text);
    min-width: 0;
}
.paleta-pole::placeholder { color: var(--text-muted); }
.paleta-esc {
    font-size: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--text-muted);
    background: var(--surface-alt);
}
.paleta-lista { max-height: 52vh; overflow-y: auto; }
.paleta-pozycja {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--surface-alt);
}
.paleta-pozycja:last-child { border-bottom: none; }
.paleta-pozycja:hover, .paleta-pozycja.wybrana { background: var(--brand-light); color: var(--text); }
.paleta-typ {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.paleta-tytul { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-pusto { padding: 20px 16px; color: var(--text-muted); font-size: 0.9rem; text-align: center; }

/* ========== USTAWIENIA ========== */
.ustawienia-sekcja {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 16px;
}
.ustawienia-sekcja h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 12px; }
.statystyki { display: flex; flex-wrap: wrap; gap: 10px; }
.statystyka {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 82px;
    padding: 10px 14px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.statystyka .liczba {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
}
.statystyka .etykieta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; }
.skroty { display: flex; flex-direction: column; gap: 8px; }
.skrot { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; }
.skrot span { color: var(--text-secondary); }
kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 6px;
    background: var(--surface-alt);
    color: var(--text);
}

/* ========== PRZELACZNIK WIDOKU TRESCI ========== */
.tresc-przelacznik { display: flex; gap: 4px; margin-bottom: 10px; }
.przelacznik-opcja {
    font-size: 0.8rem;
    padding: 4px 11px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-secondary);
    border: 1px solid transparent;
}
.przelacznik-opcja:hover { background: var(--surface-hover); color: var(--text); }
.przelacznik-opcja.aktywna {
    background: var(--brand-light);
    border-color: var(--brand-subtle);
    color: var(--brand);
    font-weight: 500;
}

/* ========== OPERACJE ZBIORCZE ========== */
.karta-zaznacz {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 4px;
    cursor: pointer;
    /* Pole pojawia sie dopiero przy najechaniu albo gdy jest zaznaczone — inaczej
       zaśmiecałoby kazda karte kontrolka uzywana raz na jakis czas. */
    opacity: 0;
    transition: opacity 0.15s;
}
.prompt-card:hover .karta-zaznacz,
.karta-zaznacz:focus-within,
.prompt-card.zaznaczona .karta-zaznacz { opacity: 1; }
.karta-zaznacz input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); }
.prompt-card.zaznaczona {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-light);
}

.pasek-zbiorczy {
    display: none;
    position: sticky;
    top: 8px;
    z-index: 5;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--brand-subtle);
    border-radius: var(--radius);
    padding: 9px 13px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-md);
}
.pasek-zbiorczy.widoczny { display: flex; }
.zbiorczy-licznik {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--brand);
    white-space: nowrap;
}