/* ============================================================================
   361 Platform — Kurum / Vekâlet Değiştirici, Vekâlet Aktif Şeridi ve
   Kanal Partneri Ortak Markalama (Co-Branding) Stilleri
   Modül: Framework/css/m-zone-switcher.css (T-UOB-08 & T-UOB-09)
   Kurallar:
   - %100 generic (sektör-bağımsız ZoneSwitcher / MandateBanner / PartnerCoBranding)
   - Tüm düğmeler doğal genişlikte (width: auto; max-width: max-content; inline-flex)
   - 1600x950 masaüstü ve 390x844 mobilde üst bar kontrolleriyle 0px örtüşme
   - Vekâlet Aktif Şeridi sayfa akışı içinde (flex: 0 0 auto), yüksek kontrastlı
   ============================================================================ */

:root {
    --zs-surface: #ffffff;
    --zs-surface-subtle: #f8fafc;
    --zs-surface-hover: #f1f5f9;
    --zs-surface-active: #eff6ff;
    --zs-border: rgba(15, 23, 42, 0.12);
    --zs-border-strong: rgba(15, 23, 42, 0.22);
    --zs-text: #0f172a;
    --zs-text-secondary: #475569;
    --zs-text-muted: #64748b;
    --zs-primary: #0062e6;
    --zs-primary-hover: #0052c2;
    --zs-primary-soft: rgba(0, 98, 230, 0.10);
    --zs-mandate-bg: #1e293b;
    --zs-mandate-bg-accent: #0f172a;
    --zs-mandate-border: #334155;
    --zs-mandate-text: #f8fafc;
    --zs-mandate-muted: #cbd5e1;
    --zs-mandate-pill-bg: #f59e0b;
    --zs-mandate-pill-text: #0f172a;
    --zs-advisor-bg: rgba(16, 185, 129, 0.18);
    --zs-advisor-border: rgba(52, 211, 153, 0.45);
    --zs-advisor-text: #ecfdf5;
    --zs-advisor-modal-bg: #ecfdf5;
    --zs-advisor-modal-text: #065f46;
    --zs-advisor-modal-border: #a7f3d0;
    --zs-danger-bg: #fff1f2;
    --zs-danger-text: #be123c;
    --zs-danger-border: #fecdd3;
    --zs-shadow-modal: 0 24px 60px -12px rgba(15, 23, 42, 0.32), 0 0 0 1px rgba(15, 23, 42, 0.08);
    --zs-radius-pill: 999px;
    --zs-radius-md: 10px;
    --zs-radius-lg: 16px;
}

html.dark,
html.dark-theme,
body.Dark {
    --zs-surface: #0f172a;
    --zs-surface-subtle: #1e293b;
    --zs-surface-hover: #263349;
    --zs-surface-active: rgba(59, 130, 246, 0.18);
    --zs-border: rgba(148, 163, 184, 0.20);
    --zs-border-strong: rgba(148, 163, 184, 0.34);
    --zs-text: #f8fafc;
    --zs-text-secondary: #cbd5e1;
    --zs-text-muted: #94a3b8;
    --zs-primary: #3b82f6;
    --zs-primary-hover: #60a5fa;
    --zs-primary-soft: rgba(59, 130, 246, 0.18);
    --zs-advisor-modal-bg: rgba(16, 185, 129, 0.16);
    --zs-advisor-modal-text: #6ee7b7;
    --zs-advisor-modal-border: rgba(52, 211, 153, 0.35);
    --zs-danger-bg: rgba(244, 63, 94, 0.16);
    --zs-danger-text: #fda4af;
    --zs-danger-border: rgba(244, 63, 94, 0.35);
    --zs-shadow-modal: 0 28px 68px -12px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(148, 163, 184, 0.18);
}

/* Gömülü görünüm kiplerinde üst kabuk elemanları gizlenir */
body.BIEmbedMode .zs-header-cluster,
body.BIEmbedMode .zs-top-flow-dock,
body.BIEmbedMode .zs-modal-backdrop {
    display: none !important;
}

/* ── 1) MASAÜSTÜ ÜST BAR KÜMESİ (Kurum Kapsülü + Co-Branding Rozeti) ─────────
   Masaüstünde (>768px) #PageZone_headerleft içinde logonun hemen sağında durur.
   Mobilde (<=768px / body.Mobile) #PageZone_headerleft(80px) + headercenter +
   headerright(112px) dengesine DOKUNMAMAK için üst barda gizlenir; akış içi
   .zs-mobile-bar devralır (0px örtüşme, 0px sıkışma). */
