/* ===== Ustawienia (Pages/Settings/Settings.razor) =====
   Układ i zachowanie jak w ustawieniach WMS24.Control (spis sekcji, trzy widoki, wyszukiwarka ze skrótem „/”,
   ostatnio otwierane). Kolory z tokenów motywu aplikacji, kolory ikon kafelków z klas bg-* / tile-*. */
.stg {
    --stg-soft: var(--surface-color-2);
    --stg-hover: var(--surface-color-2);
    --stg-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    --stg-accent-ring: color-mix(in srgb, var(--main-color) 15%, transparent);
    --stg-accent-border: color-mix(in srgb, var(--main-color) 60%, transparent);
    --stg-mark: color-mix(in srgb, var(--main-color) 30%, transparent);
    --stg-bar-height: 52px;
}

html[data-bs-theme="dark"] .stg {
    --stg-soft: rgba(255, 255, 255, .04);
    --stg-hover: rgba(255, 255, 255, .07);
    --stg-shadow: 0 8px 25px rgba(0, 0, 0, .35);
}

.stg-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* ----- spis sekcji: segment pionowy – ta sama ramka co przełącznik widoku i wyszukiwarka ----- */
.stg-toc {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--surface-border-color);
    border-radius: 12px;
    background: var(--stg-soft);
    font-size: 13.5px;
}

    .stg-toc a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 38px;
        padding: 6px 10px;
        border-radius: 9px;
        color: var(--text-color-muted);
        line-height: 1.2;
        text-decoration: none !important;
        transition: background .15s, color .15s;
    }

        .stg-toc a:focus:not(:focus-visible) {
            outline: none;
        }

        .stg-toc a > [class*="icon-bs-"] {
            flex: none;
            top: 0;
            opacity: .6;
        }

        .stg-toc a:hover {
            color: var(--text-color);
        }

        .stg-toc .stg-toc-count {
            margin-left: auto;
            font-size: 11.5px;
            opacity: .8;
        }

        /* wybrana sekcja jak wybrany przycisk widoku: wypukła plakietka */
        .stg-toc a.on {
            background: var(--surface-color);
            color: var(--text-color);
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
        }

            .stg-toc a.on > [class*="icon-bs-"] {
                opacity: 1;
                filter: var(--main-color-filter);
            }

/* ----- wyszukiwarka i widok ----- */
.stg-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--stg-bar-height);
    padding-bottom: 12px;
}

/* przypięty do górnej krawędzi obszaru treści (parametr konta „Przypinaj pasek nawigacji…”, domyślnie włączony) */
.stg-bar-pinned {
    position: sticky;
    top: 0;
    z-index: 300;
    background-color: var(--background-color);
}

    /* zasłania odstęp nad paskiem (padding .content), żeby kafelki nie prześwitywały nad nim przy przewijaniu */
    .stg-bar-pinned::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 1.1rem;
        background-color: inherit;
        pointer-events: none;
    }

.stg-search {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--surface-border-color);
    border-radius: 12px;
    background: var(--stg-soft);
    cursor: text;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

    .stg-search:focus-within {
        border-color: var(--stg-accent-border);
        background: var(--surface-color);
        box-shadow: 0 0 0 3px var(--stg-accent-ring);
    }

    .stg-search > [class*="icon-bs-"] {
        flex: none;
        top: 0;
        opacity: .55;
    }

    .stg-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: none;
        color: var(--text-color);
        font: inherit;
        font-size: 14px;
    }

        .stg-search input::placeholder {
            color: var(--text-color-muted);
        }

        .stg-search input::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }

    .stg-search kbd {
        padding: 2px 6px;
        border: 1px solid var(--surface-border-color);
        border-radius: 5px;
        background: none;
        box-shadow: none;
        color: var(--text-color-muted);
        font-family: inherit;
        font-size: 11px;
        font-weight: 600;
    }

.stg-views {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    box-sizing: border-box;
    height: 40px;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--surface-border-color);
    border-radius: 10px;
    background: var(--stg-soft);
}

    .stg-views button {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: none;
        cursor: pointer;
    }

        .stg-views button > [class*="icon-bs-"] {
            top: 0;
            opacity: .5;
        }

        .stg-views button:hover > [class*="icon-bs-"],
        .stg-views button.on > [class*="icon-bs-"] {
            opacity: 1;
        }

        .stg-views button.on {
            background: var(--surface-color);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
        }

/* ----- ostatnio ----- */
.stg-recent {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.stg-recent-l {
    align-self: center;
    margin-right: 4px;
    color: var(--text-color-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.stg-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px 0 8px;
    border: 1px solid var(--surface-border-color);
    border-radius: 99px;
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 12.5px;
    text-decoration: none !important;
}

    .stg-chip:hover {
        border-color: var(--main-color);
        color: var(--text-color);
    }

    .stg .stg-chip .stg-chip-ic {
        display: grid;
        flex: none;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 6px;
    }

        .stg-chip .stg-chip-ic > span {
            top: 0;
            width: 12px;
            height: 12px;
        }

/* ----- sekcje i kafelki ----- */
.stg-section {
    margin-bottom: 28px;
    scroll-margin-top: calc(var(--stg-bar-height) + 12px);
}

    .stg-section h2 {
        margin: 0 0 2px;
        font-size: 15px;
        font-weight: 700;
    }

.stg-section-desc {
    margin: 0 0 12px;
    color: var(--text-color-muted);
    font-size: 12.5px;
}

.stg-section h2 + .stg-grid {
    margin-top: 10px;
}

.stg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
}

.stg-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--surface-border-color);
    border-radius: 16px;
    background: var(--surface-color);
    box-shadow: var(--stg-shadow);
    color: var(--text-color);
    font: inherit;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}

    .stg-tile:hover {
        border-color: var(--main-color);
        color: var(--text-color);
        transform: translateY(-1px);
    }

