/* ============================================================
   Zonverge Design System — Brand Guideline v3.1
   Palette : Midnight #020B1A · Navy #061A3A · Orange #FF6B00
             Cyan #20C7E9 · Emerald #10B981 · Purple #8B5CF6 (AI only)
   Fonts   : Space Grotesk (display) · Outfit (body) · JetBrains Mono (data)
   Layout  : Dark sidebar 280px + light content area
   ============================================================ */

:root {
    /* --- Core surfaces --- */
    --zv-midnight:   #020B1A;
    --zv-navy:       #061A3A;
    --zv-navy-2:     #09244E;
    --zv-ink:        #071528;
    --zv-surface:    #ffffff;
    --zv-cloud:      #F7FAFC;
    --zv-mist:       #EEF3F8;
    --zv-line:       #DCE5EF;

    /* --- Brand accent colors --- */
    --zv-orange:     #FF6B00;
    --zv-orange-2:   #FF8A00;
    --zv-cyan:       #20C7E9;
    --zv-cyan-2:     #06B6D4;
    --zv-emerald:    #10B981;
    --zv-emerald-2:  #059669;
    --zv-purple:     #8B5CF6;   /* AI/ML output only */
    --zv-warning:    #F59E0B;
    --zv-danger:     #EF4444;

    /* --- Text colors --- */
    --zv-slate:      #5A6480;
    --zv-muted:      #8290A8;

    /* --- Gradients (use sparingly) --- */
    --zv-gradient-cyan:    linear-gradient(135deg, #20C7E9, #06B6D4);
    --zv-gradient-orange:  linear-gradient(135deg, #FF6B00, #FF8A00);
    --zv-gradient-command: radial-gradient(circle at top, #09244E 0%, #020B1A 65%);

    /* --- Sizing --- */
    --zv-radius-card:   20px;
    --zv-radius-button: 12px;
    --zv-radius-pill:   999px;
    --zv-sidebar-width: 280px;
    /* Katlanınca yalnız ikonlar kalır; geniş ekranda tabloya yer açar. */
    --zv-sidebar-collapsed: 64px;
    --zv-page-padding:  32px;
    --zv-card-gap:      16px;

    /* --- Shadows --- */
    --zv-shadow-card:    0 8px 24px rgba(2, 11, 26, 0.10);
    --zv-shadow-command: 0 18px 50px rgba(2, 11, 26, 0.28);

    /* --- Fonts --- */
    --zv-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --zv-font-body:    'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --zv-font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ============================================================
   Base
   ============================================================ */
html { font-family: var(--zv-font-body); color: var(--zv-navy); }
h1, h2, h3, h4, .zv-display { font-family: var(--zv-font-display); }

/* ============================================================
   Typography helpers
   ============================================================ */
.text-main    { color: var(--zv-navy); }
.text-soft    { color: var(--zv-slate); }
.text-faint   { color: var(--zv-muted); }
.text-danger  { color: var(--zv-danger); }
.text-primary { color: var(--zv-cyan); }
.text-orange  { color: var(--zv-orange); }

.zv-mono {
    font-family: var(--zv-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.zv-eyebrow {
    font-family: var(--zv-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zv-cyan);
}

/* ============================================================
   Sidebar Layout
   ============================================================ */
.zv-app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--zv-midnight);
}

/* ---- Sidebar ---- */
.zv-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--zv-sidebar-width);
    height: 100vh;
    background: var(--zv-navy);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
    scrollbar-width: none;
}
.zv-sidebar::-webkit-scrollbar { display: none; }

/* ---- Katlanmış sidebar ----
   Tercih localStorage'da tutulur ve sayfa çizilmeden önce <html>'e yazılır,
   böylece açılışta genişten dara "zıplama" olmaz. */
body.zv-collapsed .zv-sidebar { width: var(--zv-sidebar-collapsed); }
body.zv-collapsed .zv-main { margin-left: var(--zv-sidebar-collapsed); }
/* Dar hâlde yazılar gizlenir, ikonlar ortalanır. Menü öğesinin ilk
   çocuğu ikon, kalanı metin — metin gizlenince ikon ortada kalır. */
body.zv-collapsed .zv-nav-section-label,
body.zv-collapsed .zv-nav-subitem,
body.zv-collapsed .zv-nav-badge,
body.zv-collapsed .zv-sidebar-org,
body.zv-collapsed .zv-sidebar-footer-meta { display: none; }
/* Menü metni doğrudan metin düğümü (etiket içinde sarılı değil), bu yüzden
   display:none ile gizlenemiyor. Yazı boyutunu sıfırlayıp ikonu kendi
   boyutunda tutuyoruz; ikon SVG olduğu için font-size'dan etkilenmiyor. */
body.zv-collapsed .zv-nav-item { font-size: 0; justify-content: center;
    padding-left: .4rem; padding-right: .4rem; gap: 0; }
body.zv-collapsed .zv-nav-item svg { width: 20px; height: 20px; flex: none; }
body.zv-collapsed .zv-nav-item svg.ml-auto { display: none; }   /* açılır ok */
body.zv-collapsed .zv-sidebar-header { padding-left: .6rem; padding-right: .6rem; }
body.zv-collapsed .zv-sidebar-logo { overflow: hidden; }
.zv-sidebar, .zv-main { transition: width .18s ease, margin-left .18s ease; }

/* Katla düğmesi — sidebar'ın sağ kenarına oturur, topbar hizasında */
.zv-collapse-btn {
    position: fixed; top: 20px; z-index: 102;
    left: calc(var(--zv-sidebar-width) - 12px);
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--zv-navy); color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.14);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .85rem; line-height: 1; padding: 0;
    transition: left .18s ease, background .15s, color .15s;
}
.zv-collapse-btn:hover { background: #3E6BFF; color: #fff; border-color: #3E6BFF; }
body.zv-collapsed .zv-collapse-btn { left: calc(var(--zv-sidebar-collapsed) - 12px); }

/* Katlanınca logo yalnız "Z" olarak görünür: tam kelime işareti 64px'e
   sığmıyor, ortasından kesilip okunmaz hâle geliyordu. */
body.zv-collapsed .zv-sidebar-logo { display: flex; justify-content: center; }
body.zv-collapsed .zv-sidebar-logo a { width: 20px; overflow: hidden; display: block; }
body.zv-collapsed .zv-sidebar-logo img { height: 24px; max-width: none; }

/* ---- Tek kartı ekran genişliğine yay ----
   Sayfanın tamamını germek yerine yalnız geniş tablo taşıyan kart yayılır;
   uzun metin satırları dar kalır, okunabilirlik bozulmaz. */
/* Kart overflow:hidden olabilir; düğme kart SINIRI İÇİNDE durur ki
   kırpılmasın. Başlık satırındaki düğmelerle çakışmaması için sağ üst
   köşede, küçük ve soluk. */
.zv-widenable { position: relative; }
.zv-wide-btn {
    /* SAĞ ALT köşe: sağ üstte CSV / ⓘ / "Sade dil" gibi düğmeler var,
       oraya koyunca üst üste biniyordu. Alt köşe her kartta boş. */
    position: absolute; bottom: .55rem; right: .55rem; z-index: 6;
    width: 26px; height: 26px; border-radius: 6px;
    border: 1px solid var(--zv-line); background: #fff; color: var(--zv-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .8rem; line-height: 1; padding: 0;
}
.zv-wide-btn { opacity: .45; transition: opacity .15s, border-color .15s, color .15s; }
.ui-card:hover .zv-wide-btn { opacity: 1; }
.zv-wide-btn:hover { border-color: #3E6BFF; color: #3E6BFF; opacity: 1; }
.zv-widenable.is-wide .zv-wide-btn { opacity: 1; }
.zv-widenable.is-wide {
    width: calc(100vw - var(--zv-sidebar-width) - 2 * var(--zv-page-padding));
    max-width: none;
}
body.zv-collapsed .zv-widenable.is-wide {
    width: calc(100vw - var(--zv-sidebar-collapsed) - 2 * var(--zv-page-padding));
}
.zv-widenable.is-wide .zv-wide-btn { color: #3E6BFF; border-color: #3E6BFF; }

/* The inner nav scroller hides its bar too — the sidebar scrolls, no bar. */
.zv-sidebar nav { scrollbar-width: none; }
.zv-sidebar nav::-webkit-scrollbar { display: none; }

.zv-sidebar-header {
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.zv-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.zv-sidebar-logo img {
    height: 36px;
    width: auto;
}

.zv-sidebar-org {
    margin-top: 0.875rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.zv-sidebar-org:hover { background: rgba(255,255,255,0.09); }

.zv-sidebar-org-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    truncate: true;
}
.zv-sidebar-org-role {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.4);
}

/* ---- Nav sections ---- */
.zv-nav-section {
    padding: 1rem 0.875rem 0.5rem;
}
.zv-nav-section-label {
    font-family: var(--zv-font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    padding: 0 0.375rem;
    margin-bottom: 0.25rem;
}

.zv-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
.zv-nav-item:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.07);
}
.zv-nav-item.active,
.zv-nav-item-active {
    color: var(--zv-cyan);
    background: rgba(32, 199, 233, 0.12);
}
.zv-nav-item.active svg,
.zv-nav-item-active svg {
    color: var(--zv-cyan);
}

.zv-nav-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.7;
}
.zv-nav-item:hover svg { opacity: 1; }

/* Sub-items under collapsible sections */
.zv-nav-subitem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.4rem 2.25rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zv-nav-subitem:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.05);
}
.zv-nav-subitem.active {
    color: var(--zv-cyan);
}
.zv-nav-subitem img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
}