@media (min-width: 769px) {
    body:not(.Mobile) #PageZone_headerleft.zs-host-aligned {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
        min-width: 0;
    }
}

.zs-header-cluster {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

body.Mobile .zs-header-cluster {
    display: none !important;
}

@media (max-width: 768px) {
    .zs-header-cluster {
        display: none !important;
    }
}

/* ── Doğal Genişlikli Tetikleyici Kapsül (361-ui Düğme Yasası) ───────────── */
.zs-btn,
.zs-trigger-pill,
.zs-mandate-exit-btn,
.zs-mandate-switch-btn,
.zs-modal-close-btn,
.zs-footer-action-btn,
.zs-retry-btn {
    width: auto;
    max-width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: 'HankenGrotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.zs-trigger-pill {
    min-height: 34px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--zs-radius-pill);
    border: 1px solid var(--zs-border);
    background: var(--zs-surface);
    color: var(--zs-text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.zs-trigger-pill:hover {
    background: var(--zs-surface-hover);
    border-color: var(--zs-border-strong);
}

.zs-trigger-pill:focus-visible,
.zs-mandate-exit-btn:focus-visible,
.zs-mandate-switch-btn:focus-visible,
.zs-modal-close-btn:focus-visible,
.zs-footer-action-btn:focus-visible,
.zs-retry-btn:focus-visible,
.zs-item-row:focus-visible {
    outline: 2px solid var(--zs-primary);
    outline-offset: 2px;
}

.zs-trigger-pill.is-mandate-active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

.zs-trigger-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zs-primary);
    flex: 0 0 8px;
}

.zs-trigger-pill.is-mandate-active .zs-trigger-dot {
    background: #d97706;
}

.zs-trigger-label {
    display: inline-block;
    max-width: 156px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zs-trigger-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--zs-radius-pill);
    background: var(--zs-primary-soft);
    color: var(--zs-primary);
    font-size: 11px;
    font-weight: 700;
}

.zs-kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid var(--zs-border);
    background: var(--zs-surface-subtle);
    color: var(--zs-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
}

@media (max-width: 1180px) {
    .zs-trigger-label {
        max-width: 112px;
    }
    .zs-header-cluster .zs-kbd {
        display: none;
    }
}

/* ── 2) KANAL PARTNERİ ORTAK MARKALAMA (CO-BRANDING — T-UOB-09) ──────────── */
.zs-cobrand-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    max-width: 220px;
    min-height: 32px;
    padding: 3px 10px 3px 7px;
    border-radius: var(--zs-radius-pill);
    border: 1px solid var(--zs-border);
    background: var(--zs-surface-subtle);
    color: var(--zs-text);
    font-family: 'HankenGrotesk', 'Segoe UI', system-ui, sans-serif;
    line-height: 1.15;
    flex: 0 1 auto;
    box-sizing: border-box;
}

.zs-cobrand-logo {
    width: 20px;
    height: 20px;
    min-height: 20px;
    max-width: 20px;
    border-radius: 5px;
    object-fit: contain;
    flex: 0 0 20px;
    background: #ffffff;
}

.zs-cobrand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.zs-cobrand-partner {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--zs-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zs-cobrand-powered {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--zs-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .zs-header-cluster .zs-cobrand-badge {
        max-width: 168px;
    }
}

/* Giriş Ekranı (LoginForm) Ortak Markalama Rozeti */
.zs-login-cobrand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 14px 0 4px;
    padding: 0;
    box-sizing: border-box;
}

.zs-login-cobrand-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: 100%;
    padding: 7px 14px;
    border-radius: var(--zs-radius-pill);
    border: 1px solid var(--zs-border);
    background: var(--zs-surface-subtle);
    color: var(--zs-text);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.zs-login-cobrand .zs-cobrand-logo {
    width: 24px;
    height: 24px;
    min-height: 24px;
    max-width: 24px;
    flex: 0 0 24px;
}

.zs-login-cobrand .zs-cobrand-partner {
    font-size: 12.5px;
}

.zs-login-cobrand .zs-cobrand-powered {
    font-size: 11px;
}

