/* =========================================================
   SETTINGS MODAL SHELL — modal over a dimmed app backdrop,
   left category rail + right content. (Design: AVA Settings.dc.html)
   ========================================================= */

.settings-scope {
    position: fixed;
    inset: 0;
    z-index: 2000001; /* above the fixed navbar so it truly overlays the current page */
    color: var(--ava-text-1);
}

.settings-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 38px;
    background: rgba(var(--ava-rgb-overlay-2),0.6);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.settings-modal {
    width: 1320px;
    max-width: 100%;
    height: 90vh;
    max-height: 900px;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: var(--ava-navy-deep);
    border: 1px solid var(--ava-line);
    box-shadow: 0 50px 120px rgba(var(--ava-rgb-black),0.65);
    overflow: hidden;
}

/* The head carries what belongs to the whole dialog: its name, the theme and closing. */
.settings-modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ava-line-soft);
    position: relative;
    z-index: 20;
}

.settings-modal-title { font: 800 17px Inter; letter-spacing: -.3px; color: var(--ava-slate-100); }
.settings-head-spacer { flex: 1; }
.settings-head-theme { flex: 0 0 auto; width: 210px; }

@keyframes avaSetDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Body: rail + content */
.settings-modal-body { flex: 1; display: flex; min-height: 0; }

/* The rail holds three fixed blocks — tenant, categories, account — and only the
   category list scrolls, so the scope and the account stay in place. */
.settings-rail {
    flex: 0 0 252px;
    width: 252px;
    padding: 12px 10px;
    border-right: 1px solid var(--ava-line-soft);
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    background: var(--ava-ink);
}

/* ==========================================================================
   One row per tab, and only this one: the area names itself on the left and
   puts what belongs to it — numbers, runtime, the save action — on the right.
   The tab owns the row, so nothing above it repeats the name.
   ========================================================================== */
.set-head-text { flex: 1 1 220px; min-width: 0; }
.set-head-title { font: 800 19px Inter; letter-spacing: -.3px; color: var(--ava-slate-100); }
.set-head-sub { margin-top: 3px; font: 600 11px Inter; color: var(--ava-slate-700); }
.set-head-meta { flex: 0 0 auto; font: 600 11px Inter; color: var(--ava-slate-500); white-space: nowrap; }

/* A row that carries text only still needs the band's breathing space and its own hairline gap. */
.set-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 2px var(--ava-flush-inset) 16px;
}

/* Below the desktop breakpoint the shell's app bar already names the open tab. */
@media (max-width: 1024px) {
    .set-head-title { display: none; }
    .set-head-sub { margin-top: 0; }
}

.settings-modal-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 26px 30px;
}

/* The back bar of an open category belongs to the phone; desktop hides it. */
.settings-mobile-detailbar { display: none; }

/* Desktop/mobile markup swap: each settings view carries its existing desktop
   block plus a verbatim copy of the dc.html mobile block; the breakpoint swaps them. */
.settings-m-only { display: none; }
@media (max-width: 1024px) {
    .settings-d-only { display: none !important; }
    .settings-m-only { display: block !important; }
}

/* Mobile detail primitives — 1:1 "AVA Settings (mobile).dc.html" <style> block. */
.fld { width: 100%; background: var(--ava-navy); border: 1px solid rgba(var(--ava-rgb-slate),0.16); border-radius: 11px; color: var(--ava-slate-100); font: 400 15px Inter; padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.fld:focus { border-color: rgba(var(--ava-rgb-aqua),0.55); box-shadow: 0 0 0 3px rgba(var(--ava-rgb-aqua),0.12); }
.fld::placeholder { color: var(--ava-slate-700); }
.mcard { border: 1px solid rgba(var(--ava-rgb-slate),0.10); border-radius: 16px; background: var(--ava-card); box-shadow: 0 14px 32px -16px rgba(var(--ava-rgb-black),0.55); overflow: hidden; margin-bottom: 14px; }
.mhead { padding: 14px 16px; border-bottom: 1px solid rgba(var(--ava-rgb-slate),0.10); font: 700 14.5px Inter; color: var(--ava-slate-100); }
.mlabel { display: block; font: 600 12.5px Inter; color: var(--ava-slate-500); margin-bottom: 7px; }
.mtab { flex: 0 0 auto; background: transparent; border: none; border-radius: 999px; padding: 9px 15px; cursor: pointer; font: 600 13.5px Inter; white-space: nowrap; color: var(--ava-slate-500); }
.mtab.on { background: rgba(var(--ava-rgb-slate),0.16); color: var(--ava-slate-100); box-shadow: 0 0 0 1px rgba(var(--ava-rgb-slate),0.20) inset; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 9px 8px 14px; border-radius: 999px; background: rgba(var(--ava-rgb-aqua),0.08); border: 1px solid rgba(var(--ava-rgb-aqua),0.22); font: 600 13.5px Inter; color: var(--ava-slate-100); }
.chipx { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; color: var(--ava-slate-700); font-size: 12px; cursor: pointer; transition: all .15s; }
.chipx:hover, .chipx:active { background: rgba(var(--ava-rgb-red),0.16); color: var(--ava-coral-soft); }
.badge-azure { color: var(--ava-cyan); background: rgba(var(--ava-rgb-cyan),0.10); border: 1px solid rgba(var(--ava-rgb-cyan),0.24); }
.badge-openai { color: var(--ava-slate-500); background: rgba(var(--ava-rgb-white),0.04); border: 1px solid rgba(var(--ava-rgb-slate),0.18); }
.badge-admin { color: var(--ava-slate-500); background: rgba(var(--ava-rgb-white),0.04); border: 1px solid rgba(var(--ava-rgb-slate),0.18); }
.badge-plain { color: var(--ava-slate-500); background: rgba(var(--ava-rgb-white),0.03); border: 1px solid rgba(var(--ava-rgb-slate),0.16); }
.lic-yes { color: var(--ava-green); }
.lic-no { color: var(--ava-slate-700); }

/* Schema editor modal on phones: full-screen page + wrapping header. The wide
   7-column column table is not rendered on phones — the component swaps to a
   stacked one-card-per-column layout instead. !important beats the inline sizing. */
@media (max-width: 1024px) {
    .s-schema-overlay { padding: 0 !important; }
    .s-schema-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }
    .s-schema-head { flex-wrap: wrap; }
}

/* How a category's content reflows on a phone. These sit ahead of the field and
   switch declarations they touch, so only the !important ones take effect — the
   views keep the sizing they were designed with. */
@media (max-width: 1024px) {
    .s-grid,
    .s-grid2 { grid-template-columns: 1fr !important; }

    .switch { width: 46px; height: 27px; }
    .switch .knob { width: 21px; height: 21px; top: 3px; left: 3px; }
    .switch.on .knob { left: 22px; }

    .s-in { font-size: 15px; padding: 12px 14px; }

    .s-toolbar { justify-content: stretch !important; flex-wrap: wrap; }
    .s-toolbar > button { flex: 1 1 auto; }
}


/* =========================================================
   Host + Layout (legacy onepage wrappers — no longer rendered)
   ========================================================= */


.settings-tabpanel.is-hidden {
    display: none;
}

.settings-tabpanel.is-active {
    display: block;
}


.settings-empty {
    height: 100%;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--ava-teal) 12%, transparent);
    background: var(--ava-panel);
    box-shadow: var(--ava-shadow);
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
}

.settings-empty-title {
    font-weight: 950;
    color: var(--ava-text);
    font-size: 18px;
}

.settings-empty-text {
    color: var(--ava-text-soft);
    margin-top: 6px;
}

/* =========================================================
   Tabs / Header
   ========================================================= */


/* =========================================================
   Content + Panels
   ========================================================= */

.settings-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--ava-teal) 10%, transparent);
    background: var(--ava-panel);
    box-shadow: var(--ava-shadow);
    display: flex;
    flex-direction: column;
}


    .settings-card-domains .settings-form-stack {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .settings-card-domains .settings-field {
        display: flex;
        flex-direction: column;
        flex: 1;
    }


.settings-form-stack {
    display: grid;
    gap: 12px;
}

.settings-field {
    display: grid;
    gap: 6px;
}

.settings-label {
    font-size: 12px;
    color: var(--ava-text-muted);
    font-weight: 800;
}

.settings-input,
.settings-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--ava-line);
    background: var(--ava-navy);
    color: var(--ava-text-1);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}


    .settings-input:focus,
    .settings-textarea:focus {
        border-color: var(--ava-focus);
        box-shadow: 0 0 0 3px var(--ava-focus-r);
        background: var(--ava-navy);
    }

.settings-help {
    font-size: 11.5px;
    color: var(--ava-text-faint);
}

/* =========================================================
   Toggles
   ========================================================= */


/* =========================================================
   Validation helpers
   ========================================================= */


.is-invalid {
    border-color: color-mix(in srgb, var(--ava-danger-validation) 95%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ava-danger-validation) 15%, transparent) !important;
}

.res-error {
    margin-top: 6px;
    font-size: 12px;
    color: color-mix(in srgb, var(--ava-danger-validation) 95%, transparent);
}

.res-validation-hint {
    padding: 10px 12px;
    border-radius: 12px;
    margin: 10px 0 14px;
}

    .res-validation-hint.error {
        border: 1px solid color-mix(in srgb, var(--ava-danger-validation) 35%, transparent);
        background: color-mix(in srgb, var(--ava-danger-validation) 8%, transparent);
    }

    .res-validation-hint.success {
        border: 1px solid color-mix(in srgb, var(--ava-success) 35%, transparent);
        background: color-mix(in srgb, var(--ava-success) 8%, transparent);
    }

    .res-validation-hint.info {
        border: 1px solid color-mix(in srgb, var(--ava-info) 35%, transparent);
        background: color-mix(in srgb, var(--ava-info) 8%, transparent);
    }

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* =========================================================
   RESSOURCEN TAB (res-*)
   ========================================================= */


/* =========================================================
   Touch-Basis
   ========================================================= */