/* Optional badge on nav item */
.zv-nav-badge {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: var(--zv-radius-pill);
    background: var(--zv-orange);
    color: #fff;
}

/* ---- Sidebar footer (user section) ---- */
.zv-sidebar-footer {
    margin-top: auto;
    padding: 0.875rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

/* ---- Main content area ---- */
.zv-main {
    margin-left: var(--zv-sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--zv-cloud);
}

/* ---- Topbar ---- */
.zv-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 250, 252, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--zv-line);
    padding: 0 var(--zv-page-padding);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.zv-page-content {
    flex: 1;
    padding: var(--zv-page-padding);
    /* Okunur varsayılan genişlik. Geniş tablolar kendi "genişlet"
       düğmeleriyle ekranın tamamına yayılır (.zv-widenable). */
    max-width: 1440px;
    width: 100%;
}

/* ============================================================
   Buttons
   ============================================================ */
.ui-btn-primary,
.ui-btn-secondary,
.ui-btn-orange,
.ui-btn-danger,
.ui-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--zv-radius-button);
    padding: 0.625rem 1.25rem;
    transition: all 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--zv-font-body);
}

/* Primary: Cyan (technology / connection / active signal) */
.ui-btn-primary {
    background: var(--zv-cyan);
    color: var(--zv-navy);
    box-shadow: 0 1px 2px rgba(32,199,233,0.25), 0 4px 12px rgba(32,199,233,0.18);
}
.ui-btn-primary:hover {
    background: var(--zv-cyan-2);
    box-shadow: 0 2px 4px rgba(32,199,233,0.35), 0 8px 20px rgba(32,199,233,0.22);
    transform: translateY(-1px);
}

/* Orange: Action / high-impact decision */
.ui-btn-orange {
    background: var(--zv-orange);
    color: #fff;
    box-shadow: 0 1px 2px rgba(255,107,0,0.25), 0 4px 12px rgba(255,107,0,0.18);
}
.ui-btn-orange:hover {
    background: var(--zv-orange-2);
    box-shadow: 0 2px 4px rgba(255,107,0,0.35), 0 8px 20px rgba(255,107,0,0.22);
    transform: translateY(-1px);
}

.ui-btn-secondary {
    background: var(--zv-surface);
    color: var(--zv-navy);
    border-color: var(--zv-line);
    box-shadow: 0 1px 2px rgba(6,26,58,0.05);
}
.ui-btn-secondary:hover { background: var(--zv-mist); border-color: #C5D0DE; }

.ui-btn-danger {
    background: #FEF2F2;
    color: var(--zv-danger);
    border-color: #FECACA;
}
.ui-btn-danger:hover { background: #FEE2E2; }

.ui-btn-ghost { color: var(--zv-slate); }
.ui-btn-ghost:hover { background: var(--zv-mist); color: var(--zv-navy); }

/* ============================================================
   KPI Cards (command center metrics)
   ============================================================ */
.ui-kpi-card {
    background: var(--zv-surface);
    border: 1px solid var(--zv-line);
    border-radius: var(--zv-radius-card);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--zv-shadow-card);
}
.ui-kpi-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--zv-slate);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ui-kpi-value {
    font-family: var(--zv-font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--zv-navy);
    line-height: 1.1;
    margin-top: 0.25rem;
}
.ui-kpi-delta-up   { color: var(--zv-emerald); font-size: 0.8125rem; font-weight: 600; }
.ui-kpi-delta-down { color: var(--zv-danger);  font-size: 0.8125rem; font-weight: 600; }
.ui-kpi-context    { color: var(--zv-slate); font-size: 0.75rem; margin-top: 0.25rem; }

/* ============================================================
   Cards
   ============================================================ */
.ui-card {
    background: var(--zv-surface);
    border: 1px solid var(--zv-line);
    border-radius: var(--zv-radius-card);
    box-shadow: var(--zv-shadow-card);
}
.ui-card-hover { transition: all 0.2s ease; }
.ui-card-hover:hover {
    border-color: rgba(32,199,233,0.35);
    box-shadow: 0 2px 4px rgba(32,199,233,0.08), 0 12px 28px rgba(32,199,233,0.14);
    transform: translateY(-2px);
}
.ui-card-pad { padding: 1.5rem; }

/* ============================================================
   Forms
   ============================================================ */
.ui-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--zv-navy);
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
}

.ui-input, .ui-select, .ui-textarea,
input.form-control, select.form-control, textarea.form-control {
    width: 100%;
    background: var(--zv-surface);
    border: 1px solid var(--zv-line);
    border-radius: 10px;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--zv-navy);
    font-family: var(--zv-font-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.ui-input::placeholder, .ui-textarea::placeholder,
input.form-control::placeholder { color: var(--zv-muted); }

.ui-input:focus, .ui-select:focus, .ui-textarea:focus,
input.form-control:focus, select.form-control:focus, textarea.form-control:focus {
    border-color: var(--zv-cyan);
    box-shadow: 0 0 0 3px rgba(32,199,233,0.18);
}

.ui-field-error {
    font-size: 0.8125rem;
    color: var(--zv-danger);
    margin-top: 0.375rem;
}

.ui-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--zv-line);
    accent-color: var(--zv-cyan);
}

