/* ============================================================
   APPGERMED - NAVEGAÇÃO POR ABAS
   Identidade Visual 2026
   ------------------------------------------------------------
   Componente visual reutilizável para MudTabs.

   Uso no Razor:
       Class="w-100 ag-tabs-navigation"

   Objetivos:
   - manter a navegação vertical limpa e uniforme;
   - alinhar ícone e texto à esquerda;
   - destacar a aba ativa com fundo suave e barra lateral azul;
   - isolar o padrão de abas dos estilos específicos dos módulos;
   - permitir adoção gradual nos demais módulos do AppGermed.
   ============================================================ */

:root {
    --ag-tabs-primary: #5B4BDF;
    --ag-tabs-primary-dark: #3b38c8;
    --ag-tabs-primary-soft: #eef4ff;
    --ag-tabs-primary-hover: #f5f7ff;
    --ag-tabs-text: #374151;
    --ag-tabs-muted: #6b7280;
    --ag-tabs-border: #d8dde5;
    --ag-tabs-panel-bg: #ffffff;
    --ag-tabs-nav-bg: #fbfcfe;
    --ag-tabs-radius: 10px;
}

/* ============================================================
   01) ESTRUTURA PRINCIPAL
   ============================================================ */

.ag-tabs-navigation {
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid var(--ag-tabs-border) !important;
    border-radius: var(--ag-tabs-radius) !important;
    background: var(--ag-tabs-panel-bg) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(17, 24, 39, .06) !important;
}

    .ag-tabs-navigation > .mud-tabs-tabbar {
        width: 210px !important;
        min-width: 210px !important;
        flex: 0 0 210px !important;
        padding: 10px 8px !important;
        background: var(--ag-tabs-nav-bg) !important;
        border-right: 1px solid var(--ag-tabs-border) !important;
    }

    .ag-tabs-navigation .mud-tabs-panels {
        min-width: 0 !important;
        width: calc(100% - 210px) !important;
        max-width: calc(100% - 210px) !important;
        flex: 1 1 calc(100% - 210px) !important;
        background: var(--ag-tabs-panel-bg) !important;
    }

    .ag-tabs-navigation .mud-tab-panel {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* ============================================================
   02) ITENS DA NAVEGAÇÃO
   ============================================================ */

    .ag-tabs-navigation .mud-tab {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        min-height: 48px !important;
        margin: 2px 0 !important;
        padding: 0 12px 0 16px !important;
        border-radius: 7px !important;
        justify-content: flex-start !important;
        text-align: left !important;
        color: var(--ag-tabs-text) !important;
        font-weight: 650 !important;
        transition: background-color .16s ease-in-out, color .16s ease-in-out, box-shadow .16s ease-in-out !important;
    }

        .ag-tabs-navigation .mud-tab .mud-tab-wrapper,
        .ag-tabs-navigation .mud-tab .mud-tab-content {
            width: 100% !important;
            min-width: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            text-align: left !important;
        }

        .ag-tabs-navigation .mud-tab .mud-icon-root,
        .ag-tabs-navigation .mud-tab svg {
            flex: 0 0 auto !important;
            margin-left: 0 !important;
            margin-right: 12px !important;
            color: var(--ag-tabs-muted) !important;
            transition: color .16s ease-in-out !important;
        }

        .ag-tabs-navigation .mud-tab .mud-tab-label {
            min-width: 0 !important;
            text-align: left !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        /* ============================================================
   03) HOVER / ABA ATIVA
   ============================================================ */

        .ag-tabs-navigation .mud-tab:hover {
            background: var(--ag-tabs-primary-hover) !important;
            color: var(--ag-tabs-primary-dark) !important;
        }

            .ag-tabs-navigation .mud-tab:hover .mud-icon-root,
            .ag-tabs-navigation .mud-tab:hover svg {
                color: var(--ag-tabs-primary) !important;
            }

        .ag-tabs-navigation .mud-tab.mud-tab-active {
            background: var(--ag-tabs-primary-soft) !important;
            color: var(--ag-tabs-primary-dark) !important;
            font-weight: 800 !important;
            box-shadow: inset 4px 0 0 var(--ag-tabs-primary) !important;
        }

            .ag-tabs-navigation .mud-tab.mud-tab-active .mud-icon-root,
            .ag-tabs-navigation .mud-tab.mud-tab-active svg {
                color: var(--ag-tabs-primary) !important;
            }

    /* O destaque visual da aba ativa é feito pela barra lateral. */
    .ag-tabs-navigation .mud-tabs-slider {
        display: none !important;
    }

    /* ============================================================
   04) CONTEÚDO DAS ABAS
   ============================================================ */

    .ag-tabs-navigation .mud-tabs-panels,
    .ag-tabs-navigation .mud-tab-panel {
        background: #ffffff !important;
    }

    /* Preserva componentes internos com largura total. */
    .ag-tabs-navigation .ag-observacoes-tab,
    .ag-tabs-navigation .ag-observacoes-grid {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

        .ag-tabs-navigation .ag-observacoes-grid > .mud-grid-item,
        .ag-tabs-navigation .ag-observacoes-grid .mud-input-control,
        .ag-tabs-navigation .ag-observacoes-grid .mud-input-root {
            width: 100% !important;
            max-width: none !important;
        }

/* ============================================================
   05) RESPONSIVIDADE
   ============================================================ */

@media (max-width: 1200px) {
    .ag-tabs-navigation > .mud-tabs-tabbar {
        width: 190px !important;
        min-width: 190px !important;
        flex-basis: 190px !important;
    }

    .ag-tabs-navigation .mud-tabs-panels {
        width: calc(100% - 190px) !important;
        max-width: calc(100% - 190px) !important;
        flex-basis: calc(100% - 190px) !important;
    }
}

@media (max-width: 960px) {
    .ag-tabs-navigation > .mud-tabs-tabbar {
        width: 172px !important;
        min-width: 172px !important;
        flex-basis: 172px !important;
    }

    .ag-tabs-navigation .mud-tabs-panels {
        width: calc(100% - 172px) !important;
        max-width: calc(100% - 172px) !important;
        flex-basis: calc(100% - 172px) !important;
    }

    .ag-tabs-navigation .mud-tab {
        padding-left: 12px !important;
        padding-right: 8px !important;
    }

        .ag-tabs-navigation .mud-tab .mud-icon-root,
        .ag-tabs-navigation .mud-tab svg {
            margin-right: 9px !important;
        }
}

@media (max-width: 700px) {
    .ag-tabs-navigation {
        overflow: visible !important;
    }

        .ag-tabs-navigation > .mud-tabs-tabbar {
            width: 150px !important;
            min-width: 150px !important;
            flex-basis: 150px !important;
        }

        .ag-tabs-navigation .mud-tabs-panels {
            width: calc(100% - 150px) !important;
            max-width: calc(100% - 150px) !important;
            flex-basis: calc(100% - 150px) !important;
        }

        .ag-tabs-navigation .mud-tab {
            min-height: 46px !important;
            padding-left: 10px !important;
            font-size: .82rem !important;
        }
}