* {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

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

/* =========================================================
   RESPONSIVE (≤ 1024px) = Handy + Tablet identisch
   Desktop ist > 1024px
   ========================================================= */

@media (max-width: 1024px) {
    .settings-app {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .settings-page {
        height: auto !important;
        min-height: 100%;
        overflow: visible !important;
    }

    .settings-layout {
        grid-template-columns: 1fr !important;
        height: auto !important;
        overflow: visible !important;
        padding: 8px;
        gap: 8px;
    }

    .settings-list {
        height: auto !important;
        max-height: 260px;
        overflow-y: auto !important;
        border-radius: 14px;
        position: static !important;
        top: auto !important;
    }

    .settings-detail,
    .settings-content {
        height: auto !important;
        overflow: visible !important;
    }

    .settings-panel {
        height: auto !important;
        overflow: visible !important;
        border-radius: 14px;
    }

    .settings-panel-scroll {
        height: auto !important;
        overflow: visible !important;
        padding: 10px;
    }

    .settings-grid,
    .settings-panel .settings-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "stamm"
            "security"
            "domains"
            "conn"
            "info" !important;
    }

        .settings-grid > .settings-card {
            grid-column: 1 / -1 !important;
            position: static !important;
            float: none !important;
            width: 100% !important;
            max-width: 100% !important;
        }

    .settings-card {
        overflow: hidden;
        border-radius: 14px;
        padding: 12px;
    }

    .settings-form-grid {
        grid-template-columns: 1fr !important;
    }

    .res-grid {
        grid-template-columns: 1fr !important;
    }

    .res-span-2 {
        grid-column: span 1 !important;
    }

    .settings-tabs {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px;
        gap: 8px;
        border-radius: 14px;
    }

    .settings-tabs-left {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
        width: 100%;
        flex: unset !important;
    }

    .settings-tenant-compact {
        grid-column: 1 / -1 !important;
        display: flex !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 0 8px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid color-mix(in srgb, var(--ava-white) 8%, transparent);
    }

    .settings-tenant-name {
        font-size: 14px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .settings-tab {
        width: 100%;
        min-width: 0 !important;
        min-height: 44px;
        padding: 9px 6px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 12px;
        line-height: 1.2;
        white-space: normal !important;
        word-break: break-word;
    }

    .settings-tabs-right {
        display: flex !important;
        width: 100%;
        margin-left: 0 !important;
        gap: 8px;
        border-top: 1px solid color-mix(in srgb, var(--ava-white) 8%, transparent);
        padding-top: 8px;
        white-space: normal;
    }

        .settings-tabs-right > * {
            flex: 1;
            text-align: center;
            justify-content: center;
        }

    .settings-input,
    .settings-textarea,
    .settings-search,
    .res-input,
    .res-select {
        font-size: 16px !important;
    }

    .settings-toggle-row {
        min-height: 44px;
    }

        .settings-toggle-row input[type="checkbox"],
        .settings-toggle-input {
            width: 22px;
            height: 22px;
        }

    .res-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
    }

    .res-toolbar-actions {
        display: flex;
        gap: 8px;
    }

        .res-toolbar-actions > * {
            flex: 1;
            text-align: center;
            justify-content: center;
        }

    .res-del {
        width: 44px;
        height: 44px;
    }

    .con-toolbar {
        flex-direction: column;
        gap: 8px;
    }

    .con-toolbar-actions {
        display: flex;
        gap: 8px;
    }

        .con-toolbar-actions > * {
            flex: 1;
            text-align: center;
            justify-content: center;
        }

    .con-type-btn {
        flex: 1 1 calc(50% - 4px);
        min-height: 44px;
        text-align: center;
        justify-content: center;
        border-radius: 10px;
    }

    .con-actions > * {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
}

/* =========================================================
   TABS FIX (≤ 1315px)
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1315px) {
    .settings-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "stamm security"
            "domains security"
            "conn info" !important;
    }

    .settings-panel-scroll {
        min-width: 0;
    }

    .settings-card {
        min-width: 0;
    }

    .settings-tabs {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .settings-tabs-left {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .settings-tabs-right {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
    }

    .settings-detail {
        overflow: visible !important;
        min-width: 0 !important;
    }

    .settings-form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 12px;
    }
}

/* =========================================================
   RESSOURCEN – Responsive Fix
   ========================================================= */


/* =========================================================
   ONLY USERS + ROLES SPLIT LAYOUT
   ========================================================= */

@media (min-width: 1025px) {
    .settings-tabpanel.split-tabpanel.is-active {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        height: 100%;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .settings-tabpanel.split-tabpanel > .split-panel {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .settings-tabpanel.split-tabpanel .split-panel-scroll {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

        .settings-tabpanel.split-tabpanel .split-panel-scroll > .con-toolbar {
            flex: 0 0 auto;
        }

    .settings-tabpanel.split-tabpanel .split-grid {
        flex: 1 1 auto;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }

        .settings-tabpanel.split-tabpanel .split-grid > .settings-card {
            min-height: 0 !important;
            height: auto !important;
            overflow: hidden !important;
        }

    .settings-tabpanel.split-tabpanel .split-list-card,
    .settings-tabpanel.split-tabpanel .split-editor-card {
        display: flex;
        flex-direction: column;
        min-height: 0 !important;
    }

        .settings-tabpanel.split-tabpanel .split-list-card .settings-list-items {
            flex: 1 1 auto;
            min-height: 0 !important;
            max-height: none !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

    .settings-tabpanel.split-tabpanel .split-editor-card {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 10px;
    }
}

/* =========================================================
   MOBILE STATUS TOAST
   ========================================================= */

@media (max-width: 1024px) {
    .settings-detail > .res-validation-hint {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 72px);
        left: 10px;
        right: 10px;
        z-index: 9999;
        margin: 0 !important;
        padding: 10px 12px;
        border-radius: 14px;
        box-shadow: 0 12px 30px color-mix(in srgb, var(--ava-black) 28%, transparent);
        color: var(--ava-text);
        font-size: 13px;
        line-height: 1.3;
        font-weight: 800;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        animation: ava-mobile-status-in .18s ease-out;
    }

        .settings-detail > .res-validation-hint.error {
            border: 1px solid color-mix(in srgb, var(--ava-danger-validation) 35%, transparent);
            background: color-mix(in srgb, var(--ava-danger-validation) 8%, transparent);
        }

        .settings-detail > .res-validation-hint.success {
            border: 1px solid color-mix(in srgb, var(--ava-success) 35%, transparent);
            background: color-mix(in srgb, var(--ava-success) 8%, transparent);
        }

        .settings-detail > .res-validation-hint.info {
            border: 1px solid color-mix(in srgb, var(--ava-info) 35%, transparent);
            background: color-mix(in srgb, var(--ava-info) 8%, transparent);
        }

    @keyframes ava-mobile-status-in {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* =========================================================
   ROLES TAB – Redesign + Scroll/Overflow Fix
   ========================================================= */


/* =========================================================
   ROLES TAB – Responsive
   ========================================================= */

@media (max-width: 1024px) {
    .role-topbar {
        align-items: flex-start;
    }

    .role-editor-card {
        height: auto !important;
        overflow: visible !important;
        padding-right: 12px !important;
    }

    .role-editor-body {
        overflow: visible !important;
        padding-right: 0;
    }

    .role-form-grid {
        grid-template-columns: 1fr;
    }

    .role-resource-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .role-resource-tab {
        min-width: 0;
        padding: 10px 8px;
    }

    .role-actions {
        position: static;
        flex-direction: column-reverse;
        background: transparent;
        padding-top: 2px;
    }

    .role-delete-btn,
    .role-save-btn {
        width: 100%;
    }
}



/* =========================================================
   CONNECTORS: MySQL Prefix Toggle
   ========================================================= */


/* Bei mittleren Breiten lieber 2 nebeneinander statt kaputtquetschen */
@media (max-width: 1350px) {
    .role-permission-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobil wieder untereinander */
@media (max-width: 720px) {
    .role-section-resources {
        max-height: none;
        overflow: visible;
    }

    .role-permission-list {
        max-height: none;
        overflow: visible;
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   ROLES TAB – Final Layout Fix
   Automatische Zuweisung nicht quetschen,
   Ressourcen kompakt im 3er Grid,
   Editor sauber scrollbar
   ========================================================= */

/* rechter Editor wirklich als eigene Scroll-Fläche */

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1400px) {
    .role-permission-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/* Webkit Scrollbar */

/* Mobile wieder untereinander */
@media (max-width: 720px) {
    .role-resource-input-list {
        max-height: none;
        overflow: visible;
        grid-template-columns: 1fr;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .role-resource-input-row {
        grid-template-columns: minmax(0, 1fr) 44px;
    }

        .role-resource-input-row .ava-btn-danger {
            width: 44px;
            height: 44px;
            min-width: 44px;
        }
}
/* ===========================================================
   Settings modal shell — prototype <style> helpers (1:1 AVA Settings.dc.html).
   The shell markup is inline; these cover :hover/:focus/scrollbar/animation.
   Delete + close-X use the Knowledge red per the agreed change.
   =========================================================== */
.sc::-webkit-scrollbar { width: 9px; height: 9px; }
.sc::-webkit-scrollbar-thumb { background: rgba(var(--ava-rgb-slate),0.20); border-radius: 99px; }
.sc::-webkit-scrollbar-track { background: transparent; }

/* A rail row: line icon + label. The icon carries the state, so the active row needs
   no ring — an aqua tint plus an aqua icon is enough. */
.vnav {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font: 600 13px Inter;
    color: var(--ava-slate-400);
    transition: background .14s, color .14s;
}

.vnav:hover { background: rgba(var(--ava-rgb-slate),0.07); color: var(--ava-slate-100); }
.vnav.on { background: rgba(var(--ava-rgb-aqua),0.11); color: var(--ava-slate-100); }
.vnav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A category row can carry a second line and a chevron. Both are for the phone,
   where the list is the whole screen and nothing hovers; the rail shows the label only. */
.vnav-text { flex: 1; min-width: 0; }
.vnav-text .vnav-label { display: block; }

.vnav-sub {
    display: none;
    margin-top: 2px;
    font: 400 11.5px Inter;
    color: var(--ava-slate-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vnav-chev {
    display: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .45;
}

.vnav-icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .72;
    transition: opacity .14s, stroke .14s;
}

.vnav:hover .vnav-icon { opacity: .95; }
.vnav.on .vnav-icon { opacity: 1; stroke: var(--ava-aqua); }

.vnav-danger { color: var(--ava-coral-softer); }
.vnav-danger:hover { background: rgba(var(--ava-rgb-red),0.10); color: var(--ava-coral-lightest); }

/* Closing is neutral until the pointer is on it; the intent turns it red. */
.closeX {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(var(--ava-rgb-slate),0.22);
    background: rgba(var(--ava-rgb-slate),0.08);
    color: var(--ava-slate-400);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
}

.closeX:hover {
    border-color: rgba(var(--ava-rgb-red),0.45);
    background: rgba(var(--ava-rgb-red),0.12);
    color: var(--ava-coral-softer);
    transform: rotate(90deg);
}

.closeX:active { transform: rotate(90deg) scale(0.92); }

/* ==========================================================================
   Settings rail blocks: the tenant scope on top, its menu inside the rail,
   the grouped categories in the middle, the account at the foot.
   ========================================================================== */
.settings-tenant { flex: 0 0 auto; padding-bottom: 12px; border-bottom: 1px solid var(--ava-line-soft); }

.settings-tenantbtn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px 11px;
    border-radius: 11px;
    background: var(--ava-navy);
    border: 1px solid rgba(var(--ava-rgb-slate),0.18);
    cursor: pointer;
    transition: border-color .15s;
}

.settings-tenantbtn:hover:not(:disabled),
.settings-tenantbtn.on { border-color: rgba(var(--ava-rgb-aqua),0.40); }
.settings-tenantbtn:disabled { cursor: default; }

.settings-tenant-initials {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--ava-aqua);
    color: var(--ava-on-accent);
    font: 700 11px Inter;
}

.settings-tenant-text { flex: 1; min-width: 0; }
.settings-tenant-caption { display: block; font: 400 9px Inter; letter-spacing: .5px; text-transform: uppercase; color: var(--ava-slate-700); line-height: 1; }
.settings-tenant-name { display: block; margin-top: 2px; font: 700 13px Inter; color: var(--ava-slate-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-tenant-caret { flex: 0 0 auto; transition: transform .18s; }
.settings-tenantbtn.on .settings-tenant-caret { transform: rotate(180deg); }

/* The menu belongs to the rail, so it opens inside it instead of over the content. */
.settings-tenant-menu {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 56px;
    z-index: 30;
    border-radius: 13px;
    background: var(--ava-navy-deep);
    border: 1px solid rgba(var(--ava-rgb-slate),0.20);
    box-shadow: 0 26px 54px rgba(var(--ava-rgb-black),0.60);
    overflow: hidden;
    animation: avaSetDropIn .16s ease;
}

.settings-tenant-search { display: flex; align-items: center; gap: 8px; margin: 8px; padding: 8px 11px; border-radius: 9px; background: var(--ava-navy); border: 1px solid rgba(var(--ava-rgb-slate),0.16); }
.settings-tenant-search svg { flex: 0 0 auto; }
.settings-tenant-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font: 500 12.5px Inter; color: var(--ava-slate-100); }
.settings-tenant-search input::placeholder { color: var(--ava-slate-800); font-weight: 400; }

.settings-tenant-create {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--ava-line-soft);
    background: transparent;
    color: var(--ava-aqua);
    font: 700 13px Inter;
    padding: 12px;
    cursor: pointer;
    text-align: center;
}

.settings-tenant-create:disabled { opacity: .5; cursor: not-allowed; }
.settings-tenant-list { max-height: 300px; overflow-y: auto; }

.settings-tenant-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    padding: 11px 13px;
    border: none;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate),0.06);
    background: transparent;
    cursor: pointer;
    transition: background .13s;
}

.settings-tenant-row:hover { background: rgba(var(--ava-rgb-aqua),0.08); }
.settings-tenant-row.on { background: rgba(var(--ava-rgb-slate),0.10); }

.settings-tenant-row .settings-tenant-initials { width: 30px; height: 30px; border-radius: 9px; }
.settings-tenant-row.is-other .settings-tenant-initials { background: rgba(var(--ava-rgb-slate),0.12); color: var(--ava-slate-500); }
.settings-tenant-row-name { display: block; font: 600 13px Inter; color: var(--ava-slate-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-tenant-row-mail { display: block; font: 400 11px Inter; color: var(--ava-slate-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-tenant-empty { padding: 16px 13px; font: 400 12px Inter; color: var(--ava-slate-700); }

/* The categories are the rail's only scroll area. */
.settings-cats { flex: 1; min-height: 0; overflow-y: auto; padding-top: 12px; }
.settings-cat-group { margin-bottom: 15px; }
.settings-cat-group:last-child { margin-bottom: 0; }
.settings-cat-grouptitle { font: 700 9.5px Inter; letter-spacing: .8px; text-transform: uppercase; color: var(--ava-slate-700); padding: 0 12px; margin: 0 0 6px; }
.settings-cat-items { display: flex; flex-direction: column; gap: 2px; }

.settings-account { flex: 0 0 auto; padding-top: 10px; border-top: 1px solid var(--ava-line-soft); }
.settings-account-me { display: flex; align-items: center; gap: 10px; padding: 0 2px 8px; }

.settings-account-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ava-aqua), var(--ava-aqua-deep));
    color: var(--ava-on-accent);
    font: 800 11px Inter;
}

.settings-account-text { flex: 1; min-width: 0; }
.settings-account-name { display: block; font: 700 12.5px Inter; color: var(--ava-slate-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-account-role { display: block; font: 400 10.5px Inter; color: var(--ava-slate-700); }

/* The signed-in identity fits a phone, not the 252px rail. */
.settings-account-mail { display: none; font: 400 11px Inter; color: var(--ava-slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ===========================================================
   Settings category panels — 1:1 AVA Settings.dc.html field/card/switch
   styling, on the Knowledge .ku-card. Delete = Knowledge red.
   =========================================================== */
.s-cardhead { padding: 16px 18px; border-bottom: 1px solid rgba(var(--ava-rgb-slate),0.10); font: 700 15px Inter; color: var(--ava-slate-100); }
.s-lbl { display: block; font: 600 12px Inter; color: var(--ava-slate-500); margin-bottom: 6px; }
.s-req { color: var(--ava-aqua); }

.s-in { width: 100%; background: var(--ava-navy); border: 1px solid rgba(var(--ava-rgb-slate),0.16); border-radius: 10px; color: var(--ava-slate-100); font: 400 13.5px Inter; padding: 10px 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.s-in:focus { border-color: rgba(var(--ava-rgb-aqua),0.55); box-shadow: 0 0 0 3px rgba(var(--ava-rgb-aqua),0.12); }
.s-in.is-invalid { border-color: rgba(var(--ava-rgb-red),0.6); }
.s-in::placeholder { color: var(--ava-slate-700); }
textarea.s-in { resize: vertical; line-height: 1.5; min-height: 60px; }

/* Save/error feedback: a floating toast pinned to the top of the viewport, so it is
   visible at the user's current scroll position (esp. on mobile) instead of only at
   the top of the scrolled settings content. */
.settings-toast {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000200;
    max-width: calc(100vw - 32px);
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--ava-navy-deep);
    border: 1px solid rgba(var(--ava-rgb-slate),0.22);
    box-shadow: 0 22px 55px rgba(var(--ava-rgb-black),0.55);
    font: 600 13px Inter;
    color: var(--ava-slate-100);
    text-align: center;
    animation: avaSetDropIn .16s ease;
}
.settings-toast.success { border-color: rgba(var(--ava-rgb-green),0.40); }
.settings-toast.error   { border-color: rgba(var(--ava-rgb-brick),0.55); color: var(--ava-danger-text); }
.settings-toast.info    { border-color: rgba(var(--ava-rgb-slate),0.28); }

.s-del { border: 1px solid rgba(var(--ava-rgb-red),0.4); border-radius: 10px; background: transparent; color: var(--ava-coral-soft); font: 700 13px Inter; padding: 10px 18px; cursor: pointer; transition: background .15s; }
.s-del:hover { background: rgba(var(--ava-rgb-red),0.10); }
.s-del:disabled { opacity: .5; cursor: not-allowed; }

.s-ok { border: none; border-radius: 10px; background: var(--ava-aqua); color: var(--ava-navy); font: 700 13px Inter; padding: 10px 24px; cursor: pointer; transition: filter .15s, transform .05s; }
.s-ok:hover { filter: brightness(1.06); }
.s-ok:active { transform: translateY(1px); }
.s-ok:disabled { opacity: .6; cursor: not-allowed; }

.switch { flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; border: none; cursor: pointer; padding: 0; position: relative; transition: background .18s; background: rgba(var(--ava-rgb-slate),0.22); }
.switch.on { background: var(--ava-aqua); }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ava-slate-100); transition: left .18s; }
.switch.on .knob { left: 19px; background: var(--ava-navy); }
.switch:disabled { opacity: .55; cursor: not-allowed; }

/* Compact variant for dense table rows. */
.switch.sm { width: 34px; height: 19px; }
.switch.sm .knob { top: 2px; left: 2px; width: 15px; height: 15px; }
.switch.sm.on .knob { left: 17px; }

.s-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 13px; border-radius: 999px; background: rgba(var(--ava-rgb-slate),0.08); border: 1px solid rgba(var(--ava-rgb-slate),0.20); font: 600 13px Inter; color: var(--ava-slate-100); }
.s-chipx { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent; color: var(--ava-slate-700); font-size: 11px; cursor: pointer; transition: all .15s; }
.s-chipx:hover { background: rgba(var(--ava-rgb-red),0.16); color: var(--ava-coral-soft); }

@media (max-width: 900px) { .s-grid { grid-template-columns: 1fr !important; } }

/* Settings — resource/connector entity cards, selects, badges, secondary + close */
.s-secondary { border: 1px solid rgba(var(--ava-rgb-slate),0.16); border-radius: 10px; background: var(--ava-btn-2); color: var(--ava-slate-100); font: 600 13px Inter; padding: 10px 16px; cursor: pointer; transition: background .15s, color .15s; }
.s-secondary:hover { background: var(--ava-btn-2-hover); color: var(--ava-slate-100); }
.s-secondary:disabled { opacity: .5; cursor: not-allowed; }

.ecard { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid rgba(var(--ava-rgb-slate),0.12); background: var(--ava-card); border-radius: 14px; padding: 13px 15px; cursor: pointer; transition: all .15s; box-shadow: 0 10px 26px -14px rgba(var(--ava-rgb-black),0.5); }
.ecard:hover { border-color: rgba(var(--ava-rgb-slate),0.30); background: rgba(var(--ava-rgb-white),0.03); }
.ecard.on { border-color: rgba(var(--ava-rgb-slate),0.42); background: rgba(var(--ava-rgb-slate),0.10); }

.s-sel { width: 100%; appearance: none; -webkit-appearance: none; background: var(--ava-navy); border: 1px solid rgba(var(--ava-rgb-slate),0.16); border-radius: 10px; color: var(--ava-slate-100); font: 400 13.5px Inter; padding: 11px 36px 11px 13px; outline: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.s-sel:focus { border-color: rgba(var(--ava-rgb-aqua),0.55); box-shadow: 0 0 0 3px rgba(var(--ava-rgb-aqua),0.12); }
.s-sel.is-invalid { border-color: rgba(var(--ava-rgb-red),0.6); }
.s-sel option { background: var(--ava-navy-deep); color: var(--ava-slate-100); }
.s-selchev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ava-slate-700); font-size: 10px; }

.s-badge-azure { color: var(--ava-cyan); background: rgba(var(--ava-rgb-cyan),0.10); border: 1px solid rgba(var(--ava-rgb-cyan),0.24); }
.s-badge-openai { color: var(--ava-slate-500); background: rgba(var(--ava-rgb-white),0.04); border: 1px solid rgba(var(--ava-rgb-slate),0.18); }

.s-closebtn { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; border: 1px solid rgba(var(--ava-rgb-red),0.32); background: rgba(var(--ava-rgb-red),0.12); color: var(--ava-coral-soft); font-size: 14px; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.s-closebtn:hover { background: rgba(var(--ava-rgb-red),0.20); }
.s-closebtn:disabled { opacity: .5; cursor: not-allowed; }

/* Settings — connector type segmented buttons (dc.html .ctype) */
.ctype { border: none; border-radius: 8px; cursor: pointer; font: 600 12.5px Inter; padding: 8px 13px; transition: all .15s; background: transparent; color: var(--ava-slate-500); }
.ctype:hover { color: var(--ava-slate-100); }
.ctype.on { background: rgba(var(--ava-rgb-slate),0.16); color: var(--ava-slate-100); box-shadow: 0 0 0 1px rgba(var(--ava-rgb-slate),0.22) inset; }
.ctype:disabled { opacity: .5; cursor: not-allowed; }

/* Settings — list items, segmented controls, section headers, avatars (dc.html) */
.litem { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 11px; padding: 8px 10px; cursor: pointer; transition: background .15s; color: rgba(var(--ava-rgb-text),0.84); }
.litem:hover { background: rgba(var(--ava-rgb-white),0.04); }
.litem.on { background: rgba(var(--ava-rgb-slate),0.16); color: var(--ava-slate-100); box-shadow: 0 0 0 1px rgba(var(--ava-rgb-slate),0.22) inset; }

.seg { flex: 1; border: none; border-radius: 8px; cursor: pointer; font: 600 12.5px Inter; padding: 8px 10px; transition: all .15s; background: transparent; color: var(--ava-slate-500); }
.seg:hover { color: var(--ava-slate-100); }
.seg.on { background: rgba(var(--ava-rgb-slate),0.16); color: var(--ava-slate-100); box-shadow: 0 0 0 1px rgba(var(--ava-rgb-slate),0.22) inset; }
.seg:disabled { opacity: .55; cursor: not-allowed; }

.addbtn { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; border: 1px solid rgba(var(--ava-rgb-slate),0.20); background: rgba(var(--ava-rgb-white),0.03); color: var(--ava-slate-500); font-size: 17px; line-height: 1; cursor: pointer; transition: all .15s; }
.addbtn:hover { background: rgba(var(--ava-rgb-slate),0.10); color: var(--ava-slate-100); border-color: rgba(var(--ava-rgb-slate),0.30); }
.addbtn:disabled { opacity: .5; cursor: not-allowed; }

.s-section-cyan { font: 600 10.5px Inter; letter-spacing: .6px; text-transform: uppercase; color: var(--ava-aqua); margin-bottom: 12px; }

/* Section headers inside a single card (replaces per-section cards). The ⓘ carries the
   explanatory text as a hover-tooltip so the surface stays free of prose. */
.s-section { display: flex; align-items: center; gap: 8px; font: 600 10.5px Inter; letter-spacing: .6px; text-transform: uppercase; color: var(--ava-slate-700); margin-bottom: 13px; }
.s-divider { height: 1px; border: 0; background: rgba(var(--ava-rgb-slate),0.10); margin: 22px 0; }
.s-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .s-fields { grid-template-columns: 1fr; } }

.av { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; font: 700 12px Inter; background: rgba(var(--ava-rgb-slate),0.10); color: var(--ava-slate-500); }
.litem.on .av { background: var(--ava-aqua); color: var(--ava-navy); }

/* The panels now sit frameless on the modal background (1:1 dc.html) — kill the old
   card frame that wrapped every settings tab. */
.settings-panel {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* grid items must be allowed to shrink below their content width (no horizontal overflow) */
.ecard { min-width: 0; }


/* =========================================================
   Theme switch (Design: Dunkel | Hell | System) - rail bottom
   on desktop, overview block on phones. Token-only styling;
   selection is the neutral slate fill + inset ring.
   ========================================================= */
.s-theme { padding: 0 4px 10px; }
.s-theme-label { font: 600 10.5px var(--font-sans); letter-spacing: .6px; text-transform: uppercase; color: var(--ava-text-3); margin: 0 0 7px 2px; }
.s-theme-seg { display: flex; gap: 4px; background: var(--ava-navy); border: 1px solid var(--ava-line); border-radius: 10px; padding: 3px; }
.s-theme-opt { flex: 1; border: none; border-radius: 8px; background: transparent; color: var(--ava-text-2); font: 600 12px var(--font-sans); padding: 7px 4px; cursor: pointer; }
.s-theme-opt:hover { color: var(--ava-text-1); }
.s-theme-opt.on { background: var(--ava-select); color: var(--ava-text-1); box-shadow: 0 0 0 1px var(--ava-select-ring) inset; }

/* ==========================================================================
   Frameless settings surfaces. A tab that drops its card frames lets its bands
   and hairlines run the full content width, so two paddings decide how wide it
   reads: the scroll container's own inset, shrunk here, and `--ava-flush-inset`,
   the horizontal breathing space each band gives its own text. Shrinking the
   container is what widens the bands — growing the content instead overflows
   the panel's inner scroll box, which clips it. The inset then puts the text
   back at the 26px every other tab uses, so hairlines run wide while labels
   keep clear of the panel wall. Only the tabs listed here are affected.
   ========================================================================== */
.apihub-page,
.tenant-page,
.users-page,
.roles-page,
.connectors-page,
.resources-page { --ava-flush-inset: 0; }

@media (min-width: 1025px) {
    .settings-modal-content:has(.settings-tabpanel.is-active .apihub-page),
    .settings-modal-content:has(.settings-tabpanel.is-active .tenant-page),
    .settings-modal-content:has(.settings-tabpanel.is-active .users-page),
    .settings-modal-content:has(.settings-tabpanel.is-active .roles-page),
    .settings-modal-content:has(.settings-tabpanel.is-active .connectors-page),
    .settings-modal-content:has(.settings-tabpanel.is-active .resources-page) {
        padding-left: 10px;
        padding-right: 10px;
    }

    .apihub-page,
    .tenant-page,
    .users-page,
    .roles-page,
    .connectors-page,
    .resources-page { --ava-flush-inset: 16px; }
}

/* ==========================================================================
   Mandant (settings tab). Frameless like the Hub: a head carrying the licence
   donut, the runtime and the actions, then hairline-separated bands for the
   master-data grid and the two-column blocks. Inputs are underlined fields, so
   no box competes with the band hairlines.
   ========================================================================== */

/* THE mini label of every frameless tab — head metrics, field grids, matrix and table column
   heads, rail group heads. One declaration, so no tab invents its own size or tracking. */
.tn-th,
.us-th,
.rl-th,
.cn-th,
.rs-th {
    font: 700 10.5px Inter;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ava-slate-700);
}

/* Section label: the accent-coloured name of a band or of a column inside one. */
.tn-lab,
.us-lab {
    flex: 0 0 auto;
    font: 700 10.5px Inter;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--ava-aqua);
}

.tn-hint { flex: 1; min-width: 0; font: 400 12px/1.5 Inter; color: var(--ava-slate-700); }

.tn-req { color: var(--ava-aqua); font-weight: 700; }

.tn-right { text-align: right; }

.tn-empty {
    padding: 46px 12px;
    text-align: center;
    font: 400 13.5px Inter;
    color: var(--ava-slate-700);
}

/* ---- Head: the section title left, licence / runtime / actions right ---- */
.tn-hero {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    flex-wrap: wrap;
    padding: 0 var(--ava-flush-inset) 22px;
}


.tn-metrics {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px 0;
}

.tn-metric { padding: 0 24px; border-left: 1px solid rgba(var(--ava-rgb-slate), 0.12); }
.tn-metric:first-child { padding-left: 0; border-left: none; }
.tn-metric:last-child { padding-right: 0; }

.tn-actions { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }

/* ---- Licence donut: a conic arc whose centre is masked away, so the hole
       stays transparent on whatever surface the tab is rendered on. The mask
       gradient is a stencil, not a colour. Shared with the user tab's head so
       both licence rings in the settings modal read as one component. ---- */
.tn-lic,
.us-lic { display: flex; align-items: center; gap: 13px; }

.tn-ring,
.us-ring {
    position: relative;
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.tn-ring .arc,
.us-ring .arc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 24px, #000 25px);
    mask: radial-gradient(circle at 50% 50%, transparent 24px, #000 25px);
}

.tn-ring .val,
.us-ring .val { position: relative; line-height: 1; text-align: center; }

.tn-ring b,
.us-ring b { display: block; font: 800 16px Inter; letter-spacing: -.3px; color: var(--ava-slate-100); }

.tn-ring i,
.us-ring i { display: block; font: 600 9px Inter; font-style: normal; color: var(--ava-slate-700); margin-top: 2px; }

.tn-lic-free,
.us-lic-free { font: 700 13px Inter; color: var(--ava-slate-100); margin-top: 5px; }
.tn-lic-note { font: 400 11px Inter; color: var(--ava-slate-700); margin-top: 4px; }

/* ---- Runtime ---- */
.tn-date { font: 800 17px Inter; letter-spacing: -.3px; color: var(--ava-slate-100); margin-top: 6px; }

.tn-valid {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    font: 600 11.5px Inter;
    color: var(--ava-green);
}

.tn-valid.off { color: var(--ava-coral-soft); }

.tn-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }

/* The validation hint sits between two bands and keeps their inset. */
.tn-banner { margin: 0 var(--ava-flush-inset) 16px; }

/* ---- Master-data band ---- */
.tn-sect {
    padding: 18px var(--ava-flush-inset) 22px;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.tn-sect-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.tn-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 30px;
    margin-top: 16px;
}

.tn-field { min-width: 0; }
.tn-field .tn-th { display: block; margin-bottom: 2px; }

/* Underline field: the line alone carries hover, focus and error state. The top corners
   are rounded for the focus fill; the bottom stays a straight stroke. */
.tn-in {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.28);
    border-radius: 4px 4px 0 0;
    background: transparent;
    padding: 6px 2px;
    /* The line-height fixes the content box, so the underline sits at the same height in every
       field of a row — otherwise the mono variant (smaller font) and the native date control
       (taller intrinsic box) each put their line somewhere else. */
    font: 500 13px/20px Inter;
    height: 33px;
    box-sizing: border-box;
    color: var(--ava-slate-100);
    outline: none;
    transition: border-color .14s, box-shadow .14s, background-color .14s;
}

.tn-in:hover:not(:disabled) { border-bottom-color: rgba(var(--ava-rgb-slate), 0.5); }
.tn-in::placeholder { color: var(--ava-slate-700); font-weight: 400; }
.tn-in:disabled { border-bottom-style: dashed; color: var(--ava-slate-700); cursor: not-allowed; }

/* The native date control paints its own picker glyph, which follows the scheme
   rather than the colour, so the transparent field has to declare it. */
.tn-in[type="date"] { color-scheme: dark; }
:root[data-theme="light"] .tn-in[type="date"] { color-scheme: light; }


/* ---- Two-column bands: a 1px grid column carries the vertical hairline ---- */
.tn-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.tn-rule { background: rgba(var(--ava-rgb-slate), 0.12); }

.tn-col { min-width: 0; padding: 18px 0 22px; }
.tn-split > .tn-col:first-child { padding-left: var(--ava-flush-inset); padding-right: 26px; }
.tn-split > .tn-col:last-child { padding-left: 26px; padding-right: var(--ava-flush-inset); }

/* A band carrying only one of its two blocks runs that block full width. */
.tn-split.single { grid-template-columns: minmax(0, 1fr); }

.tn-split.single > .tn-col {
    padding-left: var(--ava-flush-inset);
    padding-right: var(--ava-flush-inset);
}

/* ---- Switch rows ---- */
.tn-swlist { margin-top: 8px; }

.tn-sw {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 2px;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.08);
}

.tn-sw-label { flex: 1; min-width: 0; font: 600 13px Inter; color: var(--ava-slate-100); }

/* ---- Licence and token matrix ---- */
.tn-matrix {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 96px;
    gap: 20px 18px;
    align-items: end;
    margin-top: 15px;
}

.tn-mrow { font: 600 12.5px Inter; color: var(--ava-slate-500); padding-bottom: 7px; }
.tn-mnote { font: 400 11px Inter; color: var(--ava-slate-700); text-align: right; padding-bottom: 7px; }

/* Only the number carries a line in this matrix; spinners would break that stroke. */
.tn-num {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.28);
    border-radius: 4px 4px 0 0;
    background: transparent;
    padding: 5px 2px;
    font: 600 13px Inter;
    color: var(--ava-slate-100);
    text-align: right;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
    transition: border-color .14s, box-shadow .14s, background-color .14s;
}

.tn-num::-webkit-outer-spin-button,
.tn-num::-webkit-inner-spin-button { appearance: none; margin: 0; }

.tn-num:hover:not(:disabled) { border-bottom-color: rgba(var(--ava-rgb-slate), 0.5); }
.tn-num:disabled { border-bottom-style: dashed; color: var(--ava-slate-700); cursor: not-allowed; }

/* ---- Focus and error states of both field kinds ----
   Both live on the line, never around the field: the generic focus ring and the generic
   validation style are spread box-shadows, which draw a rectangle around a field that has
   no rectangle — hence the overrides. The emphasis stroke is a second line painted inside
   the box, so the field keeps its geometry and no row reflows. The generic styles are
   declared with `!important`, so matching them takes the same weight. */
.tn-in:focus,
.tn-num:focus,
.rl-in:focus {
    border-bottom-color: var(--ava-aqua);
    box-shadow: inset 0 -1px 0 var(--ava-aqua);
    background: var(--ava-aqua-08);
}

.tn-in.is-invalid,
.tn-num.is-invalid,
.rl-in.is-invalid {
    border-color: transparent !important;
    border-bottom-color: var(--ava-coral-soft) !important;
    box-shadow: none !important;
}

.tn-in.is-invalid:focus,
.tn-num.is-invalid:focus,
.rl-in.is-invalid:focus {
    box-shadow: inset 0 -1px 0 var(--ava-coral-soft) !important;
    background: color-mix(in srgb, var(--ava-coral-soft) 8%, transparent);
}

/* ---- Connector rows ---- */
.tn-cnlist { margin-top: 8px; }

.tn-cn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.08);
}

.tn-cn-title { flex: 1; min-width: 0; font: 600 13px Inter; color: var(--ava-slate-100); }
.tn-cn-meta { flex: 0 0 auto; font: 500 11px Inter; color: var(--ava-slate-700); }

/* ---- E-mail domains ---- */
.tn-doms { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

.tn-dchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 5px 11px;
    border-radius: 8px;
    background: rgba(var(--ava-rgb-slate), 0.10);
    font: 500 12px Inter;
    color: var(--ava-slate-100);
}

.tn-dx {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--ava-slate-700);
    font: 700 11px Inter;
    padding: 0 1px;
    line-height: 1;
    transition: color .14s;
}

.tn-dx:hover { color: var(--ava-coral-soft); }

/* The add field grows into whatever the chips leave of the row. */
.tn-domin { flex: 1 1 180px; width: auto; min-width: 0; }

.tn-domerr { margin-top: 10px; }

.tn-foot {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    font: 400 11.5px/1.5 Inter;
    color: var(--ava-slate-700);
}

.tn-foot svg { flex: 0 0 auto; margin-top: 1px; color: var(--ava-aqua); }

/* Below this width the settings shell shows its own app bar naming the tab, so the
   panel drops its title rather than repeating it. */
@media (max-width: 1024px) {
    .tn-title { display: none; }
}

/* ---- Narrow layouts: the grids fold to one column and the vertical hairline
       gives way to a horizontal one ---- */
@media (max-width: 900px) {
    .tn-grid3 { grid-template-columns: minmax(0, 1fr); gap: 18px; }

    .tn-split { grid-template-columns: minmax(0, 1fr); }
    .tn-rule { display: none; }

    .tn-split > .tn-col:first-child,
    .tn-split > .tn-col:last-child {
        padding-left: var(--ava-flush-inset);
        padding-right: var(--ava-flush-inset);
    }

    .tn-rule + .tn-col { border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12); }

    .tn-matrix { grid-template-columns: minmax(0, 1fr) 88px 88px; gap: 16px 14px; }
}