/* .settings-tile-icon zostaje na ikonie dla reguł motywu ciemnego (jasne podkłady bg-light), rozmiar wyznacza .stg-ic */
.stg .stg-ic {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

    .stg .stg-ic > [class*="icon-bs-"] {
        top: 0;
    }

.stg-tx {
    flex: 1;
    min-width: 0;
}

    .stg-tx h3 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: 14px;
        font-weight: 600;
    }

    .stg-tx p {
        margin: 3px 0 0;
        color: var(--text-color-muted);
        font-size: 12.5px;
        line-height: 1.35;
    }

    .stg-tx mark {
        padding: 0 1px;
        border-radius: 2px;
        background: var(--stg-mark);
        color: inherit;
    }

.stg-kw {
    margin-top: 5px;
    color: var(--text-color-muted);
    font-size: 11px;
}

    .stg-kw b {
        color: var(--text-color);
        font-weight: 600;
    }

.stg-go {
    flex: none;
    top: 0;
    opacity: .4;
}

.stg-empty {
    padding: 50px 20px;
    color: var(--text-color-muted);
    text-align: center;
}

    .stg-empty > [class*="icon-bs-"] {
        display: block;
        margin: 0 auto 8px;
        opacity: .5;
    }

/* ----- widoki ----- */
.stg-compact .stg-tx p,
.stg-compact .stg-kw,
.stg-compact .stg-section-desc {
    display: none;
}

.stg-compact .stg-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.stg.stg-compact .stg-ic {
    width: 36px;
    height: 36px;
}

    .stg.stg-compact .stg-ic > [class*="icon-bs-"] {
        width: 1.25rem;
        height: 1.25rem;
    }

.stg-list .stg-grid {
    grid-template-columns: 1fr;
    gap: 6px;
}

.stg-list .stg-tile {
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: none;
}

.stg.stg-list .stg-ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

    .stg.stg-list .stg-ic > [class*="icon-bs-"] {
        width: 1.1rem;
        height: 1.1rem;
    }

.stg-list .stg-tx {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: 12px;
}

    .stg-list .stg-tx p {
        margin: 0;
    }

@media (max-width: 1000px) {
    .stg-layout {
        grid-template-columns: 1fr;
    }

    .stg-toc {
        display: none;
    }

    .stg-list .stg-tx {
        grid-template-columns: 1fr;
    }
}

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

    .stg-search kbd {
        display: none;
    }
}

/* ===== Integracje (Pages/Integrations/Integrations.razor) ===== */
.stg-layout-single {
    grid-template-columns: minmax(0, 1fr);
}

.stg-views-labeled button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0 10px;
    font-size: 13px;
}

.stg-views-label {
    color: var(--text-color);
}

.stg-bar-end {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.stg-select {
    --dxbl-text-edit-border-radius: 12px;
    --dxbl-text-edit-border-color: var(--surface-border-color);
    --dxbl-text-edit-bg: var(--stg-soft);
    --dxbl-text-edit-focus-border-color: var(--stg-accent-border);
    --dxbl-text-edit-focus-shadow-color: var(--stg-accent-ring);
    --dxbl-text-edit-focus-shadow-blur: 0;
    --dxbl-text-edit-focus-shadow-spread: 3px;
    height: 40px;
}

.stg-btn {
    height: 40px;
    border-radius: 12px;
}

.stg-bar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--surface-border-color);
    border-radius: 12px;
    background: var(--stg-soft);
    color: var(--text-color);
    text-decoration: none !important;
}

    .stg-bar-link:hover {
        border-color: var(--main-color);
        color: var(--text-color);
    }

.stg-logo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 96px;
    height: 44px;
    padding: 4px;
    overflow: hidden;
    border-radius: var(--logo-plate-radius);
    background: var(--logo-plate-bg);
}

    .stg-logo img {
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        object-fit: contain;
    }

    .stg-logo > [class*="icon-bs-"] {
        top: 0;
    }

.stg-logo-fallback {
    background: var(--stg-soft);
    color: var(--text-color-muted);
    font-size: 14px;
    font-weight: 700;
}

.stg-status {
    display: flex;
    flex: none;
    align-items: center;
}

.stg-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.stg-dot-on {
    background: var(--bs-success);
}

.stg-dot-off {
    background: var(--bs-danger);
}

.stg-badge {
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.stg-badge-test {
    background: color-mix(in srgb, var(--warning-color) 30%, transparent);
    color: var(--text-color);
}

@media (max-width: 640px) {
    .stg-int {
        --stg-bar-height: 104px;
    }

        .stg-int .stg-bar {
            flex-wrap: wrap;
        }

        .stg-int .stg-bar-end {
            flex: 1 1 100%;
        }

        .stg-int .stg-views-label {
            display: none;
        }
}