/* =========================================================================
   Narzędziownik — wejście po lewej, opcje pośrodku, wynik po prawej.
   Kolory ze zmiennych motywu, żeby układ działał w trybie jasnym i ciemnym.
   ========================================================================= */

.tbx-page {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.25rem 1.5rem;
    height: calc(100vh - 130px);
    min-height: 520px;
}

/* Zakładki i pomoc kontekstowa: patrz pill-tabs.css — wspólne z bazą wiedzy. */

/* ---------- Układ trójkolumnowy ----------
   Kolumna opcji ma stałą szerokość, panele dzielą resztę po równo. */

.tbx-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr);
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
}

.tbx-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 0.7rem;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
}

.tbx-pane__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
    background: var(--bs-tertiary-bg, #f8fafc);
}

.tbx-pane__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bs-secondary-color, #64748b);
}

.tbx-pane__actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.tbx-pane__foot {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-top: 1px solid var(--bs-border-color, #e2e8f0);
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #94a3b8);
    min-height: 28px;
}

.tbx-dot {
    opacity: 0.5;
}

/* ---------- Pola tekstowe ---------- */

.tbx-editor {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    resize: none;
    border: none;
    outline: none;
    padding: 0.7rem 0.8rem;
    background: transparent;
    color: var(--bs-body-color, #1e293b);
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    tab-size: 4;
}

    .tbx-editor[readonly] {
        background: var(--bs-tertiary-bg, #fbfcfe);
    }

/* ---------- Kolumna opcji ---------- */

.tbx-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.8rem;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 0.7rem;
    background: var(--bs-tertiary-bg, #f8fafc);
    overflow-y: auto;
}

.tbx-optgroup {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tbx-run {
    width: 100%;
}

.tbx-optlabel {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #94a3b8);
    margin-top: 0.3rem;
}

/* ---------- Tryby zakładki SQL ----------
   Pionowa lista wewnątrz panelu opcji: cztery narzędzia dzielą jedno wejście, więc wybór
   trybu stoi tam, gdzie reszta ustawień, a nie w pasku zakładek narzędziownika. */

.tbx-modes {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.25rem;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 0.6rem;
    background: var(--bs-body-bg, #fff);
}

.tbx-mode {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--bs-secondary-color, #64748b);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

    .tbx-mode:hover {
        color: #ff5a0a;
        background: rgba(255, 90, 10, 0.08);
    }

    .tbx-mode.is-active {
        background: #ff5a0a;
        color: #fff;
    }

    /* Ikona aktywnego trybu na pomarańczowym tle musi być biała. */
    .tbx-mode.is-active span[class*="icon-bs-black"] {
        filter: brightness(0) invert(1);
    }

.tbx-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--bs-body-color, #334155);
    cursor: pointer;
}

.tbx-hint {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--bs-secondary-color, #64748b);
}

/* ---------- Import pliku ----------
   Natywny input pliku jest brzydki i nieprzewidywalny — chowamy go pod etykietą. */

.tbx-file {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #64748b);
    cursor: pointer;
}

    .tbx-file:hover {
        background: rgba(255, 90, 10, 0.1);
        color: #c2410c;
    }

    .tbx-file input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

/* ---------- Stany ---------- */

.tbx-drop,
.tbx-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color, #64748b);
}

    .tbx-drop p,
    .tbx-empty p {
        margin: 0;
        font-size: 0.85rem;
    }

.tbx-fileinfo {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg, #f1f5f9);
    font-size: 0.8rem;
}

.tbx-error {
    flex: 1 1 auto;
    overflow: auto;
    margin: 0;
    padding: 0.8rem;
    background: #fef2f2;
    color: #991b1b;
}

    .tbx-error pre {
        margin: 0;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font-size: 0.8rem;
    }

.tbx-pdf {
    flex: 1 1 auto;
    width: 100%;
    border: none;
    min-height: 0;
}

/* ---------- Podgląd Markdown ---------- */

.tbx-markdown {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem 1.2rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--bs-body-color, #1e293b);
}

    .tbx-markdown h1,
    .tbx-markdown h2,
    .tbx-markdown h3 {
        margin: 1.2rem 0 0.6rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .tbx-markdown h1 { font-size: 1.5rem; }
    .tbx-markdown h2 { font-size: 1.25rem; }
    .tbx-markdown h3 { font-size: 1.05rem; }

    .tbx-markdown p { margin: 0 0 0.8rem; }

    .tbx-markdown code {
        padding: 0.1rem 0.3rem;
        border-radius: 0.25rem;
        background: var(--bs-tertiary-bg, #f1f5f9);
        font-family: "Cascadia Mono", Consolas, monospace;
        font-size: 0.85em;
    }

    .tbx-markdown pre {
        padding: 0.8rem;
        border-radius: 0.5rem;
        background: var(--bs-tertiary-bg, #f1f5f9);
        overflow-x: auto;
    }

        .tbx-markdown pre code {
            padding: 0;
            background: none;
        }

    .tbx-markdown blockquote {
        margin: 0 0 0.8rem;
        padding: 0.4rem 0.9rem;
        border-left: 3px solid #ff5a0a;
        background: var(--bs-tertiary-bg, #f8fafc);
        color: var(--bs-secondary-color, #475569);
    }

    .tbx-markdown table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 0.8rem;
        font-size: 0.85rem;
    }

    .tbx-markdown th,
    .tbx-markdown td {
        padding: 0.4rem 0.6rem;
        border: 1px solid var(--bs-border-color, #e2e8f0);
        text-align: left;
    }

    .tbx-markdown th {
        background: var(--bs-tertiary-bg, #f1f5f9);
    }

    .tbx-markdown img {
        max-width: 100%;
    }

/* ---------- Tryb ciemny ---------- */

:root[data-theme="dark"] .tbx-error {
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
}

:root[data-theme="dark"] .tbx-editor[readonly] {
    background: rgba(148, 163, 184, 0.05);
}

/* ---------- Wąskie ekrany ----------
   Poniżej 1200 px trzy kolumny są nie do czytania — opcje lądują nad panelami,
   a panele jeden pod drugim. */

@media (max-width: 1200px) {
    .tbx-page {
        height: auto;
    }

    .tbx-split {
        grid-template-columns: 1fr;
    }

    .tbx-options {
        order: -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .tbx-optgroup {
        flex-direction: row;
    }

    .tbx-run {
        width: auto;
    }

    .tbx-pane {
        min-height: 320px;
    }
}

/* Ostrzeżenie o wysyłce treści do dostawcy AI — musi odróżniać się od zwykłej podpowiedzi,
   bo mówi o danych opuszczających system, a nie o działaniu narzędzia. */
.tbx-hint-warn {
    padding: 0.4rem 0.55rem;
    border-left: 3px solid #f59e0b;
    border-radius: 0.3rem;
    background: rgba(245, 158, 11, 0.1);
    color: var(--bs-body-color, #92400e);
}

/* Lista tabel w trybie „Struktura" — własna, a nie DevExpressowa siatka: mieści się w wąskiej
   kolumnie opcji i przewija niezależnie od reszty panelu. */
.tbx-tables {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.3rem;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
}

.tbx-table {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    cursor: pointer;
}

    .tbx-table:hover {
        background: rgba(255, 90, 10, 0.08);
    }

.tbx-table__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Liczba kolumn — podpowiada, ile tokenów doda dopięcie tabeli do kontekstu. */
.tbx-table__cols {
    flex: 0 0 auto;
    color: var(--bs-secondary-color, #94a3b8);
}

/* Zastrzeżenie do wyniku — słabsze niż błąd, bo treść obok bywa użyteczna po drobnej poprawce. */
.tbx-warning {
    margin: 0.5rem 0.6rem 0;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid #f59e0b;
    border-radius: 0.35rem;
    background: rgba(245, 158, 11, 0.12);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--bs-body-color, #92400e);
}