/* On a phone the head stacks: each metric and the action pair take a full row. */
@media (max-width: 700px) {
    .tn-hero { gap: 18px; }
    .tn-metrics { width: 100%; gap: 18px 0; }
    .tn-metric { flex: 1 1 100%; padding: 0; border-left: none; }
    .tn-actions { width: 100%; }
    .tn-actions > button { flex: 1 1 auto; }
}

/* ==========================================================================
   Ressourcen (settings tab). Frameless like its neighbours: the model resources
   as a rail grouped by task, the editor beside it. The right side carries three
   states: the model catalogue, the connection form, and the empty prompt. A dot
   states whether a key is stored — this view runs no connection test.
   ========================================================================== */

.resources-page {
    --rs-inset: var(--ava-flush-inset);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.rs-work {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    height: 600px;
    min-height: 0;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.rs-rail {
    flex: 0 0 250px;
    width: 250px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    background: rgba(var(--ava-rgb-white), 0.02);
    border-right: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.rs-rail-list { flex: 1; min-height: 0; overflow-y: auto; }

.rs-group { display: flex; align-items: center; gap: 8px; padding: 14px 4px 9px; }
.rs-group:first-child { padding-top: 0; }
.rs-group .rs-th { flex: 1; }
.rs-count { font: 600 11px Inter; color: var(--ava-slate-700); }
/* Stands in for a missing row, so its text starts where a row's title does: row padding + dot + gap. */
.rs-none {
    padding: 0 11px 2px calc(11px + 6px + 10px);
    font: 400 11px Inter;
    color: var(--ava-slate-700);
}

.rs-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.rs-nav:hover { background: rgba(var(--ava-rgb-white), 0.04); }
.rs-nav.on { background: rgba(var(--ava-rgb-aqua), 0.10); }

.rs-nav.draft {
    margin-top: 8px;
    border: 1px dashed rgba(var(--ava-rgb-aqua), 0.45);
    background: rgba(var(--ava-rgb-aqua), 0.04);
    cursor: default;
}

.rs-nav.draft:hover { background: rgba(var(--ava-rgb-aqua), 0.04); }
.rs-nav.draft .rs-nav-model { color: var(--ava-aqua); }

/* Green marks "configured", not "reachable" — this view runs no health check. */
.rs-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--ava-green); }

.rs-nav-main { flex: 1; min-width: 0; }

/* Same rail-row rhythm as the connector and role rails: title 700/12.5, sub 400/10. */
.rs-nav-model {
    display: block;
    font: 700 12.5px Inter;
    color: var(--ava-slate-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-nav-sub {
    display: block;
    margin-top: 2px;
    font: 400 10px Inter;
    color: var(--ava-slate-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-badge { flex: 0 0 auto; border-radius: 999px; padding: 3px 9px; font: 600 10px Inter; white-space: nowrap; }

.rs-x {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ava-slate-700);
    cursor: pointer;
    transition: color .14s, background-color .14s;
}

.rs-x:hover { color: var(--ava-coral-soft); background: rgba(var(--ava-rgb-red), 0.12); }
.rs-x:disabled { opacity: .5; cursor: not-allowed; }

.rs-railfoot { flex: 0 0 auto; margin-top: 10px; }

.rs-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 10px;
    border: 1px dashed rgba(var(--ava-rgb-slate), 0.28);
    border-radius: 10px;
    background: transparent;
    font: 600 12px Inter;
    color: var(--ava-slate-500);
    cursor: pointer;
    transition: border-color .14s, color .14s;
}

.rs-add:hover:not(:disabled) { border-color: var(--ava-aqua); color: var(--ava-aqua); }
.rs-add:disabled { opacity: .5; cursor: not-allowed; }

/* The setup guide is a pointer to documentation, so it reads as a link. */
.rs-guide {
    display: block;
    width: 100%;
    margin-top: 8px;
    border: none;
    padding: 4px;
    background: none;
    font: 600 11px Inter;
    color: var(--ava-aqua);
    cursor: pointer;
}

.rs-guide:hover { text-decoration: underline; }

/* ---- Right side ---- */
.rs-main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 18px var(--rs-inset) 22px; }

.rs-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rs-title { flex: 0 1 auto; min-width: 0; font: 800 19px Inter; letter-spacing: -.3px; color: var(--ava-slate-100); overflow-wrap: anywhere; }

.rs-newtag {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--ava-rgb-aqua), 0.12);
    font: 600 10px Inter;
    color: var(--ava-aqua);
    white-space: nowrap;
}

