/*
 * Ayarlar kabuğu: kullanıcı, kanal ve oda ayarları ortak. Kaynak tasarım
 * ayarlar.html. Davranış vx.js'te (vx.settings).
 *
 *  .vx-set                 tam ekran katman (Bootstrap modallarının altında)
 *   ├── .vx-set-nav        280px gezinme: kimlik, gruplar, sekmeler, bölüm listesi
 *   └── .vx-set-main       içerik: kapat/geri, kaydırma alanı, kayıt şeridi
 *        └── .vx-set-page  tek sütun form (en fazla 760px)
 *             └── .vx-set-sec > .vx-set-row
 *
 * Dar ekranda (≤900px) önce gezinme görünür; sekme seçilince sayfa (.is-page).
 */

.vx-set {
    position: fixed;
    inset: 0;
    /* Bootstrap modalları (1050+) ve vx üst katmanı bunun üstünde kalır. */
    z-index: 1040;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--frame);
    color: var(--text);
    font: 400 var(--fs-base)/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
    animation: vx-fade .15s ease-out;
}

.vx-set button {
    font: inherit;
    color: inherit;
}

.vx-set :focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* ---------- Gezinme ---------- */

.vx-set-nav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--space-5) var(--space-3) var(--space-4);
    overflow-y: auto;
}

.vx-set-who {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    padding: 0 var(--space-2) var(--space-4);
    border-bottom: 1px dashed var(--line);
}

.vx-set-who .vx-av {
    --s: var(--av-lg);
}

.vx-set-who b {
    display: block;
    overflow: hidden;
    font: 700 var(--fs-lg)/1.2 var(--display);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-set-who small {
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.vx-set-who > div {
    min-width: 0;
}

.vx-set-grp {
    margin-top: var(--space-4);
}

.vx-set-grp-h {
    padding: 0 var(--space-3) var(--space-2);
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vx-set-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    height: var(--h-lg);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-2);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.vx-set-item:hover {
    background: var(--panel-2);
    color: var(--text);
}

.vx-set-item[aria-current="page"] {
    background: var(--raise);
    color: var(--text);
}

.vx-set-item[aria-current="page"] .vx-icon {
    color: var(--green);
}

.vx-set-item.is-danger {
    color: var(--red);
}

.vx-set-item.is-danger:hover {
    background: var(--red-soft);
}

.vx-set-sub {
    display: grid;
    gap: var(--space-half);
    margin: var(--space-1) 0 var(--space-2) var(--space-6);
    padding-left: var(--space-3);
    border-left: 1px solid var(--line);
}

.vx-set-sub button {
    height: var(--h-xs);
    padding: 0 var(--space-2);
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-3);
    font-size: var(--fs-md);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.vx-set-sub button:hover {
    background: var(--panel-2);
    color: var(--text);
}

.vx-set-sub button.on {
    color: var(--green);
}

.vx-set-ver {
    margin-top: auto;
    padding: var(--space-4) var(--space-3) 0;
    color: var(--text-3);
    font: 500 var(--fs-xs) var(--mono);
}

/* ---------- İçerik ---------- */

.vx-set-main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.vx-set-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.vx-set-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-8) 120px;
}

.vx-set-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    border: 0;
    background: none;
    color: var(--text-3);
    font: 500 var(--fs-xs) var(--mono);
    cursor: pointer;
}

.vx-set-close span {
    display: grid;
    place-items: center;
    width: var(--h-lg);
    height: var(--h-lg);
    border: 1px solid var(--raise-2);
    border-radius: 50%;
    color: var(--text-2);
}

.vx-set-close:hover span {
    background: var(--raise);
    color: var(--text);
}

.vx-set-back {
    display: none;
}

.vx-set-title {
    margin: 0;
    color: var(--text);
    font: 700 var(--fs-2xl)/1.15 var(--display);
    letter-spacing: -.02em;
}

.vx-set-lead {
    max-width: 62ch;
    margin: var(--space-2) 0 0;
    color: var(--text-2);
}

.vx-set-sec {
    padding-top: var(--space-6);
    scroll-margin-top: var(--space-4);
}

.vx-set-sec + .vx-set-sec {
    margin-top: var(--space-6);
    border-top: 1px dashed var(--line);
}