/* ============================================================
   Badges / Status chips
   ============================================================ */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: var(--zv-radius-pill);
    border: 1px solid transparent;
    letter-spacing: 0.03em;
}
/* Healthy / active / selected */
.ui-badge-cyan    { background: rgba(32,199,233,0.1); color: #0E8FAA; border-color: rgba(32,199,233,0.25); }
/* Action / attention */
.ui-badge-orange  { background: rgba(255,107,0,0.1); color: #C74D00; border-color: rgba(255,107,0,0.25); }
/* Growth / success */
.ui-badge-success { background: rgba(16,185,129,0.1); color: var(--zv-emerald-2); border-color: rgba(16,185,129,0.25); }
/* Warning */
.ui-badge-warning { background: rgba(245,158,11,0.1); color: #B45309; border-color: rgba(245,158,11,0.25); }
/* AI/ML output ONLY */
.ui-badge-neural  { background: rgba(139,92,246,0.1); color: #6D3FE0; border-color: rgba(139,92,246,0.25); }
/* Neutral / muted */
.ui-badge-neutral { background: var(--zv-mist); color: var(--zv-slate); border-color: var(--zv-line); }
/* Danger / risk */
.ui-badge-danger  { background: rgba(239,68,68,0.1); color: #B91C1C; border-color: rgba(239,68,68,0.25); }
/* Paused */
.ui-badge-slate   { background: rgba(90,100,128,0.1); color: var(--zv-slate); border-color: rgba(90,100,128,0.2); }

/* Backward compat aliases */
.ui-badge-primary { background: rgba(32,199,233,0.1); color: #0E8FAA; border-color: rgba(32,199,233,0.25); }
.ui-badge-info    { background: rgba(32,199,233,0.1); color: #0E8FAA; border-color: rgba(32,199,233,0.25); }

.ui-badge-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: currentColor;
    display: inline-block;
}

/* ============================================================
   Alerts
   ============================================================ */
.ui-alert {
    border-radius: 12px;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
}
.ui-alert-danger  { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.ui-alert-success { background: rgba(16,185,129,0.08); color: #065F46; border-color: rgba(16,185,129,0.25); }
.ui-alert-warning { background: rgba(245,158,11,0.08); color: #92400E; border-color: rgba(245,158,11,0.25); }
.ui-alert-info    { background: rgba(32,199,233,0.08); color: #164E63; border-color: rgba(32,199,233,0.25); }

/* ============================================================
   Icon circles
   ============================================================ */
.ui-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
}
.ui-icon-circle-info    { background: rgba(32,199,233,0.12); color: var(--zv-cyan); }
.ui-icon-circle-success { background: rgba(16,185,129,0.12); color: var(--zv-emerald); }
.ui-icon-circle-warning { background: rgba(245,158,11,0.12); color: var(--zv-warning); }
.ui-icon-circle-neural  { background: rgba(139,92,246,0.12); color: var(--zv-purple); }
.ui-icon-circle-orange  { background: rgba(255,107,0,0.12);  color: var(--zv-orange); }

/* ============================================================
   Tables
   ============================================================ */
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table thead th {
    text-align: left; /* override per-column with [style] or .ui-th-right / .ui-th-center */
    font-family: var(--zv-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--zv-slate);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--zv-line);
    background: var(--zv-mist);
    white-space: nowrap;
}
.ui-table thead th:first-child { border-radius: 10px 0 0 0; }
.ui-table thead th:last-child  { border-radius: 0 10px 0 0; }
.ui-table tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--zv-mist);
    color: var(--zv-navy);
}
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table tbody tr:hover { background: var(--zv-cloud); }
.ui-table thead th.th-right,
.ui-table thead th[data-align="right"] { text-align: right; }
.ui-table thead th.th-center,
.ui-table thead th[data-align="center"] { text-align: center; }

/* ============================================================
   Dropdown
   ============================================================ */
.ui-dropdown {
    background: var(--zv-surface);
    border: 1px solid var(--zv-line);
    border-radius: 14px;
    box-shadow: 0 4px 8px rgba(2,11,26,0.06), 0 16px 40px rgba(2,11,26,0.14);
    overflow: hidden;
}
.ui-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--zv-navy);
    transition: background 0.1s ease;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
}
.ui-dropdown-item:hover { background: var(--zv-mist); }

/* ============================================================
   Avatar
   ============================================================ */
.ui-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--zv-navy);
    color: var(--zv-cyan);
    font-family: var(--zv-font-display);
    font-weight: 600;
    border: 1px solid rgba(32,199,233,0.25);
}

/* ============================================================
   Dark Command Center Panels
   ============================================================ */
.zv-night-panel {
    position: relative;
    background: var(--zv-gradient-command);
    color: #fff;
    overflow: hidden;
}
.zv-night-panel .zv-muted { color: rgba(255,255,255,0.45); }

/* ============================================================
   AI Recommendation Card (purple — AI only surfaces)
   ============================================================ */
.ui-ai-card {
    background: rgba(139,92,246,0.05);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: var(--zv-radius-card);
    padding: 1.25rem 1.5rem;
}
.ui-ai-card-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

/* ============================================================
   Auth Shell (login / register / password flows)
   ============================================================ */
.ui-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--zv-gradient-command);
}

.ui-auth-frame {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 64rem;
    background: var(--zv-surface);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    box-shadow: var(--zv-shadow-command);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .ui-auth-frame { grid-template-columns: 1.05fr 1fr; }
}

.ui-auth-hero {
    position: relative;
    display: none;
    flex-direction: column;
    padding: 3rem;
    color: #fff;
    background: var(--zv-gradient-command);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .ui-auth-hero { display: flex; }
}

.ui-auth-logo {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.ui-auth-kicker {
    font-family: var(--zv-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--zv-cyan);
}

.ui-auth-title {
    margin-top: 0.75rem;
    font-family: var(--zv-font-display);
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
}

.ui-auth-copy {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.5);
}

.ui-auth-feature-list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ui-auth-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.65);
}
.ui-auth-feature-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    font-family: var(--zv-font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--zv-orange);
}

.ui-auth-panel {
    padding: 2.5rem 1.75rem;
    background: var(--zv-surface);
}
@media (min-width: 640px) {
    .ui-auth-panel { padding: 3rem; }
}

.ui-auth-heading {
    font-family: var(--zv-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--zv-navy);
}
.ui-auth-subheading {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    color: var(--zv-slate);
}

.ui-auth-input {
    width: 100%;
    background: var(--zv-cloud);
    border: 1px solid var(--zv-line);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: var(--zv-navy);
    font-family: var(--zv-font-body);
    transition: all 0.15s ease;
    outline: none;
}
.ui-auth-input::placeholder { color: var(--zv-muted); }
.ui-auth-input:focus {
    background: var(--zv-surface);
    border-color: var(--zv-cyan);
    box-shadow: 0 0 0 3px rgba(32,199,233,0.18);
}

/* Auth submit: Orange — primary action */
.ui-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: var(--zv-orange);
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 2px rgba(255,107,0,0.25), 0 4px 12px rgba(255,107,0,0.2);
}
.ui-auth-submit:hover {
    background: var(--zv-orange-2);
    box-shadow: 0 2px 4px rgba(255,107,0,0.35), 0 8px 20px rgba(255,107,0,0.28);
    transform: translateY(-1px);
}

.ui-auth-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--zv-cyan-2);
    text-decoration: none;
    transition: color 0.15s ease;
}
.ui-auth-link:hover { color: var(--zv-cyan); text-decoration: underline; }