.rs-changemodel {
    flex: 0 0 auto;
    border: none;
    padding: 0;
    background: none;
    font: 600 11.5px Inter;
    color: var(--ava-aqua);
    cursor: pointer;
}

.rs-changemodel:hover:not(:disabled) { text-decoration: underline; }
.rs-changemodel:disabled { opacity: .5; cursor: not-allowed; }

/* The task belongs to the model, so it reads as a pill beside the title — same pill geometry as the
   draft marker next to it. */
.rs-kind {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--ava-rgb-slate), 0.10);
    font: 600 10px Inter;
    color: var(--ava-slate-500);
    white-space: nowrap;
}

.rs-hint { margin-top: 14px; }

/* ---- Model catalogue ---- */
.rs-catalog { margin-top: 14px; }
.rs-cat-group { padding: 14px 0 9px; }
.rs-cat-group:first-child { padding-top: 0; }

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

.rs-tile {
    display: block;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid rgba(var(--ava-rgb-slate), 0.16);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: border-color .14s, background-color .14s;
}

.rs-tile:hover:not(:disabled) { border-color: var(--ava-aqua); background: rgba(var(--ava-rgb-aqua), 0.04); }
.rs-tile.on { border-color: var(--ava-aqua); background: rgba(var(--ava-rgb-aqua), 0.08); }
.rs-tile:disabled { opacity: .5; cursor: not-allowed; }

.rs-tile-head { display: flex; align-items: baseline; gap: 8px; }
.rs-tile-model { flex: 1; min-width: 0; font: 700 13px Inter; color: var(--ava-slate-100); overflow-wrap: anywhere; }
.rs-tile-count { flex: 0 0 auto; font: 600 10px Inter; color: var(--ava-aqua); white-space: nowrap; }
.rs-tile-meta { display: block; margin-top: 6px; font: 600 10.5px Inter; color: var(--ava-slate-500); }

/* ---- Form ---- */
.rs-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
    margin-top: 18px;
}

.rs-field { min-width: 0; }
.rs-field.wide { grid-column: 1 / -1; }

.rs-lbl {
    display: block;
    margin-bottom: 2px;
    font: 600 11.5px/22px Inter;
    color: var(--ava-slate-500);
}

.rs-opt { font-weight: 500; color: var(--ava-slate-700); }

.rs-in {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.28);
    border-radius: 4px 4px 0 0;
    background: transparent;
    padding: 6px 2px;
    font: 500 13px/20px Inter;
    height: 33px;
    box-sizing: border-box;
    color: var(--ava-slate-100);
    outline: none;
    transition: border-color .14s, box-shadow .14s, background-color .14s;
}

.rs-in:hover:not(:read-only) { border-bottom-color: rgba(var(--ava-rgb-slate), 0.5); }
.rs-in::placeholder { font-family: Inter; font-weight: 400; color: var(--ava-slate-700); }
.rs-in:read-only { color: var(--ava-slate-500); border-bottom-style: dashed; }

.rs-in:read-only:focus {
    border-bottom-color: rgba(var(--ava-rgb-slate), 0.28);
    box-shadow: none;
    background: transparent;
}

/* The reveal button sits beside the key, never on top of it. */
.rs-keyrow { display: flex; align-items: flex-end; gap: 10px; }
.rs-keyrow .rs-in { flex: 1; min-width: 0; }

.rs-keytoggle {
    flex: 0 0 auto;
    border: 1px solid rgba(var(--ava-rgb-slate), 0.20);
    border-radius: 9px;
    background: transparent;
    padding: 7px 12px;
    font: 600 11.5px Inter;
    color: var(--ava-slate-500);
    cursor: pointer;
    transition: border-color .14s, color .14s;
}

.rs-keytoggle:hover { border-color: var(--ava-aqua); color: var(--ava-aqua); }

/* ---- Provider tiles ---- */
.rs-providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.rs-ptile {
    display: block;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid rgba(var(--ava-rgb-slate), 0.16);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: border-color .14s, background-color .14s;
}

.rs-ptile:hover:not(:disabled) { border-color: var(--ava-aqua); }
.rs-ptile.on { border-color: var(--ava-aqua); background: rgba(var(--ava-rgb-aqua), 0.08); }
.rs-ptile:disabled { opacity: .5; cursor: not-allowed; }
.rs-ptile-hint { display: block; margin-top: 6px; font: 400 10.5px Inter; color: var(--ava-slate-700); }

.rs-err { margin-top: 16px; }

.rs-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.rs-actions-gap { flex: 1 1 auto; }
.rs-clear { padding: 9px 15px; font-size: 12.5px; }
.rs-actions .s-del { padding: 9px 15px; font-size: 12.5px; }
.rs-actions .s-ok { padding: 9px 18px; font-size: 12.5px; }

.rs-empty { padding: 24px 12px; text-align: center; font: 400 12.5px Inter; color: var(--ava-slate-700); }
.rs-empty.pad { padding: 46px 22px; font-size: 13.5px; }
.rs-empty-title { margin-bottom: 4px; font: 700 14px Inter; color: var(--ava-slate-100); }

/* ---- Narrow layouts ---- */
@media (max-width: 1024px) {
    .resources-page { --rs-inset: 14px; }
    .rs-rail { flex: 0 0 210px; width: 210px; }
    .rs-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 820px) {
    .resources-page { display: block; height: auto; }

    .rs-work { display: block; height: auto; }

    .rs-rail {
        width: auto;
        padding: 12px var(--rs-inset);
        border-right: none;
        border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    }

    .rs-rail-list { overflow: visible; }
    .rs-main { overflow: visible; }

    /* Touch targets. */
    .rs-nav { padding: 11px; }
    .rs-x { width: 30px; height: 30px; }
}