/* ── 3) AKIŞ İÇİ ÜST ŞERİT DOKU: VEKÂLET AKTİF ŞERİDİ & MOBİL ÇUBUK ────────
   Sayfa akışı içinde (flex: 0 0 auto), #MainContent'in hemen üstünde yer alır.
   Masaüstünde sol/sağ raylarla örtüşmemek için #MainContent yatay marjlarını
   izler; mobilde tam genişlikte akış içinde durur. */
.zs-top-flow-dock {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    position: relative;
    z-index: 18;
    width: auto;
    box-sizing: border-box;
}

.zs-top-flow-dock[hidden] {
    display: none !important;
}

.zs-mandate-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 8px 14px;
    width: 100%;
    min-height: 42px;
    padding: 7px 14px;
    background: linear-gradient(90deg, var(--zs-mandate-bg-accent) 0%, var(--zs-mandate-bg) 100%);
    border-bottom: 2px solid #f59e0b;
    color: var(--zs-mandate-text);
    font-family: 'HankenGrotesk', 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.35;
    box-sizing: border-box;
}

.zs-mandate-banner[hidden] {
    display: none !important;
}

.zs-mandate-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
    flex: 1 1 260px;
}

.zs-mandate-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--zs-radius-pill);
    background: var(--zs-mandate-pill-bg);
    color: var(--zs-mandate-pill-text);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.zs-mandate-summary {
    font-weight: 600;
    color: var(--zs-mandate-text);
    word-break: break-word;
}

.zs-mandate-sep {
    color: #94a3b8;
    font-weight: 700;
}

.zs-mandate-scope {
    color: var(--zs-mandate-muted);
    font-weight: 500;
}

.zs-mandate-seat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--zs-radius-pill);
    background: var(--zs-advisor-bg);
    border: 1px solid var(--zs-advisor-border);
    color: var(--zs-advisor-text);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.zs-mandate-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.zs-mandate-switch-btn {
    min-height: 30px;
    padding: 4px 11px;
    border-radius: 8px;
    border: 1px solid rgba(248, 250, 252, 0.28);
    background: rgba(248, 250, 252, 0.10);
    color: #f8fafc;
    font-size: 12px;
    font-weight: 600;
}

.zs-mandate-switch-btn:hover {
    background: rgba(248, 250, 252, 0.20);
    border-color: rgba(248, 250, 252, 0.45);
}

.zs-mandate-exit-btn {
    min-height: 30px;
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid #fda4af;
    background: #e11d48;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.zs-mandate-exit-btn:hover {
    background: #be123c;
}

.zs-mandate-exit-btn[disabled] {
    opacity: 0.65;
    cursor: wait;
}

/* Mobil Akış İçi Çubuk (yalnız <=768px / body.Mobile, birden fazla kurum/vekâlet
   veya ortak markalama aktifken görünür; üst bardaki modül hapını ASLA sıkıştırmaz) */
.zs-mobile-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    background: var(--zs-surface-subtle);
    border-bottom: 1px solid var(--zs-border);
    box-sizing: border-box;
}

.zs-mobile-bar[hidden] {
    display: none !important;
}

body.Mobile .zs-mobile-bar:not([hidden]) {
    display: flex;
}

@media (max-width: 768px) {
    .zs-mobile-bar:not([hidden]) {
        display: flex;
    }
}

/* Mobil ve dokunmatik cihazlarda minimum 44x44px dokunma hedefi (WCAG 2.5.8 / Q05) */
@media (pointer: coarse), (max-width: 768px) {
    .zs-mobile-bar .zs-trigger-pill,
    .zs-mandate-exit-btn,
    .zs-mandate-switch-btn,
    .zs-modal-close-btn,
    .zs-footer-action-btn,
    .zs-retry-btn {
        min-height: 44px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .zs-mandate-banner {
        padding: 8px 12px;
        gap: 8px 10px;
    }

    .zs-mobile-bar .zs-kbd {
        display: none;
    }

    .zs-mobile-bar .zs-cobrand-badge {
        max-width: 176px;
    }
}

/* ── 4) CTRL+K KURUM & VEKÂLET DEĞİŞTİRİCİ MODAL ─────────────────────────── */
.zs-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 16px 24px;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-sizing: border-box;
}

.zs-modal-backdrop[hidden] {
    display: none !important;
}

.zs-modal-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: min(78vh, 660px);
    border-radius: var(--zs-radius-lg);
    border: 1px solid var(--zs-border);
    background: var(--zs-surface);
    color: var(--zs-text);
    box-shadow: var(--zs-shadow-modal);
    overflow: hidden;
    font-family: 'HankenGrotesk', 'Segoe UI', system-ui, sans-serif;
}

