/* ============================================================================
 * mad-tab-bar.css — Browser-like internal tabs for theme-notch
 * ----------------------------------------------------------------------------
 * Usa tokens MAD UI (--mad-bg, --mad-border, --mad-text, --mad-primary, ...)
 * Carregado pelo theme-notch quando use_tabs=1.
 * ============================================================================ */

/* Container raiz */
.mad-tab-bar {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    --mad-tab-bar-strip-h: 38px;
    --mad-tab-bar-pane-bg: var(--mad-bg, #ffffff);
}

/* ----------------------------------------------------------------------------
 * Strip horizontal
 * ---------------------------------------------------------------------------- */
.mad-tab-strip {
    display: flex;
    align-items: stretch;
    background: var(--mad-bg-subtle, #fafafa);
    border-bottom: 1px solid var(--mad-border, #e5e7eb);
    height: var(--mad-tab-bar-strip-h);
    position: sticky;
    top: -11px;
    /* z-index baixo: dropdowns Bootstrap usam 1000+, modais/drawer MAD usam
       acima de 1000. Strip nao pode sobrepor esses overlays. */
    z-index: 1;
    user-select: none;
}

.mad-tab-strip-inner {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge antigo */
    scroll-behavior: smooth;
}
.mad-tab-strip-inner::-webkit-scrollbar { display: none; }

/* ----------------------------------------------------------------------------
 * Botoes de scroll (prev/next)
 * ---------------------------------------------------------------------------- */
.mad-tab-scroll-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--mad-border, #e5e7eb);
    color: var(--mad-text-muted, #52525b);
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease, color .15s ease;
}
.mad-tab-scroll-btn:hover {
    background: var(--mad-bg-muted, #f4f4f5);
    color: var(--mad-text, #18181b);
}
.mad-tab-scroll-btn.mad-tab-scroll-right {
    border-right: 0;
    border-left: 1px solid var(--mad-border, #e5e7eb);
}
.mad-tab-scroll-btn svg,
.mad-tab-scroll-btn i {
    width: 16px;
    height: 16px;
}

/* ----------------------------------------------------------------------------
 * Cada tab
 * ---------------------------------------------------------------------------- */
.mad-tab-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 14px;
    height: 100%;
    max-width: 240px;
    min-width: 110px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--mad-border, #e5e7eb);
    color: var(--mad-text-muted, #52525b);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: background-color .12s ease, color .12s ease;
    white-space: nowrap;
}

.mad-tab-item:hover {
    background: var(--mad-bg-muted, #f4f4f5);
    color: var(--mad-text, #18181b);
}

.mad-tab-item-active {
    background: var(--mad-bg, #ffffff);
    color: var(--mad-text, #18181b);
    box-shadow: inset 0 -2px 0 0 var(--mad-accent, #18181b);
}
.mad-tab-item-active:hover {
    background: var(--mad-bg, #ffffff);
}

.mad-tab-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Botao close — vira X visivel no hover da tab ou quando ativa */
.mad-tab-item-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: var(--mad-text-subtle, #a1a1aa);
    transition: background-color .12s ease, color .12s ease, opacity .12s ease;
    flex: 0 0 auto;
    opacity: 0.55;
}
.mad-tab-item:hover .mad-tab-item-close,
.mad-tab-item-active .mad-tab-item-close {
    opacity: 1;
}
.mad-tab-item-close:hover {
    background: var(--mad-bg-muted, #f4f4f5);
    color: var(--mad-danger, #dc2626);
}
.mad-tab-item-active .mad-tab-item-close:hover {
    background: color-mix(in srgb, var(--mad-danger, #dc2626) 10%, transparent);
    color: var(--mad-danger, #dc2626);
}
.mad-tab-item-close svg,
.mad-tab-item-close i {
    width: 12px;
    height: 12px;
    pointer-events: none;
}

/* ----------------------------------------------------------------------------
 * Panes container e panes individuais
 * ---------------------------------------------------------------------------- */
.mad-tab-panes {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--mad-tab-bar-pane-bg);
}

.mad-tab-pane {
    /* Default: visivel. Inativos recebem display:none via JS */
    width: 100%;
    min-height: 100%;
}

/* ----------------------------------------------------------------------------
 * No-op quando enabled=0 — strip oculta, painel transparente
 * ---------------------------------------------------------------------------- */
.mad-tab-bar[data-enabled="0"] .mad-tab-strip {
    display: none !important;
}

/* x-cloak: esconde durante init do Alpine */
[x-cloak] {
    display: none !important;
}

/* ----------------------------------------------------------------------------
 * Tema escuro (se houver attr/.dark no html ou class root)
 * ---------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    .mad-tab-bar:not([data-theme="light"]) {
        --mad-tab-bar-pane-bg: var(--mad-bg, #0a0a0a);
    }
}