@media (max-width: 560px) {
    .rs-tiles,
    .rs-providers { grid-template-columns: minmax(0, 1fr); }
    .rs-head-meta { margin-left: 0; }
    .rs-actions > button { flex: 1 1 auto; }
    .rs-actions-gap { display: none; }
}

/* ==========================================================================
   Connectoren (settings tab). Frameless like its neighbours: the configured
   instances as a rail, the editor beside it — so choosing an instance and editing
   its fields happen next to each other instead of one below the other. The right
   side carries three states: the type catalogue, the connection form, and the
   schema/agent-prompt tab.
   ========================================================================== */

.connectors-page {
    --cn-inset: var(--ava-flush-inset);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.cn-notice {
    margin: 0 var(--cn-inset);
    padding: 26px 18px;
    text-align: center;
    border: 1px dashed rgba(var(--ava-rgb-slate), 0.24);
    border-radius: 14px;
}

.cn-notice-title { font: 700 14px Inter; color: var(--ava-slate-100); margin-bottom: 4px; }
.cn-notice-text { font: 400 12.5px Inter; color: var(--ava-slate-700); }

/* ---- Work surface ---- */
.cn-work {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    height: 600px;
    min-height: 0;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.cn-rail {
    flex: 0 0 250px;
    width: 250px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    background: rgba(var(--ava-rgb-white), 0.02);
    border-right: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.cn-rail-list { flex: 1; min-height: 0; overflow-y: auto; }
.cn-rail-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 9px; }
.cn-rail-head .cn-th { flex: 1; }
.cn-count { font: 600 11px Inter; color: var(--ava-slate-700); }

.cn-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.cn-nav:hover { background: rgba(var(--ava-rgb-white), 0.04); }
.cn-nav.on { background: rgba(var(--ava-rgb-aqua), 0.10); }

/* The instance being created is not saved yet, so it is dashed and cannot be selected. */
.cn-nav.draft {
    border: 1px dashed rgba(var(--ava-rgb-aqua), 0.45);
    background: rgba(var(--ava-rgb-aqua), 0.04);
    cursor: default;
}

.cn-nav.draft:hover { background: rgba(var(--ava-rgb-aqua), 0.04); }
.cn-nav.draft .cn-nav-title { color: var(--ava-aqua); }

/* Green marks "configured", not "reachable" — this view runs no health check. */
.cn-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--ava-green); }

.cn-nav-main { flex: 1; min-width: 0; }

.cn-nav-title {
    display: block;
    font: 700 12.5px Inter;
    color: var(--ava-slate-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-nav-target {
    display: block;
    margin-top: 2px;
    font: 400 10px Inter;
    color: var(--ava-slate-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-x {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ava-slate-700);
    cursor: pointer;
    transition: color .14s, background-color .14s;
}

.cn-x:hover { color: var(--ava-coral-soft); background: rgba(var(--ava-rgb-red), 0.12); }
.cn-x:disabled { opacity: .5; cursor: not-allowed; }

.cn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    flex: 0 0 auto;
    margin-top: 10px;
    padding: 10px;
    border: 1px dashed rgba(var(--ava-rgb-slate), 0.28);
    border-radius: 10px;
    background: transparent;
    font: 600 12px Inter;
    color: var(--ava-slate-500);
    cursor: pointer;
    transition: border-color .14s, color .14s;
}

.cn-add:hover:not(:disabled) { border-color: var(--ava-aqua); color: var(--ava-aqua); }
.cn-add:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Right side ---- */
.cn-main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 18px var(--cn-inset) 22px; }

.cn-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cn-title { flex: 0 1 auto; min-width: 0; font: 800 19px Inter; letter-spacing: -.3px; color: var(--ava-slate-100); }
.cn-head-meta { flex: 0 0 auto; margin-left: auto; font: 600 11px Inter; color: var(--ava-slate-700); }

/* A draft says so next to its title, so the head alone tells create from edit. */
.cn-newtag {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--ava-rgb-aqua), 0.12);
    font: 600 10px Inter;
    color: var(--ava-aqua);
    white-space: nowrap;
}

/* Changing the type is a step back in the same flow, not a second action next to Save —
   so it reads as a link, not as a button competing with the primary one. */
.cn-changetype {
    flex: 0 0 auto;
    border: none;
    padding: 0;
    background: none;
    font: 600 11.5px Inter;
    color: var(--ava-aqua);
    cursor: pointer;
    transition: color .14s;
}

.cn-changetype:hover:not(:disabled) { text-decoration: underline; }
.cn-changetype:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Type catalogue ---- */
.cn-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.cn-tile {
    display: block;
    text-align: left;
    padding: 13px 15px;
    border: 1px solid rgba(var(--ava-rgb-slate), 0.16);
    border-radius: 13px;
    background: transparent;
    cursor: pointer;
    transition: border-color .14s, background-color .14s;
}

.cn-tile:hover:not(:disabled) { border-color: var(--ava-aqua); background: rgba(var(--ava-rgb-aqua), 0.04); }
.cn-tile.on { border-color: var(--ava-aqua); background: rgba(var(--ava-rgb-aqua), 0.08); }
.cn-tile:disabled { opacity: .5; cursor: not-allowed; }

.cn-tile-head { display: flex; align-items: baseline; gap: 8px; }
.cn-tile-title { flex: 1; min-width: 0; font: 700 13px Inter; color: var(--ava-slate-100); }
.cn-tile-count { flex: 0 0 auto; font: 600 10px Inter; color: var(--ava-aqua); white-space: nowrap; }

.cn-tile-fields {
    display: block;
    margin-top: 7px;
    font: 400 10.5px/1.5 Inter;
    color: var(--ava-slate-700);
    overflow-wrap: anywhere;
}

.cn-tile-meta { display: block; margin-top: 6px; font: 600 10.5px Inter; color: var(--ava-slate-500); }

/* ---- Tabs ---- */
.cn-tabs {
    display: flex;
    gap: 18px;
    margin-top: 14px;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.cn-tab {
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 0 0 9px;
    font: 600 12.5px Inter;
    color: var(--ava-slate-500);
    cursor: pointer;
    transition: color .14s, border-color .14s;
}

.cn-tab:hover { color: var(--ava-slate-100); }
.cn-tab.on { color: var(--ava-slate-100); border-bottom-color: var(--ava-aqua); }

/* ---- Connection form: underline fields, labels in the source's CamelCase ---- */
.cn-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
    margin-top: 18px;
}

.cn-field { min-width: 0; }

/* Fixed label height: the MySQL switch makes its label row taller than a plain label, which would
   drop that field's underline below its neighbour's in the same form row. */
.cn-lbl {
    display: block;
    margin-bottom: 2px;
    font: 600 11.5px/22px Inter;
    color: var(--ava-slate-500);
}

.cn-lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.cn-lbl-row .cn-lbl { margin-bottom: 0; }
.cn-mysql { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font: 600 11px Inter; color: var(--ava-slate-500); }

.cn-in {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.28);
    border-radius: 4px 4px 0 0;
    background: transparent;
    padding: 6px 2px;
    /* Fixed line box: the underline of every field in a row sits at the same height. */
    font: 500 13px/20px Inter;
    height: 33px;
    box-sizing: border-box;
    color: var(--ava-slate-100);
    outline: none;
    transition: border-color .14s, box-shadow .14s, background-color .14s;
}

.cn-in:hover { border-bottom-color: rgba(var(--ava-rgb-slate), 0.5); }
.cn-in::placeholder { font-family: Inter; font-weight: 400; color: var(--ava-slate-700); }

/* The prefix is shown, never typed — it belongs to the value, not to the input. */
.cn-prefixed { display: flex; align-items: baseline; gap: 4px; }
.cn-prefix { flex: 0 0 auto; font: 600 12px Inter; color: var(--ava-slate-700); }

.cn-err { margin-top: 16px; }

.cn-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.cn-actions-gap { flex: 1 1 auto; }
.cn-clear { padding: 9px 15px; font-size: 12.5px; }
.cn-actions .s-del { padding: 9px 15px; font-size: 12.5px; }
.cn-actions .s-ok { padding: 9px 18px; font-size: 12.5px; }

.cn-empty { padding: 24px 12px; text-align: center; font: 400 12.5px Inter; color: var(--ava-slate-700); }
.cn-empty.pad { padding: 46px 22px; font-size: 13.5px; }

/* ---- Narrow layouts ---- */
@media (max-width: 1024px) {
    .connectors-page { --cn-inset: 14px; }
    .cn-rail { flex: 0 0 210px; width: 210px; }
    .cn-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Below this width the rail moves above the editor and the tab scrolls as one page. */
@media (max-width: 820px) {
    .connectors-page { display: block; height: auto; }

    .cn-work { display: block; height: auto; }

    .cn-rail {
        width: auto;
        padding: 12px var(--cn-inset);
        border-right: none;
        border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    }

    .cn-rail-list { overflow: visible; }
    .cn-main { overflow: visible; }

    /* Touch targets. */
    .cn-nav { padding: 11px; }
    .cn-x { width: 30px; height: 30px; }
    .cn-mysql .switch.sm { width: 38px; height: 22px; }
    .cn-mysql .switch.sm .knob { top: 3px; left: 3px; width: 16px; height: 16px; }
    .cn-mysql .switch.sm.on .knob { left: 19px; }
}

@media (max-width: 560px) {
    .cn-catalog { grid-template-columns: minmax(0, 1fr); }
    .cn-actions > button { flex: 1 1 auto; }
    .cn-actions-gap { display: none; }
}

/* ==========================================================================
   Rollen & Berechtigungen (settings tab). Frameless like its neighbours: a status
   head, a role rail carrying each role's rights balance, and one rights table for
   all four resource classes — the classes are a filter, not four separate views,
   so a role can be read in one place. Only the rail and the table body scroll.
   ========================================================================== */

/* Same reason as the user tab: the rail borders the table, not the scroll container,
   so the inset must not collapse when the container takes over. */
.roles-page {
    --rl-inset: var(--ava-flush-inset);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ---- Head: the permission check states its consequence, not just its state ---- */
.rl-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding: 2px var(--rl-inset) 16px;
}

.rl-hero-main { flex: 1 1 200px; min-width: 0; }
.rl-perm-title { font: 700 13px Inter; color: var(--ava-slate-100); }
.rl-perm-state { margin-top: 1px; font: 400 11.5px Inter; }
.rl-perm-state.on { color: var(--ava-green); }
.rl-perm-state.off { color: var(--ava-warning); }

.rl-new { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 10px 18px; }

/* ---- Work surface: role rail left, rights editor right ---- */
.rl-work {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    height: 640px;
    min-height: 0;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.rl-rail {
    flex: 0 0 250px;
    width: 250px;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 10px;
    background: rgba(var(--ava-rgb-white), 0.02);
    border-right: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.rl-rail-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 9px; }
.rl-rail-head .rl-th { flex: 1; }
.rl-count { font: 600 11px Inter; color: var(--ava-slate-700); }

/* A role row states its rights balance, so the rail answers "who may what" on its own. */
.rl-nav {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.rl-nav:hover { background: rgba(var(--ava-rgb-white), 0.04); }
.rl-nav.on { background: rgba(var(--ava-rgb-aqua), 0.10); }

.rl-nav-line { display: flex; align-items: center; gap: 6px; min-width: 0; }

.rl-nav-name {
    min-width: 0;
    font: 700 12.5px Inter;
    color: var(--ava-slate-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rl-nav-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }

.rl-auto {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--ava-rgb-warning), 0.14);
    font: 600 10px Inter;
    color: var(--ava-warning);
    white-space: nowrap;
}

.rl-bar {
    width: 44px;
    height: 4px;
    flex: 0 0 auto;
    border-radius: 99px;
    background: rgba(var(--ava-rgb-slate), 0.14);
    overflow: hidden;
}

.rl-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ava-aqua); }
.rl-balance { font: 600 10px Inter; color: var(--ava-slate-700); white-space: nowrap; }

/* ---- Editor side ---- */
.rl-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.rl-ehead { flex: 0 0 auto; padding: 18px var(--rl-inset) 14px; }
.rl-erow { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.rl-erow2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 14px; }

.rl-field { min-width: 0; display: block; }
.rl-field.name { flex: 1 1 180px; max-width: 320px; }
.rl-field .rl-th { display: block; margin-bottom: 1px; }
.rl-opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ava-slate-700); }
.rl-meta { margin-left: auto; margin-bottom: 7px; font: 600 11px Inter; color: var(--ava-slate-700); }

/* Underline field: the line carries hover, focus and error, like the other frameless tabs. */
.rl-in {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.28);
    border-radius: 4px 4px 0 0;
    background: transparent;
    padding: 5px 2px;
    font: 500 13px Inter;
    color: var(--ava-slate-100);
    outline: none;
    transition: border-color .14s, box-shadow .14s, background-color .14s;
}

.rl-in.lg { font: 800 19px Inter; letter-spacing: -.3px; }
.rl-in:hover:not(:read-only) { border-bottom-color: rgba(var(--ava-rgb-slate), 0.5); }
.rl-in::placeholder { color: var(--ava-slate-700); font-weight: 400; }

/* A locked name is stated as read-only, not as disabled: it is information, not a dead control.
   Focusing it must not promise an edit, so it keeps the dashed line. */
.rl-in:read-only { color: var(--ava-slate-500); border-bottom-style: dashed; }

.rl-in:read-only:focus {
    border-bottom-color: rgba(var(--ava-rgb-slate), 0.28);
    box-shadow: none;
    background: transparent;
}

.rl-autos { display: flex; align-items: flex-end; justify-content: flex-end; gap: 20px; flex-wrap: wrap; }
.rl-sw { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding-bottom: 3px; }
.rl-sw-label { font: 600 11.5px Inter; color: var(--ava-slate-500); }

/* ---- Filter bar: the former sub-tabs, plus the two levers that matter at scale ---- */
.rl-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding: 0 var(--rl-inset) 12px;
}

/* Shrinkable on purpose: a rigid segment control would push the last class filter out of
   the panel on a narrow surface instead of wrapping its buttons onto a second line. */
.rl-seg {
    display: flex;
    gap: 3px;
    flex: 0 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    padding: 3px;
    border-radius: 10px;
    background: rgba(var(--ava-rgb-slate), 0.10);
}

.rl-seg .seg { flex: 0 0 auto; padding: 5px 11px; font-size: 11.5px; white-space: nowrap; }
.rl-seg .seg i { font-style: normal; opacity: .55; margin-left: 6px; }

.rl-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 150px;
    max-width: 250px;
    min-width: 0;
    padding: 6px 2px;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.28);
    color: var(--ava-slate-700);
    transition: border-color .14s;
}