.vx-set-sec-h {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.vx-set-sec-h > div {
    flex: 1;
    min-width: 0;
}

.vx-set-sec-h h2 {
    margin: 0;
    color: var(--text);
    font: 600 var(--fs-lg) var(--font);
}

.vx-set-sec-h p {
    margin: var(--space-1) 0 0;
    color: var(--text-3);
    font-size: var(--fs-md);
}

.vx-set-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    padding: var(--space-4) 0;
}

.vx-set-sec-h + .vx-set-row {
    padding-top: 0;
}

.vx-set-row + .vx-set-row {
    border-top: 1px solid var(--line);
}

.vx-set-row.is-stack {
    grid-template-columns: minmax(0, 1fr);
}

.vx-set-row-t {
    min-width: 0;
}

.vx-set-row-t > label,
.vx-set-row-t > .vx-set-lbl {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--text);
    font-weight: 500;
}

.vx-set-row-t .vx-set-req {
    color: var(--red);
}

.vx-set-row-t p {
    max-width: 60ch;
    margin: var(--space-1) 0 0;
    color: var(--text-3);
    font-size: var(--fs-md);
}

.vx-set-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.vx-set-inline .vx-input {
    flex: 1;
    min-width: 0;
}

.vx-set-counter {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-1);
    color: var(--text-3);
    font: 500 var(--fs-xs) var(--mono);
}

.vx-set-counter.is-warn {
    color: var(--gold);
}

.vx-set-empty {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--panel-2);
    color: var(--text-3);
    font-size: var(--fs-md);
    text-align: center;
}

/* ---------- Ortak parçalar (kanal ve oda ayarları) ---------- */

/* İki sütunlu sekmeler (roller, oda izinleri) daha geniş. */
.vx-set-page.is-wide {
    max-width: 980px;
}

/* Bölümlü düğme grubu: Görünüm / İzinler, Emoji / Çıkartmalar */
.vx-subtabs {
    display: inline-flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--frame);
}

.vx-subtabs button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--h-sm);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-2);
    font-size: var(--fs-md);
    font-weight: 500;
    cursor: pointer;
}

.vx-subtabs button:hover {
    color: var(--text);
}

.vx-subtabs button[aria-selected="true"] {
    background: var(--raise);
    color: var(--text);
}

.vx-subtabs .n {
    color: var(--text-3);
    font: 500 var(--fs-xs) var(--mono);
}

/* Liste üstündeki arama kutusu */
.vx-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--h-lg);
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--frame);
    color: var(--text-3);
}

.vx-search:focus-within {
    border-color: var(--green);
}

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

/* Odak halkası kapta (:focus-within); genel :focus-visible halkası ikinci çerçeve çizmesin. */
.vx-search input:focus-visible {
    outline: none;
}

.vx-search input::-webkit-search-cancel-button {
    display: none;
}

/* ---------- Kayıt şeridi ---------- */

.vx-set-bar {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: min(720px, calc(100% - var(--space-8)));
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--frame);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    translate: -50% 160%;
    transition: translate .2s ease, opacity .2s ease;
}

.vx-set-bar.is-on {
    opacity: 1;
    pointer-events: auto;
    translate: -50% 0;
}

.vx-set-bar p {
    flex: 1;
    margin: 0;
    font-weight: 500;
}

.vx-set-bar.is-shake {
    border-color: var(--red);
    animation: vx-set-shake .4s;
}

@keyframes vx-set-shake {
    20%, 60% { transform: translateX(calc(-1 * var(--space-2))); }
    40%, 80% { transform: translateX(var(--space-2)); }
}

/* ---------- Dar ekran ---------- */

@media (max-width: 900px) {
    .vx-set {
        grid-template-columns: minmax(0, 1fr);
    }

    .vx-set.is-page .vx-set-nav,
    .vx-set:not(.is-page) .vx-set-main {
        display: none;
    }

    .vx-set-back {
        position: absolute;
        top: var(--space-4);
        left: var(--space-4);
        z-index: 3;
        display: grid;
    }
}

@media (max-width: 620px) {
    .vx-set {
        padding: 0;
    }

    .vx-set > .vx-panel {
        border-radius: 0;
    }

    /* Üstte geri ve kapat düğmeleri (absolute) durur. */
    .vx-set-page {
        padding: calc(var(--h-lg) + var(--space-8)) var(--space-4) 140px;
    }

    .vx-set-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .vx-set-bar p {
        font-size: var(--fs-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vx-set,
    .vx-set-bar {
        animation: none !important;
        transition: none !important;
    }

    .vx-set-scroll {
        scroll-behavior: auto;
    }
}