.zs-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--zs-border);
    background: var(--zs-surface);
    flex: 0 0 auto;
}

.zs-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--zs-text-muted);
    flex: 0 0 20px;
}

.zs-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--zs-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    outline: none;
}

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

.zs-modal-close-btn {
    min-height: 32px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--zs-border);
    background: var(--zs-surface-subtle);
    color: var(--zs-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.zs-modal-close-btn:hover {
    background: var(--zs-surface-hover);
    color: var(--zs-text);
}

.zs-modal-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 14px;
    background: var(--zs-danger-bg);
    border-bottom: 1px solid var(--zs-danger-border);
    color: var(--zs-danger-text);
    font-size: 12.5px;
    font-weight: 600;
    flex: 0 0 auto;
}

.zs-modal-alert[hidden] {
    display: none !important;
}

.zs-retry-btn {
    min-height: 28px;
    padding: 3px 10px;
    border-radius: 7px;
    border: 1px solid var(--zs-danger-border);
    background: var(--zs-surface);
    color: var(--zs-danger-text);
    font-size: 12px;
    font-weight: 700;
}

.zs-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.zs-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zs-section[hidden] {
    display: none !important;
}

.zs-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 6px;
}

.zs-section-title {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zs-text-secondary);
}

.zs-section-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--zs-text-muted);
}

.zs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zs-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 9px 12px;
    border-radius: var(--zs-radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--zs-text);
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.zs-item-row:hover,
.zs-item-row.is-active {
    background: var(--zs-surface-hover);
    border-color: var(--zs-border);
}

.zs-item-row.is-current {
    background: var(--zs-surface-active);
    border-color: rgba(0, 98, 230, 0.28);
}

.zs-item-row.is-loading {
    opacity: 0.72;
    cursor: progress;
}

.zs-item-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.zs-item-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.zs-item-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--zs-text);
}

.zs-item-domain {
    font-size: 12px;
    font-weight: 500;
    color: var(--zs-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.zs-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--zs-text-secondary);
}

.zs-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--zs-radius-pill);
    border: 1px solid var(--zs-border);
    background: var(--zs-surface-subtle);
    color: var(--zs-text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.zs-chip-current {
    background: var(--zs-primary-soft);
    border-color: rgba(0, 98, 230, 0.30);
    color: var(--zs-primary);
    font-weight: 700;
}

.zs-chip-advisor {
    background: var(--zs-advisor-modal-bg);
    border-color: var(--zs-advisor-modal-border);
    color: var(--zs-advisor-modal-text);
    font-weight: 700;
}

.zs-chip-location {
    font-weight: 600;
}

.zs-item-arrow {
    color: var(--zs-text-muted);
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
}

.zs-empty-state {
    padding: 16px 12px;
    border-radius: var(--zs-radius-md);
    border: 1px dashed var(--zs-border);
    background: var(--zs-surface-subtle);
    color: var(--zs-text-secondary);
    font-size: 13px;
    text-align: center;
}

.zs-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 9px 14px;
    border-top: 1px solid var(--zs-border);
    background: var(--zs-surface-subtle);
    color: var(--zs-text-muted);
    font-size: 11.5px;
    flex: 0 0 auto;
}

.zs-footer-hints {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.zs-footer-action-btn {
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--zs-border);
    background: var(--zs-surface);
    color: var(--zs-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.zs-footer-action-btn:hover {
    background: var(--zs-surface-hover);
    color: var(--zs-text);
}

@media (max-width: 640px) {
    .zs-modal-backdrop {
        padding: 12px 10px;
        align-items: flex-start;
    }

    .zs-modal-dialog {
        max-height: 88vh;
    }

    .zs-footer-hints {
        display: none;
    }
}


@media (max-width: 768px) {
    .zs-mandate-banner {
        padding: 10px 12px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow: hidden;
    }
    .zs-mandate-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .zs-mandate-actions .zs-cobrand-badge {
        max-width: 100% !important;
    }
}

html body .zs-mobile-bar[hidden],
html body.Mobile .zs-mobile-bar[hidden],
html body .zs-top-flow-dock[hidden],
html body .zs-mandate-banner[hidden],
html body .zs-header-cluster[hidden] {
    display: none !important;
}