.rl-search:focus-within { border-bottom-color: var(--ava-aqua); }
.rl-search svg { flex: 0 0 auto; }

.rl-search-in {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font: 500 12px Inter;
    color: var(--ava-slate-100);
}

.rl-search-in::placeholder { color: var(--ava-slate-700); font-weight: 400; }

/* ---- Rights table ---- */
.rl-thead,
.rl-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 132px;
    gap: 14px;
    align-items: center;
}

.rl-thead {
    flex: 0 0 auto;
    padding: 8px var(--rl-inset);
    background: rgba(var(--ava-rgb-white), 0.022);
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.rl-rows { flex: 1; min-height: 0; overflow-y: auto; }

.rl-row {
    padding: 9px var(--rl-inset);
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.08);
}

/* A granted row is tinted, so the state of a long list reads at a glance. */
.rl-row.on { background: rgba(var(--ava-rgb-aqua), 0.05); }

.rl-cb {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    padding: 0;
    border: 1.5px solid rgba(var(--ava-rgb-slate), 0.28);
    border-radius: 5px;
    background: transparent;
    color: var(--ava-on-accent);
    cursor: pointer;
    transition: border-color .14s, background-color .14s;
}

.rl-cb:hover:not(:disabled) { border-color: var(--ava-aqua); }
.rl-cb.on { background: var(--ava-aqua); border-color: var(--ava-aqua); }
.rl-cb svg { opacity: 0; transition: opacity .12s; }
.rl-cb.on svg { opacity: 1; }
.rl-cb:disabled { opacity: .5; cursor: not-allowed; }

.rl-res {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font: 500 12.5px Inter;
    color: var(--ava-slate-100);
    overflow-wrap: anywhere;
}

.rl-class,
.rl-gone {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font: 600 10px Inter;
    white-space: nowrap;
}

.rl-class { background: rgba(var(--ava-rgb-slate), 0.10); color: var(--ava-slate-500); }
.rl-gone { background: rgba(var(--ava-rgb-warning), 0.14); color: var(--ava-warning); }

.rl-empty { padding: 24px 12px; text-align: center; font: 400 12.5px Inter; color: var(--ava-slate-700); }
.rl-empty.pad { padding: 40px 22px; font-size: 13.5px; }

/* ---- Footer: the change state is part of the surface, not a surprise on save ---- */
.rl-err { flex: 0 0 auto; padding: 10px var(--rl-inset) 0; }

.rl-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding: 12px var(--rl-inset);
    background: rgba(var(--ava-rgb-white), 0.022);
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.rl-dirty { flex: 1 1 auto; min-width: 0; font: 600 11.5px Inter; color: var(--ava-slate-700); }
.rl-dirty.on { color: var(--ava-warning); }
.rl-foot .s-del { padding: 8px 14px; font-size: 12.5px; }
.rl-discard { padding: 8px 14px; font-size: 12px; }
.rl-foot .s-ok { padding: 9px 18px; font-size: 12.5px; }

/* ---- Narrow layouts ---- */
@media (max-width: 1024px) {
    .roles-page { --rl-inset: 14px; }
    .rl-rail { flex: 0 0 210px; width: 210px; }
    .rl-erow2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .rl-autos { justify-content: flex-start; }
}

/* Below this width the rail moves above the editor and the tab scrolls as one page:
   a scroll box inside a scrolling page fights the finger on a phone. */
@media (max-width: 820px) {
    .roles-page { display: block; height: auto; }

    .rl-work { display: block; height: auto; }

    .rl-rail {
        width: auto;
        max-height: none;
        overflow: visible;
        padding: 12px var(--rl-inset);
        border-right: none;
        border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    }

    .rl-rows { max-height: none; overflow: visible; }

    /* Touch targets. */
    .rl-nav { padding: 11px; }
    .rl-row { padding: 12px var(--rl-inset); }
    .rl-cb { width: 20px; height: 20px; }
    .rl-filters .switch.sm,
    .rl-autos .switch.sm { width: 38px; height: 22px; }
    .rl-filters .switch.sm .knob,
    .rl-autos .switch.sm .knob { top: 3px; left: 3px; width: 16px; height: 16px; }
    .rl-filters .switch.sm.on .knob,
    .rl-autos .switch.sm.on .knob { left: 19px; }
}

@media (max-width: 560px) {
    .rl-new { flex: 1 1 100%; justify-content: center; }
    .rl-search { flex: 1 1 100%; max-width: none; }
    .rl-thead { display: none; }

    /* Without column heads the class chip carries the meaning, so the row stacks. */
    .rl-row { grid-template-columns: 20px minmax(0, 1fr); row-gap: 6px; }
    .rl-row > :last-child { grid-column: 2; }
    .rl-foot .s-del,
    .rl-discard,
    .rl-foot .s-ok { flex: 1 1 auto; }
}

/* ==========================================================================
   Benutzer (settings tab). Frameless like the Hub and the Mandant tab: a metrics
   head over one work surface that splits into the user table and the editor
   column, separated by a vertical hairline. The table carries the whole state of
   a user per row, so the editor is for changing it, not for reading it. Only the
   row area and the role list scroll — the surface keeps its height.
   ========================================================================== */

/* The table's inner edge borders the editor's hairline, not the scroll container, so it
   cannot rely on the container inset the way a full-width band does: this tab keeps its
   own inset, which never collapses to zero. Head, column heads and rows all share it. */
/* The tab can only fill the panel if every link above it has a definite height, and one link
   has none: `.settings-modal-content` is a block scroll box, so the `flex: 1` on its
   `.settings-content` child has no flex container to resolve against and the wrapper falls back
   to its content height. Making the scroll box a flex column — for this tab only — is what lets
   the split tab panel's `height: 100%` reach the work surface. */
@media (min-width: 1025px) {
    .settings-modal-content:has(.settings-tabpanel.is-active .users-page),
    .settings-modal-content:has(.settings-tabpanel.is-active .roles-page),
    .settings-modal-content:has(.settings-tabpanel.is-active .connectors-page),
    .settings-modal-content:has(.settings-tabpanel.is-active .resources-page) {
        display: flex;
        flex-direction: column;
    }
}

/* The tab fills the panel so the table and the editor run to the bottom edge instead of
   ending in a boxed-off strip. The head keeps its height, the work surface takes the rest. */
.users-page {
    --us-inset: var(--ava-flush-inset);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ---- Head: licence donut, the two counts, search, invite ---- */
.us-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    padding: 2px var(--us-inset) 20px;
}

.us-metric { flex: 0 0 auto; padding-left: 22px; border-left: 1px solid rgba(var(--ava-rgb-slate), 0.12); }
.us-num { font: 800 20px Inter; letter-spacing: -.4px; color: var(--ava-slate-100); margin-top: 4px; }

/* Search is an underline field: no box competes with the table hairlines. */
.us-search {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 170px;
    max-width: 260px;
    min-width: 0;
    padding: 8px 2px;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.28);
    color: var(--ava-slate-700);
    transition: border-color .14s;
}

.us-search:focus-within { border-bottom-color: var(--ava-aqua); }
.us-search svg { flex: 0 0 auto; }

.us-search-in {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font: 500 12.5px Inter;
    color: var(--ava-slate-100);
}

.us-search-in::placeholder { color: var(--ava-slate-700); font-weight: 400; }
.us-search-in:disabled { cursor: not-allowed; }

.us-invite { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 10px 18px; }

/* ---- Work surface: table left, editor right, one hairline between ----
   `height` is the basis, not the outcome: where the settings panel hands down a definite
   height (the split tab panel does, from 1025px up) `flex-grow` stretches the surface to
   the bottom of the modal; where it does not, the basis keeps it at a usable size. It may
   also shrink, so a short window scrolls the row area instead of the whole tab. */
.us-work {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    height: 566px;
    min-height: 0;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.us-list { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.us-thead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 112px minmax(0, 1fr);
    gap: 16px;
    flex: 0 0 auto;
    padding: 9px var(--us-inset);
    background: rgba(var(--ava-rgb-white), 0.022);
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.us-rows { flex: 1; min-height: 0; overflow-y: auto; }

/* A row is a button so it stays keyboard-reachable; its cells are the same grid as
   the head. Background states are not transitioned — row paint can stick. */
.us-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 112px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 12px var(--us-inset);
    border: none;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.08);
    background: transparent;
    font: 400 13px Inter;
    text-align: left;
    cursor: pointer;
}

.us-row:hover { background: rgba(var(--ava-rgb-white), 0.04); }
.us-row.on { background: rgba(var(--ava-rgb-aqua), 0.07); }

.us-c-user { display: flex; align-items: center; gap: 11px; min-width: 0; }

.us-av {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 11px Inter;
    background: rgba(var(--ava-rgb-slate), 0.10);
    color: var(--ava-slate-500);
}

/* The signed-in account is the one avatar that carries the accent. */
.us-av.me {
    background: linear-gradient(135deg, var(--ava-aqua), var(--ava-aqua-deep));
    color: var(--ava-on-accent);
}

.us-av.lg { width: 36px; height: 36px; font-size: 13px; }

.us-ident { min-width: 0; }
.us-nameline { display: flex; align-items: center; gap: 8px; min-width: 0; }

.us-name,
.us-ename {
    min-width: 0;
    color: var(--ava-slate-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.us-name { font: 700 13.5px Inter; }
.us-ename { font: 700 15px Inter; }

.us-mail {
    display: block;
    margin-top: 1px;
    font: 400 11px Inter;
    color: var(--ava-slate-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.us-you,
.us-off {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 3px 8px;
    font: 700 9.5px Inter;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.us-you { color: var(--ava-aqua); background: rgba(var(--ava-rgb-aqua), 0.10); }
.us-off { color: var(--ava-slate-700); background: rgba(var(--ava-rgb-slate), 0.12); }

.us-c-perm { font: 600 12.5px Inter; color: var(--ava-slate-500); }
.us-c-perm.admin { color: var(--ava-aqua); }

.us-c-lic {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 600 12px Inter;
    color: var(--ava-slate-700);
    white-space: nowrap;
}

.us-c-lic.on { color: var(--ava-green); }
.us-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }

.us-c-roles { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }

.us-rl {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--ava-rgb-slate), 0.10);
    font: 600 11px Inter;
    color: var(--ava-slate-500);
    white-space: nowrap;
}

.us-none { font: 400 12px Inter; color: var(--ava-slate-700); }

.us-empty { padding: 46px 12px; text-align: center; font: 400 13.5px Inter; color: var(--ava-slate-700); }
.us-empty.sm { padding: 14px 2px; text-align: left; font-size: 12px; }

/* ---- Editor column ---- */
.us-editor {
    flex: 0 0 350px;
    width: 350px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(var(--ava-rgb-white), 0.02);
    border-left: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.us-ehead {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.us-ehead .us-ident { flex: 1; }

.us-x {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--ava-rgb-slate), 0.16);
    border-radius: 7px;
    background: transparent;
    color: var(--ava-slate-500);
    cursor: pointer;
    transition: border-color .14s, color .14s;
}

.us-x:hover { border-color: var(--ava-aqua); color: var(--ava-aqua); }
.us-x:disabled { opacity: .5; cursor: not-allowed; }

/* The role list absorbs whatever height is left, so nothing here scrolls while the panel has
   room. Only when the window is too short for the fixed rows does the body itself scroll —
   which keeps the footer reachable instead of letting the content run under it. */
.us-ebody {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 18px 22px;
}

.us-erow { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding-bottom: 14px; }
.us-erow.topline { padding: 14px 0; border-top: 1px solid rgba(var(--ava-rgb-slate), 0.08); }
.us-elabel { flex: 1; min-width: 0; font: 600 12.5px Inter; color: var(--ava-slate-500); }

.us-seg {
    display: flex;
    gap: 3px;
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 9px;
    background: rgba(var(--ava-rgb-slate), 0.10);
}

.us-seg .seg { flex: 0 0 auto; padding: 5px 12px; font-size: 11.5px; }

.us-esect {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 18px 0 10px;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.08);
}

.us-emeta { font: 600 11.5px Inter; color: var(--ava-slate-700); white-space: nowrap; }

/* Assigned roles stay above the scroll area, so the state never scrolls out of sight. */
.us-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }

.us-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px 4px 11px;
    border-radius: 999px;
    background: rgba(var(--ava-rgb-aqua), 0.10);
    font: 600 11.5px Inter;
    color: var(--ava-aqua);
}

.us-chipx {
    display: grid;
    place-items: center;
    border: none;
    padding: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: color .14s;
}

.us-chipx:hover { color: var(--ava-coral-soft); }
.us-chipx:disabled { opacity: .5; cursor: not-allowed; }

.us-rsearch { flex: 0 0 auto; width: 100%; max-width: none; margin-top: 14px; padding: 7px 2px; }

.us-arows { flex: 1; min-height: 80px; overflow-y: auto; margin-top: 2px; }

.us-arow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 2px;
    border: none;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.08);
    background: transparent;
    color: var(--ava-aqua);
    text-align: left;
    cursor: pointer;
}