/* ============================================================
   Wordmark (text fallback — use PNG asset when possible)
   ============================================================ */
.ui-wordmark {
    font-family: var(--zv-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--zv-navy);
}
.ui-wordmark-light { color: #fff; }

/* ============================================================
   Page header section
   ============================================================ */
.zv-page-header {
    margin-bottom: 1.5rem;
}
.zv-page-title {
    font-family: var(--zv-font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--zv-navy);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.zv-page-subtitle {
    font-size: 0.9375rem;
    color: var(--zv-slate);
    margin-top: 0.25rem;
}

/* ============================================================
   Misc helpers
   ============================================================ */
.zv-mono {
    font-family: var(--zv-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

/* Page transitions */
@keyframes zv-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.zv-animate-in { animation: zv-fade-up 0.35s ease both; }

/* Amazon connect/settings modal overlays — fixed full-screen, centered.
   Visibility is toggled by Alpine via :style="...display:flex|none". */
.zv-modal-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 11, 26, 0.6);
}


/* ════════════════════════════════════════════════════════════════════
   Amazon API Explorer — ui-* classes (ported from amzallapi/input.css,
   @apply expanded to plain CSS with Zonverge tokens). Replaces output.css.
   ════════════════════════════════════════════════════════════════════ */

/* ── Detail pane ── */
.ui-detail-header {
    border-bottom: 1px solid var(--zv-line);
    padding: 18px 24px;
    display: flex; align-items: flex-start; gap: 32px; flex-shrink: 0;
    background: var(--zv-surface);
}
.ui-detail-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--zv-navy); font-family: var(--zv-font-display); }
.ui-path-pill {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
    border-radius: 8px; border: 1px solid var(--zv-line); background: var(--zv-mist);
    padding: 4px 10px; font-family: var(--zv-font-mono); font-size: 12px; color: var(--zv-slate);
}
.ui-tabrow {
    border-bottom: 1px solid var(--zv-line); padding: 0 24px;
    display: flex; gap: 4px; overflow-x: auto; background: var(--zv-surface);
}
.ui-detail-tab {
    position: relative; padding: 11px 14px; font-size: 13px; font-weight: 600;
    white-space: nowrap; color: var(--zv-slate); border-radius: 8px 8px 0 0;
    background: none; border: none; cursor: pointer; transition: all .15s;
}
.ui-detail-tab:hover { color: var(--zv-navy); background: rgba(238,243,248,.5); }
.ui-detail-tab-active { margin-bottom: -1px; border-bottom: 2px solid var(--zv-cyan); color: var(--zv-cyan-2); background: rgba(32,199,233,.05); }

/* ── Section title / chips ── */
.ui-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--zv-muted); }
.ui-chip-muted { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--zv-radius-pill); border: 1px solid var(--zv-line); background: var(--zv-mist); padding: 2px 6px; font-size: 10px; font-weight: 600; color: var(--zv-slate); }
.ui-chip-accent { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--zv-radius-pill); border: 1px solid rgba(6,182,212,.15); background: rgba(6,182,212,.10); padding: 2px 6px; font-size: 10px; font-weight: 600; color: var(--zv-cyan-2); }
.ui-chip-warning { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--zv-radius-pill); border: 1px solid rgba(245,158,11,.2); background: rgba(245,158,11,.1); padding: 2px 8px; font-size: 12px; font-weight: 600; color: var(--zv-warning); }
.ui-meta-chip { display: inline-flex; align-items: center; font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--zv-line); background: var(--zv-mist); color: var(--zv-slate); }
.ui-meta-chip-required { display: inline-flex; align-items: center; font-size: 10px; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(239,68,68,.25); background: rgba(239,68,68,.1); color: var(--zv-danger); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ui-meta-chip-type { display: inline-flex; align-items: center; font-size: 10px; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(6,182,212,.2); background: rgba(6,182,212,.1); color: var(--zv-cyan-2); font-family: var(--zv-font-mono); font-weight: 500; }

/* ── Method badges ── */
.ui-method-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; padding: 4px 8px; font-size: 10px; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-family: var(--zv-font-mono); }
.ui-method-badge-detail { padding: 2px 8px; font-size: 10px; }
.ui-method-get    { background: rgba(16,185,129,.12); color: var(--zv-emerald-2); }
.ui-method-post   { background: rgba(245,158,11,.12); color: var(--zv-warning); }
.ui-method-put    { background: rgba(6,182,212,.12);  color: var(--zv-cyan-2); }
.ui-method-delete { background: rgba(239,68,68,.12);  color: var(--zv-danger); }
.ui-method-patch  { background: rgba(139,92,246,.12); color: var(--zv-purple); }

/* ── List pane ── */
.ui-search-shell { display: flex; align-items: center; gap: 8px; border-radius: 12px; border: 1px solid var(--zv-line); background: var(--zv-surface); padding: 2px 12px; }
.ui-search-shell input { border: 0; background: transparent; outline: none; box-shadow: none; flex: 1; padding: 9px 0; font-size: 13px; color: var(--zv-navy); }
.ui-search-shell input::placeholder { color: var(--zv-muted); }
.ui-list-group-active { background: rgba(6,182,212,.12); box-shadow: inset 3px 0 0 var(--zv-cyan); }
.ui-list-group-text-active { color: var(--zv-cyan-2); }
.ui-list-item-active { background: rgba(6,182,212,.10); border-right: 2px solid var(--zv-cyan); }
.ui-empty-icon { color: var(--zv-line); }
.ui-favorite-active { color: var(--zv-warning); fill: var(--zv-warning); stroke: var(--zv-warning); }
.ui-favorite-idle { color: var(--zv-muted); }
.ui-cat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--zv-muted); }

/* ── Tabs (request/response/code) ── */
.ui-tab-trigger { font-size: 13px; font-weight: 600; color: var(--zv-slate); background: none; border: none; cursor: pointer; transition: color .15s; }
.ui-tab-trigger-active { border-bottom: 2px solid var(--zv-cyan); margin-bottom: -1px; background: var(--zv-surface); color: var(--zv-cyan-2); }
.ui-tab-trigger-warning { border-bottom: 2px solid var(--zv-warning); margin-bottom: -1px; background: var(--zv-surface); color: var(--zv-warning); }
.ui-toggle-shell { display: inline-flex; align-items: center; border-radius: 12px; background: var(--zv-mist); padding: 2px; font-size: 13px; }
.ui-toggle-chip { border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 500; color: var(--zv-slate); background: none; border: none; cursor: pointer; transition: all .15s; }
.ui-toggle-chip-active { background: var(--zv-surface); font-weight: 600; color: var(--zv-cyan-2); box-shadow: var(--zv-shadow-card); }

/* ── Notes ── */
.ui-note-input, .ui-note-input-compact, .ui-note-input-mono {
    width: 100%; border-radius: 12px; border: 1px solid var(--zv-line); background: var(--zv-surface);
    padding: 8px 14px; font-size: 13px; color: var(--zv-navy); outline: none; transition: all .15s;
}
.ui-note-input::placeholder, .ui-note-input-compact::placeholder, .ui-note-input-mono::placeholder { color: var(--zv-muted); }
.ui-note-input:focus, .ui-note-input-compact:focus, .ui-note-input-mono:focus { border-color: var(--zv-cyan); }
.ui-note-input-mono { font-family: var(--zv-font-mono); }
.ui-note-status-saving { font-size: 11px; color: var(--zv-muted); }
.ui-note-status-saved { font-size: 11px; color: var(--zv-emerald-2); font-weight: 500; }

