/* =================================================================
   WF Portal — Palette Panel (reusable tabbed palette)
   ================================================================= */

/* ── Tabs ─────────────────────────────────────────────────────────── */

.wf-palette-tabs {
    display: flex;
    border-bottom: 1px solid var(--theme-border);
}

.wf-palette-tab {
    flex: 1;
    padding: 0.5rem 0.25rem;
    font-size: var(--theme-font-size-xs);
    font-weight: 500;
    color: var(--theme-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: color 150ms ease, border-color 150ms ease;
    white-space: nowrap;
}
.wf-palette-tab:hover {
    color: var(--theme-text);
}
.wf-palette-tab.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    font-weight: 600;
}

.wf-palette-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    margin-left: 0.25rem;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: 999px;
    background-color: var(--theme-background-hover);
    color: var(--theme-text-muted);
}
.wf-palette-tab.active .wf-palette-tab-badge {
    background-color: var(--theme-primary-muted);
    color: var(--theme-primary);
}

/* ── Search ───────────────────────────────────────────────────────── */

.wf-palette-search {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--theme-border);
}
.wf-palette-search input {
    font-size: var(--theme-font-size-xs);
    padding: 0.3rem 0.5rem;
}

/* ── Items ────────────────────────────────────────────────────────── */

.wf-palette-items {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.wf-palette-entity-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text);
    cursor: grab;
    user-select: none;
    border-radius: var(--theme-radius-button);
    transition: background-color 120ms ease;
}
.wf-palette-entity-item:hover {
    background-color: var(--theme-background-hover);
}

/* Active = the entity that's currently selected as the page's scope.
   Makes "you are here" visible at a glance when the user switches
   left-rail tabs (e.g. over to Views, then back to Entities) — the
   selection persists, so the anchor should too. */
.wf-palette-entity-item.active {
    background-color: var(--theme-primary-muted);
    color: var(--theme-primary);
    font-weight: 600;
    border-left: 3px solid var(--theme-primary);
    padding-left: calc(0.75rem - 3px);
}

.wf-palette-prop-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text);
    cursor: grab;
    user-select: none;
    border-radius: var(--theme-radius-button);
    transition: background-color 120ms ease;
}
.wf-palette-prop-item:hover {
    background-color: var(--theme-background-hover);
}

/* ── Data-type badge (small pill) ─────────────────────────────────── */

.wf-dtype-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.6rem;
    font-weight: 500;
    border-radius: 999px;
    background-color: var(--theme-background-hover);
    color: var(--theme-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Named-keys view toggle (Data Studio toolbar) ──────────────────── */
/* The "Named" button shows DataJson with InternalName keys — useful for
   integrators + Copilot + anyone debugging what the API emits. Bumped
   one step more prominent than the other toolbar toggles so discovery
   is easy; still restrained enough to fit the deluxe bar. */
.ds-named-btn {
    font-size: 0.85rem;
    transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.ds-named-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(var(--theme-info-rgb, 37, 99, 235), 0.25);
}

/* ── Per-row validation badge (Library list items) ─────────────────── */
/* Matches the leading status-icon sizing (0.7rem) so the row keeps a
   consistent rhythm. Small breathing space from the owner pill keeps
   the icon legible without visually crowding. Cursor:help signals the
   tooltip — the row's own onclick handles "open editor to fix." */
.ds-validation-badge {
    font-size: 0.7rem;
    flex-shrink: 0;
    cursor: help;
    margin-right: 0.15rem;
    opacity: 0.9;
}

.ds-validation-badge:hover {
    opacity: 1;
}

/* ── Text validation badges (Library forms list, shortcuts, etc.) ──── */
/* .badge-validation-{valid|warning|error} — theme-aware so the pill
   reads on both light and dark chromes. Muted-tint background + solid
   hue text keeps contrast well above WCAG AA on every theme variant
   without needing a --text-on-* companion token per state. Replaces
   the white-on-white empty-class that shipped before this block. */
.badge.badge-validation-valid {
    background-color: var(--theme-success-muted);
    color: var(--theme-success);
    border: 1px solid var(--theme-success-muted);
}

.badge.badge-validation-warning {
    background-color: var(--theme-warning-muted);
    color: var(--theme-warning);
    border: 1px solid var(--theme-warning-muted);
}

.badge.badge-validation-error {
    background-color: var(--theme-danger-muted);
    color: var(--theme-danger);
    border: 1px solid var(--theme-danger-muted);
}

/* ── Data-type icon ───────────────────────────────────────────────── */

.wf-dtype-icon {
    font-size: 0.7rem;
    color: var(--theme-text-muted);
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

/* ── Palette footer / inline creation ─────────────────────────────── */

.wf-palette-footer {
    border-top: 1px solid var(--theme-border);
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wf-palette-footer .btn {
    font-size: var(--theme-font-size-xs);
}

/* ── Empty state ──────────────────────────────────────────────────── */

.wf-palette-empty {
    padding: 1.5rem 0.75rem;
    text-align: center;
    font-size: var(--theme-font-size-xs);
    color: var(--theme-text-muted);
}

/* ── Split layout (Views tab: Views + Reports stacked) ─────────────── */

/* When the items container holds a split, the container itself must not scroll —
   each half has its own scroll body instead. */
.wf-palette-items:has(.wf-palette-split) {
    overflow: hidden;
    padding: 0;
}

.wf-palette-split {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.wf-palette-split-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    border-bottom: 1px solid var(--theme-border);
}

.wf-palette-split-section:last-child {
    border-bottom: none;
}

.wf-palette-split-header {
    padding: 0.35rem 0.75rem;
    font-size: var(--theme-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-muted);
    background: var(--theme-background-subtle);
    border-top: 1px solid var(--theme-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.wf-palette-split-section:first-child .wf-palette-split-header {
    border-top: none;
}

.wf-palette-split-body {
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;
    padding: 0.25rem 0;
}