.us-arow:hover { background: rgba(var(--ava-rgb-white), 0.04); }
.us-arow:disabled { opacity: .5; cursor: not-allowed; }
.us-aname { min-width: 0; font: 500 12.5px Inter; color: var(--ava-slate-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-arow svg { flex: 0 0 auto; }

.us-uid {
    flex: 0 0 auto;
    margin-top: 14px;
    font: 400 10.5px Inter;
    color: var(--ava-slate-700);
    overflow-wrap: anywhere;
}

.us-eerr { padding: 0 22px 12px; }

.us-efoot {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    padding: 14px 22px;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.us-efoot > button { flex: 1; padding: 10px 12px; }

/* ---- Narrow layouts: the split survives as long as the identity column stays
       readable, so the columns give way before the layout does ---- */
@media (max-width: 1180px) {
    .us-editor { flex: 0 0 310px; width: 310px; }
    .us-thead,
    .us-row { grid-template-columns: minmax(0, 1fr) 92px 112px minmax(0, 1fr); gap: 12px; }
}

/* Four columns beside the editor would starve the name and the roles. The roles take
   their own line under the identity instead, which keeps the split intact. The licence
   column keeps its width — "nicht lizenziert" does not wrap. */
@media (max-width: 1024px) {
    /* The scroll container supplies the outer inset here, but the divider still needs
       clearance — so the tab's own inset takes over instead of collapsing with it. */
    .users-page { --us-inset: 14px; }

    .us-thead,
    .us-row { grid-template-columns: minmax(0, 1fr) 92px 112px; }
    .us-thead .us-th:last-child { display: none; }
    .us-row { row-gap: 8px; }
    .us-c-roles { grid-column: 1 / -1; }
}

/* Below this width the side-by-side split stops working: the editor becomes a block
   under the list, each row stacks its cells, and the whole tab scrolls as one page —
   a scroll box inside a scrolling page fights the finger on a phone. */
@media (max-width: 820px) {
    /* One scroll context: the tab flows at its content height and the page scrolls. */
    .users-page { display: block; height: auto; }
    .us-work { display: block; height: auto; }

    .us-thead { display: none; }
    .us-rows { max-height: none; overflow: visible; }

    .us-row {
        display: flex;
        flex-wrap: wrap;
        gap: 7px 14px;
        padding: 13px var(--us-inset);
    }

    .us-c-user { flex: 1 1 100%; }
    .us-c-perm,
    .us-c-lic { flex: 0 0 auto; }
    .us-c-roles { flex: 1 1 100%; }

    .us-editor {
        flex: none;
        width: auto;
        border-left: none;
        border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    }

    .us-ehead,
    .us-ebody,
    .us-efoot { padding-left: var(--us-inset); padding-right: var(--us-inset); }
    .us-eerr { padding-left: var(--us-inset); padding-right: var(--us-inset); }

    /* The role picker keeps its own bounded box: it has a search field of its own, and an
       unbounded list of tenant roles would push the footer out of reach. */
    .us-arows { max-height: 230px; }

    /* Touch targets. */
    .us-arow { padding: 11px 2px; }
    .us-x { width: 36px; height: 36px; }
    .us-erow .switch.sm { width: 38px; height: 22px; }
    .us-erow .switch.sm .knob { top: 3px; left: 3px; width: 16px; height: 16px; }
    .us-erow .switch.sm.on .knob { left: 19px; }
}

/* On a phone the head stacks: the metrics share a row, search and invite take their own. */
@media (max-width: 560px) {
    .us-hero { gap: 16px 18px; }
    .us-metric { padding-left: 0; border-left: none; }
    .us-search { flex: 1 1 100%; max-width: none; }
    .us-invite { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   API Hub (settings tab). Renders frameless on the settings surface: a metrics
   head over a column-aligned table that runs the full content width. Structure
   comes from aligned columns, hairlines and typographic hierarchy — no card
   frames. The editor and wizard helpers follow further below.
   ========================================================================== */

/* ---- Head: title and subtitle left, the metric columns right ---- */
.apihub-hero {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    flex-wrap: wrap;
    padding: 0 var(--ava-flush-inset) 22px;
}

.apihub-hero-main { flex: 1 1 280px; min-width: 0; }

.apihub-title { font: 800 20px Inter; letter-spacing: -.3px; color: var(--ava-slate-100); }

.apihub-sub {
    font: 400 13px/1.6 Inter;
    color: var(--ava-slate-500);
    max-width: 520px;
    margin-top: 5px;
}

.apihub-metrics { display: flex; flex: 0 0 auto; flex-wrap: wrap; }

.apihub-metric { padding: 0 24px; border-left: 1px solid rgba(var(--ava-rgb-slate), 0.12); }
.apihub-metric:first-child { padding-left: 0; border-left: none; }
.apihub-metric:last-child { padding-right: 0; }

/* Column label, reused by the table headers and the configuration tiles. */
.apihub-th {
    font: 700 10.5px Inter;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ava-slate-700);
}

/* ---- Licence donut: a conic arc whose centre is masked away, so the hole
       stays transparent on whatever surface the Hub is rendered on. The mask
       gradient is a stencil, not a colour. ---- */
.apihub-lic { display: flex; align-items: center; gap: 14px; }

.apihub-ring {
    position: relative;
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.apihub-ring .arc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 26px, #000 27px);
    mask: radial-gradient(circle at 50% 50%, transparent 26px, #000 27px);
}

.apihub-ring .val { position: relative; line-height: 1; text-align: center; }

.apihub-ring b { display: block; font: 800 17px Inter; letter-spacing: -.3px; color: var(--ava-slate-100); }
.apihub-ring i { display: block; font: 600 9.5px Inter; font-style: normal; color: var(--ava-slate-700); margin-top: 2px; }

.apihub-lic-free { font: 700 13px Inter; color: var(--ava-slate-100); margin-top: 5px; }
.apihub-lic-step { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.apihub-lic-note { font: 400 11px Inter; color: var(--ava-slate-700); }
.apihub-lic-warn { font: 700 11px Inter; color: var(--ava-warning); margin-top: 5px; }

.apihub-stepbtn {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1px solid rgba(var(--ava-rgb-slate), 0.18);
    background: transparent;
    color: var(--ava-slate-500);
    font: 700 13px Inter;
    line-height: 1;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    padding: 0;
    transition: border-color .14s, color .14s;
}

.apihub-stepbtn:hover:not(:disabled) { border-color: var(--ava-aqua); color: var(--ava-aqua); }
.apihub-stepbtn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Connected-APIs metric ---- */
.apihub-count { font: 800 24px Inter; letter-spacing: -.5px; color: var(--ava-slate-100); margin-top: 4px; }

.apihub-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

.apihub-legend > span {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 600 11.5px Inter;
    color: var(--ava-slate-500);
}

.apihub-legend > span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: rgba(var(--ava-rgb-slate), 0.45);
}

.apihub-legend > span.sys::before { background: var(--ava-aqua); }

/* ---- Status dot and label, shared by the head and the table rows ---- */
.apihub-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(var(--ava-rgb-slate), 0.45);
}

.apihub-dot.on { background: var(--ava-green); }

.apihub-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 600 12px Inter;
    color: var(--ava-slate-700);
}

.apihub-state.on { color: var(--ava-green); }
.apihub-state .apihub-dot { width: 6px; height: 6px; }

/* ---- Type chip ---- */
.apihub-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font: 600 10.5px Inter;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--ava-rgb-slate), 0.12);
    color: var(--ava-slate-500);
}

.apihub-chip.sys { background: rgba(var(--ava-rgb-aqua), 0.10); color: var(--ava-aqua); }
.apihub-chip.type { background: rgba(var(--ava-rgb-slate), 0.12); color: var(--ava-slate-500); }

/* ---- The API table: header strip, section rows, API rows ---- */
.apihub-thead,
.apihub-arow {
    display: grid;
    grid-template-columns: 1fr 92px 190px 110px 34px;
    gap: 16px;
    align-items: center;
    padding: 9px var(--ava-flush-inset);
}

.apihub-thead {
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    background: rgba(var(--ava-rgb-white), 0.02);
}

.apihub-sect { display: flex; align-items: center; gap: 12px; padding: 16px var(--ava-flush-inset) 7px; }

.apihub-sect-label {
    flex: 0 0 auto;
    font: 700 10.5px Inter;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--ava-aqua);
}

.apihub-sect-hint { flex: 1; min-width: 0; font: 400 12px/1.5 Inter; color: var(--ava-slate-700); }

.apihub-arow {
    padding-top: 13px;
    padding-bottom: 13px;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.08);
    cursor: pointer;
    transition: background .14s;
}

.apihub-arow:hover { background: rgba(var(--ava-rgb-white), 0.04); }
.apihub-arow:focus-visible { outline: 2px solid var(--ava-aqua); outline-offset: -2px; }

.apihub-arow .c-api { display: flex; align-items: center; gap: 11px; min-width: 0; }
.apihub-arow .c-ep,
.apihub-arow .c-status { display: flex; align-items: center; gap: 9px; }

.apihub-badge {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font: 800 12px Inter;
    background: rgba(var(--ava-rgb-slate), 0.12);
    color: var(--ava-slate-500);
}

.apihub-badge.sys { background: rgba(var(--ava-rgb-aqua), 0.11); color: var(--ava-aqua); }

.apihub-name {
    display: block;
    font: 700 13.5px Inter;
    color: var(--ava-slate-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apihub-meta {
    display: block;
    font: 400 11.5px Inter;
    color: var(--ava-slate-700);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apihub-bar {
    width: 64px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 99px;
    background: rgba(var(--ava-rgb-slate), 0.16);
    overflow: hidden;
}

.apihub-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ava-aqua-deep), var(--ava-aqua));
    transition: width .25s ease;
}

.apihub-epcount { font: 600 12px Inter; color: var(--ava-slate-500); }
.apihub-chev { color: var(--ava-slate-700); font-size: 15px; text-align: right; }

.apihub-empty {
    margin: 4px var(--ava-flush-inset) 18px;
    padding: 20px 16px;
    text-align: center;
    border: 1px dashed rgba(var(--ava-rgb-slate), 0.18);
    border-radius: 12px;
    font: 400 12.5px Inter;
    color: var(--ava-slate-700);
}

.apihub-foot {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 8px;
    padding: 16px var(--ava-flush-inset) 20px;
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    background: rgba(var(--ava-rgb-white), 0.02);
    font: 400 12px/1.55 Inter;
    color: var(--ava-slate-500);
}

.apihub-foot svg { flex: 0 0 auto; margin-top: 2px; color: var(--ava-aqua); }

.apihub-banner {
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(var(--ava-rgb-aqua), 0.06);
    border: 1px solid rgba(var(--ava-rgb-aqua), 0.28);
    font: 500 12.5px Inter;
    color: var(--ava-slate-100);
}

/* Inside the panel a banner keeps clear of the flush-running table edges. */
.apihub-banner.inset { margin: 0 var(--ava-flush-inset) 18px; }

.apihub-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--ava-aqua);
    font: 600 12px Inter;
    padding: 0;
    cursor: pointer;
}

.apihub-back:hover { color: var(--ava-slate-100); }

/* ---- Detail head: identity line plus the configuration tiles ---- */
.apihub-dhead {
    padding: 0 var(--ava-flush-inset) 18px;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
}

.apihub-dtitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.apihub-dtitle .apihub-badge { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
.apihub-dname { font: 800 19px Inter; letter-spacing: -.3px; color: var(--ava-slate-100); }
.apihub-dactions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Configuration values sit side by side, separated by hairline fugues only. */
.apihub-cfg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
}

.apihub-cfg > div {
    padding: 2px 0 2px 18px;
    min-width: 0;
    border-left: 1px solid rgba(var(--ava-rgb-slate), 0.14);
}

.apihub-cfg > div:first-child { padding-left: 0; border-left: none; }
.apihub-cfg .v { font: 600 12px Inter; color: var(--ava-slate-100); margin-top: 5px; }
.apihub-cfg .t { font: 400 12px/1.55 Inter; color: var(--ava-slate-500); margin-top: 5px; }
.apihub-cfg .ok { color: var(--ava-green); }

.apihub-mono {
    display: block;
    font: 400 12px/1.5 Inter;
    color: var(--ava-slate-100);
    margin-top: 4px;
    overflow-wrap: anywhere;
}

/* ---- Endpoint table ---- */
.apihub-ephead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px var(--ava-flush-inset) 10px; }

.apihub-ephint {
    font: 400 12px/1.55 Inter;
    color: var(--ava-slate-700);
    padding: 0 var(--ava-flush-inset) 12px;
    max-width: 660px;
}

.apihub-epthead,
.apihub-eprow {
    display: grid;
    grid-template-columns: 64px 1fr 1.1fr 118px 70px;
    gap: 16px;
    align-items: center;
    padding: 9px var(--ava-flush-inset);
}

.apihub-epthead {
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    background: rgba(var(--ava-rgb-white), 0.02);
}

.apihub-eprow {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.07);
    transition: background .14s;
}

.apihub-eprow:hover { background: rgba(var(--ava-rgb-white), 0.03); }
.apihub-eprow .c-name { min-width: 0; }
.apihub-eprow .c-name .nm { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Paths are read from the definitions after the table is on screen; until then a faint marker. */
.apihub-eprow .c-path {
    min-width: 0;
    font: 400 11.5px/1.45 Inter;
    color: var(--ava-slate-500);
    overflow-wrap: anywhere;
}

.apihub-eprow .c-path .wait { opacity: .4; }
.apihub-eprow .apihub-name { font-size: 13px; }
.apihub-eprow .c-status { display: flex; align-items: center; gap: 9px; }
.apihub-eprow .c-act { display: flex; gap: 6px; justify-content: flex-end; }
.apihub-eprow .apihub-state { font-size: 11.5px; }

/* Method badge: one hue per verb, the pairs are tokens in ava-theme.css. */
.apihub-m {
    display: inline-grid;
    place-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    font: 700 10px Inter;
    letter-spacing: .4px;
    background: rgba(var(--ava-rgb-slate), 0.12);
    color: var(--ava-slate-500);
}

.apihub-m.get { background: var(--ava-method-get-bg); color: var(--ava-method-get-fg); }
.apihub-m.post { background: var(--ava-method-post-bg); color: var(--ava-method-post-fg); }
.apihub-m.put { background: var(--ava-method-put-bg); color: var(--ava-method-put-fg); }
.apihub-m.patch { background: var(--ava-method-patch-bg); color: var(--ava-method-patch-fg); }
.apihub-m.delete { background: var(--ava-method-delete-bg); color: var(--ava-method-delete-fg); }

/* Endpoint row action icons: neutral by default, the delete variant turns destructive on hover. */
.apihub-ep-act {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 7px;
    border: 1px solid rgba(var(--ava-rgb-slate), 0.18);
    background: transparent;
    color: var(--ava-slate-500);
    cursor: pointer;
    transition: border-color .14s, color .14s;
}

.apihub-ep-act:hover { border-color: var(--ava-aqua); color: var(--ava-aqua); }
.apihub-ep-act:disabled { opacity: .5; cursor: not-allowed; }
.apihub-ep-act.del:hover { border-color: var(--ava-coral); color: var(--ava-coral-soft); }

/* ---- Narrow layouts: the header strips drop out and each row folds in two ---- */
@media (max-width: 900px) {
    .apihub-thead,
    .apihub-epthead { display: none; }

    /* The section head holds a label, a hint and up to two actions. Without wrapping, the hint is
       squeezed to nothing and the actions push past the panel edge. */
    .apihub-sect { flex-wrap: wrap; row-gap: 10px; }
    .apihub-sect-hint { flex: 1 1 100%; }

    .apihub-cfg { grid-template-columns: 1fr; }
    .apihub-cfg > div { border-left: none; border-top: 1px solid rgba(var(--ava-rgb-slate), 0.14); padding-left: 0; }
    .apihub-cfg > div:first-child { border-top: none; }

    .apihub-arow { grid-template-columns: 1fr auto auto; row-gap: 10px; }
    .apihub-arow .c-api { grid-area: 1 / 1 / 2 / 4; }
    .apihub-arow .c-ep { grid-area: 2 / 1 / 3 / 2; }
    .apihub-arow .c-type { grid-area: 2 / 2 / 3 / 3; }
    .apihub-arow .c-status { grid-area: 2 / 3 / 3 / 4; }
    .apihub-arow .c-chev { display: none; }

    .apihub-eprow { grid-template-columns: auto 1fr auto; row-gap: 8px; }
    .apihub-eprow .c-m { grid-area: 1 / 1 / 2 / 2; }
    .apihub-eprow .c-name { grid-area: 1 / 2 / 2 / 4; }
    .apihub-eprow .c-path { grid-area: 2 / 1 / 3 / 4; }
    .apihub-eprow .c-status { grid-area: 3 / 1 / 4 / 3; }
    .apihub-eprow .c-act { grid-area: 3 / 3 / 4 / 4; }
}

/* The phone app bar already names the tab, so the panel drops its own title. */
@media (max-width: 700px) {
    .apihub-title { display: none; }
    .apihub-metrics { gap: 18px; }
    .apihub-metric { flex: 1 1 100%; padding: 0; border-left: none; }
    .apihub-dactions { margin-left: 0; width: 100%; }

    /* Both section actions get their own full-width row so neither label wraps mid-word. */
    .apihub-sect .s-ok,
    .apihub-sect .apihub-imp-trigger {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }
}

.apihub-fhint {
    font: 400 11.5px/1.45 Inter;
    color: var(--ava-slate-700);
    margin-top: 6px;
}

/* Field explanations sit on this marker as a hover-tooltip (title), keeping the form free of prose. */
.apihub-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1px solid rgba(var(--ava-rgb-slate), 0.35);
    font: 600 10px Inter;
    color: var(--ava-slate-700);
    cursor: help;
    vertical-align: -2px;
}