/* ── Code / response panels ── */
.ui-code-block { border-radius: 12px; border: 1px solid var(--zv-line); background: var(--zv-ink); padding: 16px; font-family: var(--zv-font-mono); font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.9); overflow-x: auto; white-space: pre; }
.ui-response-panel { border-radius: 8px; overflow: hidden; border: 1px solid var(--zv-line); }
.ui-response-panel-success { border-color: rgba(16,185,129,.4); }
.ui-response-panel-warning { border-color: rgba(245,158,11,.4); }
.ui-response-panel-danger  { border-color: rgba(239,68,68,.4); }
.ui-response-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.ui-response-header-success { background: rgba(16,185,129,.1); }
.ui-response-header-warning { background: rgba(245,158,11,.1); }
.ui-response-header-danger  { background: rgba(239,68,68,.1); }
.ui-error-panel { border-radius: 8px; overflow: hidden; border: 1px solid var(--zv-danger); }
.ui-error-header { padding: 10px 16px; background: rgba(239,68,68,.1); }
.ui-status-text-success { color: var(--zv-emerald-2); }
.ui-status-text-warning { color: var(--zv-warning); }
.ui-status-text-danger  { color: var(--zv-danger); }

/* ── Status banners (topbar SP-API Connected etc.) ── */
.ui-status-banner { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; border: 1px solid; padding: 6px 12px; font-size: 13px; font-weight: 500; }
.ui-status-banner-success { border-color: rgba(16,185,129,.2); background: rgba(16,185,129,.1); color: var(--zv-emerald-2); }
.ui-status-banner-warning { border-color: rgba(245,158,11,.2); background: rgba(245,158,11,.1); color: var(--zv-warning); }
.ui-status-banner-danger  { border-color: rgba(239,68,68,.2);  background: rgba(239,68,68,.1);  color: var(--zv-danger); }
.ui-status-banner-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.ui-status-banner-text { font-weight: 600; }
.ui-status-dot-inactive { background: var(--zv-warning); }

/* ── Connect panel / misc ── */
.ui-connect-panel { border-radius: 12px; border: 1px solid; padding: 40px 24px; text-align: center; }
.ui-connect-panel-warning { border-color: rgba(245,158,11,.2); background: rgba(245,158,11,.1); }
.ui-icon-button { border-radius: 6px; padding: 4px; color: var(--zv-muted); background: none; border: none; cursor: pointer; transition: all .15s; }
.ui-icon-button:hover { background: var(--zv-mist); color: var(--zv-navy); }
.ui-inline-link { color: var(--zv-cyan-2); text-decoration: none; transition: all .15s; cursor: pointer; }
.ui-inline-link:hover { text-decoration: underline; }
.ui-card-soft { border-radius: 18px; border: 1px solid var(--zv-line); background: rgba(238,243,248,.7); }

/* ── Prose (markdown descriptions) ── */
.ui-prose { font-size: 13px; color: var(--zv-slate); line-height: 1.6; }
.ui-prose h1, .ui-prose h2, .ui-prose h3, .ui-prose h4 { color: var(--zv-navy); font-weight: 600; margin: 0.6em 0 0.3em; }
.ui-prose p { margin: 0.5em 0; }
.ui-prose strong { color: var(--zv-navy); }
.ui-prose code { font-family: var(--zv-font-mono); color: var(--zv-navy); background: var(--zv-mist); padding: 1px 5px; border-radius: 4px; }
.ui-prose pre { background: var(--zv-ink); color: #fff; padding: 12px; border-radius: 8px; overflow-x: auto; }
.ui-prose a { color: var(--zv-cyan-2); text-decoration: none; }
.ui-prose a:hover { text-decoration: underline; }
.ui-prose ul, .ui-prose ol { margin: 0.6em 0; padding-left: 1.4em; }
.ui-prose table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.ui-prose th, .ui-prose td { border: 1px solid var(--zv-line); padding: 6px 10px; text-align: left; }
.ui-prose th { background: var(--zv-mist); color: var(--zv-navy); }
.ui-prose td { color: var(--zv-slate); }

/* ── App shell surface (explorer content area) ── */
.ui-app { background: var(--zv-cloud); color: var(--zv-navy); }
/* Inside the explorer, darken slate/muted so body text isn't washed out
   (amzallapi used slate-700/600; ours were lighter). */
.ui-app {
    --zv-slate: #334155;
    --zv-muted: #475569;
    --zv-line:  #CBD5E1;
}
/* In the explorer, body/description text uses Tailwind text-muted/text-soft.
   Those map to the config's light grays; darken them here so descriptions are
   readable (not washed out), matching CIOS slate. */
.ui-app .text-muted { color: #475569 !important; }
.ui-app .text-soft  { color: #475569 !important; }
.ui-app .text-secondary { color: #334155 !important; }

/* ── Explorer: remaining chips, badges, Ads (DSP/SB) variants, markets ── */
.ui-pill { display: inline-flex; align-items: center; border-radius: var(--zv-radius-pill); border: 1px solid var(--zv-line); background: var(--zv-mist); padding: 2px 8px; font-size: 12px; font-weight: 500; color: var(--zv-slate); }
.ui-chip-success { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--zv-radius-pill); border: 1px solid rgba(16,185,129,.2); background: rgba(16,185,129,.1); padding: 2px 6px; font-size: 10px; font-weight: 600; color: var(--zv-emerald-2); }
.ui-chip-danger { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--zv-radius-pill); border: 1px solid rgba(239,68,68,.2); background: rgba(239,68,68,.1); padding: 2px 8px; font-size: 12px; font-weight: 600; color: var(--zv-danger); }
.ui-chip-info { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--zv-radius-pill); border: 1px solid rgba(6,182,212,.2); background: rgba(6,182,212,.1); padding: 2px 6px; font-size: 10px; font-weight: 600; color: var(--zv-cyan-2); }
/* Ads category chips (SB = Sponsored Brands, DSP, General) — small uppercase pills */
.ui-chip-dsp     { display: inline-flex; align-items: center; border-radius: var(--zv-radius-pill); background: rgba(245,158,11,.15); padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--zv-warning); }
.ui-chip-sb      { display: inline-flex; align-items: center; border-radius: var(--zv-radius-pill); background: rgba(6,182,212,.12);  padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--zv-cyan-2); }
.ui-chip-general { display: inline-flex; align-items: center; border-radius: var(--zv-radius-pill); background: rgba(16,185,129,.12); padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--zv-emerald-2); }
.ui-chip-ads     { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--zv-radius-pill); border: 1px solid rgba(139,92,246,.22); background: rgba(139,92,246,.1); padding: 2px 6px; font-size: 10px; font-weight: 600; color: var(--zv-purple); }
.ui-meta-chip-ads { display: inline-flex; align-items: center; font-size: 10px; font-family: var(--zv-font-mono); font-weight: 500; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(139,92,246,.22); background: rgba(139,92,246,.1); color: var(--zv-purple); }