.apihub-info:hover {
    color: var(--ava-slate-100);
    border-color: rgba(var(--ava-rgb-slate), 0.55);
}

.apihub-ferr {
    font: 500 12px Inter;
    color: var(--ava-coral-soft);
    margin-top: 6px;
}

/* Wizard stepper (shared by the API and the endpoint assistant). */
.apihub-wz-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    background: color-mix(in srgb, var(--ava-ink-deepest) 55%, transparent);
    overflow-x: auto;
    flex: 0 0 auto;
}

.apihub-wz-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    padding: 4px 6px;
    border-radius: 8px;
    font: 600 12px Inter;
    color: var(--ava-slate-700);
    white-space: nowrap;
    cursor: default;
}

.apihub-wz-step.reachable { cursor: pointer; }
.apihub-wz-step.reachable:hover { color: var(--ava-slate-100); }
.apihub-wz-step.active { color: var(--ava-slate-100); }

.apihub-wz-step .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(var(--ava-rgb-slate), 0.3);
    font: 700 11px Inter;
    color: var(--ava-slate-700);
    flex: none;
}

.apihub-wz-step.active .n {
    border-color: var(--ava-aqua);
    background: var(--ava-aqua);
    color: var(--ava-navy);
}

.apihub-wz-step.done .n {
    border-color: color-mix(in srgb, var(--ava-aqua) 65%, transparent);
    color: var(--ava-aqua);
}

.apihub-wz-sep {
    flex: 1;
    height: 2px;
    min-width: 10px;
    background: rgba(var(--ava-rgb-slate), 0.18);
}

/* Narrow modals (the editors are full-screen sheets from 1024px down) cannot show six labels in a
   row. The circles stay — every step keeps its tap target and its jump — and only the step the user
   is on keeps its wording; the others carry it in their tooltip, and the step title repeats it right
   below the stepper. */
@media (max-width: 780px) {
    .apihub-wz-stepper { gap: 5px; padding: 12px 14px; }
    .apihub-wz-step { gap: 6px; padding: 4px; min-width: 0; }
    .apihub-wz-step .lbl { display: none; }

    /* The one visible label is what may shrink, so the row never needs more width than it has. */
    .apihub-wz-step.active .lbl {
        display: inline;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .apihub-wz-sep { min-width: 6px; }
}

@media (max-width: 420px) {
    .apihub-wz-stepper { gap: 4px; padding: 11px 12px; }
    .apihub-wz-step { gap: 5px; }
    .apihub-wz-step .n { width: 20px; height: 20px; }
    .apihub-wz-sep { min-width: 4px; }
}

.apihub-wz-hint {
    font: 400 13px/1.55 Inter;
    color: var(--ava-slate-500);
    margin: 0 0 18px;
}

.apihub-wz-title {
    font: 700 16px Inter;
    color: var(--ava-slate-100);
    margin: 0 0 4px;
}

.apihub-wz-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(var(--ava-rgb-white), 0.03);
    border: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    font: 400 13px Inter;
    color: var(--ava-slate-100);
    margin-bottom: 16px;
}

.apihub-wz-summary .k { color: var(--ava-slate-700); font-weight: 600; }

/* Parameter builder rows. */
.apihub-param-row {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr auto 1.6fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.apihub-param-req {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 12px Inter;
    color: var(--ava-slate-500);
    white-space: nowrap;
}

.apihub-param-remove {
    border: 1px solid rgba(var(--ava-rgb-slate), 0.16);
    border-radius: 8px;
    background: var(--ava-btn-2);
    color: var(--ava-slate-500);
    font: 600 13px Inter;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.apihub-param-remove:hover { color: var(--ava-coral-soft); }

/* Unlock step (activate + role grants). */
.apihub-unlock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.07);
}

.apihub-unlock-row .nm {
    font: 500 13.5px Inter;
    color: var(--ava-slate-100);
    overflow-wrap: anywhere;
}

.apihub-unlock-row .err {
    font: 500 11.5px Inter;
    color: var(--ava-coral-soft);
}

.apihub-unlock-lic {
    font: 500 12.5px Inter;
    color: var(--ava-slate-500);
}

@media (max-width: 1024px) {
    .apihub-form-row { grid-template-columns: 1fr !important; }
    .apihub-head { flex-direction: column; }
    .apihub-head .apihub-lic { margin-left: 0; width: 100%; }

    /* The editors become full-screen sheets, like the schema editor (.s-schema-card). */
    .apihub-overlay { padding: 0 !important; }
    .apihub-modal-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }
}

/* ---- Folder import preview (ApiHubImportModal) ---- */

/* The folder picker rides on a label wrapping a hidden file input, so it needs the button metrics
   of its neighbour: 9px + the 1px border matches the primary button's 10px padding. */
.apihub-imp-trigger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 9px 16px;
    cursor: pointer;
}

.apihub-imp-trigger.is-disabled { opacity: .5; pointer-events: none; }

.apihub-imp-sect {
    font: 700 10.5px Inter;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--ava-aqua);
    margin: 4px 0 12px;
}

/* The folder's German credential hint, shown beside the auth fields. */
.apihub-imp-hintbox {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(var(--ava-rgb-white), 0.04);
    border: 1px solid rgba(var(--ava-rgb-slate), 0.18);
    font: 400 12.5px/1.5 Inter;
    color: var(--ava-slate-100);
}

.apihub-imp-hintbox strong {
    font: 700 10.5px Inter;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ava-slate-500);
}

.apihub-imp-lic {
    font: 600 12.5px Inter;
    color: var(--ava-slate-100);
    margin-bottom: 10px;
}

.apihub-imp-lic.over { color: var(--ava-coral-soft); }

.apihub-imp-thead,
.apihub-imp-row {
    display: grid;
    grid-template-columns: 78px 64px 1fr 0.8fr 150px;
    gap: 14px;
    align-items: center;
    padding: 9px 0;
}

.apihub-imp-thead {
    border-top: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.12);
    background: rgba(var(--ava-rgb-white), 0.02);
}

.apihub-imp-row {
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.07);
}

.apihub-imp-row .c-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.apihub-imp-row .c-name .apihub-meta { display: block; }

.apihub-imp-row .c-path {
    min-width: 0;
    font: 400 11.5px/1.45 Inter;
    color: var(--ava-slate-500);
    overflow-wrap: anywhere;
}

.apihub-imp-row .c-act { display: flex; align-items: center; gap: 9px; }
.apihub-imp-row .apihub-state { font-size: 11.5px; }

/* A deselected entry stays readable but visibly steps back. */
.apihub-imp-row.off .c-m,
.apihub-imp-row.off .c-name,
.apihub-imp-row.off .c-path { opacity: .45; }

/* An invalid entry is excluded: dimmed, with the reason where path and switch would sit. */
.apihub-imp-row.invalid .c-m,
.apihub-imp-row.invalid .c-name { opacity: .45; }

.apihub-imp-row .c-issue {
    grid-column: 4 / 6;
    font: 500 12px Inter;
    color: var(--ava-coral-soft);
}

.apihub-imp-chk {
    width: 16px;
    height: 16px;
    accent-color: var(--ava-aqua);
    cursor: pointer;
}

.apihub-imp-chk:disabled { cursor: not-allowed; }

.apihub-imp-skip {
    font: 400 11.5px Inter;
    font-style: italic;
    color: var(--ava-slate-700);
}

.apihub-imp-group {
    font: 700 10.5px Inter;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ava-slate-500);
    padding: 12px 0 4px;
}

.apihub-imp-apiline {
    font: 600 13px Inter;
    color: var(--ava-aqua);
    margin-bottom: 12px;
}

.apihub-imp-reslist { margin-top: 6px; }

.apihub-imp-res {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(var(--ava-rgb-slate), 0.07);
}

.apihub-imp-res .st { font: 500 12px Inter; color: var(--ava-slate-500); }
.apihub-imp-res .st.ok { color: var(--ava-aqua); }
.apihub-imp-res .st.err { color: var(--ava-coral-soft); }

@media (max-width: 900px) {
    .apihub-imp-thead { display: none; }

    .apihub-imp-row { grid-template-columns: auto auto 1fr; row-gap: 8px; }
    .apihub-imp-row .c-imp { grid-area: 1 / 1 / 2 / 2; }
    .apihub-imp-row .c-m { grid-area: 1 / 2 / 2 / 3; }
    .apihub-imp-row .c-name { grid-area: 1 / 3 / 2 / 4; }
    .apihub-imp-row .c-path { grid-area: 2 / 1 / 3 / 4; }
    .apihub-imp-row .c-act { grid-area: 3 / 1 / 4 / 4; }
    .apihub-imp-row .c-issue { grid-area: 2 / 1 / 3 / 4; }
}

/* =========================================================
   Phone layout for the shell. It closes the file so every override
   wins over the desktop declaration it replaces.
   ========================================================= */
/* Mobile: two-stage master/detail on one set of shell parts. The rail IS the
   overview — same tenant, categories and account blocks, full width — and a
   category opens as its own page with a back bar. */
@media (max-width: 1024px) {
    /* Phone: NOT a modal. A plain full-screen page — no dim, no blur, no centered
       card. !important is required to beat the inline styles the shell carries. */
    .settings-overlay {
        padding: 0 !important;
        background: var(--ava-navy) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .settings-modal {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* The head keeps naming the dialog and carrying theme + close; on this width the
       segment takes a line of its own. An open category is headed by its back bar. */
    .settings-modal-head { flex-wrap: wrap; padding: 10px 14px 12px; }
    .settings-head-theme { order: 3; width: 100%; }
    .settings-modal.is-mobile-detail .settings-modal-head { display: none; }

    .settings-modal-body { flex-direction: column; min-height: 0; }

    /* OVERVIEW state: the rail is the page. A page scrolls as one column, so the
       tenant, the categories and the account move together instead of the list
       scrolling inside a frame. */
    .settings-rail {
        flex: 1 1 auto;
        width: 100%;
        padding: 12px 14px 20px;
        border-right: none;
        overflow-y: auto;
        background: var(--ava-navy);
    }
    .settings-cats {
        flex: 0 0 auto;
        overflow-y: visible;
    }
    .settings-account { margin-top: 20px; }
    .settings-modal:not(.is-mobile-detail) .settings-modal-content { display: none; }

    /* DETAIL state: the category owns the page and the rail shrinks to its tenant
       strip, so the scope stays switchable without going back. Sprache has no scope. */
    .settings-modal.is-mobile-detail .settings-rail {
        flex: 0 0 auto;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--ava-line-soft);
        /* The strip is only as tall as the button, so its menu has to leave the box. */
        overflow: visible;
    }
    .settings-modal.is-mobile-detail .settings-cats,
    .settings-modal.is-mobile-detail .settings-account { display: none; }
    .settings-modal.is-mobile-detail .settings-tenant { padding-bottom: 0; border-bottom: none; }
    .settings-modal.is-mobile-detail.is-tenantless .settings-rail { display: none; }

    .settings-modal-content { padding: 16px 14px 24px; }

    /* The rail rows are the phone's main targets: taller, with the second line and
       the chevron that the narrow desktop rail leaves out. */
    .settings-cats { padding-top: 14px; }
    .settings-cat-group { margin-bottom: 18px; }
    .settings-cat-grouptitle { font-size: 10.5px; padding: 0 4px; margin-bottom: 8px; }
    .settings-cat-items { gap: 4px; }

    .vnav { gap: 13px; padding: 12px; border-radius: 12px; font-size: 14.5px; }
    .vnav-icon { width: 19px; height: 19px; }
    .vnav-sub,
    .vnav-chev { display: block; }

    /* The tenant button grows with the touch target, so its menu drops lower. */
    .settings-tenantbtn { padding: 10px 12px; }
    .settings-tenant-initials { width: 34px; height: 34px; border-radius: 10px; font-size: 12.5px; }
    .settings-tenant-name { font-size: 14.5px; }
    .settings-tenant-menu { left: 14px; right: 14px; top: 70px; }
    .settings-tenant-list { max-height: 60vh; }

    .settings-account-avatar { width: 36px; height: 36px; font-size: 12.5px; }
    .settings-account-name { font-size: 14px; }
    .settings-account-mail { display: block; }

    .settings-modal.is-mobile-detail .settings-mobile-detailbar {
        display: flex;
        align-items: center;
        gap: 11px;
        flex: 0 0 auto;
        padding: 10px 14px 12px;
        border-bottom: 1px solid rgba(var(--ava-rgb-slate),0.10);
        background: var(--ava-navy-deep);
    }
    .settings-mobile-back {
        width: 42px; height: 42px; flex: 0 0 auto;
        display: grid; place-items: center;
        border-radius: 12px;
        border: 1px solid rgba(var(--ava-rgb-slate),0.16);
        background: transparent;
        color: var(--ava-slate-500);
        cursor: pointer;
    }
    .settings-mobile-detailtitle {
        flex: 1; text-align: center; min-width: 0;
        font: 800 16px Inter; letter-spacing: -.2px; color: var(--ava-slate-100);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}