/* Ads-specific status banner / tabs / buttons (purple) */
.ui-status-banner-ads     { border: 1px solid rgba(139,92,246,.18); background: rgba(139,92,246,.08); color: var(--zv-purple); }
.ui-status-banner-primary { border-color: rgba(6,182,212,.2); background: rgba(6,182,212,.1); color: var(--zv-cyan-2); }
.ui-status-active   { color: var(--zv-emerald-2); }
.ui-status-inactive { color: var(--zv-warning); }
.ui-status-dot-active { background: var(--zv-emerald); }
.ui-status-dot-ads  { background: var(--zv-purple); }
.ui-detail-tab-ads-active { margin-bottom: -1px; border-bottom: 2px solid var(--zv-purple); color: var(--zv-purple); background: rgba(139,92,246,.06); font-size: 13px; font-weight: 600; }
.ui-tab-trigger-ads-active { border-bottom: 2px solid var(--zv-purple); margin-bottom: -1px; background: var(--zv-surface); color: var(--zv-purple); }
.ui-btn-ads { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #fff; background: var(--zv-purple); border: none; cursor: pointer; }
.ui-btn-ads:hover { filter: brightness(1.05); }
.ui-link-ads { color: var(--zv-purple); transition: color .15s; }
.ui-link-ads:hover { text-decoration: underline; }

/* Markets / regions */
.ui-market-chip-active { border: 1px solid rgba(6,182,212,.25); background: rgba(6,182,212,.1); color: var(--zv-cyan-2); }
.ui-market-chip-idle { border: 1px solid var(--zv-line); background: var(--zv-surface); color: var(--zv-navy); }
.ui-market-chip-idle:hover { border-color: rgba(6,182,212,.2); background: var(--zv-mist); }
.ui-market-check-active { border: 1px solid var(--zv-cyan); background: var(--zv-cyan); color: #fff; }
.ui-market-check-idle { border: 1px solid var(--zv-line); background: var(--zv-surface); color: transparent; }
.ui-region-dot-eu { background: var(--zv-cyan); }
.ui-region-dot-na { background: var(--zv-emerald); }
.ui-region-dot-fe { background: var(--zv-warning); }
.ui-region-dot-other { background: var(--zv-line); }

/* Connect panel info + credential rows + meta card + misc */
.ui-connect-panel-info { border-color: rgba(6,182,212,.2); background: rgba(6,182,212,.1); }
.ui-credential-row { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; border: 1px solid; padding: 8px 12px; }
.ui-credential-row-active { border-color: rgba(16,185,129,.2); background: rgba(16,185,129,.1); }
.ui-credential-row-idle { border-color: var(--zv-line); background: var(--zv-mist); }
.ui-meta-card { border-radius: 12px; border: 1px solid var(--zv-line); background: var(--zv-surface); padding: 16px; box-shadow: var(--zv-shadow-card); transition: border-color .15s; }
.ui-meta-card:hover { border-color: rgba(6,182,212,.3); }
.ui-action-link-danger { color: var(--zv-slate); transition: color .15s; }
.ui-action-link-danger:hover { color: var(--zv-danger); }
.ui-action-link-warning { color: var(--zv-muted); transition: color .15s; }
.ui-action-link-warning:hover { color: var(--zv-warning); }
.ui-btn-danger-soft { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; border: 1px solid rgba(239,68,68,.2); background: rgba(239,68,68,.1); padding: 4px 10px; font-size: 11px; font-weight: 500; color: var(--zv-danger); cursor: pointer; }
.ui-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--zv-muted); }
.ui-modal-card { border-radius: 18px; background: var(--zv-surface); padding: 24px; box-shadow: var(--zv-shadow-card); border: 1px solid var(--zv-line); }

/* ── zv-ms: chained multi-select filter (templates/partials/zv_facets_bar.html,
      static/js/zv-facets.js). Same look as the performance page's zv-dd:
      label sits on the border, the button shows only the value. ── */
.zv-ms-bar { display:flex; flex-wrap:wrap; gap:.55rem .5rem; align-items:flex-end; }
.zv-ms-q { font-size:.75rem; padding:.42rem .65rem; border-radius:.5rem; border:1px solid var(--zv-line);
    background:#fff; color:var(--zv-navy); min-width:240px; outline:none; }
.zv-ms-q:focus { border-color:var(--zv-cyan-2); }
.zv-ms { position:relative; display:inline-block; margin-top:.45rem; }
.zv-ms-lbl { position:absolute; top:-.48rem; left:.55rem; z-index:1; padding:0 .3rem; background:#fff;
    font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--fc, var(--zv-muted)); pointer-events:none; white-space:nowrap; }
.zv-ms.act .zv-ms-lbl { color:var(--fc, var(--zv-cyan-2)); }
.zv-ms.act .zv-ms-btn { border-color:var(--fc, var(--zv-cyan-2)); }
.zv-ms-btn { display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:600;
    padding:.38rem .6rem; border-radius:.5rem; border:1px solid var(--zv-line); background:#fff;
    color:var(--zv-navy); cursor:pointer; white-space:nowrap; min-width:96px; max-width:240px; }
.zv-ms-btn .v { overflow:hidden; text-overflow:ellipsis; }
.zv-ms-btn:hover { border-color:var(--zv-cyan-2); }
.zv-ms.act .zv-ms-btn { border-color:var(--zv-cyan-2); background:rgba(32,199,233,0.05); }
.zv-ms-btn .cev { color:var(--zv-muted); font-size:.58rem; margin-left:auto; }
.zv-ms-panel { position:absolute; top:calc(100% + 6px); left:0; z-index:55; min-width:260px; max-width:380px;
    background:#fff; border:1px solid var(--zv-line); border-radius:12px;
    box-shadow:0 12px 32px rgba(11,21,48,0.16); padding:.4rem; max-height:360px; overflow:auto; }
.zv-ms-search { width:100%; font-size:.72rem; padding:.35rem .5rem; margin-bottom:.3rem;
    border:1px solid var(--zv-line); border-radius:8px; outline:none; }
.zv-ms-search:focus { border-color:var(--zv-cyan-2); }
.zv-ms-acts { display:flex; justify-content:space-between; font-size:.64rem; color:var(--zv-muted);
    padding:.1rem .35rem .3rem; }
.zv-ms-acts a { color:var(--zv-cyan-2); text-decoration:underline; }
.zv-ms-opt { display:flex; align-items:center; gap:.5rem; padding:.36rem .5rem; border-radius:8px; cursor:pointer; }
.zv-ms-opt:hover { background:var(--zv-mist); }
.zv-ms-opt.on { background:rgba(32,199,233,0.10); }
.zv-ms-opt.zero .l, .zv-ms-opt.zero .n { color:var(--zv-muted); }
.zv-ms-opt input { accent-color:var(--zv-cyan-2); margin:0; }
.zv-ms-opt .l { font-size:.74rem; font-weight:600; color:var(--zv-navy); flex:1; }
.zv-ms-opt .n { font-size:.66rem; color:var(--zv-muted); font-variant-numeric:tabular-nums; }
.zv-ms-empty { font-size:.7rem; color:var(--zv-muted); padding:.4rem .5rem; }
.zv-ms-clear { font-size:.73rem; color:var(--zv-muted); text-decoration:underline; align-self:center; }


/* ---- The collapsed sidebar's fly-out (zv-sidenav.js) ----
   Folded to icons, hovering an icon opens this panel beside it: the item's
   name and everything under it. It lives on <body>: the sidebar scrolls
   and would clip it. */
#zv-fly { position: fixed; z-index: 120; display: none; min-width: 230px; max-width: 320px; overflow-y: auto; background: var(--zv-navy);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; box-shadow: 0 18px 44px rgba(11,21,48,.35); padding: 8px; color: #fff; }
#zv-fly.on { display: block; }
#zv-fly .ttl { display: block; margin: 0 0 4px; padding: 6px 10px 8px; font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.1); }
#zv-fly a.ttl:hover { color: #2BE4C4; }
#zv-fly .ttl small { font-weight: 500; font-size: 11px; color: rgba(255,255,255,0.45); margin-left: 6px; }
#zv-fly .it { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: rgba(255,255,255,0.82);
    text-decoration: none; }
#zv-fly .it.d1 { padding-left: 24px; font-size: 12.5px; } #zv-fly .it.d2 { padding-left: 38px; font-size: 12px; }
#zv-fly .it img { width: 16px; height: 16px; object-fit: contain; flex: none; }
#zv-fly .it.head { color: rgba(255,255,255,0.5); font-weight: 600; }
#zv-fly a.it:hover, #zv-fly .pages a:hover { background: rgba(255,255,255,0.09); color: #fff; }
#zv-fly a.it.on, #zv-fly .pages a.on { background: rgba(43,228,196,0.16); color: #2BE4C4; }
#zv-fly .pages { margin: 2px 0 6px 18px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.14); display: grid; grid-template-columns: 1fr; }
#zv-fly .pages .grp { margin: 6px 0 2px; padding: 0 8px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,0.4); }
#zv-fly .pages a { display: block; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; color: rgba(255,255,255,0.8); text-decoration: none; }
#zv-fly .pages a.sub { padding-left: 20px; font-size: 12px; color: rgba(255,255,255,0.6); }

/* ── Administration › Team (templates/organizations/team*.html) ── */
.tm-head h1 { font-size: 1.5rem; font-weight: 700; color: var(--zv-navy); margin: 0; }
.tm-head p { margin: 4px 0 0; font-size: 13px; color: var(--zv-slate); max-width: 760px; }
.tm-person { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tm-back { font-size: 12px; color: var(--zv-slate); text-decoration: none; }
.tm-back:hover { color: var(--zv-navy); }
.tm-h2 { font-weight: 700; color: var(--zv-navy); margin: 0 0 10px; font-size: 15px; }
.tm-soft { color: #9AA3B2; }
.tm-bad { color: #B4410F; }
.tm-edit { color: #0D8A75; }
.tm-note { font-size: 12.5px; color: var(--zv-slate); margin: 8px 0; }
.tm-people td small, .tm-channels td small { display: block; font-size: 11.5px; color: #9AA3B2; font-weight: 400; }
.tm-row { cursor: pointer; }
.tm-row:hover td { background: #F4F7FB; }
.tm-org { display: inline-flex; align-items: baseline; gap: 5px; margin: 2px 8px 2px 0; font-size: 12.5px; color: var(--zv-navy); font-weight: 600; }
.tm-org i { font-style: normal; font-weight: 500; font-size: 11px; color: var(--zv-slate); background: var(--zv-mist, #EEF3F8); border-radius: 999px; padding: 0 7px; }
.tm-org.admin i { background: rgba(62,107,255,.10); color: #2c4fd6; }
.tm-invite { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tm-invite .ui-input { flex: 1 1 260px; max-width: 360px; }
.tm-invite .ui-select { width: 220px; }
.tm-invites { margin-top: 12px; }
.tm-log { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--zv-navy); }
.tm-log li { padding: 3px 0; border-bottom: 1px dashed var(--zv-line); }
.tm-org-card .tm-org-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--zv-line); }
.tm-org-card .tm-org-head h2 { font-size: 16px; font-weight: 700; color: var(--zv-navy); margin: 0; }
.tm-section { padding: 14px 20px; }
.tm-section + .tm-section { border-top: 1px solid var(--zv-line); }
.tm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tm-section-head h3 { font-size: 13px; font-weight: 700; color: var(--zv-navy); margin: 0; display: flex; align-items: center; gap: 6px; }
.tm-bulk { font-size: 12px; color: var(--zv-slate); display: inline-flex; gap: 4px; align-items: center; }
.tm-bulk button { font: inherit; font-size: 12px; padding: 2px 9px; border: 1px solid var(--zv-line); border-radius: 999px; background: #fff; color: var(--zv-navy); cursor: pointer; }
.tm-bulk button:hover { border-color: #3E6BFF; color: #3E6BFF; }
/* a segmented choice made of radio buttons: the project's light 'on' style */
.tm-seg { display: inline-flex; border: 1px solid var(--zv-line); border-radius: 8px; overflow: hidden; background: #fff; }
.tm-seg label { margin: 0; cursor: pointer; }
.tm-seg label + label { border-left: 1px solid var(--zv-line); }
.tm-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tm-seg span { display: block; padding: 5px 12px; font-size: 12.5px; font-weight: 500; color: var(--zv-navy); }
.tm-seg label:hover span { background: #F1F5F9; }
.tm-seg input:checked + span { background: var(--zv-on-bg, rgba(62,107,255,.10)); color: var(--zv-on, #2c4fd6); font-weight: 600; }
.tm-seg input:focus-visible + span { outline: 2px solid #3E6BFF; outline-offset: -2px; }
.tm-level .lv-view input:checked + span { background: rgba(62,107,255,.10); color: #2c4fd6; }
.tm-level .lv-prepare input:checked + span { background: rgba(245,165,36,.16); color: #a86b00; }
.tm-level .lv-edit input:checked + span { background: rgba(19,184,156,.14); color: #0D8A75; }
.tm-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 20px; }
.tm-tool { border: 0; margin: 0; padding: 0; }
.tm-tool legend { font-size: 12.5px; font-weight: 700; color: var(--zv-navy); margin-bottom: 4px; }
.tm-page-tool { display: block; font-size: 12.5px; color: var(--zv-navy); padding: 2px 0 2px 18px; }
.tm-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.tm-add { font-size: 13px; color: var(--zv-slate); display: inline-flex; gap: 8px; align-items: center; }
.tm-add .ui-select { width: 220px; }
/* the band while a superuser views the app as someone else */
.zv-viewas { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 16px; background: #FFF4DE; border-bottom: 1px solid #F5C878; font-size: 13px; color: #6B4A00; }
.zv-viewas b { color: #4A3300; }
.zv-viewas button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 3px 12px; border-radius: 999px; border: 1px solid #E0A33A; background: #fff; color: #6B4A00; cursor: pointer; }
.tm-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--zv-mist, #EEF3F8); color: var(--zv-navy); }
.tm-chip.lv-edit { background: rgba(19,184,156,.14); color: #0D8A75; }
.tm-chip.lv-view { background: rgba(62,107,255,.10); color: #2c4fd6; }
.tm-pick .zv-dd { margin-top: 6px; }
.tm-pick .zv-dd-btn { min-width: 220px; height: 40px; }

/* Team › the access table: a row per person, a column per channel, a zvPick per cell (team-access.js) */
.tm-grid-card { overflow: visible; }
.tm-grid-card .tm-org-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--zv-line); }
.tm-grid-card .tm-org-head h2 { font-size: 16px; font-weight: 700; color: var(--zv-navy); margin: 0; }
.tm-saved { font-size: 13px; font-weight: 500; color: #0D8A75; }
.tm-saved.bad { color: #B4410F; }
.tm-grid { padding: 16px 24px; }
.tm-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; border: 1px solid var(--zv-line); border-radius: 10px; }
.tm-matrix thead th { background: var(--zv-mist, #EEF3F8); padding: 8px 12px; text-align: left; font-size: 12px; font-weight: 600; color: var(--zv-navy); border-bottom: 1px solid var(--zv-line); white-space: nowrap; vertical-align: bottom; }
.tm-matrix thead tr:first-child th:first-child { border-top-left-radius: 10px; }
.tm-matrix thead tr:first-child th:last-child { border-top-right-radius: 10px; }
.tm-matrix thead th.tm-group { text-align: left; border-left: 1px solid var(--zv-line); border-right: 1px solid var(--zv-line); }
.tm-matrix thead th.tm-ch { border-left: 1px solid var(--zv-line); }
.tm-matrix thead th.tm-ch:last-child { border-right: 1px solid var(--zv-line); }
.tm-matrix thead th b { display: block; font-weight: 700; }
.tm-matrix thead th small { display: block; font-size: 12px; font-weight: 500; color: var(--zv-slate); }
.tm-matrix td { padding: 8px 12px; border-bottom: 1px solid var(--zv-line); vertical-align: middle; white-space: nowrap; }
.tm-matrix tbody tr:last-child td { border-bottom: 0; }
.tm-matrix .tm-who a { color: var(--zv-navy); text-decoration: none; }
.tm-matrix .tm-who a:hover b { color: #3E6BFF; }
.tm-matrix .tm-who small { display: block; font-size: 12px; color: var(--zv-slate); }
.tm-matrix .zv-dd-lbl:empty { display: none; }
.tm-matrix .zv-dd-btn { min-width: 116px; height: 34px; font-size: 13px; }
.tm-lv .zv-dd-btn .v { color: var(--dd-c); }
.tm-lv[data-level=''] .zv-dd-btn .v { font-weight: 500; }
.tm-tools-link { color: var(--zv-navy); text-decoration: none; font-weight: 600; }
.tm-tools-link span { font-weight: 500; color: #3E6BFF; margin-left: 6px; }
.tm-chip.lv-prepare { background: rgba(245,165,36,.16); color: #a86b00; }
.tm-matrix-like .zv-dd-lbl:empty { display: none; }
.tm-matrix-like .zv-dd-btn { min-width: 116px; height: 34px; font-size: 13px; }

/* Team › organizations as accordions; a person's tools open under their row */
.tm-orgbox { display: block; overflow: visible; }
.tm-orgbox > summary { list-style: none; }
.tm-orgbox > summary::-webkit-details-marker { display: none; }
.tm-org-sum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 24px; cursor: pointer; user-select: none; }
.tm-orgbox[open] .tm-org-sum { border-bottom: 1px solid var(--zv-line); }
.tm-org-sum h2 { font-size: 16px; font-weight: 700; color: var(--zv-navy); margin: 0; }
.tm-org-sum .tm-sum { font-size: 13px; color: var(--zv-slate); }
.tm-org-sum .tm-sum-inv { font-weight: 600; color: #a86b00; }
.tm-org-sum .tm-saved { margin-left: auto; }
.tm-caret { display: inline-block; width: 8px; height: 8px; border-right: 2px solid #64748B; border-bottom: 2px solid #64748B; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.tm-orgbox[open] > summary .tm-caret, .tm-tools-btn[aria-expanded='true'] .tm-caret { transform: rotate(45deg); }
.tm-addrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tm-addrow .bp-input { width: 280px; height: 34px; box-sizing: border-box; }
.tm-add-btn { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid #3E6BFF; background: #fff; color: #3E6BFF; font-size: 13px; font-weight: 600; cursor: pointer; }
.tm-add-btn:hover { background: rgba(62,107,255,.08); }
.tm-tools-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; color: var(--zv-navy); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.tm-tools-btn .tm-caret { width: 6px; height: 6px; margin-left: 2px; }
.tm-tools-btn:hover { color: #3E6BFF; }
.tm-matrix tr.tm-prow.open td { border-bottom-color: transparent; background: #F8FAFC; }
.tm-tools-row td { background: #F8FAFC; padding: 4px 24px 14px; white-space: normal; }
.tm-tools-row .tm-note { margin: 10px 0 0; }
.tm-matrix tr.tm-inv td { background: #FFFCF5; }
.tm-link { font: inherit; font-size: 13px; font-weight: 600; color: #3E6BFF; background: none; border: 0; padding: 0; cursor: pointer; }
.tm-link.soft { color: var(--zv-slate); font-weight: 500; }
.tm-link:hover { text-decoration: underline; }
.tm-tool legend label, .tm-page-tool { display: flex; align-items: center; gap: 7px; }
.tm-tool legend label input, .tm-page-tool input { margin: 0; }

/* Team › People: the table and the person's drawer (_team_person.html) */
.tm-wrap { overflow: visible; }
.tm-wrap #bp-table-scroll { overflow: visible; max-height: none; min-height: 0; }
.tm-people-table td { white-space: nowrap; }
.tm-people-table td.tm-who small { display: block; font-size: 12px; color: var(--zv-slate); }
.tm-people-table tr.tm-inv td { background: #FFFCF5; }
.tm-org.admin i { background: rgba(62,107,255,.10); color: #2c4fd6; }
.tm-org.invited i { background: rgba(245,165,36,.16); color: #a86b00; }
.tm-inv-acts { display: inline-flex; align-items: center; gap: 14px; }
.tm-inv-acts form { margin: 0; }
.tm-person-panel { font-size: 13px; color: var(--zv-navy); }
.tm-pp-sub { margin: 0 0 14px; color: var(--zv-slate); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.tm-pp-sub .tm-saved { margin-left: auto; }
.tm-pp-org { border: 1px solid var(--zv-line); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }
.tm-pp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tm-pp-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.tm-pp-channels { width: 100%; border-collapse: collapse; }
.tm-pp-channels td { padding: 6px 0; border-top: 1px solid var(--zv-line); vertical-align: middle; }
.tm-pp-channels td small { display: block; font-size: 12px; color: var(--zv-slate); }
.tm-pp-channels td.r { text-align: right; }
.tm-pp-channels .zv-dd-lbl:empty, .tm-pp-head .zv-dd-lbl:empty { display: none; }
.tm-pp-channels .zv-dd-btn, .tm-pp-head .zv-dd-btn { min-width: 116px; height: 34px; font-size: 13px; }
.tm-pp-channels .zv-dd-panel, .tm-pp-head .zv-dd-panel { right: 0; }
.tm-pp-tools, .tm-pp-log { margin-top: 8px; }
.tm-pp-tools > summary, .tm-pp-log > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 4px 0; }
.tm-pp-tools > summary::-webkit-details-marker, .tm-pp-log > summary::-webkit-details-marker { display: none; }
.tm-pp-tools[open] > summary .tm-caret, .tm-pp-log[open] > summary .tm-caret { transform: rotate(45deg); }
.tm-pp-tools .tm-caret, .tm-pp-log .tm-caret { width: 6px; height: 6px; }
.tm-pp-tools .tm-tools { margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.tm-pp-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.tm-pp-add .zv-dd-btn { min-width: 200px; height: 34px; }
.tm-pp-add .tm-note { margin: 0; }
.tm-pp-viewas { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.tm-invite-form { display: grid; gap: 14px; max-width: 460px; }
.tm-field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--zv-navy); }
.tm-field .bp-input { height: 38px; box-sizing: border-box; }
.tm-field .zv-dd-lbl:empty { display: none; }
.tm-field .zv-dd-btn { min-width: 260px; height: 38px; }
.tm-person-page .tm-pp-org { max-width: 760px; }
.tm-leave { margin-top: 10px; font-size: 12.5px; }
.tm-link.bad { color: #B4410F; font-weight: 600; }